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）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/117286.html
標籤：Html/Css