vue性能优化详解(三)

前端路漫漫,优化无极限。
本文主要从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 停止录制。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 5,832评论 0 1
  • 1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像、样式...
    兔子不打地鼠打代码阅读 3,502评论 0 1
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 11,482评论 0 31
  • 主要分为三个方面来优化 Vue 代码层面的优化 webpack 配置层面的优化 基础的 Web 技术层面的优化 一...
    alanwhy阅读 4,170评论 0 10
  • 总是会有因为想不通的问题而失眠的时候,也总是会有想着一些无法获得答案的问题而睡着的时候。像这样纠结到头疼的情况,今...
    meiyouyisi阅读 2,361评论 0 0