HTML5之前端性能影響及優化

楊侃

【摘要】隨著互聯網的快速發展，2014年HTML最新版HTML5出現，作為一種用于WEB APP開發、移動端開發、網站開發和游戲開發的一門web標記語言。性能的影響對于用戶的體驗是非常重要的！假如用戶用瀏覽器運行很慢的話，可能用戶就會關掉此網站，不再進入了！因此，前端的性能優化對于開發人員是必須要求做到的！

【關鍵詞】HTML5;前端性能;優化

近幾年來，隨著互聯網+、大數據、云計算、物聯網、人工智能等IT行業的快速發展，這些產業深入人們的日常生活中，人們與互聯網之間的聯系逐漸升溫，互聯網讓人們的生活變得多姿多彩！作為直接與用戶接觸的前端，還有很多問題并沒有解決。例如用戶通過瀏覽器進入一個網站，用戶感覺網站加載很慢，可能就會因此而關掉此網站。為了留住用戶，作為前端開發人員就要提供給用戶好的體驗效果，那就需要減少瀏覽器的性能消耗——性能優化。本人認為性能優化可以從以下5個方面進行優化：

（1）第一個可以通過優化JavaScript邏輯代碼;

（2）第二個可以通過改變渲染方式;

（3）第三個可以通過優化文件;

（4）第四個可以通過優化網絡;

（5）第五個可以通過工具進行優化項目

1 前端性能優化之JavaScript

JavaScript是基于原型的動態型、解釋型和弱類型的腳步語言。由于現在一些常用的瀏覽器都已嵌入了JavaScript引擎，解釋型——表示可以跨平臺直接使用。

前端性能優化：

（1）第一個就是JavaScript的執行順序——js時間線。需要將js，也就是JavaScript放到HTML文檔最后面加載。Js時間線：第一創建document對象，也就是html結構;第二link標簽引入的外部css，也就是樣式;第三script標簽引入的外部js，，、

第四img標簽，圖片，需要加載src屬性;例如：

第五文檔加載完成，剩下就是用戶操作實時交互的代碼邏輯階段。

（2）將js邏輯代碼延遲使用，例如：某些耗時邏輯代碼不需要開始使用，就可以延遲使用——懶執行。懶執行需要進行喚醒，喚醒方法可以通過定時器或者事件的觸發。

（3）對于動畫建議使用css來實現，盡量不要用JavaScript。

2 前端性能優化之渲染優化

渲染優化可以從以下四個方面進行：

2.1渲染過程優化

HTML的渲染機制：渲染HTML會構建DOM樹;渲染css構建cssom樹;兩者會合并一個渲染樹，而計算機根據渲染樹來布局網頁，并計算每個節點的位置，調用GPU繪制，形成圖層，然后顯示給用戶觀看。CSSOM樹的構建是非常耗性能的，因此需要前端開發人員盡量保證樣式的層級扁平，減少樣式的過度層疊。因為樣式越具體的，它的執行速度越慢。

2.2重排和重繪對于性能影響很大

重繪是只改變元素的樣式，不影響布局的。例如改變元素的背景顏色，字體大小和文本排列方式等。當頁面初始化、添加/刪除元素、改變元素位置和改變元素尺寸等都會發生重排。

減少重排和重繪的方法：

（1）當使用定位時，可以通過取消定位，用變換屬性里的偏移translate替代top;減少所消耗的時間。

（2）當希望隱藏元素時，可以使用visibility：hidden;而不用display：none;因為前者只會導致樣式的重繪，后者會導致重排，改變了元素的布局。

（3）建議不使用table布局，因為它可能造成重排。

（4）通過圖層優化：將頻繁運行的動畫變為圖層，圖層能夠阻止某些元素重排導致的影響;其實普通文檔HTML可以看成一個圖層，圖層之間是互補影響的。因此可以對頻繁渲染的生成一個單獨圖層，可以優化性能。但只能針對少部分。

生成圖層方法：

（1）通過變換：translate3d

（2）通過標簽video、iframe

（3）通過動畫

（4）渲染之懶加載優化：它的原理是將不關鍵的延后加載，在圖片方面適用。也可以用于播放視頻等。

3 前端性能優化之文件優化

文件優化可以通過以下幾個方面：

（1）圖片的優化：像一個網站可能有很多圖片，可以通過減少圖片的像素點來相應的縮小圖片的大小。

（2）通過圖片加載優化：例如阿里圖標，雪碧圖（將多個圖標文件整合到一張圖片上）等等。使用合格的圖片格式，針對瀏覽器來使用。如果瀏覽器支持webp格式，盡量使用WebP格式，因為它具有很好的數據壓縮算法，減少圖片體積。小圖片就使用png，照片使用JPEG。

（3）通過引入css文件;在服務器端進行文件壓縮;將js文件放在內容最后，也就是body底部。

4 前端性能優化之網絡優化

網絡優化可以從以下幾個方面：

（1）好的緩存策略對于降低性能消耗，減少資源的重復加載，提高網站加載速度。

（2）請求方式使用http/2.0，它可以實現多路復用，加快網頁加載速度。

（3）預加載：對于網頁上有些資源不需要馬上用到，但是需要盡早獲取到的情況。

5 前端性能優化之項目優化

通過一些工具優化項目，減少項目所占的字節。對代碼進行壓縮;并移除沒有用處的代碼;優化圖片。最后將文件打包。

6 總結

針對互聯網的快速發展，以及結合以上的觀點來看，前端開發人員對于性能優化其實可以通過簡化一些重復和贅余的代碼;還可以使用雪碧圖來減緩圖片所帶來的加載速度緩慢的問題。還可以通過一些框架去簡化代碼量，從而達到提高加載效率的目的。以上并是個人對于前端性能影響的一些看法。