前端性能優(yōu)化的七大手段嚼摩，記個(gè)筆記

前面的話

????????本文將詳細(xì)介紹前端性能優(yōu)化的七大手段，包括減少請(qǐng)求數(shù)量阅签、減小資源大小掐暮、優(yōu)化網(wǎng)絡(luò)連接、優(yōu)化資源加載政钟、減少重繪回流路克、使用性能更好的API和構(gòu)建優(yōu)化。

減少請(qǐng)求數(shù)量

【合并】

　　如果不進(jìn)行文件合并养交，有如下3個(gè)隱患

　　1精算、文件與文件之間有插入的上行請(qǐng)求，增加了N-1個(gè)網(wǎng)絡(luò)延遲

　　2碎连、受丟包問題影響更嚴(yán)重

　　3灰羽、經(jīng)過代理服務(wù)器時(shí)可能會(huì)被斷開

但是，文件合并本身也有自己的問題

　　1鱼辙、首屏渲染問題

　　2廉嚼、緩存失效問題

　　所以，對(duì)于文件合并倒戏，有如下改進(jìn)建議

　　1怠噪、公共庫合并

　　2、不同頁面單獨(dú)合并

【圖片處理】

　　1峭梳、雪碧圖

　　CSS雪碧圖是以前非常流行的技術(shù)舰绘，把網(wǎng)站上的一些圖片整合到一張單獨(dú)的圖片中，可以減少網(wǎng)站的HTTP請(qǐng)求數(shù)量葱椭，但是當(dāng)整合圖片比較大時(shí)，一次加載比較慢口四。隨著字體圖片孵运、SVG圖片的流行，該技術(shù)漸漸退出了歷史舞臺(tái)

　　2蔓彩、Base64

　　將圖片的內(nèi)容以Base64格式內(nèi)嵌到HTML中治笨，可以減少HTTP請(qǐng)求數(shù)量。但是赤嚼，由于Base64編碼用8位字符表示信息中的6個(gè)位旷赖，所以編碼后大小大約比原始值擴(kuò)大了 33%

　　3、使用字體圖標(biāo)來代替圖片

【減少重定向】

　　盡量避免使用重定向更卒，當(dāng)頁面發(fā)生了重定向等孵，就會(huì)延遲整個(gè)HTML文檔的傳輸。在HTML文檔到達(dá)之前蹂空，頁面中不會(huì)呈現(xiàn)任何東西俯萌，也沒有任何組件會(huì)被下載果录，降低了用戶體驗(yàn)

　　如果一定要使用重定向，如http重定向到https咐熙，要使用301永久重定向弱恒，而不是302臨時(shí)重定向。因?yàn)槠迥眨绻褂?02返弹，則每一次訪問http，都會(huì)被重定向到https的頁面爪飘。而永久重定向琉苇，在第一次從http重定向到https之后 ，每次訪問http悦施，會(huì)直接返回https的頁面

【使用緩存】

　　使用cach-control或expires這類強(qiáng)緩存時(shí)并扇，緩存不過期的情況下，不向服務(wù)器發(fā)送請(qǐng)求抡诞。強(qiáng)緩存過期時(shí)穷蛹，會(huì)使用last-modified或etag這類協(xié)商緩存，向服務(wù)器發(fā)送請(qǐng)求昼汗，如果資源沒有變化肴熏，則服務(wù)器返回304響應(yīng)，瀏覽器繼續(xù)從本地緩存加載資源顷窒；如果資源更新了蛙吏，則服務(wù)器將更新后的資源發(fā)送到瀏覽器，并返回200響應(yīng)

【不使用CSS @import】

　　CSS的@import會(huì)造成額外的請(qǐng)求

【避免使用空的src和href】

　　a標(biāo)簽設(shè)置空的href鞋吉，會(huì)重定向到當(dāng)前的頁面地址

　　form設(shè)置空的method鸦做，會(huì)提交表單到當(dāng)前的頁面地址

減小資源大小

【壓縮】

　　1、HTML壓縮

　　HTML代碼壓縮就是壓縮在文本文件中有意義谓着，但是在HTML中不顯示的字符泼诱，包括空格，制表符赊锚，換行符等

　　2治筒、CSS壓縮

　　CSS壓縮包括無效代碼刪除與CSS語義合并

　　3、JS壓縮與混亂

　　JS壓縮與混亂包括無效字符及注釋的刪除舷蒲、代碼語義的縮減和優(yōu)化耸袜、降低代碼可讀性，實(shí)現(xiàn)代碼保護(hù)

　　4牲平、圖片壓縮

　　針對(duì)真實(shí)圖片情況堤框，舍棄一些相對(duì)無關(guān)緊要的色彩信息

【webp】

　　在安卓下可以使用webp格式的圖片，它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來更小的圖片體積胰锌，同等畫面質(zhì)量下骗绕，體積比jpg、png少了25%以上资昧，而且同時(shí)具備了無損和有損的壓縮模式酬土、Alpha 透明以及動(dòng)畫的特性

【開啟gzip】

　　HTTP協(xié)議上的GZIP編碼是一種用來改進(jìn)WEB應(yīng)用程序性能的技術(shù)。大流量的WEB站點(diǎn)常常使用GZIP壓縮技術(shù)來讓用戶感受更快的速度格带。這一般是指WWW服務(wù)器中安裝的一個(gè)功能撤缴，當(dāng)有人來訪問這個(gè)服務(wù)器中的網(wǎng)站時(shí)，服務(wù)器中的這個(gè)功能就將網(wǎng)頁內(nèi)容壓縮后傳輸?shù)絹碓L的電腦瀏覽器中顯示出來叽唱。一般對(duì)純文本內(nèi)容可壓縮到原大小的40%

優(yōu)化網(wǎng)絡(luò)連接

【使用CDN】

　　CDN全稱是Content Delivery Network屈呕，即內(nèi)容分發(fā)網(wǎng)絡(luò)，它能夠?qū)崟r(shí)地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接棺亭、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間等綜合信息將用戶的請(qǐng)求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上虎眨。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況镶摘，提高用戶訪問網(wǎng)站的響應(yīng)速度

【使用DNS預(yù)解析】

當(dāng)瀏覽器訪問一個(gè)域名的時(shí)候嗽桩，需要解析一次DNS，獲得對(duì)應(yīng)域名的ip地址凄敢。在解析過程中碌冶，按照瀏覽器緩存、系統(tǒng)緩存涝缝、路由器緩存扑庞、ISP(運(yùn)營(yíng)商)DNS緩存、根域名服務(wù)器拒逮、頂級(jí)域名服務(wù)器罐氨、主域名服務(wù)器的順序，逐步讀取緩存消恍，直到拿到IP地址

DNS Prefetch岂昭，即DNS預(yù)解析就是根據(jù)瀏覽器定義的規(guī)則，提前解析之后可能會(huì)用到的域名狠怨，使解析結(jié)果緩存到系統(tǒng)緩存中，縮短DNS解析時(shí)間邑遏，來提高網(wǎng)站的訪問速度

　　方法是在 head 標(biāo)簽里面寫上幾個(gè) link 標(biāo)簽

　　對(duì)以上幾個(gè)網(wǎng)站提前解析 DNS佣赖，由于它是并行的，不會(huì)堵塞頁面渲染记盒，這樣可以縮短資源加載的時(shí)間

【并行連接】

　　由于在HTTP1.1協(xié)議下憎蛤，chrome每個(gè)域名的最大并發(fā)數(shù)是6個(gè)。使用多個(gè)域名，可以增加并發(fā)數(shù)

【持久連接】

　　使用keep-alive或presistent來建立持久連接俩檬，持久連接降低了時(shí)延和連接建立的開銷萎胰，將連接保持在已調(diào)諧狀態(tài)，而且減少了打開連接的潛在數(shù)量

【管道化連接】

　　在HTTP2協(xié)議中棚辽，可以開啟管道化連接技竟，即單條連接的多路復(fù)用，每條連接中并發(fā)傳輸多個(gè)資源屈藐，這里就不需要添加域名來增加并發(fā)數(shù)了

優(yōu)化資源加載

【資源加載位置】

　　通過優(yōu)化資源加載位置，更改資源加載時(shí)機(jī)，使盡可能快地展示出頁面內(nèi)容臀晃，盡可能快地使功能可用

　　1苹丸、CSS文件放在head中，先外鏈包归，后本頁

　　2锨推、JS文件放在body底部，先外鏈公壤，后本頁

　　3换可、處理頁面、處理頁面布局的JS文件放在head中境钟，如babel-polyfill.js文件锦担、flexible.js文件

　　4、body中間盡量不寫style標(biāo)簽和script標(biāo)簽

【資源加載時(shí)機(jī)】

　　1慨削、異步script標(biāo)簽

　　defer:? 異步加載洞渔，在HTML解析完成后執(zhí)行。defer的實(shí)際效果與將代碼放在body底部類似

　　async:?異步加載缚态，加載完成后立即執(zhí)行

　　2磁椒、模塊按需加載

　　在SPA等業(yè)務(wù)邏輯比較復(fù)雜的系統(tǒng)中，需要根據(jù)路由來加載當(dāng)前頁面需要的業(yè)務(wù)模塊

　　按需加載玫芦，是一種很好的優(yōu)化網(wǎng)頁或應(yīng)用的方式浆熔。這種方式實(shí)際上是先把代碼在一些邏輯斷點(diǎn)處分離開，然后在一些代碼塊中完成某些操作后桥帆，立即引用或即將引用另外一些新的代碼塊医增。這樣加快了應(yīng)用的初始加載速度，減輕了它的總體體積老虫，因?yàn)槟承┐a塊可能永遠(yuǎn)不會(huì)被加載

　　webpack 提供了兩個(gè)類似的技術(shù)叶骨，優(yōu)先選擇的方式是使用符合 ECMAScript 提案 的 import() 語法。第二種則是使用 webpack 特定的 require.ensure

　　3祈匙、使用資源預(yù)加載preload和資源預(yù)讀取prefetch

　　preload讓瀏覽器提前加載指定資源忽刽，需要執(zhí)行時(shí)再執(zhí)行天揖，可以加速本頁面的加載速度

　　prefetch告訴瀏覽器加載下一頁面可能會(huì)用到的資源，可以加速下一個(gè)頁面的加載速度

　　4跪帝、資源懶加載與資源預(yù)加載

　　資源延遲加載也稱為懶加載今膊，延遲加載資源或符合某些條件時(shí)才加載某些資源

　　資源預(yù)加載是提前加載用戶所需的資源，保證良好的用戶體驗(yàn)

　　資源懶加載和資源預(yù)加載都是一種錯(cuò)峰操作伞剑，在瀏覽器忙碌的時(shí)候不做操作斑唬，瀏覽器空間時(shí)，再加載資源纸泄，優(yōu)化了網(wǎng)絡(luò)性能

減少重繪回流

【樣式設(shè)置】

　　1赖钞、避免使用層級(jí)較深的選擇器，或其他一些復(fù)雜的選擇器聘裁，以提高CSS渲染效率

　　2雪营、避免使用CSS表達(dá)式，CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)大但危險(xiǎn)方法衡便，它的問題就在于計(jì)算頻率很快献起。不僅僅是在頁面顯示和縮放時(shí)，就是在頁面滾動(dòng)镣陕、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要重新計(jì)算一次

　　3谴餐、元素適當(dāng)?shù)囟x高度或最小高度，否則元素的動(dòng)態(tài)內(nèi)容載入時(shí)呆抑，會(huì)出現(xiàn)頁面元素的晃動(dòng)或位置岂嗓，造成回流

　　4、給圖片設(shè)置尺寸鹊碍。如果圖片不設(shè)置尺寸厌殉，首次載入時(shí)，占據(jù)空間會(huì)從0到完全出現(xiàn)侈咕，上下左右都可能位移公罕，發(fā)生回流

　　5、不要使用table布局耀销，因?yàn)橐粋€(gè)小改動(dòng)可能會(huì)造成整個(gè)table重新布局楼眷。而且table渲染通常要3倍于同等元素時(shí)間

　　6、能夠使用CSS實(shí)現(xiàn)的效果熊尉，盡量使用CSS而不使用JS實(shí)現(xiàn)

【渲染層】

　　1罐柳、此外，將需要多次重繪的元素獨(dú)立為render layer渲染層狰住，如設(shè)置absolute硝清，可以減少重繪范圍

　　2、對(duì)于一些進(jìn)行動(dòng)畫的元素转晰，使用硬件渲染，從而避免重繪和回流

【DOM優(yōu)化】

　　1、緩存DOM

????????const div = document.getElementById('div')

　　由于查詢DOM比較耗時(shí)查邢，在同一個(gè)節(jié)點(diǎn)無需多次查詢的情況下蔗崎，可以緩存DOM

　　2、減少DOM深度及DOM數(shù)量

　　HTML 中標(biāo)簽元素越多扰藕，標(biāo)簽的層級(jí)越深缓苛，瀏覽器解析DOM并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持 DOM 元素簡(jiǎn)潔和層級(jí)較少邓深。

　　3未桥、批量操作DOM

　　由于DOM操作比較耗時(shí)，且可能會(huì)造成回流芥备，因此要避免頻繁操作DOM冬耿，可以批量操作DOM，先用字符串拼接完畢萌壳，再用innerHTML更新DOM

　　4亦镶、批量操作CSS樣式

　　通過切換class或者使用元素的style.csstext屬性去批量操作元素樣式

　　5、在內(nèi)存中操作DOM

　　使用DocumentFragment對(duì)象袱瓮，讓DOM操作發(fā)生在內(nèi)存中缤骨，而不是頁面上

　　6、DOM元素離線更新

　　對(duì)DOM進(jìn)行相關(guān)操作時(shí)尺借，例绊起、appendChild等都可以使用Document Fragment對(duì)象進(jìn)行離線操作，帶元素“組裝”完成后再一次插入頁面燎斩，或者使用display:none 對(duì)元素隱藏虱歪，在元素“消失”后進(jìn)行相關(guān)操作

　　7、DOM讀寫分離

　　瀏覽器具有惰性渲染機(jī)制瘫里，連接多次修改DOM可能只觸發(fā)瀏覽器的一次渲染实蔽。而如果修改DOM后，立即讀取DOM谨读。為了保證讀取到正確的DOM值局装，會(huì)觸發(fā)瀏覽器的一次渲染。因此劳殖，修改DOM的操作要與訪問DOM分開進(jìn)行

　　8铐尚、事件代理

　　事件代理是指將事件監(jiān)聽器注冊(cè)在父級(jí)元素上，由于子元素的事件會(huì)通過事件冒泡的方式向上傳播到父節(jié)點(diǎn)哆姻，因此宣增，可以由父節(jié)點(diǎn)的監(jiān)聽函數(shù)統(tǒng)一處理多個(gè)子元素的事件

　　利用事件代理，可以減少內(nèi)存使用矛缨，提高性能及降低代碼復(fù)雜度

　　9爹脾、防抖和節(jié)流

　　使用函數(shù)節(jié)流（throttle）或函數(shù)去抖（debounce）帖旨，限制某一個(gè)方法的頻繁觸發(fā)

　　10、及時(shí)清理環(huán)境

　　及時(shí)消除對(duì)象引用灵妨，清除定時(shí)器解阅，清除事件監(jiān)聽器，創(chuàng)建最小作用域變量泌霍，可以及時(shí)回收內(nèi)存

性能更好的API

　　1货抄、用對(duì)選擇器

　　選擇器的性能排序如下所示，盡量選擇性能更好的選擇器

id選擇器（#myid）

類選擇器（.myclassname）

標(biāo)簽選擇器（div,h1,p）

相鄰選擇器（h1+p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover,li:nth-child）

　　2朱转、使用requestAnimationFrame來替代setTimeout和setInterval

　　希望在每一幀剛開始的時(shí)候?qū)撁孢M(jìn)行更改蟹地，目前只有使用 requestAnimationFrame 能夠保證這一點(diǎn)。使用 setTimeout 或者 setInterval 來觸發(fā)更新頁面的函數(shù)藤为，該函數(shù)可能在一幀的中間或者結(jié)束的時(shí)間點(diǎn)上調(diào)用怪与，進(jìn)而導(dǎo)致該幀后面需要進(jìn)行的事情沒有完成，引發(fā)丟幀

　　3凉蜂、使用IntersectionObserver來實(shí)現(xiàn)圖片可視區(qū)域的懶加載

　　傳統(tǒng)的做法中琼梆，需要使用scroll事件，并調(diào)用getBoundingClientRect方法窿吩，來實(shí)現(xiàn)可視區(qū)域的判斷茎杂，即使使用了函數(shù)節(jié)流，也會(huì)造成頁面回流纫雁。使用IntersectionObserver煌往，則沒有上述問題

　　4、使用web worker

　　客戶端javascript一個(gè)基本的特性是單線程：比如轧邪，瀏覽器無法同時(shí)運(yùn)行兩個(gè)事件處理程序刽脖，它也無法在一個(gè)事件處理程序運(yùn)行的時(shí)候觸發(fā)一個(gè)計(jì)時(shí)器。Web Worker是HTML5提供的一個(gè)javascript多線程解決方案忌愚，可以將一些大計(jì)算量的代碼交由web Worker運(yùn)行曲管，從而避免阻塞用戶界面，在執(zhí)行復(fù)雜計(jì)算和數(shù)據(jù)處理時(shí)硕糊，這個(gè)API非常有用

　　但是院水，使用一些新的API的同時(shí)，也要注意其瀏覽器兼容性

webpack優(yōu)化

【打包公共代碼】

　　使用CommonsChunkPlugin插件简十，將公共模塊拆出來檬某，最終合成的文件能夠在最開始的時(shí)候加載一次，便存到緩存中供后續(xù)使用螟蝙。這會(huì)帶來速度上的提升恢恼，因?yàn)闉g覽器會(huì)迅速將公共的代碼從緩存中取出來，而不是每次訪問一個(gè)新頁面時(shí)胰默，再去加載一個(gè)更大的文件

　　webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個(gè)新的配置項(xiàng) optimization.splitChunks 和 optimization.runtimeChunk

　　通過設(shè)置 optimization.splitChunks.chunks: "all" 來啟動(dòng)默認(rèn)的代碼分割配置項(xiàng)

【動(dòng)態(tài)導(dǎo)入和按需加載】

　　webpack提供了兩種技術(shù)通過模塊的內(nèi)聯(lián)函數(shù)調(diào)用來分離代碼场斑，優(yōu)先選擇的方式是漓踢，使用符合 ECMAScript 提案 的 import() 語法。第二種和簸，則是使用 webpack 特定的 require.ensure

【剔除無用代碼】

　　tree shaking 是一個(gè)術(shù)語彭雾，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴于 ES2015 模塊系統(tǒng)中的靜態(tài)結(jié)構(gòu)特性锁保，例如 import 和 export。這個(gè)術(shù)語和概念實(shí)際上是興起于 ES2015 模塊打包工具 rollup

　　JS的tree shaking主要通過uglifyjs插件來完成半沽，CSS的tree shaking主要通過purify CSS來實(shí)現(xiàn)的

【長(zhǎng)緩存優(yōu)化】

　　1爽柒、將hash替換為chunkhash，這樣當(dāng)chunk不變時(shí)者填，緩存依然有效

　　2浩村、使用Name而不是id

　　每個(gè) module.id 會(huì)基于默認(rèn)的解析順序(resolve order)進(jìn)行增量。也就是說占哟，當(dāng)解析順序發(fā)生變化心墅，ID 也會(huì)隨之改變

　　下面來使用兩個(gè)插件解決這個(gè)問題。第一個(gè)插件是 NamedModulesPlugin榨乎，將使用模塊的路徑怎燥，而不是數(shù)字標(biāo)識(shí)符。雖然此插件有助于在開發(fā)過程中輸出結(jié)果的可讀性蜜暑，然而執(zhí)行時(shí)間會(huì)長(zhǎng)一些铐姚。第二個(gè)選擇是使用 HashedModuleIdsPlugin，推薦用于生產(chǎn)環(huán)境構(gòu)建

【公用代碼內(nèi)聯(lián)】

　　使用html-webpack-inline-chunk-plugin插件將mainfest.js內(nèi)聯(lián)到html文件中

原文鏈接：前端性能優(yōu)化的七大手段