1. 減少 HTTP 的請求次數和傳輸報文的大小 -CSS SPRITE（雪碧圖、圖片精靈）技術 - 使用字體圖標（ICON FONT）或者 SVG 等矢量圖； 可以減少 HTTP 請求次數或者減少請求內容的大小 ，使圖片渲染的更快：因為他們是基於代碼渲染的，而對於點陣圖（png/jpg/gif）是需 ...
1. 減少 HTTP 的請求次數和傳輸報文的大小
-CSS SPRITE（雪碧圖、圖片精靈）技術 - 使用字體圖標（ICON FONT）或者 SVG 等矢量圖； 可以減少 HTTP 請求次數或者減少請求內容的大小 ，使圖片渲染的更快：因為他們是基於代碼渲染的，而對於點陣圖（png/jpg/gif）是需要先把圖片編碼再渲染 ，可以避免圖片失真變形 ； 可以使用 webp 格式圖片，這種格式要小一些（但要保證伺服器端支持這種格式的請求處理） - 圖片懶載入（延遲載入）技術 ； 第一次載入頁面的時候不去請求真實的圖片，將預設背景圖替代真實圖片進行載入，以提高第一次渲染頁面的速度； 當頁面載入完，把出現在用戶視野區域中的圖片做真實載入，沒有出現在用戶頁面時的資源先不載入（可以節約流量，也能減少對伺服器的請求壓力）； 數據我們也儘可能分批載入（不要一次請求過多的數據，例如分頁技術） - 音視頻文件取消預載入（preload='none'），這樣可以增加第一次渲染頁面的速度，當需要播放的時候再載入 - 客戶端和伺服器端的數據傳輸儘可能基於 JSON 格式完成，XML 格式比 JSON 格式要大一些（還可以基於二進位編碼或者文件流格式，這種格式比文件傳輸好很多） - 把頁面中的 CSS/JS/圖片等文件進行合併壓縮：爭取 CSS 和 JS 都只導入一個：基於 webpack 可以壓縮、對於圖片自己找工具先壓縮、還可以使用伺服器的 GZIP 壓縮 - 圖片地圖：對於多次調取使用的圖片（尤其是背景圖），儘可能把它提取成為公共的樣式，而不是每一次重新設置 - 圖片 BASE64（用 BASE64 碼代表圖片，減少 HTTP 請求，增加瀏覽器渲染的速度，所以真實項目中，尤其是移動端，如果圖片載入緩慢，可能 BASE64 一下就好了；但是，BASE64 會導致文件中的代碼頁面混亂，不利於維護和開發，所以儘量少使用；webpack 中可以配置圖片的 BASE64；）
2 . 設置各種緩存、預處理和長連接機制
- 把不經常更改的靜態資源做緩存處理（一般做的是 304 或者 ETAG 等協商緩存） - 建立 Cache-Control 和 Expires HTTP 的強緩存 - DNS 緩存或者預處理（DNS PREFETCH），減少 DNS 的查找 - 設置本地的離線存儲（manifest）或者把一些不經常更改的數據做本地存儲（webstorage、indexdb）等 - 有錢就做 CDN（地域分散式伺服器），還有一個財大氣粗的方式：加伺服器 - 建立 Connection:keep-alive TCP 長連接 - 使用 HTTP2 版本協議（現在用的一般都是 HTTP1.1） + 可以多條 TCP 通道共存 =>管道化鏈接 - 一個項目分為不同的域（不同的伺服器），例如：資源 WEB 伺服器、數據伺服器、圖片伺服器、視頻伺服器等，這樣合理利用伺服器資源，但是導致過多的 DNS 解析
3. 代碼方面的性能優化
- 減少對閉包的使用（因為過多使用閉包會產生很多不銷毀的記憶體，處理不好的話，會導致記憶體溢出“棧溢出”），減少閉包的嵌套（減少作用域鏈的查找層級） - 對於動畫來說：能用 CSS 解決的不用 JS（能夠用 transform 處理的，不用傳統的 css 樣式，因為 transform 開啟硬體加速，不會引發迴流，再或者使用定位的元素也會好很多，因為定位的元素脫離文檔流，不會對其它元素的位置造成影響）； 能用 requestAnimationFrame 解決的不用定時器 ； 另外， requestAnimationFrame 還有一個好處：當頁面處於休眠無訪問狀態，動畫會自己暫停，直到恢復訪問才開始，而定時器是不論什麼狀態，只要頁面不管，就一直處理 - 避免使用 iframe（因為 iframe 會嵌入其它頁面，這樣父頁面渲染的時候，還要同時把子頁面也渲染了，渲染進度會變慢） - 減少直接對 DOM 的操作（以減少 DOM 的重排和重繪），當代項目基本上都是基於 mvvm/mvc 數據驅動視圖渲染的，對 DOM 的操作框架本身完成，性能要好很多；（當前主流框架大都避免直接操作DOM） - 低耦合高內聚（基於封裝的方式：方法封裝、插件、組件、框架、類庫等封裝，減少頁面中的冗餘代碼，提高代碼使用率） - 使用事件委托 - 避免出現死迴圈或者嵌套迴圈（嵌套迴圈會成倍增加迴圈的次數） - 項目中儘可能使用非同步編程來模擬出多線程的效果，避免主線程阻塞（非同步操作基於 promise設計模式來管理） - JS 中不要使用 with - 避免使用 CSS 表達式 - 函數的防抖和節流（處理高併發的其中一種方式） - 減少使用 eval（主要原因是防止壓縮代碼的時候，由於符號書寫不合規，導致代碼混亂） - 減少 filter 濾鏡的使用 - 儘可能減少選擇器的層級（選擇器是從右向左解析）比如： .box a{} 和 a{} （使用less插件時預設層級是比較高的） - 儘可能減少 table 佈局 - 手動回收堆棧記憶體（賦值為 null）
