為了讓用戶得到更好的體驗(yàn)，我們經(jīng)常會(huì)采用一些手段來(lái)優(yōu)化我們的前端工程，下面給大家簡(jiǎn)單介紹一些前端優(yōu)化的方案

參照雅虎前端軍規(guī)進(jìn)行簡(jiǎn)單網(wǎng)頁(yè)的優(yōu)化

我們的優(yōu)化原則有以下幾個(gè)：

• 能緩存的，盡量強(qiáng)緩存。
• 引入外部資源時(shí)不要出現(xiàn)超時(shí)、404的狀況。
• 減少HTTP請(qǐng)求數(shù)。
• 合理設(shè)置cookie的大小以及過(guò)期時(shí)間。
• 合理利用懶加載。

網(wǎng)頁(yè)內(nèi)容的優(yōu)化

1、懶加載數(shù)據(jù)。
首先根據(jù)標(biāo)簽的left和top屬性判斷是否顯示在了屏幕中（如果顯示在屏幕中，其left和top屬性值應(yīng)該是在0到窗口長(zhǎng)寬之間）。
如果顯示在屏幕中，則將src標(biāo)簽的內(nèi)容替換為圖片的url。

2、使用外部引入的css和js文件，并且引入的css和js越少越好（HTTP2.0不適用）。
這里可以使用webpack打包這些文件，也可以使用強(qiáng)緩存與協(xié)商緩存來(lái)緩存這些文件。

3、不要在中縮放圖片。
img計(jì)算縮放也需要時(shí)間

4、避免重定向。
重定向會(huì)重新渲染網(wǎng)頁(yè)。

5、盡量不要用iframe。
因?yàn)閕frame會(huì)阻塞渲染。

6、使用base64編碼將圖片嵌入到樣式表中，減少請(qǐng)求數(shù)（由于base64會(huì)比一般的圖片大一點(diǎn)，只適用于那些體積比較小但是很常用的圖片）。

7、使用雪碧圖（精靈圖）：
通過(guò)使用background-position：-xpx -ypx;來(lái)調(diào)整圖片的位置，不過(guò)HTTP2不適用，原因?yàn)镠TTP2實(shí)際上是多路復(fù)用的，只用一個(gè)TCP連接，所以多個(gè)圖片的請(qǐng)求也是在同一個(gè)TCP連接里，這樣能省下非常多的請(qǐng)求時(shí)間，但壞處就是單連接開銷很大，如果要傳多個(gè)大文件，就很麻煩。

8、要有網(wǎng)站小圖標(biāo)favicon.ico。

如果沒(méi)有小圖標(biāo)，會(huì)引起404，拖慢網(wǎng)頁(yè)加載進(jìn)度。

9、能使用jpeg就不要用png，能使用png8就不要用png24。
（1）色彩豐富的、大的圖片切成jpg的；
（2）尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的；
（3）半透明的切成png24。

10、使用canvas壓縮圖片。

css的優(yōu)化

1、避免使用@import。
使用@import相當(dāng)于將引入的css放在了頁(yè)面底部，因?yàn)槭褂?#64;import引用的文件只有在引用它的那個(gè)css文件被下載、解析之后，瀏覽器才會(huì)知道還有另外一個(gè)css需要下載，這時(shí)才去下載，然后下載后開始解析、構(gòu)建render tree等一系列操作。因此使用@import會(huì)拖慢渲染的過(guò)程。

2、將樣式表放在head中。
如果放在body中，可能出現(xiàn)在瀏覽器下載好css樣式表之前，組件就已經(jīng)加載好了的情況，這可能會(huì)導(dǎo)致重新渲染。

3、避免使用css表達(dá)式。
如：expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
解析表達(dá)式和計(jì)算都需要時(shí)間。

JavaScript的優(yōu)化

1、盡量減少DOM訪問(wèn)。

2、使用事件代理（減少DOM操作）。

3、把腳本放在底部（加載腳本時(shí)會(huì)阻塞頁(yè)面渲染）。

4、合理使用節(jié)流函數(shù)和防抖函數(shù)。

使用CDN優(yōu)化加載速度

CDN即內(nèi)容分發(fā)網(wǎng)絡(luò)。它依靠部署在各地的邊緣服務(wù)器，通過(guò)中心平臺(tái)的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問(wèn)響應(yīng)速度和命中率。

針對(duì)webpack打包優(yōu)化

針對(duì)webpack打包優(yōu)化主要是減少打包后的代碼體積，主要的措施有：
1、進(jìn)行tree-shaking
2、使用UglifyJS等插件壓縮代碼
3、分割代碼、按需加載

我們可以使用webpack-bundle-analyzer這個(gè)插件來(lái)查看每部分代碼的加載耗時(shí)，進(jìn)而分析可以優(yōu)化的地方。

開啟Gzip壓縮

這是一個(gè)非常有效的優(yōu)化方案，可以減少60%左右的代碼體積，使用node.js+express可以非常便捷的開啟Gzip

const express = require('express'); const app = express(); const compression = require('compression'); app.use(compression()); // 注意，使用compression中間件必須要在其他中間件之前

總結(jié)

以上是生活随笔為你收集整理的前端优化方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。