vue性能优化详解(三)
2019-08-26 本文已影响0人
LazyCat404
前端路漫漫,优化无极限。
本文主要从Web 技术方向讲述vue性能优化。
1.开启 gzip 压缩
即GNUzip
,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip
编码是一种用来改进 web 应用程序性能的技术,web 服务器和客户端(浏览器)必须共同支持 gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如 Apache,Nginx,IIS 同样支持,gzip 压缩效率非常高,通常可以达到 70% 的压缩率。
2.浏览器缓存
为页面加载速度,需对静态资源进行缓存,根据是否需要重新向服务器发起请求将 HTTP 缓存规则分为两大类强制缓存、对比缓存。
3.CDN 的使用
浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果超过限制,网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件,从而使下载文件的并发连接数大大增加,且CDN 具有更好的可用性,更低的网络延迟和丢包率 。
Chrome 的 Performance 面板可以录制一段时间内的 js 执行细节及时间。
使用 Chrome 开发者工具分析页面性能的步骤如下:
①打开 Chrome 开发者工具,切换到 Performance 面板;
②点击 Record 开始录制;
③刷新页面或展开某个节点;
④点击 Stop 停止录制。