Performance - arthur791004/notes GitHub Wiki

HTTP Cache

HTTP Status

  • 200: Cache 期間內不會發出 request，且 response 為 200
  • 304: Cache 已過期，但 ETag 並沒有更新，所以可以繼續使用

Strategy

  • Cache Only
  • Cache First
  • Network Only
  • Network First
  • Fastest

Libary

  • sw-toolbox
  • sw-precache
  • Workbox (sw-toolbox + sw-precache)
    • 可以透過 cli 或是整合 webpack 等自動生成
    • workboxPlugin

First Render

  • Blocked Rednering
  • Render Priority
    • Highest: 如 HTML、CSS
    • High: 如 JS*
    • Medium: 如 Favicon
    • Low: 如圖片
    • Lowest: 如 prefetch 的資源
  • 如何降低 Redner Priority
    • css 
      // 一般： media="print"
<link media="print" href="print.css" rel="stylesheet">
// IE 相關： media="(-ms-high-contrast: active), (-ms-high-contrast: none)"
<link
  rel="stylesheet" href="css/ie.css"
  media="(-ms-high-contrast: active), (-ms-high-contrast: none)">
    • js
      • async, defer: render priority 都會降至 Low，但現實中其實不常用...
        • async: 載完後就會馬上執行
        • defer: 等 DOM parse 完才會執行
  • Code Splitting 
    import('fatLibrary').then(fatLibrary => {
  console.log(fatLibrary)
});
  • Precache 
    // 通常透過 tool 自動生成
importScripts('workbox-sw.js');

const workboxSW = new WorkboxSW();

workboxSW.precache([{
  url: '/dist/2.js',
  revision: '4301192...d3c2cb'
}]);

HTTP/2

Others

  • preload
  • prefetch
  • IndexedDB
  • HTTP/2
  • Server Push
  • SSR

Reference