前言：

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

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

一．加載優(yōu)化

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

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

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

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

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

6. 預加載：大型資源頁面可使用Loading，資源加載完成后再顯示頁面，但是加載時間過長，會造成負體驗。

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

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

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

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

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

2．避免img、iframe等標簽的src屬性為空：空src會重新加載當前頁面，影響速度和效率。

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

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

三．渲染優(yōu)化

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

2．減少DOM結點：DOM結點太多會影響頁面的渲染。

3．盡量使用css3動畫，合理使用requestAnimationFrame動畫代替setTimeout。

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

四．樣式優(yōu)化

1．避免在HTMl中書寫style。

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

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

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

5．不濫用float：float在渲染時計算量較大，盡量減少使用。

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

五．腳本優(yōu)化

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

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

3．緩存.length的值：每次.length計算使用一個變量保存值。

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

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

2-5-8原則

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

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

o 用戶在2~5秒間得到響應，會感覺頁面的響應速度還行 Medium

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

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

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

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

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

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

Ok完事兒，這就是本小白總結的一點點小經(jīng)驗啦～

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

最新評論