前端性能優化-gzip


為什么要開啟GZIP

我們需要下載一個100KB的Javascript文件,正常的下載量就是100KB,如果我們把文件在服務端壓縮一下,壓縮成30kb,下載到客戶端再進行解壓,這樣就減少了大量的HTTP的傳輸時間,這就是GZIP的作用。

如何開啟服務器的GZIP

我們以windows版的Apache2.4為例,打開httpd.conf文件,因為開啟GZIP需要mod_deflate.so,所以首先把解注mod_deflate.so,然后增加下面的配置項:

#開啟GZIP

<IfModule mod_deflate.c>
   SetOutputFilter DEFLATE
   # example of how to compress ONLY html, plain text and xml
   # AddOutputFilterByType DEFLATE text/plain text/html text/xml
   # Don't compress binaries
   SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|iso|tar|bz2|sit|rar) no-gzip dont-vary
   # Don't compress images
   SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png)  no-gzip dont-vary
   # Don't compress PDFs
   SetEnvIfNoCase Request_URI .pdf no-gzip dont-vary
   # Don't compress flash files (only relevant if you host your own videos)
   SetEnvIfNoCase Request_URI .flv no-gzip dont-vary
   # Netscape 4.X has some problems
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   # Netscape 4.06-4.08 have some more problems
   BrowserMatch ^Mozilla/4.0[678] no-gzip
   # MSIE masquerades as Netscape, but it is fine
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   # Make sure proxies don't deliver the wrong content
   Header append Vary User-Agent env=!dont-vary
   # Setup custom deflate log
   DeflateFilterNote Input instr
   DeflateFilterNote Output outstr
   DeflateFilterNote Ratio ratio
   LogFormat '"%r" %{outstr}n/%{instr}n %{ratio}n%%' DEFLATE
   CustomLog logs/deflate_log DEFLATE
</IfModule>

 

重啟Apache,配置生效!

對比測試

我們以jquery-1.7.1.js為例,在不開啟GZIP和開啟GZIP下的文件大小進行對比

1.開啟GZIP,文件傳輸大小為32.7KB

image

2.未開啟GZIP,文件的傳輸大小為92.0KB,即文件的實際大小

image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM