前端性能优化-gzip
2023-02-18 16:29:43 时间
为什么要开启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
2.未开启GZIP,文件的传输大小为92.0KB,即文件的实际大小
相关文章
- 想做前端开发?推荐几个必备珍品组件库
- 高考完?入门级的开源项目带你开启编程之旅
- Flask 笔记
- MySSL HTTPS 评级 B 升 A+
- No module named MySQLdb
- SublimeText 修改文件扩展名的默认语法高亮
- chrome 错误 ERR_CACHE_READ_FAILURE
- 大数据的技术生态概述(转载)
- pyhive 连接 Hive 时错误
- Presto 常用配置及操作
- Hive 导入 parquet 格式数据
- uWSGI 踩坑记
- There was a problem confirming the ssl certificate: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:590) - skipping
- 认证
- SQLite向MySQL的数据库迁移
- ImportError: cannot import name UnrewindableBodyError
- Flask 启动报错 error: [Errno 10053]
- Nginx 优化静态文件访问
- MySQL 的性能(下篇)—— 性能优化方法
- MySQL 的性能(上篇)—— SQL 执行分析