前言：

一說到性能優(yōu)化，大家都不約而同的想起了雅虎的軍規(guī)，2-5-8原則，3秒的首屏準(zhǔn)則等等，這些規(guī)則在開發(fā)中雖然不是強(qiáng)制要求的，但是為了追求頁面性能的完美體驗(yàn)，就不得不對代碼進(jìn)行修改和優(yōu)化。

下面就與大家一同分享一下我了解的一些性能優(yōu)化指標(biāo)：

一．加載優(yōu)化

1. 減少HTTP請求：盡量減少向服務(wù)器發(fā)送的請求數(shù)，節(jié)省網(wǎng)絡(luò)資源，所有靜態(tài)資源都要放在服務(wù)器端并設(shè)置緩存，并且要盡量使用長緩存。

2. 壓縮代碼：減少資源大小可加快網(wǎng)頁的顯示速度，對代碼進(jìn)行壓縮，并在服務(wù)器開啟Gzip

3. 無阻塞：頭部內(nèi)聯(lián)的樣式和腳本會(huì)阻塞頁面的渲染，樣式放在頭部使用link引入，腳本放在尾部并使用異步方式加載。

4. 首屏加載：首屏快速顯示可大大的提升用戶對頁面速度的感知，應(yīng)盡量針對首屏的快速顯示做出相應(yīng)的優(yōu)化。

5. 按需加載：將不影響首屏的資源和當(dāng)前屏幕不使用的資源放到用戶需要時(shí)才加載，可大幅度提升顯示速度和降低總體流量。但是按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能。

6. 預(yù)加載：大型資源頁面可使用Loading，資源加載完成后再顯示頁面，但是加載時(shí)間過長，會(huì)造成負(fù)體驗(yàn)。

7. 壓縮圖像：使用圖像時(shí)選擇最合適的格式和大小，然后使用工具壓縮，同時(shí)在代碼中進(jìn)行圖片懶加載。

8. 減少Cookie：Cookie會(huì)影響加載速度，所以盡量減少不必要的Cookie。

9. 異步加載第三方資源：第三方資源不可控，會(huì)影響頁面加載，所以要異步加載第三方資源。

二．執(zhí)行優(yōu)化

1．css寫在頭部，js寫在尾部并異步。

2．避免img、iframe等標(biāo)簽的src屬性為空：空src會(huì)重新加載當(dāng)前頁面，影響速度和效率。

3．盡量避免重置圖像大?。憾啻沃刂脠D像大小會(huì)引發(fā)圖像的多次重繪，影響性能。

4．圖像盡量避免使用DataURL：DataURL圖像沒有使用圖像壓縮算法，文件會(huì)變大，并且要解碼后再渲染，加載慢耗時(shí)長。

三．渲染優(yōu)化

1．設(shè)置Viewport：HTML的viewport可加快頁面的渲染。

2．減少DOM結(jié)點(diǎn)：DOM結(jié)點(diǎn)太多會(huì)影響頁面的渲染。

3．盡量使用css3動(dòng)畫，合理使用requestAnimationFrame動(dòng)畫代替setTimeout。

4．優(yōu)化高頻事件：scroll、touchmove等事件盡量使用函數(shù)防抖節(jié)流等進(jìn)行限制。

四．樣式優(yōu)化

1．避免在HTMl中書寫style。

2．避免css表達(dá)式：css表達(dá)式的執(zhí)行需要跳出css樹的渲染。

3．移除css空規(guī)則：css空規(guī)則增加了css文件的大小。

4．正確使用display：display會(huì)影響頁面的渲染。

5．不濫用float：float在渲染時(shí)計(jì)算量較大，盡量減少使用。

6．不濫用WEB字體：WEB字體需要下載、解析、重繪當(dāng)前頁面，盡量減少使用。

五．腳本優(yōu)化

1．盡量減少回流和重繪。

2．緩存DOM選擇與計(jì)算：每次DOM選擇都要計(jì)算和緩存。

3．緩存.length的值：每次.length計(jì)算使用一個(gè)變量保存值。

4．盡量使用事件代理：避免批量綁定事件。

5．盡量使用id選擇器：id選擇器選擇元素是最快的。

2-5-8原則

在前端開發(fā)中，此規(guī)則作為一種開發(fā)指導(dǎo)思路，針對瀏覽器頁面的性能優(yōu)化。

o 用戶在2秒內(nèi)得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度很快 Fast

o 用戶在2~5秒間得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度還行 Medium

o 用戶在5~8秒間得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度很慢，但還可以接受 Slow

o 用戶在8秒后仍然無法得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度垃圾死了(「此時(shí)會(huì)有以下四種可能」)

§ 難道是網(wǎng)速不好，發(fā)起第二次請求 => 刷新頁面

§ 什么垃圾頁面呀，怎么還不打開 => 離開頁面，有可能轉(zhuǎn)投競爭對手的網(wǎng)站

§ 垃圾程序猿，做的是什么頁面啊 => 咒罵開發(fā)此頁面的程序猿

§ 斷網(wǎng)了 => 網(wǎng)線斷了？Wi-Fi斷了？信號不好？話費(fèi)用完了？

Ok完事兒，這就是本小白總結(jié)的一點(diǎn)點(diǎn)小經(jīng)驗(yàn)啦～

以上就是前端性能優(yōu)化建議的詳細(xì)內(nèi)容，更多關(guān)于前端性能優(yōu)化的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論