前端资源下载优化(ZIP|GZIP)
一、Nginx配置
A、为什么要开启gzip压缩
因为开启gzip压缩后加载速度更快并且服务器带宽节省
B、Nginx gzip压缩配置
C、配置后,nginx -t检查配置文件是否OK,再重启nginx -s reload
D、检测:请求资源的响应头返回Content-Encoding:gzip标识成功
二、CDN配置
A、CDN是什么,内容分发网络(Content Delivery Network,CDN)是建立并覆盖在承载网上,由不同区域的服务器组成的分布式网络。将源站资源缓存到全国各地的边缘服务器,供用户就近获取,加载速度快速高效并且降低源站压力。
B、当CDN配置后,可以在第三方CDN基础上再改善性能优化
C、CDN Gzip压缩
1)、开启Gzip压缩功能后,CDN节点会对资源进行Gzip压缩后返回,缩小传输文件大小,提升文件传输效率,减少带宽消耗。
2)、操作步骤
说明:由于CDN有很多商家都有,这里步骤只说一个阿里云的
①在CDN控制台中左侧导航栏,单击“域名管理”,进入页面后,单击目标域名对应的管理。
②在指定域名的左侧导航栏,单击“性能优化”,在Gzip压缩区域框中,打开Gzip压缩开关,完成。
三、合理利用cache
A.HTTP 缓存是在 HTTP 请求传输时用到的缓存,目前基本上http1.1协议都有缓存,可以在nginx配置。检测(返回304是缓存,200是新资源)
协商缓存配置(合理使用,不然需要版本控制或者时间戳)
location / {
# 其它配置
...
if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
#非html缓存1个月
add_header Cache-Control "public, max-age=2592000";
}
if ($request_filename ~* ^.*[.](html|htm)$) {
#html文件使用协商缓存
add_header Cache-Control "public, no-cache";
}
}
B.JS缓存,有些平凡的不更新的数据可以存放在sesstionStorage,localStorage,cookie浏览器中(需要合理使用)
四、其他优化
A.图片优化能压缩的最好压缩
1)软件:图压 - 简单易用的图片压缩软件 (xinxiao.tech)
2)压缩说明:能用JPG|JPEG的就用JPG|JPEG格式,不管是JPG和PNG压缩比例尽量不要太模糊
B.加载过渡页面,loding还是要的
C.js和css代码该优化的优化