本文首發 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 GMTExpires是HTTP / 1.0的產物，表示資源會在Wed, 22 Oct 2018 08:41:00 GMT後過期，需要再次請求。並且Expires受限於本地時間，如果修改了本地時間，可能會造成緩存失效
Cache-control: max-age=30Cache-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屬性，這樣圖片就會去下載資源，實現了圖片懶加載
- 懶加載不僅可以用於圖片，也可以使用在別的資源上。比如進入可視區域才開始播放視頻等
