【前端优化 & Vue项目优化】 如何避免浏览器卡顿，实现性能优化cdn？

提示：前端查漏补缺，仅代表个人观点。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前言

前端可主要从以下七种类别进行优化处理：

• 网络加载类
• 页面渲染类
• CSS优化类
• JavaScript执行类
• 缓存类
• 图片类
• 架构协议类

---

二、前端优化方法

1. 减少请求，压缩文件

通过构建工具(webpack、gulp等)尽可能合并静态资源图片、JavaScript或CSS代码为一个文件并进行压缩，减少http网络请求资源的次数和大小，以缩短页面首次访问的用户等待时间;

2. CSS和JavaScript管理

• 内联首屏关键CSS: 较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式
• 异步加载CSS
• 合理使用选择器:不要嵌套使用过多复杂选择器，最好不要三层以上;
• 将css文件放在head头部 这样页面可以优先下载css并完成渲染
• 避免使用<style>或<script>标签直接引入,将CSS或JavaScript放到外部文件中;
• 减少使用昂贵的属性:在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

3. 设置内容缓存

将HTML内容设置Cache-Control 或Expires可以将HTML内容缓存起来，避免频繁向服务器端发送请求;

例： < meta http-equiv=“Cache-Control” />

4. 减少页面重定向

页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约需要600毫秒的时间开销，为了保证用户尽快看到页面内容，要尽量避免页面重定向;

5. CDN网络

条件允许的情况下，可以利用CDN网络加快同一个地理区域内重复静态资源文件的响应下载速度，缩短资源请求时间;

• CDN的本质就是一个缓存，CDN能够缓存一般的CSS，js图片等静态资源文件，而且将数据缓存在里用户最近的地方，使用户以最快的速度获取数据;
• 使用静态资源CDN来存储文件 ，如果条件允许，可以利用CDN网络加快同一个地理区域内重复静态资源文件的响应下载速度，缩短资源请求时间

6. Cookie处理

减少Cookie的大小并进行Cookie隔离，HTTP请求通常默认带上浏览器端的Cookie一起发送给服务器，所以在非必要的情况下，要尽量减少Cookie来减小HTTP请求的大小

---

三: Vue项目优化方式

1.尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher；

• 2.不要连用v-if 和 v-for;

3.SPA 页面采用keep-alive缓存组件;

• 4.在更多的情况下，使用v-if替代v-show;

5.key保证唯一;

• 6.使用路由懒加载、异步组件;

7.事件进行防抖、节流处理

• 8.第三方模块按需导入

9.长列表滚动到可视区域动态加载

• 10.图片懒加载

11.组件重复打包：假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载;
解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置

• 12. minChunks: 3
      minChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件