HTML5之前端性能影響及優(yōu)化

楊侃

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

【關鍵詞】HTML5;前端性能;優(yōu)化

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

（1）第一個可以通過優(yōu)化JavaScript邏輯代碼;

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

（3）第三個可以通過優(yōu)化文件;

（4）第四個可以通過優(yōu)化網(wǎng)絡;

（5）第五個可以通過工具進行優(yōu)化項目

1 前端性能優(yōu)化之JavaScript

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

前端性能優(yōu)化：

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

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

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

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

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

2 前端性能優(yōu)化之渲染優(yōu)化

渲染優(yōu)化可以從以下四個方面進行：

2.1渲染過程優(yōu)化

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

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

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

減少重排和重繪的方法：

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

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

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

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

生成圖層方法：

（1）通過變換：translate3d

（2）通過標簽video、iframe

（3）通過動畫

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

3 前端性能優(yōu)化之文件優(yōu)化

文件優(yōu)化可以通過以下幾個方面：

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

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

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

4 前端性能優(yōu)化之網(wǎng)絡優(yōu)化

網(wǎng)絡優(yōu)化可以從以下幾個方面：

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

（2）請求方式使用http/2.0，它可以實現(xiàn)多路復用，加快網(wǎng)頁加載速度。

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

5 前端性能優(yōu)化之項目優(yōu)化

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

6 總結(jié)

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