成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

H5頁面前端性能優(yōu)化技巧

2022-10-16    分類: 網(wǎng)站建設(shè)

得益于智能手機(jī)的普及和各行各業(yè)互聯(lián)網(wǎng)+的運(yùn)用,移動(dòng)端的市場占比瘋狂增長。移動(dòng)端+HTML5,這個(gè)組合對前端工程師來說是個(gè)不小的挑戰(zhàn),如何讓開發(fā)的頁面能有更好的體驗(yàn)?這就是我們今天討論的話題:移動(dòng)端HTML5頁面前端性能優(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、小圖片,緩存一切可緩存的資源,使用長Cache和外聯(lián)式引用CSS、JavaScript,壓縮HTML、CSS、JavaScript,啟用GZip8使用首屏加載、按需加載、浪屏加載,通過Media Query加載,增加Loading進(jìn)度條,減少Cookie,避免重定向,異步加載第三方資源。
圖片優(yōu)化:使用智圖,盡可能用(CSS3、SVG,IconFont)代替圖片,使用Srcset,web圖優(yōu)于JPG,PNG優(yōu)于GIF,圖片不寬于640。
腳本優(yōu)化:減少重繪和回流級存Dom選擇與計(jì)算,緩存列表length,盡量使用事件代理避免批量綁定事件,盡量使用ID選擇器使用touchstart、touchend代替click。
Css優(yōu)化:CSS寫在頭部,JavaScript寫在尾部或異步;避免圖片和iFrame等空的Src;盡量避免重設(shè)圖片大小;正確使用Display的屬性;不濫用Float,不濫用Web字體,不聲明過多的Font-size,值為0時(shí)不需要任何單位;標(biāo)準(zhǔn)化各種測覽器前綴,避免讓選擇符看起來像正則表達(dá)式。
渲染優(yōu)化:HTML使用Viewport,減少Dom節(jié)點(diǎn),盡量使用CSS3動(dòng)畫合理使requestAnimationFrame動(dòng)畫代替setTimeout;適當(dāng)使用Canvas動(dòng)通畫;使用(CSS3 transitions,CSS3 3Dtransforms. Opacity. Canvas, WebGL.Video)來觸發(fā)GPU渲染。

本文名稱:H5頁面前端性能優(yōu)化技巧
標(biāo)題鏈接:http://jinyejixie.com/news11/205711.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、ChatGPT、自適應(yīng)網(wǎng)站、Google定制開發(fā)

廣告

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

外貿(mào)網(wǎng)站制作
博白县| 余江县| 汉中市| 天祝| 郓城县| 襄垣县| 凤阳县| 临武县| 北海市| 芦山县| 丰顺县| 宝应县| 永清县| 禄劝| 静宁县| 沾益县| 枣庄市| 宁国市| 广河县| 丹江口市| 泉州市| 甘孜县| 葫芦岛市| 冕宁县| 张家港市| 五家渠市| 新泰市| 佛坪县| 西丰县| 抚远县| 商丘市| 山阳县| 河东区| 饶阳县| 多伦县| 汉川市| 惠东县| 应城市| 吴江市| 法库县| 麻阳|