前端面試7：頁面性能

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

課程思惟導圖

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"/>
複製代碼