前端進(jìn)階(1)Web前端性能優(yōu)化

Web前端性能優(yōu)化, 不僅能夠改善站點(diǎn)的用戶(hù)體驗(yàn)，并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。下面將從1)服務(wù)器、2)html內(nèi)容、3)css、 4)javascript、 5)圖片等幾方面介紹具體的優(yōu)化操作。

目錄：

• 1. 服務(wù)器優(yōu)化
  • 1.1. 使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)
  • 1.2. 服務(wù)器使用http2.0協(xié)議
  • 1.3. GZIP壓縮
  • 1.4. 使用瀏覽器緩存
  • 1.5. 設(shè)置ETag
• 2. HTML內(nèi)容優(yōu)化
  • 2.1. 減少HTTP請(qǐng)求數(shù)
  • 2.2. 減少DNS查找
  • 2.3. 避免重定向 301/30x
  • 2.4. 避免在html標(biāo)簽中寫(xiě)style屬性
  • 2.5. 異步加載組件,預(yù)加載組件 (ansyc, defer)
  • 2.6. 延遲、分頁(yè)加載圖片
  • 2.7. 減少DOM元素?cái)?shù)量
  • 2.8. 最小化iframe的數(shù)量
  • 2.9. 避免404
  • 2.10. 對(duì)Ajax請(qǐng)求使用GET方法
  • 2.11. 避免空的圖像src
• 3. CSS優(yōu)化
  • 3.1. 將CSS代碼放在HTML頁(yè)面的頂部
  • 3.2. 合并、壓縮CSS
  • 3.3. CSS選擇符優(yōu)化
  • 3.4. 避免使用CSS表達(dá)式
  • 3.5. 使用來(lái)代替@import
  • 3.6. 避免使用Filters
• 4. javascript優(yōu)化
  • 4.1. 將JavaScript腳本放在頁(yè)面的底部
  • 4.2. 將JavaScript和CSS作為外部文件來(lái)引用
  • 4.3. 合并、壓縮JavaScript
  • 4.4. 刪除無(wú)用、重復(fù)的腳本
  • 4.5. 最小化DOM的訪問(wèn)
  • 4.6. 開(kāi)發(fā)智能的事件處理程序
  • 4.7. javascript代碼注意
• 5. 圖像優(yōu)化
  • 5.1. 優(yōu)化圖片大小
  • 5.2. 通過(guò)CSS Sprites優(yōu)化圖片
  • 5.3. 不要在HTML中使用縮放圖片
  • 5.4. favicon.ico要小而且可緩存
• 6. 其他
  • 6.1. 減小Cookie大小，盡量不使用cookie
  • 6.2. 負(fù)載均衡

1. 服務(wù)器優(yōu)化

1.1. 使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)

把網(wǎng)站內(nèi)容分散到多個(gè)、處于不同地域位置的服務(wù)器上可以加快下載速度。

1.2. 服務(wù)器使用http2.0協(xié)議

Http2.0的優(yōu)點(diǎn)

二進(jìn)制分幀

首部壓縮

流量控制

多路復(fù)用

請(qǐng)求優(yōu)先級(jí)

服務(wù)器推送

e.g 使用nginx, 要求 1)v1.9.5以上, 2)使用https；

1.3. GZIP壓縮

1.4. 使用瀏覽器緩存

CSS、javascript、logo、圖標(biāo)這些靜態(tài)資源文件更新的頻率都比較低，而這些文件又幾乎是每次http請(qǐng)求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。

通過(guò)設(shè)置http頭中的cache-control和expires的屬性，可設(shè)定瀏覽器緩存，減少網(wǎng)絡(luò)請(qǐng)求次數(shù)。

1.5. 設(shè)置ETag

ETags(Entity tags，實(shí)體標(biāo)簽)是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制。

2. HTML內(nèi)容優(yōu)化

2.1. 減少HTTP請(qǐng)求數(shù)

這條策略是最重要最有效的，因?yàn)橐粋€(gè)完整的請(qǐng)求要經(jīng)過(guò)DNS尋址，與服務(wù)器建立連接，發(fā)送數(shù)據(jù)，等待服務(wù)器響應(yīng)，接收數(shù)據(jù)這樣一個(gè)消耗時(shí)間成本和資源成本的復(fù)雜的過(guò)程。 常見(jiàn)方法：

合并多個(gè)CSS文件和js文件, 并進(jìn)行最小化處理。

利用CSS Sprites整合圖像，

行內(nèi)圖片Base64編碼，使用 data：URL scheme在實(shí)際的頁(yè)面嵌入圖像數(shù)據(jù)

合理設(shè)置HTTP緩存

2.2. 減少DNS查找

為了減少DNS的詢(xún)次數(shù)，最好的解決方法就是在頁(yè)面中減少不同的域名請(qǐng)求的機(jī)會(huì)。

2.3. 避免重定向 301/30x

如果重定向的話，就需要在訪問(wèn)過(guò)程中重復(fù)發(fā)起一連串的動(dòng)作，會(huì)消耗很多時(shí)間，因此避免出現(xiàn)多次重定向地址或資源的訪問(wèn)。

2.4. 避免在html標(biāo)簽中寫(xiě)style屬性

js,css 寫(xiě)到單獨(dú)的文件中，便于瀏覽器緩存。

2.5. 異步加載組件,預(yù)加載組件 (ansyc, defer)

ansyc, defer不會(huì)阻塞瀏覽器的文檔解析。

ansyc用于異步加載

defer用于預(yù)加載

2.6. 延遲、分頁(yè)加載圖片

對(duì)于圖片而言，在頁(yè)面剛加載的時(shí)候可以只加載第一屏，當(dāng)用戶(hù)繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來(lái)，假如用戶(hù)只對(duì)第一屏的內(nèi)容感興趣時(shí)，那剩余的圖片請(qǐng)求就都節(jié)省了。

2.7. 減少DOM元素?cái)?shù)量

頁(yè)面中存在大量DOM元素,會(huì)導(dǎo)致javascript遍歷DOM的效率變慢。

2.8. 最小化iframe的數(shù)量

iframes 提供了一個(gè)簡(jiǎn)單的方式把一個(gè)網(wǎng)站的內(nèi)容嵌入到另一個(gè)網(wǎng)站中。但其創(chuàng)建速度比其他包括JavaScript和CSS的DOM元素的創(chuàng)建慢了1-2個(gè)數(shù)量級(jí)。

2.9. 避免404

HTTP請(qǐng)求時(shí)間消耗是很大的，因此使用HTTP請(qǐng)求來(lái)獲得一個(gè)沒(méi)有用處的響應(yīng)(例如404沒(méi)有找到頁(yè)面)是完全沒(méi)有必要的，它只會(huì)降低用戶(hù)體驗(yàn)而不會(huì)有一點(diǎn)好處。

2.10. 對(duì)Ajax請(qǐng)求使用GET方法

2.11. 避免空的圖像src

3. CSS優(yōu)化

3.1. 將CSS代碼放在HTML頁(yè)面的頂部

3.2. 合并、壓縮CSS

3.3. CSS選擇符優(yōu)化

瀏覽器對(duì)選擇符的解析是從右往左進(jìn)行的

按照ID查詢(xún)效率最高

3.4. 避免使用CSS表達(dá)式

3.5. 使用來(lái)代替@import

3.6. 避免使用Filters

4. javascript優(yōu)化

4.1. 將JavaScript腳本放在頁(yè)面的底部

4.2. 將JavaScript和CSS作為外部文件來(lái)引用

在實(shí)際應(yīng)用中使用外部文件可以提高頁(yè)面速度，因?yàn)镴avaScript和CSS文件都能在瀏覽器中產(chǎn)生緩存。

4.3. 合并、壓縮JavaScript

4.4. 刪除無(wú)用、重復(fù)的腳本

4.5. 最小化DOM的訪問(wèn)

使用JavaScript訪問(wèn)DOM元素比較慢

4.6. 開(kāi)發(fā)智能的事件處理程序

4.7. javascript代碼注意

減少作用域鏈查找(多用局部變量，少訪問(wèn)全局變量)

減少閉包的使用，避免內(nèi)存泄漏

謹(jǐn)慎使用with

避免使用eval Function函數(shù)

字符串拼接， Javascript中使用”+” 號(hào)來(lái)拼接字符串效率是比較低，建議使用數(shù)組的 join方法

5. 圖像優(yōu)化

5.1. 優(yōu)化圖片大小

5.2. 通過(guò)CSS Sprites優(yōu)化圖片

5.3. 不要在HTML中使用縮放圖片

5.4. favicon.ico要小而且可緩存

6. 其他

6.1. 減小Cookie大小，盡量不使用cookie

cookie包含在每次請(qǐng)求和響應(yīng)中，太大的cookie會(huì)嚴(yán)重影響數(shù)據(jù)傳輸

6.2. 負(fù)載均衡

負(fù)載均衡load balancer，降低每個(gè)站點(diǎn)的請(qǐng)求書(shū)，提高單個(gè)請(qǐng)求的響應(yīng)時(shí)間。

總結(jié)

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

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