前端一面基礎知識 ⑥——效能優化、Web安全、Linux常用命令_EvenyYlzz

前言

根據慕課網的《快速搞定前端技術一面匹配大廠面試要求》課程所整理的題目，陸續更新。如果你覺得本文相關知識點你已經掌握，你可以檢視我之前的相關文章哦

常考面試題

1.效能優化

1.1 原則

①多使用記憶體、快取、或其他方法
②減少CPU計算量，減少網路載入耗時
③適應於所有程式設計的效能優化——空間換時間

1.2 讓載入更快

①減少資源體積：壓縮程式碼
②減少訪問次數：合併程式碼、SSR伺服器端渲染，快取
③使用更快的網路：CDN

1.3 讓渲染更快

①CSS放在head，JS放在body最下面
②儘早開始執行JS，用DOMContentLoaded觸發
③懶載入（圖片懶載入、下滑載入更多、分頁器）
④對DOM查詢進行快取
⑤頻繁的DOM操作，合併到一起插入到DOM結構
⑥節流、防抖等常用效能優化方法

1.4 快取

①靜態資源加hash字尾，根據檔案內容計算hash
②檔案內容不變，則hash不變，則url不變
③url和檔案不變，則會自動觸發Http快取機制，返回304

1.5 SSR

①伺服器端渲染：將網頁和資料一起載入，一起渲染
②非SSR（前後端分離）：先載入網頁，再載入資料，再渲染資料

1.6 懶載入

頁面內容資料過多，可以做分頁器，這樣即可以節省某個頁面載入時間
滑動懶載入，當滑到底部沒資料的時候再載入新的內容
點選懶載入，點選按鈕，類似載入更多觸發載入新的內容

1.7 防抖及其封裝

「防抖」

防抖，顧名思義，防止抖動，以免把一次事件誤以為多次事件，敲鍵盤就是一個每天都會接觸到的防抖操作
「【防抖重在清零】」 （看完防抖節流再體會一下這個重點）

「應用場景」（幫助你更好理解防抖）

①登入、發簡訊等按鈕避免使用者點選太快，以至於傳送了多次請求，需要防抖
②調整瀏覽器視窗大小時，resize次數過於頻繁，造成計算過多，此時需要一次到位
③文字編輯器實時儲存，當無任何更改操作1秒後進行儲存
④使用者輸入結束或暫停時，才會觸發change事件，類似搜尋框中輸入資訊停下來1秒後才會出現可能要搜尋的內容

「手寫防抖封裝」

function debounce ( fn , delay = 500 ) {
 
    let timer = null // timer在閉包中，不對外暴露，以免不小心獲取進行修改造成錯誤

    return function () {
        if( timer ){
            clearTimeout( timer )
        } // 清空定時器

        timer = setTimeout( () => {

            fn.apply( this , arguments )

            timer = null

        } , delay )
    }

}
複製程式碼

1.8 節流及其封裝

「節流」

顧名思義，控制水的流量。控制事件發生的頻率，如控制為1秒發生一次，甚至1分鐘發生一次。與服務端及閘道器控制的限流類似
「【節流重在加鎖】」

「應用場景」（幫助你更好理解防抖）

①scroll事件，控制每隔一秒計算一次位置資訊
②瀏覽器播放事件，控制每隔一秒計算一次進度資訊
③拖拽一個元素時，要隨時拿到該元素的被拖拽的位置，直接用drag事件，會頻繁觸發，很容易導致卡頓。此時採用節流，無論拖拽速度多快，都控制在每隔100ms觸發一次

「手寫節流封裝」

function throttle ( fn , delay = 100 ) {

    let timer = null

    return function (){

        if( timer ){
            return
        }

        timer = setTimeout( () => {

            fn.apply( this , arguments ) // 這裡不能用fn（），會報錯，無法獲得事件源物件event

            timer = null

        } , delay ) // delay設定的時間內重複執行的定時任務會被清空
    }
}
複製程式碼

1.9 為什麼防抖的是clearTimeout(timer)，而節流的是return？

防抖是觸發間隔大於time觸發，所以每次在小於間隔time要清除上個定時器，而節流是不管time內觸發多少次，只會每隔time時間觸發一次，所以用return
假設time=100ms，一個人每50ms輸入一個字元，連續10次，即500ms後防抖只會觸發一次，而節流會觸發5次。為什麼呢？因為防抖的意思即輸入完停止100ms後觸發事件，而節流是控制100ms觸發一次事件，所以防抖觸發一次，節流會觸發五次。（結合「體會防抖重在清零，節流重在加鎖」這兩句話）

2.Web安全

2.1 XSS攻擊

「XSS跨站請求攻擊」
以下都是可能發生的XSS注入攻擊

在 HTML 中內嵌的文字中，惡意內容以 script 標籤形成注入
在內聯的 JavaScript中，拼接的資料突破了原本的限制（字串，變數，方法名等）
在標籤屬性中，惡意內容包含引號，從而突破屬性值的限制，注入其他屬性或者標籤
在標籤的 href、src 等屬性中，包含 javascript: 等可執行程式碼
在 onload、onerror、onclick 等事件中，注入不受控制程式碼
在 style 屬性和標籤中，包含類似 background-image:url("javascript:..."); 的程式碼（新版本瀏覽器已經可以防範）
在 style 屬性和標籤中，包含類似 expression(...) 的 CSS 表示式程式碼（新版本瀏覽器已經可以防範） 「XSS攻擊場景」
一個部落格網站，我發表一篇部落格，其中嵌入<script>指令碼，指令碼內容：獲取cookie，傳送到我的伺服器（伺服器配合跨域）閱讀了的人的cookie就會被盜取

「XSS預防」

①替換特殊字元，如<變為<，>變為>
②那麼<script>就會變為<script>，直接顯示，而不會作為指令碼執行
③前端要替換，後端也要做替換，雙保險
④主流的前端框架已做好預防

2.2 XSRF攻擊

「XSRF跨站請求偽裝」

「XSRF攻擊場景」

你正在購物，看中了某個商品，商品id是100。付費介面是xxx.com/pay?id=100，但沒有任何驗證（現在的付費都會有驗證，這裡作為講解，所以假設沒有驗證）。我是攻擊者，我看中了一個商品，id是200。我想你傳送了一封電子郵件，郵件標題很吸引人。但其實郵件正文隱藏著<img src='xxx.com/pay?id=200'>（並附帶有別的執行付費指令碼）你點選查看了這封郵件，就幫我購買了id是200的商品。

「XSRF預防」

使用post介面
增加驗證，例如密碼、簡訊驗證碼、指紋等

3.描述從輸入url到渲染出頁面的整個過程

「載入過程」

①DNS解析：域名 -> IP地址
②瀏覽器根據IP地址向伺服器發起Http請求
③伺服器處理Http請求，並返回給瀏覽器

「渲染過程」

①根據HTML程式碼生成DOM Tree
②根據CSS程式碼生成CSSOM
③將DOM Tree 和 CSSOM 整合形成 Render Tree
④根據Render Tree渲染頁面
⑤遇到<script>則暫停渲染，優先載入並執行JS程式碼（JS程式碼有可能改變DOM結構而重新渲染），完成再繼續
⑥直至把Render Tree渲染完成

4.Linux常用命令

「檔案及資料夾操作」

ls xxx 檢視資料夾（平鋪展開）
ls -a （all的意思，包括以.開頭的隱藏檔案）
ll 檢視資料夾（列表）
ll xxx （檢視xxx資料夾下的檔案）
mkdir xxx （建立xxx資料夾）
rm -rf xxx （把xxx及其所有子檔案全部刪除）
cd xxx （進入xxx目錄）
mv abc xxx （把abc檔案重新命名為xxx檔案）
mv xxx sss路徑 （把xxx檔案移到sss路徑目錄）
cp a.js a1.js （拷貝、複製a.js為a1.js）
rm a1.js （直接刪除單個檔案）
touch d.js （新建檔案d.js）
vi d.js （新建或進入一個檔案d.js並且進入編輯）
cat xxx （檢視xxx檔案所有內容但不進入）
head xxx （檢視xxx檔案前面幾行也不進入）
grep "babel" xxx （在xxx檔案裡查詢babel內容）

「Vim編輯器操作」

按 i 開始編輯
Esc 可退出編輯模式
:w 儲存寫入
:q 退出
:wq （儲存後退出）
:q! （強制退出，不儲存）

寫在文末

如果你覺得我寫得還不錯的話，可以給我點個贊哦^^，如果哪裡寫錯了、寫得不好的地方，也請大家評論指出，以供我糾正。（這個系列也快完結了，大家可以複習複習前面的，接下來我會更新一些別的文章，也請大家可以繼續關注哦）

其它文章

本文使用 mdnice 排版