去面試之性能問題

1.網絡傳輸性能優化

1.1.瀏覽器緩存

強緩存

實現強緩存能夠經過兩種響應頭實現：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 高。

1.2.資源打包壓縮

wepack

gzip

1.3.圖片資源優化

圖片加載優化

1. 不用圖片。不少時候會使用到不少修飾類圖片，其實這類修飾圖片徹底能夠用 CSS 去代替。
2. 對於移動端來講，屏幕寬度就那麼點，徹底沒有必要去加載原圖浪費帶寬。通常圖片都用 CDN 加載，能夠計算出適配屏幕的寬度，而後去請求相應裁剪好的圖片。
3. 小圖使用 base64 格式
4. 將多個圖標文件整合到一張圖片中（雪碧圖）
5. 選擇正確的圖片格式：
   • 對於可以顯示 WebP 格式的瀏覽器儘可能使用 WebP 格式。由於 WebP 格式具備更好的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量，缺點就是兼容性並很差
   • 小圖使用 PNG，其實對於大部分圖標這類圖片，徹底可使用 SVG 代替
   • 照片使用 JPEG

1.4.網絡傳輸性能檢測工具——Page Speed

1.5.使用CDN

To Learn

 

2.頁面渲染性能優化

 

圖層

通常來講，能夠把普通文檔流當作一個圖層。特定的屬性能夠生成一個新的圖層。不一樣的圖層渲染互不影響，因此對於某些頻繁須要渲染的建議單獨生成一個新圖層，提升性能。但也不能生成過多的圖層，會引發副作用。

經過如下幾個經常使用屬性能夠生成新圖層

• 3D 變換：translate3d、translateZ
• will-change
• video、iframe 標籤
• 經過動畫實現的 opacity 動畫轉換
• position: fixed

 

懶加載

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

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

 

減小重繪和迴流

• 使用 translate 替代 top

  <div class="test"></div>
  <style>
      .test {
          position: absolute;
          top: 10px;
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
  <script>
      setTimeout(() => {
          // 引發迴流
          document.querySelector('.test').style.top = '100px'
      }, 1000)
  </script>

• 使用 visibility 替換 display: none ，由於前者只會引發重繪，後者會引起迴流（改變了佈局）

• 把 DOM 離線後修改，好比：先把 DOM 給 display:none (有一次 Reflow)，而後你修改100次，而後再把它顯示出來

• 不要把 DOM 結點的屬性值放在一個循環裏當成循環裏的變量

  for(let i = 0; i < 1000; i++) {
      // 獲取 offsetTop 會致使迴流，由於須要去獲取正確的值
      console.log(document.querySelector('.test').style.offsetTop)
  }

• 不要使用 table 佈局，可能很小的一個小改動會形成整個 table 的從新佈局

• 動畫實現的速度的選擇，動畫速度越快，迴流次數越多，也能夠選擇使用 requestAnimationFrame

• CSS 選擇符從右往左匹配查找，避免 DOM 深度過深

• 將頻繁運行的動畫變爲圖層，圖層可以阻止該節點回流影響別的元素。好比對於 video 標籤，瀏覽器會自動將該節點變爲圖層。