網頁美工設計

網頁設計移動端H5前端性能優化方案

編輯：時間：2017-07-11 20:07:54

　　3、移除空的CSS規則，空的CSS規則增加了CSS文件的大小，且影響CSS樹的執行，所以需移除空的CSS規則。

　　4、正確使用Display的屬性，Display屬性會影響頁面的渲染，建議各位站長要合理使用。

　　（1）、display:inline后不應該再使用width、height、margin、padding以及float

　　（2）、display:inline-block后不應該再使用float

　　（3）、display:block后不應該再使用vertical-align

　　（4）、display:table-*后不應該再使用margin或者float

　　5、不濫用Float，Float在渲染時計算量比較大，盡量減少使用。

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

　　7、不聲明過多的Font-size，過多的Font-size引發CSS樹的效率。

　　8、值為0時不需要任何單位，為了瀏覽器的兼容性和性能，值為0時不要帶單位。

　　9、標準化各種瀏覽器前綴

　　（1）、無前綴應放在最后。

　　（2）、CSS動畫只用（-webkit-無前綴）兩種即可。

　　（3）、其它前綴為“-webkit--moz--ms-無前綴”四種（-o-Opera瀏覽器改用blink內核，所以淘汰）。

　　10、避免讓選擇符看起來像正則表達式。

　　高級選擇器執行耗時長且不易讀懂，避免使用。

　　Javascript執行優化

　　1、減少重繪和回流

　　（1）、避免不必要的Dom操作

　　（2）、盡量改變Class而不是Style，使用classList代替className

　　（3）、避免使用document.write

　　（4）、減少drawImage

　　2、緩存Dom選擇與計算，每次Dom選擇都要計算，緩存他。

　　3、緩存列表.length，每次.length都要計算，用一個變量保存這個值。

　　4、盡量使用事件代理，避免批量綁定事件。

　　5、盡量使用ID選擇器，ID選擇器是最快的。

　　6、TOUCH事件優化，使用touchstart、touchend代替click，因快影響速度快，但應注意Touch響應過快，易引發誤操作。

　　渲染優化

　　HTML文檔是以包含文檔編碼信息的數據流方式在網絡間傳輸，頁面的編碼信息一般會在HTTP響應的頭部信息或在文檔內的HTML標記中指明，客戶端瀏覽器只有在確定了頁面編碼后才能正確的渲染頁面，所以在繪制頁面或執行任何的java代碼前，大部分的瀏覽器（ie6、ie7、ie8除外）都會緩沖一定字節的數據來從中查找編碼信息，不同的瀏覽器當中預緩沖的字節數是不一樣的。

3/4 首頁上一頁 1 2 3 4 下一頁尾頁

<< 上一篇：h5移動端頁面怎么根據設計稿布局

>> 下一篇：網頁設計師的靈感主要從哪里來

推薦資訊