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