web 性能優(yōu)化主要分為兩類：加載時優(yōu)化與運行時優(yōu)化；
從以下幾個方面考慮；減少請求次數(shù)、減少資源加載量、減少請求耗時、提高頁面響應(yīng)速度、注重用戶體驗；
性能優(yōu)化也有相應(yīng)的代價，需要根據(jù)實際場景測試后進行權(quán)衡，避免不必要的優(yōu)化。
1.DNS 服務(wù)優(yōu)化
- 采用 DNS 加速器加速 DNS 解析；
- 配置 host，減少 DNS 解析；
2.TCP 連接復(fù)用 keep-alive
- HTML，css，js等文件可以通過一次 TCP 連接發(fā)起請求
3.SQL 優(yōu)化
- 通過優(yōu)化 SQL 查詢數(shù)據(jù)庫的時間，減少 waiting 時間
4.提高服務(wù)器帶寬
- 升級服務(wù)器帶寬提高響應(yīng)速度
5.gzip 壓縮
- Content-Encoding: gzip 后臺開啟 gzip 壓縮響應(yīng)資源
- 瀏覽器解壓縮資源
6.優(yōu)化 css
- 去除冗余的 css 選擇器和內(nèi)容，減少重復(fù)渲染
7.優(yōu)先加載 css
- css 先加載呈現(xiàn)頁面內(nèi)容，再加載 js 資源
8.懶加載
- 先加載首屏資源，提高頁面響應(yīng)速度
9.資源預(yù)加載
- 一些重要的資源可以預(yù)先加載，提高用戶點擊時的頁面響應(yīng)速度，比如上一頁、下一頁內(nèi)容
10.利用 HTTP 緩存
- 除首頁 HTML 之外資源可以利用 Cache-Control: max-age 強制緩存
- 利用 md5 對資源添加版本號
- 當(dāng)資源發(fā)生更新時，版本號會變化，重新去服務(wù)器獲取新資源
11.多個域名分批請求
- 一個域名的最大并發(fā)請求數(shù)是有限制的
- 將資源進行分類，不同的 CDN 域名請求不同的資源，提高并發(fā)請求數(shù)
- cookie-free: css 資源，圖片資源等利用 CDN 域名可以不用攜帶 cookie，減少上傳量
12.采用 HTTP2.0
- 多路復(fù)用；
- 頭部壓縮；
- 服務(wù)端推送
13.服務(wù)端渲染
- 服務(wù)端渲染的網(wǎng)站則會渲染完頁面再返回 HTML 文件，客戶端只需解析 HTML 即可
- 首屏渲染速度提高，同時利于 SEO 優(yōu)化
14.采用 iconfont 字體圖標(biāo)
- 字體圖標(biāo)生成文件小，矢量圖不失真
- 可以和字體一樣設(shè)置屬性
15.減少頁面的重排重繪
- JS避免直接修改樣式，通過替換 class 來修改樣式
- 合理利用文檔流特點，脫離文檔流使得操作 DOM 對頁面其它元素的影響降低
- 使用 CSS3 的 transform 觸發(fā)瀏覽器開啟 GPU 加速，如
transform: translateZ(0) - 減少浮動的使用，減少渲染性能消耗
16.添加 favicon.ico
- 如果沒有設(shè)置圖標(biāo) ico，瀏覽器默認(rèn)的圖標(biāo)會多發(fā)送一個 404 或者 500 的請求
17.采用事件委托添加事件
- 利用事件冒泡機制，通過指定一個事件來托管子元素的事件
- 多數(shù)鼠標(biāo)事件、鍵盤事件都適合采用事件委托
