首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2021-01-15 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

·減少 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)容在一開(kā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 操作樣式。

1610702789529_網(wǎng)站性能優(yōu)化.png

·減少 DOM 操作

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


猜你喜歡:

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

前端BFC是什么?

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

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

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



分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!