当前位置: 首页 > Web前端 > HTML

如何使用gzip进行前端性能优化?

时间:2023-03-28 01:54:33 HTML

1.简介HTTP可以压缩传输的内容,减少网络实际传输数据的大小。原理是服务器用gzip压缩文件,然后传输,浏览器收到资源后解压。对js、text、json、css等纯文本进行压缩特别有效,无需更改代码即可提高网站的响应速度;压缩过程需要占用CPU资源,压缩大文件(图片、音乐等)。不但不能提高网站的响应速度,反而会增加服务器的压力,让网站有明显的卡顿感。2、nginx启用gzip服务器使用nginx,浏览器使用chrome,启用gzip,看实际优化效果。1.修改配置打开nginx配置文件sudonano/etc/nginx/nginx.conf,找到gzip对应的区域,添加如下配置,保存退出。#开启gzip,关闭offgzipon;#是否在http头中添加Vary:Accept-Encoding,建议开启gzip_varyon;#gzip压缩级别,1-9,数字越大,压缩效果越好,占用CPU时间越多。推荐6gzip_comp_level6;#设置压缩所需的缓冲区大小gzip_buffers168k;#设置gzip压缩的HTTP协议版本gzip_http_version1.1;#选择压缩文件类型,其值可以在mime.types文件中找到。gzip_typestext/plaintext/cssapplication/jsonapplication/javascript#启用gzip压缩的最小文件,小于设置值的文件将不压缩gzip_min_length1k;#gzip_proxiedany;2.重启nginx#1.重启:sudo/etc/init.d/nginxrestart#2.重新加载配置文件,不重启:sudo/etc/init.d/nginxreload3.查看gzip是否开启?打开网站;打开开发者工具(Windows快捷键Control+Shift+J,Mac快捷键Command+Option+J);如下图,响应头中有Content-Encoding:gzip,表示已经开启。4.查看gzip压缩效果?打开网站;打开开发者工具(windows快捷键Control+Shift+J,Mac快捷键Command+Option+J);如下图所示,73.9kb表示压缩后网络传输的大小;574kb表示实际文件大小。3、前端性能检测工具Lighthouse,是Google的一个开源项目。一键找出网站所有需要优化的内容和建议。安装使用,看这里!4.参考文档如何使用gzip进行前端性能优化?