【FE TIKU 前端面試題庫】性能優化

本文首發 http://fetiku.com/docs/advanc...

1 DNS 預解析

• DNS 解析也是須要時間的，能夠經過預解析的方式來預先得到域名所對應的 IP

<link rel="dns-prefetch" href="//shudong.wang">

2 緩存

• 緩存對於前端性能優化來講是個很重要的點，良好的緩存策略能夠下降資源的重複加載提升網頁的總體加載速度
• 一般瀏覽器緩存策略分爲兩種：強緩存和協商緩存

強緩存

實現強緩存能夠經過兩種響應頭實現： Expires 和 Cache-Control 。強緩存表示在緩存期間不須要請求， state code 爲 200

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 是 HTTP / 1.0 的產物，表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT 後過時，須要再次請求。而且 Expires 受限於本地時間，若是修改了本地時間，可能會形成緩存失效

Cache-control: max-age=30

Cache-Control 出現於 HTTP / 1.1，優先級高於 Expires 。該屬性表示資源會在 30 秒後過時，須要再次請求

協商緩存

• 若是緩存過時了，咱們就可使用協商緩存來解決問題。協商緩存須要請求，若是緩存有效會返回 304
• 協商緩存須要客戶端和服務端共同實現，和強緩存同樣，也有兩種實現方式

Last-Modified 和 If-Modified-Since

• Last-Modified 表示本地文件最後修改日期，If-Modified-Since 會將 Last-Modified 的值發送給服務器，詢問服務器在該日期後資源是否有更新，有更新的話就會將新的資源發送回來
• 可是若是在本地打開緩存文件，就會形成 Last-Modified 被修改，因此在 HTTP / 1.1 出現了 ETag

ETag 和 If-None-Match

• ETag 相似於文件指紋，If-None-Match 會將當前 ETag 發送給服務器，詢問該資源 ETag 是否變更，有變更的話就將新的資源發送回來。而且 ETag 優先級比 Last-Modified 高

選擇合適的緩存策略

對於大部分的場景均可以使用強緩存配合協商緩存解決，可是在一些特殊的地方可能須要選擇特殊的緩存策略

• 對於某些不須要緩存的資源，可使用 Cache-control: no-store ，表示該資源不須要緩存
• 對於頻繁變更的資源，可使用 Cache-Control: no-cache 並配合 ETag 使用，表示該資源已被緩存，可是每次都會發送請求詢問資源是否更新。
• 對於代碼文件來講，一般使用 Cache-Control: max-age=31536000 並配合策略緩存使用，而後對文件進行指紋處理，一旦文件名變更就會馬上下載新的文件

3 使用 HTTP / 2.0

• 由於瀏覽器會有併發請求限制，在 HTTP / 1.1 時代，每一個請求都須要創建和斷開，消耗了好幾個 RTT 時間，而且因爲 TCP 慢啓動的緣由，加載體積大的文件會須要更多的時間
• 在 HTTP / 2.0 中引入了多路複用，可以讓多個請求使用同一個 TCP 連接，極大的加快了網頁的加載速度。而且還支持 Header 壓縮，進一步的減小了請求的數據大小

4 預加載

• 在開發中，可能會遇到這樣的狀況。有些資源不須要立刻用到，可是但願儘早獲取，這時候就可使用預加載
• 預加載實際上是聲明式的 fetch ，強制瀏覽器請求資源，而且不會阻塞 onload 事件，可使用如下代碼開啓預加載

<link rel="preload" href="http://example.com">

預加載能夠必定程度上下降首屏的加載時間，由於能夠將一些不影響首屏但重要的文件延後加載，惟一缺點就是兼容性很差

5 預渲染

能夠經過預渲染將下載的文件預先在後臺渲染，可使用如下代碼開啓預渲染

<link rel="prerender" href="http://poetries.com">

• 預渲染雖然能夠提升頁面的加載速度，可是要確保該頁面百分百會被用戶在以後打開，不然就白白浪費資源去渲染

6 懶執行與懶加載

懶執行

• 懶執行就是將某些邏輯延遲到使用時再計算。該技術能夠用於首屏優化，對於某些耗時邏輯並不須要在首屏就使用的，就可使用懶執行。懶執行須要喚醒，通常能夠經過定時器或者事件的調用來喚醒

懶加載

• 懶加載就是將不關鍵的資源延後加載

懶加載的原理就是隻加載自定義區域（一般是可視區域，但也能夠是即將進入可視區域）內須要加載的東西。對於圖片來講，先設置圖片標籤的 src 屬性爲一張佔位圖，將真實的圖片資源放入一個自定義屬性中，當進入自定義區域時，就將自定義屬性替換爲 src 屬性，這樣圖片就會去下載資源，實現了圖片懶加載

• 懶加載不只能夠用於圖片，也可使用在別的資源上。好比進入可視區域纔開始播放視頻等