前言
發(fā)現(xiàn)總結(jié)性的小干貨可以為大家提升更好的開發(fā)技巧和編碼思維，對(duì)代碼量產(chǎn)化提供更扎實(shí)的質(zhì)量和支持。這次我們來聊聊大家可能都比較關(guān)心的話題：性能優(yōu)化。

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、肥西網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為肥西等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

一說到頁面的性能優(yōu)化，大家可能都會(huì)想起雅虎軍規(guī)、2-5-8原則、3秒鐘首屏指標(biāo)等規(guī)則，這些規(guī)則在開發(fā)過程中不是強(qiáng)制要求的，但是有時(shí)候?yàn)榱俗非箜撁嫘阅艿耐昝篮腕w驗(yàn)，就不得不對(duì)原有的代碼進(jìn)行修改和優(yōu)化。

下面就結(jié)合自己三年多的開發(fā)經(jīng)驗(yàn)和大量的項(xiàng)目實(shí)踐，整理出一些常用的性能優(yōu)化要點(diǎn)，同時(shí)再羅列一下雅虎軍規(guī)、2-5-8原則、3秒鐘首屏指標(biāo)這三個(gè)常用規(guī)則的要點(diǎn)。

為了方便記憶和閱讀，文章使用部分簡寫名詞，解釋如下
D端：桌面端頁面Desktop End Page

M端：移動(dòng)端頁面Mobile End Page

概述指南
D端優(yōu)化手段在M端同樣適用

在M端提出3秒鐘渲染完成首屏指標(biāo)

基于第二點(diǎn)，首屏加載3秒內(nèi)完成或使用Loading進(jìn)行占位

基于聯(lián)通3G網(wǎng)絡(luò)平均338kb/s(2.71mb/s)，首屏資源不應(yīng)超過1014kb

M端因配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)

基于第五點(diǎn)，要合理處理代碼減少渲染損耗

基于第二點(diǎn)和第五點(diǎn)，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置

加載完成后，用戶交互使用時(shí)也需注意性能

加載優(yōu)化
減少HTTP請(qǐng)求：盡量減少頁面的請(qǐng)求數(shù)(首次加載同時(shí)請(qǐng)求數(shù)不能超過4個(gè))，移動(dòng)設(shè)備瀏覽器同時(shí)響應(yīng)請(qǐng)求為4個(gè)請(qǐng)求(Android支持4個(gè)，iOS5+支持6個(gè))

合并CSS和JS

使用CSS精靈圖

緩存資源：使用緩存可減少向服務(wù)器的請(qǐng)求數(shù)，節(jié)省加載時(shí)間，所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長緩存(使用時(shí)間戳更新緩存)

緩存一切可緩存的資源

使用長緩存

使用外聯(lián)的樣式和腳本

壓縮代碼：減少資源大小可加快網(wǎng)頁顯示速度，對(duì)代碼進(jìn)行壓縮，并在服務(wù)器端設(shè)置GZip

壓縮代碼(多余的縮進(jìn)、空格和換行符)

啟用Gzip

無阻塞：頭部內(nèi)聯(lián)的樣式和腳本會(huì)阻塞頁面的渲染，樣式放在頭部并使用link方式引入，腳本放在尾部并使用異步方式加載

首屏加載：首屏快速顯示可大大提升用戶對(duì)頁面速度的感知，應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化

按需加載：將不影響首屏的資源和當(dāng)前屏幕不用的資源放到用戶需要時(shí)才加載，可大大提升顯示速度和降低總體流量(按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能)

懶加載

滾屏加載

Media Query加載

預(yù)加載：大型資源頁面可使用Loading，資源加載完成后再顯示頁面，但加載時(shí)間過長，會(huì)造成用戶流失

可感知Loading：進(jìn)入頁面時(shí)Loading

不可感知Loading：提前加載下一頁

壓縮圖像：使用圖像時(shí)選擇最合適的格式和大小，然后使用工具壓縮，同時(shí)在代碼中用srcset來按需顯示(過度壓縮圖像大小影響圖像顯示效果)

使用TinyJpg和TinyPng壓縮圖像

使用CSS3、SVG、IconFont代替圖像

使用img的srcset按需加載圖像

選擇合適的圖像：webp優(yōu)于jpg，png8優(yōu)于gif

選擇合適的大小：首次加載不大于1014kb、不寬于640px

PS切圖時(shí)D端圖像保存質(zhì)量為80，M端圖像保存質(zhì)量為60

減少Cookie：Cookie會(huì)影響加載速度，靜態(tài)資源域名不使用Cookie

避免重定向：重定向會(huì)影響加載速度，在服務(wù)器正確設(shè)置避免重定向

異步加載第三方資源：第三方資源不可控會(huì)影響頁面的加載和顯示，要異步加載第三方資源

加載過程是最為耗時(shí)的過程，可能會(huì)占到總耗時(shí)的`80%時(shí)間(優(yōu)化重點(diǎn))

執(zhí)行優(yōu)化
CSS寫在頭部，JS寫在尾部并異步

避免img、iframe等的src為空：空src會(huì)重新加載當(dāng)前頁面，影響速度和效率

盡量避免重置圖像大小：多次重置圖像大小會(huì)引發(fā)圖像的多次重繪，影響性能

圖像盡量避免使用DataURL：DataURL圖像沒有使用圖像的壓縮算法，文件會(huì)變大，并且要解碼后再渲染，加載慢耗時(shí)長

執(zhí)行處理不當(dāng)會(huì)阻塞頁面加載和渲染

渲染優(yōu)化
設(shè)置viewport：HTML的viewport可加速頁面的渲染

<meta?name="viewport"?content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
減少DOM節(jié)點(diǎn)：DOM節(jié)點(diǎn)太多影響頁面的渲染，盡量減少DOM節(jié)點(diǎn)

優(yōu)化動(dòng)畫

盡量使用CSS3動(dòng)畫

合理使用requestAnimationFrame動(dòng)畫代替setTimeout

適當(dāng)使用Canvas動(dòng)畫：5個(gè)元素以內(nèi)使用CSS動(dòng)畫，5個(gè)元素以上使用Canvas動(dòng)畫，iOS8+可使用WebGL動(dòng)畫

優(yōu)化高頻事件：scroll、touchmove等事件可導(dǎo)致多次渲染

函數(shù)節(jié)流

函數(shù)防抖

使用requestAnimationFrame監(jiān)聽幀變化：使得在正確的時(shí)間進(jìn)行渲染

增加響應(yīng)變化的時(shí)間間隔：減少重繪次數(shù)

GPU加速：使用某些HTML5標(biāo)簽和CSS3屬性會(huì)觸發(fā)GPU渲染，請(qǐng)合理使用(過渡使用會(huì)引發(fā)手機(jī)耗電量增加)

HTML標(biāo)簽：video、canvas、webgl

CSS屬性：opacity、transform、transition

樣式優(yōu)化
避免在HTML中書寫style

避免CSS表達(dá)式：CSS表達(dá)式的執(zhí)行需跳出CSS樹的渲染

移除CSS空規(guī)則：CSS空規(guī)則增加了css文件的大小，影響CSS樹的執(zhí)行

正確使用display：display會(huì)影響頁面的渲染

display:inline后不應(yīng)該再使用float、margin、padding、width和height

display:inline-block后不應(yīng)該再使用float

display:block后不應(yīng)該再使用vertical-align

display:table-*后不應(yīng)該再使用float和margin

不濫用float：float在渲染時(shí)計(jì)算量比較大，盡量減少使用

不濫用Web字體：Web字體需要下載、解析、重繪當(dāng)前頁面，盡量減少使用

不聲明過多的font-size：過多的font-size影響CSS樹的效率

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

標(biāo)準(zhǔn)化各種瀏覽器前綴

無前綴屬性應(yīng)放在最后

CSS動(dòng)畫屬性只用-webkit-、無前綴兩種

其它前綴為-webkit-、-moz-、-ms-、無前綴四種：Opera改用blink內(nèi)核，-o-已淘汰

避免讓選擇符看起來像正則表達(dá)式：高級(jí)選擇符執(zhí)行耗時(shí)長且不易讀懂，避免使用

腳本優(yōu)化
減少重繪和回流

避免不必要的DOM操作

避免使用document.write

減少drawImage

盡量改變class而不是style，使用classList代替className

緩存DOM選擇與計(jì)算：每次DOM選擇都要計(jì)算和緩存

緩存.length的值：每次.length計(jì)算用一個(gè)變量保存值

盡量使用事件代理：避免批量綁定事件

盡量使用id選擇器：id選擇器選擇元素是最快的

touch事件優(yōu)化：使用tap(touchstart和touchend)代替click(注意touch響應(yīng)過快，易引發(fā)誤操作)

常用規(guī)則
雅虎軍規(guī)
雅虎團(tuán)隊(duì)通過大量實(shí)踐總結(jié)出以下7類35條前端優(yōu)化規(guī)則，規(guī)則詳情請(qǐng)參考這位兄弟的《雅虎前端優(yōu)化35條規(guī)則翻譯》。

內(nèi)容

Make Fewer HTTP Requests：減少HTTP請(qǐng)求數(shù)

Reduce DNS Lookups：減少DNS查詢

Avoid Redirects：避免重定向

Make Ajax Cacheable：緩存AJAX請(qǐng)求

Postload Components：延遲加載資源

Preload Components：預(yù)加載資源

Reduce The Number Of DOM Elements：減少DOM元素?cái)?shù)量

Split Components Across Domains：跨域拆分資源

Minimize The Number Of Iframes：減少iframe數(shù)量

No 404s：消除404錯(cuò)誤

樣式

Put Stylesheets At The Top：置頂樣式

Avoid CSS Expressions：避免CSS表達(dá)式

Choose <link> Over @import：選擇<link>代替@import

Avoid Filters：避免濾鏡

腳本

Put Scripts At The Bottom：置底腳本

Make JavaScript And CSS External：使用外部JS和CSS

Minify JavaScript And CSS：壓縮JS和CSS

Remove Duplicate Scripts：刪除重復(fù)腳本

Minimize DOM Access：減少DOM操作

Develop Smart Event Handlers：開發(fā)高效的事件處理

圖像

Optimize Images：優(yōu)化圖片

Optimize CSS Sprites：優(yōu)化CSS精靈圖

Don't Scale Images In HTML：不在HTML中縮放圖片

Make Favicon.ico Small And Cacheable：使用小體積可緩存的favicon

緩存

Reduce Cookie Size：減少Cookie大小

Use Cookie-Free Domains For Components：使用無Cookie域名的資源

移動(dòng)端

Keep Components Under 25kb：保持資源小于25kb

Pack Components Into A Multipart Document：打包資源到多部分文檔中

服務(wù)器

Use A Content Delivery Network：使用CDN

Add An Expires Or A Cache-Control Header：響應(yīng)頭添加Expires或Cache-Control

Gzip Components：Gzip資源

Configure ETags：配置ETags

Flush The Buffer Early：盡早輸出緩沖

Use Get For AJAX Requests：AJAX請(qǐng)求時(shí)使用get

Avoid Empty Image Src：避免圖片空鏈接

2-5-8原則
在前端開發(fā)中，此規(guī)則作為一種開發(fā)指導(dǎo)思路，針對(duì)瀏覽器頁面的性能優(yōu)化。

用戶在2秒內(nèi)得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度很快 Fast

用戶在2~5秒間得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度還行 Medium

用戶在5~8秒間得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度很慢，但還可以接受 Slow

用戶在8秒后仍然無法得到響應(yīng)，會(huì)感覺頁面的響應(yīng)速度垃圾死了(此時(shí)會(huì)有以下四種可能)

難道是網(wǎng)速不好，發(fā)起第二次請(qǐng)求 =>?刷新頁面

什么垃圾頁面呀，怎么還不打開 =>?離開頁面，有可能轉(zhuǎn)投競爭對(duì)手的網(wǎng)站

垃圾程序猿，做的是什么頁面啊 =>?咒罵開發(fā)此頁面的程序猿

斷網(wǎng)了 =>?網(wǎng)線斷了？Wi-Fi斷了？信號(hào)不好？話費(fèi)用完了？

知道這個(gè)規(guī)則的數(shù)字順序怎樣來的嗎，看下鍵盤右方的數(shù)字鍵盤由下往上排序：2-5-8

3秒鐘首屏指標(biāo)
此規(guī)則適用于M端，顧名思義就是打開頁面后3秒鐘內(nèi)完成渲染并展示內(nèi)容。

結(jié)語
寫到最后總結(jié)得差不多了，后續(xù)如果我想起還有哪些前端性能優(yōu)化遺漏的，會(huì)繼續(xù)在這篇文章上補(bǔ)全，同時(shí)也希望各位朋友對(duì)文章里的要點(diǎn)進(jìn)行補(bǔ)充或者提出自己的見解。歡迎在下方進(jìn)行評(píng)論或補(bǔ)充喔，喜歡的點(diǎn)個(gè)贊或收個(gè)藏，保證你在開發(fā)時(shí)用得上。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

本文題目：該如何優(yōu)化前端性能-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.chinadenli.net/article8/docpip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站、商城網(wǎng)站、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站策劃

廣告

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