前端面試7：頁面效能

明易發表於2018-12-05
前端面試

課程思維導圖

頁面效能.png

Q：提升頁面效能的方法有哪些？

  1. 資源壓縮合並，減少HTTP請求
  2. 非核心程式碼非同步載入
  3. 使用瀏覽器快取
  4. 使用CDN
  5. 預解析DNS
  6. HTML優化，如使用語義化標籤，避免重定向等
  7. CSS優化，如佈局程式碼寫前面，根據需求載入的網路字型，避免使用表示式

Q：非同步載入的方式有哪些？

  1. 動態指令碼載入
  2. defer
  3. async

Q：defer、async的區別是什麼？

  1. defer是在HTML解析後才會執行的，如果有多個，按載入順序依次執行
  2. async是在載入完之後立即執行，如果是多個，執行順序與載入順序無關

Q：什麼是瀏覽器快取？

資原始檔在電腦磁碟上的備份

Q：快取的分類有哪些？（跟快取相關的HTTP頭部有哪些？）

  1. 強快取
    1. 特點：不請求，直接使用快取
    2. 相關的HTTP頭部欄位：
      1. Expires：過期時間，是個絕對時間，下發的是伺服器時間，比較用的是客戶端的時間，所以會有偏差
      2. Cache-Control：過期時間，是個相對時間，優先順序高，以客戶端的相對時間為準，瀏覽器拿到資源之後的多少時間內都不會再去伺服器請求
  2. 協商快取
    1. 特點：瀏覽器不確定備份是否過期，需與伺服器請求確認
    2. 相關的HTTP頭部欄位：
      1. Last-Modified/If-Modified-Since：伺服器下發時間，客戶端請求時帶上下發時間，伺服器判斷檔案是否過期。存在的問題伺服器下發的時間難以定義
      2. Etag/If-None-Match：伺服器下發hash值，客戶端請求時帶上hash值，伺服器判斷檔案是否過期。優先順序高

Q：什麼是CND？

  1. 特點：在不同的地點快取內容，將使用者的請求定向到最合適的快取伺服器上去獲取內容。
  2. 優點：解決Internet網路擁堵狀況，提高使用者訪問網路的響應速度。

Q：預解析DNS

  1. 背景：DNS預解析會消耗前端的效能，優化建議是：減少DNS的請求次數，進行DNS預解析
  2. 方式：是讓具有此屬性的域名自動在後臺解析，從而減少使用者的等待時間，提升使用者體驗

Q：如何開啟DNS預解析？

<meta http-equiv = "x-dns-prefetch-control" content="on">
（強制開啟a標籤的DNS預解析，https下預設關閉）
<link rel="dns-prefetch" href="//host_name_to_prefetch.com"/>
複製程式碼

相關文章