前端性能的優(yōu)化，最直接的體現(xiàn)在用戶的體驗(yàn)上。當(dāng)用戶打開一個(gè)站點(diǎn)時(shí)，加載時(shí)間在十幾秒以上，肯定要瘋了。以下是自己的見解加解讀小冊(cè)內(nèi)容。強(qiáng)烈建議大家去看看這本掘金小冊(cè)，點(diǎn)擊自動(dòng)跳轉(zhuǎn)
- 自己知道的性能優(yōu)化。
- 圖片處理(svg,icon等）
- 靜態(tài)資源使用CDN
- 圖片/視頻懶加載
- 文件按需加載
- 代碼/css壓縮
...
- 小冊(cè)介紹性能優(yōu)化要點(diǎn)
- 圖片優(yōu)化
- DNS預(yù)解析
- 節(jié)流
- 防抖
- 預(yù)加載
- 預(yù)渲染
- 懶執(zhí)行
- 懶加載
- CDN
圖片處理
- 修飾類效果不用圖片，修飾類的圖片可以用CSS去代替，例如 箭頭，圓角，三角形等，具體做法可自行g(shù)oogle查看以下。
- 一些圖標(biāo)類型的小圖片，盡量用font-icon 去表示。
- 使用精靈圖/雪碧圖(Sprite)，然后利用圖片的定位取到對(duì)應(yīng)的圖。
- 小圖片使用base64轉(zhuǎn)換。這個(gè)在目前vue-cli的webpack配置已經(jīng)自動(dòng)實(shí)現(xiàn)，可以進(jìn)行在webpack中配置大小。
- 商品的縮略圖，尤其是移動(dòng)端，直接讓設(shè)計(jì)師按照提供相同大小的圖片，盡量不要用css去控制圖片的大小。
靜態(tài)資源CDN(內(nèi)容分發(fā)網(wǎng)絡(luò) content delivery network)
假設(shè)A地部署web應(yīng)用，但是B地的人要去訪問該站點(diǎn)，瀏覽器根據(jù)域名解析再通過DNS找到A地的服務(wù)器地址，然后去請(qǐng)求該站點(diǎn)的資源再返回B地，中間會(huì)浪費(fèi)一些時(shí)間，盡管超級(jí)短。那為什么不在B地使用服務(wù)器緩存靜態(tài)資源呢，這樣請(qǐng)求的時(shí)間肯定就減少了許多。這就是CDN的一個(gè)基本原理，就是盡可能多的在用戶的附近部署靜態(tài)資源服務(wù)器，用戶訪問時(shí)就會(huì)直接訪問到，自然訪問速度就上來了。
- 靜態(tài)資源使用CDN緩存
- CDN域名盡量與主站域名不同，否則會(huì)帶上cookie，浪費(fèi)流量
圖片懶加載
原理
- 將要顯示的圖片/視頻地址先保存在對(duì)應(yīng) 標(biāo)簽 的任一屬性上，標(biāo)簽先給默認(rèn)你地址，然后該標(biāo)簽在可視區(qū)域時(shí)，就替換掉默認(rèn)地址。
注意點(diǎn)
- 滾動(dòng)防抖
- 判斷圖片/視頻是否顯示成功
目前來說，大部分的開發(fā)都不會(huì)自己去實(shí)現(xiàn)一個(gè)，由于有很好的插件來實(shí)現(xiàn)。vue可以使用 vue-lazyload
路由，文件按需加載(主要依靠webpack)
當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。
路由按需加載
代碼壓縮，css預(yù)處理器
如果使用腳手架搭建起來的項(xiàng)目，webpack已經(jīng)幫我們配置好了壓縮的方式引入了各種相應(yīng)的loader，我們直接用就好。
css預(yù)處理器 sass less stylus
- 更加方便的使用css
- 定義變量，引用，嵌套，作用域
- 本質(zhì)上還是css，注意嵌套層級(jí)，最好不超過4級(jí)。
防抖 節(jié)流 操作鎖
- 防抖：事件一直觸發(fā)，停止了才去執(zhí)行相應(yīng)代碼。(scroll,input,change事件等)
- 節(jié)流：事件一直觸發(fā)，隔一段時(shí)間去執(zhí)行一次。(input事件，change事件等)
- 操作鎖: 避免重復(fù)執(zhí)行事件時(shí)，可以設(shè)置一個(gè)鎖，直到返回結(jié)果才解鎖，禁止多次請(qǐng)求。
