大話WEB前端性能優(yōu)化基本套路

前言

前端性能優(yōu)化這是一個(gè)老生常談的話題，但是還是有很多人沒有真正的重視起來(lái)，或者說(shuō)還沒有產(chǎn)生這種意識(shí)。

當(dāng)用戶打開頁(yè)面，首屏加載速度越慢，流失用戶的概率就越大，在體驗(yàn)產(chǎn)品的時(shí)候性能和交互對(duì)用戶的影響是最直接的，推廣拉新是一門藝術(shù)，用戶的留存是一門技術(shù)，拉進(jìn)來(lái)留住用戶，產(chǎn)品體驗(yàn)很關(guān)鍵，這里我以美柚的頁(yè)面為例子，用實(shí)例展開說(shuō)明前端優(yōu)化的基本套路（適合新手上車）。

WEB性能優(yōu)化套路

基礎(chǔ)套路1：減少資源體積

css

• 壓縮

• 響應(yīng)頭GZIP

js

• 壓縮

• 響應(yīng)頭GZIP

html

• 輸出壓縮

• 響應(yīng)頭GZIP

圖片

• 壓縮

• 使用Webp格式

• cookie

  • 注意cookie體積，合理設(shè)置過期時(shí)間

基礎(chǔ)套路2：控制請(qǐng)求數(shù)

• js

  • 合并

• css

  • 合并

• 圖片

  • 合并

        base64(常用圖標(biāo)：如logo等)  

• 接口

  • 數(shù)量控制

  • 異步ajax

• 合理使用緩存機(jī)制

  • 瀏覽器緩存

• js編碼

  • Require.JS 按需加載

  • 異步加載js

  • lazyload圖片

基礎(chǔ)套路3：靜態(tài)資源CDN

• 請(qǐng)求走CDN

  • html

  • p_w_picpath

  • js

  • css

綜合套路

• 圖片地址獨(dú)立域名

  • 與業(yè)務(wù)不同域名可以減少請(qǐng)求頭里不必要的cookie傳輸

• 提高渲染速度

  • js放到頁(yè)面底部，body標(biāo)簽底部

  • css放到頁(yè)面頂部，head標(biāo)簽里

• 代碼

  • 代碼優(yōu)化：css/js/html

  • 預(yù)加載，如：分頁(yè)預(yù)加載，快滾動(dòng)到底部的時(shí)候以前加載下一頁(yè)數(shù)據(jù)

拓展資料

• 移動(dòng)H5前端性能優(yōu)化指南

• Web性能優(yōu)化：圖片優(yōu)化

• WebP 探尋之路

• 淺談瀏覽器http的緩存機(jī)制

• 常見的前端性能優(yōu)化手段都有哪些？都有多大收益？

• 前端性能優(yōu)化相關(guān)

性能輔助工具

• 智圖-Webp

• 谷歌 PageSpeed Insights(網(wǎng)頁(yè)載入速度檢測(cè)工具，需要×××)

• 入門Webpack，看這篇就夠了

• 前端構(gòu)建工具gulpjs的使用介紹及技巧

• Gulp 入門指南

看完上面的套路介紹

• 可能有人會(huì)說(shuō)：我在前端界混了這么多年，這些我都知道，只不過我不想去做

  • 我答： 知道做不到，等于不知道

• 也可能有人會(huì)說(shuō)：壓縮合并等這些操作好繁瑣，因?yàn)閼?，所以不?/span>

  • 我答： 現(xiàn)在前端構(gòu)建工具都很強(qiáng)大，如:grunt、gulp、webpack，支持各種插件操作，還不知道就說(shuō)明你OUT了

因?yàn)槲抑饕?fù)責(zé)后端相關(guān)工作，前端并不是我擅長(zhǎng)的，但是平時(shí)也喜歡關(guān)注前端前沿技術(shù)，這里以我的視角和開發(fā)經(jīng)驗(yàn)梳理出基本套路。

套路點(diǎn)到為止，具體實(shí)施可以通過拓展資料進(jìn)行深入了解，如有疑義或者補(bǔ)充請(qǐng)留言懟。

有任何想說(shuō)的歡迎到原文來(lái)留言哦
轉(zhuǎn)載請(qǐng)申明原文地址，謝謝合作

感謝你的支持，我會(huì)繼續(xù)努力！~