您现在的位置是:首页 > Javascript
当前栏目
如何用gzip进行前端性能优化?
2023-03-20 14:51:22 时间
一、简介
HTTP 可以对传输的内容进行压缩,减少网络实际传输数据的大小。原理就是 服务器对文件进行 gzip 压缩后,再进行传输,浏览器收到资源后再解压的过程。
- 对于 js、text、json、css 这种纯文本进行压缩,效果特别好,不用改变代码即可提升网站响应速度;
- 压缩过程是需要花费 CPU 资源的,对大文件(图片、音乐等)进行压缩,不仅不能提升网站响应速度,还会增加服务器压力,让网站有明显的卡顿感。
二、nginx 开启 gzip
服务器使用 nginx,浏览器使用 chrome,开启 gzip,看看实际优化的效果。
1、修改配置
打开 nginx 的配置文件 sudo nano /etc/nginx/nginx.conf
,找到 gzip 对应区域,增加下面配置后,保存退出。
# 开启gzip,关闭用off
gzip on;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间,推荐6
gzip_comp_level 6;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 8k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# 选择压缩的文件类型,其值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/json application/javascript
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip_proxied any;
2、重启 nginx
# 1、重启:
sudo /etc/init.d/nginx restart
# 2、重新加载配置文件,无需重启:
sudo /etc/init.d/nginx reload
3、查看 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表示是实际文件的大小。
三、前端性能检测工具
lighthouse 是谷歌的开源项目,一键即可查找出网站所有需要优化的内容和建议。安装和使用,可以看这里!
四、参考文档
相关文章
- iFixit分享iPhone 13 Pro拆解报告:可维修性仅5/10分
- 微信安卓版 8.0.14 内测版发布,附开发者更新内容
- 从三个方面,帮你快速掌握「设计系统」的完整框架
- 下个月就来!谷歌安卓12正式版即将推送:国内用户不用等了!
- 有哪些组件值得学习?我梳理了八个大厂的设计组件!
- 华为鸿蒙继续开放:方舟JS运行时正式开源
- iOS文本的多语言适配和实践
- 12306网站进行适老化改造:验证码终于优化、界面简化
- 良心的好功能!12306网站爱心模式详细体验
- 源码进阶之lifecycle组件原理分析
- 第一波!设计师必须注意的 12 个 UI 设计小技巧
- UI设计师跳槽前,需要考虑的八个问题!
- 2021年React的状态管理之争:Hooks、Redux 和 Recoil
- 5000字干货!超全面的B端设计规范总结
- iOS 无侵入埋点组件总结
- 作为一名 34 岁的设计师,我是如何摆脱焦虑的?
- Lyft设计总监:移动端响应式设计的高效方法
- 快速提升 UI 设计效果的 6 个小技巧
- H5 移动端调试全攻略
- 如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!