得益于智能手機(jī)的普及和各行各業(yè)互聯(lián)網(wǎng)+的運(yùn)用，移動(dòng)端的市場(chǎng)占比瘋狂增長(zhǎng)。移動(dòng)端+HTML5，這個(gè)組合對(duì)前端工程師來(lái)說(shuō)是個(gè)不小的挑戰(zhàn)，如何讓開(kāi)發(fā)的頁(yè)面能有更好的體驗(yàn)？這就是我們今天討論的話題：移動(dòng)端HTML5頁(yè)面前端性能優(yōu)化。
如何優(yōu)化HTML5在移動(dòng)設(shè)置上的性能表現(xiàn)，首先需要明確以下幾個(gè)原則：
1、PC優(yōu)化手段在Mobile端同樣適用。
2、在Mobile端我們提出三秒種渲染完成首屏指標(biāo)。
3、基于第二點(diǎn)，首屏加載3秒完成或使用Loading。
4、Mobile端因手機(jī)配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)。
5、基于第四點(diǎn)，要合理處理代碼減少渲染損耗。
6、基于第二、第四點(diǎn)，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置。
7、加載完成后用戶交互使用時(shí)也需注意性能。
HTML5優(yōu)化具體可在以下幾個(gè)方面入手：
加載優(yōu)化：合并CSS、JavaScript、小圖片，緩存一切可緩存的資源，使用長(zhǎng)Cache和外聯(lián)式引用CSS、JavaScript，壓縮HTML、CSS、JavaScript，啟用GZip8使用首屏加載、按需加載、浪屏加載，通過(guò)Media Query加載，增加Loading進(jìn)度條，減少Cookie，避免重定向，異步加載第三方資源。
圖片優(yōu)化：使用智圖，盡可能用（CSS3、SVG,IconFont)代替圖片，使用Srcset,web圖優(yōu)于JPG,PNG優(yōu)于GIF,圖片不寬于640。
腳本優(yōu)化：減少重繪和回流級(jí)存Dom選擇與計(jì)算，緩存列表length，盡量使用事件代理避免批量綁定事件，盡量使用ID選擇器使用touchstart、touchend代替click。
Css優(yōu)化：CSS寫在頭部，JavaScript寫在尾部或異步;避免圖片和iFrame等空的Src;盡量避免重設(shè)圖片大小;正確使用Display的屬性;不濫用Float，不濫用Web字體，不聲明過(guò)多的Font-size，值為0時(shí)不需要任何單位;標(biāo)準(zhǔn)化各種測(cè)覽器前綴，避免讓選擇符看起來(lái)像正則表達(dá)式。
渲染優(yōu)化：HTML使用Viewport，減少Dom節(jié)點(diǎn)，盡量使用CSS3動(dòng)畫(huà)合理使requestAnimationFrame動(dòng)畫(huà)代替setTimeout;適當(dāng)使用Canvas動(dòng)通畫(huà);使用（CSS3 transitions,CSS3 3Dtransforms. Opacity. Canvas, WebGL.Video)來(lái)觸發(fā)GPU渲染。

網(wǎng)頁(yè)題目：H5頁(yè)面前端性能優(yōu)化技巧
當(dāng)前鏈接：http://chinadenli.net/news/205711.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、搜索引擎優(yōu)化、自適應(yīng)網(wǎng)站、建站公司、營(yíng)銷型網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)