網(wǎng)頁(yè)美工設計

網(wǎng)頁(yè)設計移動(dòng)端H5前端性能優(yōu)化方案

編輯：時(shí)間：2017-07-11 20:07:54

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

　　4、正確使用Display的屬性，Display屬性會(huì )影響頁(yè)面的渲染，建議各位站長(cháng)要合理使用。

　　（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在渲染時(shí)計算量比較大，盡量減少使用。

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

　　7、不聲明過(guò)多的Font-size，過(guò)多的Font-size引發(fā)CSS樹(shù)的效率。

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

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

　　（1）、無(wú)前綴應放在最后。

　　（2）、CSS動(dòng)畫(huà)只用（-webkit-無(wú)前綴）兩種即可。

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

　　10、避免讓選擇符看起來(lái)像正則表達式。

　　高級選擇器執行耗時(shí)長(cháng)且不易讀懂，避免使用。

　　Javascript執行優(yōu)化

　　1、減少重繪和回流

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

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

　　（3）、避免使用document.write

　　（4）、減少drawImage

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

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

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

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

　　6、TOUCH事件優(yōu)化，使用touchstart、touchend代替click，因快影響速度快，但應注意Touch響應過(guò)快，易引發(fā)誤操作。

　　渲染優(yōu)化

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

3/4 首頁(yè) 上一頁(yè) 1 2 3 4 下一頁(yè) 尾頁(yè)

<< 上一篇：h5移動(dòng)端頁(yè)面怎么根據設計稿布局

>> 下一篇：網(wǎng)頁(yè)設計師的靈感主要從哪里來(lái)

推薦資訊