建站
咨詢
售后
建站咨詢
新聞中心
前言
發(fā)現(xiàn)總結(jié)性的小干貨可以為大家提升更好的開(kāi)發(fā)技巧和編碼思維，對(duì)代碼量產(chǎn)化提供更扎實(shí)的質(zhì)量和支持。這次我們來(lái)聊聊大家可能都比較關(guān)心的話題：性能優(yōu)化。
一說(shuō)到頁(yè)面的性能優(yōu)化，大家可能都會(huì)想起雅虎軍規(guī)、2-5-8原則、3秒鐘首屏指標(biāo)等規(guī)則，這些規(guī)則在開(kāi)發(fā)過(guò)程中不是強(qiáng)制要求的，但是有時(shí)候?yàn)榱俗非箜?yè)面性能的完美和體驗(yàn)，就不得不對(duì)原有的代碼進(jìn)行修改和優(yōu)化。
下面就結(jié)合自己三年多的開(kāi)發(fā)經(jīng)驗(yàn)和大量的項(xiàng)目實(shí)踐，整理出一些常用的性能優(yōu)化要點(diǎn)，同時(shí)再羅列一下雅虎軍規(guī)、2-5-8原則、3秒鐘首屏指標(biāo)這三個(gè)常用規(guī)則的要點(diǎn)。
為了方便記憶和閱讀，文章使用部分簡(jiǎn)寫(xiě)名詞，解釋如下
D端：桌面端頁(yè)面Desktop End Page
M端：移動(dòng)端頁(yè)面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)超過(guò)1014kb
M端因配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)
基于第五點(diǎn)，要合理處理代碼減少渲染損耗
基于第二點(diǎn)和第五點(diǎn)，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置
加載完成后，用戶交互使用時(shí)也需注意性能
加載優(yōu)化
減少HTTP請(qǐng)求：盡量減少頁(yè)面的請(qǐng)求數(shù)(首次加載同時(shí)請(qǐng)求數(shù)不能超過(guò)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è)置緩存，并且盡量使用長(zhǎng)緩存(使用時(shí)間戳更新緩存)
緩存一切可緩存的資源
使用長(zhǎng)緩存
使用外聯(lián)的樣式和腳本
壓縮代碼：減少資源大小可加快網(wǎng)頁(yè)顯示速度，對(duì)代碼進(jìn)行壓縮，并在服務(wù)器端設(shè)置GZip
壓縮代碼(多余的縮進(jìn)、空格和換行符)
啟用Gzip
無(wú)阻塞：頭部?jī)?nèi)聯(lián)的樣式和腳本會(huì)阻塞頁(yè)面的渲染，樣式放在頭部并使用link方式引入，腳本放在尾部并使用異步方式加載
首屏加載：首屏快速顯示可大大提升用戶對(duì)頁(yè)面速度的感知，應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化
按需加載：將不影響首屏的資源和當(dāng)前屏幕不用的資源放到用戶需要時(shí)才加載，可大大提升顯示速度和降低總體流量(按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能)
懶加載
滾屏加載
Media Query加載
預(yù)加載：大型資源頁(yè)面可使用Loading，資源加載完成后再顯示頁(yè)面，但加載時(shí)間過(guò)長(zhǎng)，會(huì)造成用戶流失
可感知Loading：進(jìn)入頁(yè)面時(shí)Loading
不可感知Loading：提前加載下一頁(yè)
壓縮圖像：使用圖像時(shí)選擇最合適的格式和大小，然后使用工具壓縮，同時(shí)在代碼中用srcset來(lái)按需顯示(過(guò)度壓縮圖像大小影響圖像顯示效果)
使用TinyJpg和TinyPng壓縮圖像
使用CSS3、SVG、IconFont代替圖像
使用img的srcset按需加載圖像
選擇合適的圖像：webp優(yōu)于jpg，png8優(yōu)于gif
選擇合適的大?。菏状渭虞d不大于1014kb、不寬于640px
PS切圖時(shí)D端圖像保存質(zhì)量為80，M端圖像保存質(zhì)量為60
減少Cookie：Cookie會(huì)影響加載速度，靜態(tài)資源域名不使用Cookie
避免重定向：重定向會(huì)影響加載速度，在服務(wù)器正確設(shè)置避免重定向
異步加載第三方資源：第三方資源不可控會(huì)影響頁(yè)面的加載和顯示，要異步加載第三方資源
加載過(guò)程是最為耗時(shí)的過(guò)程，可能會(huì)占到總耗時(shí)的`80%時(shí)間(優(yōu)化重點(diǎn))
執(zhí)行優(yōu)化
CSS寫(xiě)在頭部，JS寫(xiě)在尾部并異步
避免img、iframe等的src為空：空src會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率
盡量避免重置圖像大?。憾啻沃刂脠D像大小會(huì)引發(fā)圖像的多次重繪，影響性能
圖像盡量避免使用DataURL：DataURL圖像沒(méi)有使用圖像的壓縮算法，文件會(huì)變大，并且要解碼后再渲染，加載慢耗時(shí)長(zhǎng)
執(zhí)行處理不當(dāng)會(huì)阻塞頁(yè)面加載和渲染
渲染優(yōu)化
設(shè)置viewport：HTML的viewport可加速頁(yè)面的渲染
減少DOM節(jié)點(diǎn)：DOM節(jié)點(diǎn)太多影響頁(yè)面的渲染，盡量減少DOM節(jié)點(diǎn)
優(yōu)化動(dòng)畫(huà)
盡量使用CSS3動(dòng)畫(huà)
合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout
適當(dāng)使用Canvas動(dòng)畫(huà)：5個(gè)元素以內(nèi)使用CSS動(dòng)畫(huà)，5個(gè)元素以上使用Canvas動(dòng)畫(huà)，iOS8+可使用WebGL動(dòng)畫(huà)
優(yōu)化高頻事件：scroll、touchmove等事件可導(dǎo)致多次渲染
函數(shù)節(jié)流
函數(shù)防抖
使用requestAnimationFrame監(jiān)聽(tīng)?zhēng)兓菏沟迷谡_的時(shí)間進(jìn)行渲染
增加響應(yīng)變化的時(shí)間間隔：減少重繪次數(shù)
GPU加速：使用某些HTML5標(biāo)簽和CSS3屬性會(huì)觸發(fā)GPU渲染，請(qǐng)合理使用(過(guò)渡使用會(huì)引發(fā)手機(jī)耗電量增加)
HTML標(biāo)簽：video、canvas、webgl
CSS屬性：opacity、transform、transition
樣式優(yōu)化
避免在HTML中書(shū)寫(xiě)style
避免CSS表達(dá)式：CSS表達(dá)式的執(zhí)行需跳出CSS樹(shù)的渲染
移除CSS空規(guī)則：CSS空規(guī)則增加了css文件的大小，影響CSS樹(shù)的執(zhí)行
正確使用display：display會(huì)影響頁(yè)面的渲染
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)前頁(yè)面，盡量減少使用
不聲明過(guò)多的font-size：過(guò)多的font-size影響CSS樹(shù)的效率
值為0時(shí)不需要任何單位：為了瀏覽器的兼容性和性能，值為0時(shí)不要帶單位
標(biāo)準(zhǔn)化各種瀏覽器前綴
無(wú)前綴屬性應(yīng)放在最后
CSS動(dòng)畫(huà)屬性只用-webkit-、無(wú)前綴兩種
其它前綴為-webkit-、-moz-、-ms-、無(wú)前綴四種：Opera改用blink內(nèi)核，-o-已淘汰
避免讓選擇符看起來(lái)像正則表達(dá)式：高級(jí)選擇符執(zhí)行耗時(shí)長(zhǎng)且不易讀懂，避免使用
腳本優(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)過(guò)快，易引發(fā)誤操作)
常用規(guī)則
雅虎軍規(guī)
雅虎團(tuán)隊(duì)通過(guò)大量實(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 Over @import：選擇代替@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：開(kāi)發(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：使用無(wú)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原則
在前端開(kāi)發(fā)中，此規(guī)則作為一種開(kāi)發(fā)指導(dǎo)思路，針對(duì)瀏覽器頁(yè)面的性能優(yōu)化。
用戶在2秒內(nèi)得到響應(yīng)，會(huì)感覺(jué)頁(yè)面的響應(yīng)速度很快 Fast
用戶在2~5秒間得到響應(yīng)，會(huì)感覺(jué)頁(yè)面的響應(yīng)速度還行 Medium
用戶在5~8秒間得到響應(yīng)，會(huì)感覺(jué)頁(yè)面的響應(yīng)速度很慢，但還可以接受 Slow
用戶在8秒后仍然無(wú)法得到響應(yīng)，會(huì)感覺(jué)頁(yè)面的響應(yīng)速度垃圾死了(此時(shí)會(huì)有以下四種可能)
難道是網(wǎng)速不好，發(fā)起第二次請(qǐng)求 =>?刷新頁(yè)面
什么垃圾頁(yè)面呀，怎么還不打開(kāi) =>?離開(kāi)頁(yè)面，有可能轉(zhuǎn)投競(jìng)爭(zhēng)對(duì)手的網(wǎng)站
垃圾程序猿，做的是什么頁(yè)面啊 =>?咒罵開(kāi)發(fā)此頁(yè)面的程序猿
斷網(wǎng)了 =>?網(wǎng)線斷了？Wi-Fi斷了？信號(hào)不好？話費(fèi)用完了？
知道這個(gè)規(guī)則的數(shù)字順序怎樣來(lái)的嗎，看下鍵盤右方的數(shù)字鍵盤由下往上排序：2-5-8
3秒鐘首屏指標(biāo)
此規(guī)則適用于M端，顧名思義就是打開(kāi)頁(yè)面后3秒鐘內(nèi)完成渲染并展示內(nèi)容。
結(jié)語(yǔ)
寫(xiě)到最后總結(jié)得差不多了，后續(xù)如果我想起還有哪些前端性能優(yōu)化遺漏的，會(huì)繼續(xù)在這篇文章上補(bǔ)全，同時(shí)也希望各位朋友對(duì)文章里的要點(diǎn)進(jìn)行補(bǔ)充或者提出自己的見(jiàn)解。歡迎在下方進(jìn)行評(píng)論或補(bǔ)充喔，喜歡的點(diǎn)個(gè)贊或收個(gè)藏，保證你在開(kāi)發(fā)時(shí)用得上。
創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(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)已開(kāi)啟，新人活動(dòng)云服務(wù)器買多久送多久。
網(wǎng)站標(biāo)題：該如何優(yōu)化前端性能-創(chuàng)新互聯(lián)
分享URL：http://www.dlmjj.cn/article/docpip.html
