網(wǎng)頁(yè)性能優(yōu)化方法有哪些？

·減少 HTTP 請(qǐng)求數(shù)量

在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過(guò)HTTP進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過(guò)三次握手，每次握手需要花費(fèi)大量時(shí)間。而且不同瀏覽器對(duì)資源文件并發(fā)請(qǐng)求數(shù)量有限(不同瀏覽器允許并發(fā)數(shù))，一旦 HTTP 請(qǐng)求數(shù)量達(dá)到一定數(shù)量，資源請(qǐng)求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請(qǐng)求數(shù)量可以很大程度上對(duì)網(wǎng)站性能進(jìn)行優(yōu)化。

CSS Sprites：國(guó)內(nèi)俗稱 CSS 精靈，這是將多張圖片合并成一張圖片達(dá)到減少 HTTP 請(qǐng)求的一種解決方案，可以通過(guò) CSS background 屬性來(lái)訪問(wèn)圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。

合并 CSS 和 JS 文件：現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請(qǐng)求數(shù)量，可以通過(guò)這些工具再發(fā)布前將多個(gè) CSS 或者 多個(gè) JS 合并成一個(gè)文件。

采用 lazyLoad：俗稱懶加載，可以控制網(wǎng)頁(yè)上的內(nèi)容在一開始無(wú)需加載，不需要發(fā)請(qǐng)求，等到用戶操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁(yè)資源一次性請(qǐng)求數(shù)量。

·控制資源文件加載優(yōu)先級(jí)

瀏覽器在加載HTML內(nèi)容時(shí)，是將HTML內(nèi)容從上至下依次解析，解析到link或者script標(biāo)簽就會(huì)加載href或者src對(duì)應(yīng)鏈接內(nèi)容，為了第一時(shí)間展示頁(yè)面給用戶，就需要將CSS提前加載，不要受JS加載影響。

一般情況下都是CSS在頭部，JS 在底部。

·利用瀏覽器緩存

瀏覽器緩存是將網(wǎng)絡(luò)資源存儲(chǔ)在本地，等待下次請(qǐng)求該資源時(shí)，如果資源已經(jīng)存在就不需要到服務(wù)器重新請(qǐng)求該資源，直接在本地讀取該資源。

·減少重排(Reflow)

基本原理：重排是 DOM 的變化影響到了元素的幾何屬性(寬和高)，瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹中受到影響的部分失效，瀏覽器會(huì)驗(yàn)證 DOM 樹上的所有其它結(jié)點(diǎn)的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過(guò)于頻繁，CPU 使用率就會(huì)急劇上升。

減少 Reflow，如果需要在 DOM 操作時(shí)添加樣式，盡量使用 增加 class 屬性，而不是通過(guò) style 操作樣式。

·減少 DOM 操作

·圖標(biāo)使用 IconFont 替換

猜你喜歡：

事件委托是什么? JS事件代理的原理

前端BFC是什么?

js中修改this的指向方法匯總

BFC布局規(guī)則介紹，哪些元素會(huì)生成 BFC?

黑馬程序員前端開發(fā)培訓(xùn)課程