- 相關(guān)推薦
淺談前端性能優(yōu)化
1、前端性能優(yōu)化的一點(diǎn)：
對js、css、圖片等進(jìn)行壓縮，盡可能減小文件的大小，減少文件下載的時(shí)間，從而減少網(wǎng)頁(yè)響應的時(shí)間。
2、前端性能優(yōu)化的另一點(diǎn)：
對HTTP傳輸進(jìn)行壓縮，即在js，css、圖片等資源已經(jīng)壓縮的基礎上（其實(shí)，文件的壓縮與否均可，文件的壓縮跟HTTP傳輸過(guò)程的壓縮沒(méi)關(guān)系），在HTTP傳輸過(guò)程中的再次壓縮。
3、HTTP1.1的Accept-Encoding和content-Encoding：
從HTTP1.1開(kāi)始，客戶(hù)端可以通過(guò)Accept-Encoding頭來(lái)聲明瀏覽器支持的壓縮方式，服務(wù)端通過(guò)content-Encoding來(lái)啟用壓縮，配置壓縮的文件類(lèi)型，壓縮方式。當客戶(hù)端的請求到達服務(wù)器，服務(wù)器對資源進(jìn)行壓縮后，返回給客戶(hù)端，客戶(hù)端按照相應的方式進(jìn)行解析。
eg：
客戶(hù)端（HTTP請求頭）——accept-encoding: gzip, deflate, sdch, br
服務(wù)器（HTTP響應頭）——content-encoding:gzip
壓縮驗證查看效果：
文件傳輸前的大小——通過(guò)屬性查看
文件傳輸過(guò)程中的大小——通過(guò)Network中的Size查看
4、壓縮方式選擇：
gzip是GUNzip的縮寫(xiě)，使用無(wú)損壓縮，壓縮效果最佳，已經(jīng)成為使用最為普遍、支持的瀏覽器最多的數據壓縮格式。
天貓、淘寶、京東、蘇寧、騰訊、百度等大型網(wǎng)站都使用gzip壓縮方式。
5、如何使用gzip壓縮
客戶(hù)端不用做任何配置，在服務(wù)端配置即可，不同服務(wù)器的配置方法也不盡相同。
以tomcat服務(wù)器的配置為例：
找到tomcat安裝目錄下的conf文件夾下的server.xml文件，進(jìn)行如下配置，重啟tomcat即可：
�、� compress="on" ：表示開(kāi)啟壓縮。
�、� compressionMinSize="2048"：表示對大于2KB的文件進(jìn)行壓縮
�、� compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/png,image/jpeg,image/gif"：表示將進(jìn)行壓縮的文件類(lèi)型，對js，css，圖片壓縮可以大大提升壓縮效果。
注意：不應該對圖片進(jìn)行再壓縮，因為圖片本身已經(jīng)被壓縮過(guò)，如果再進(jìn)行g(shù)zip壓縮，可能得到的結果是和圖片本身大小相差不大，純粹是浪費服務(wù)器的CPU資源來(lái)做無(wú)用功。
6、對HTTP傳輸內容進(jìn)行壓縮的優(yōu)、缺點(diǎn)：
�、� 優(yōu)點(diǎn)：減少HTTP響應時(shí)間，提升傳輸效率。
�、� 缺點(diǎn)：壓縮過(guò)程占用服務(wù)器額外的CPU周期，客戶(hù)端也要對壓縮文件進(jìn)行解壓縮，這也需要占用部分時(shí)間。
隨著(zhù)硬件性能不斷提高，上述問(wèn)題正在不斷弱化，國內外大型網(wǎng)站都對HTTP傳輸進(jìn)行壓縮。
【淺談前端性能優(yōu)化】相關(guān)文章：
淺談的作文11-30
淺談教學(xué)體會(huì )02-28
淺談穿越作文12-25
淺談共享作文09-02
淺談分享閱讀的體會(huì )02-29
淺談穿越作文(精華)12-26
淺談包裝作文12-19