主要思路：

• Vue 代码层面的优化；
• webpack 配置层面的优化；
• 基础的 Web 技术层面的优化。
• 非框架代码优化

一、代码层面的优化

1.1、v-if 和 v-show 区分使用场景

1. 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
2. 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3. 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
   v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4. 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

1.2、computed 和 watch 区分使用场景

computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果

1.3、v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key
在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

（2）v-for 遍历避免同时使用 v-if
v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

// 推荐：
<ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li>
</ul>
computed: {activeUsers: function () {return this.users.filter(function (user) {return user.isActive})}
}

1.4、长列表性能优化

Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {data: () => ({users: {}}),async created() {const users = await axios.get("/api/users");this.users = Object.freeze(users);}
};

1.5、事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：

created() {addEventListener('click', this.click, false)
},
beforeDestroy() {removeEventListener('click', this.click, false)
}

1.6、图片资源懒加载

1.7、路由懒加载

这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

const Foo = () => import('./Foo.vue')
const router = new VueRouter({routes: [{ path: '/foo', component: Foo }]
})

1.8、第三方插件的按需引入

1.9、优化无限列表性能

1.10、服务端渲染 SSR or 预渲染

二、Webpack 层面的优化

2.1、Webpack 对图片进行压缩

小的图片转化为 base64 格式；对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片

2.2、减少 ES6 转为 ES5 的冗余代码

2.3、提取公共代码

将每个页面的第三方库和公共模块提取出来

2.4、模板预编译

2.5、提取组件的 CSS

2.6、优化 SourceMap

2.7、构建结果输出分析

Vue 项目中用到的分析工具：webpack-bundle-analyzer 。

2.8、Vue 项目的编译优化

三、基础的 Web 技术优化

3.1、开启 gzip 压缩

压缩组件通过减少 HTTP 请求产生的响应包的大小，从而降低传输时间的方式来提高性能。从 HTTP1.1 开始，Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来标识对压缩的支持：

Accept-Encoding: gzip,deflate

Chrome 开发者工具栏监控到如图：

如果 Web 服务器看到请求中的这个头，就会使用客户端列出的方法中的一种来压缩响应。Web 服务器通过响应中的 Content-Encoding 头来告知 Web 客户端：

Content-Encoding: gzip

Chrome 开发者工具栏监控到如图：

压缩通常能将响应的数据量减少近 70%，但是压缩通常情况下会带来服务端和客户端的 CPU 开销，要检测受益是否大于开销，需要综合考虑响应大小、带宽和客户端服务端物理距离等因素。通常需要对大于 1KB 或 2KB 的文件进行压缩。

当浏览器通过代理来发送请求时，有可能出现浏览器期望接受的压缩后内容和实际接收到的不一致的情况。解决这一问题的方法是在 Web 服务器的响应中添加 Vary 头。Web 服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。由于压缩的决定是基于 Accept-Encoding 请求头的，因此需要在服务器的 Vary 响应头中包含 Accept-Encoding:

Vary: Accept-Encoding

目前大约 90% 的通过浏览器进行的网络通信都需要使用 gzip，这使得服务端和客户端的对等性变得额外重要。无论是客户端还是服务端发送错误，都会造成页面被破坏。避免错误的一种方式是采用『浏览器白名单』方式，即只为经过证实支持压缩的浏览器提供压缩内容，但是当代理缓存加进来以后，处理边缘情形浏览器将变得更加复杂。另一种方式是使用 Vary: * 或 Cache-Control: private 头来禁用代理缓存。此种方式会为所有浏览器禁用代理缓存，从而增加带宽开销。如何平衡压缩和代理支持需要在加快响应时间、减小带宽开销和边缘情形浏览器缺陷之间进行权衡。

1. 如果网站的用户很少，并且他们处于一个小圈子中，边缘情形浏览器不需要太多关注，可以压缩内容并使用 Vary: Accept-Encoding。
2. 如果更注重带宽开销，可以和前一种情形一样，压缩内容并使用 Vary: Accept-Encoding。
3. 如果网站拥有大量的、多变的用户群，能够应付较高的带宽开销，并且享有高质量的声誉，需要压缩内容并使用 Cache-Control:Private。（ Google 和 Yahoo 都使用这种方式）

3.2、浏览器缓存

强缓存，对比缓存
（1）已存在缓存数据时，仅基于强制缓存，请求数据的流程如下所示：

（2）已存在缓存数据时，仅基于对比缓存，请求数据的流程如下所示：

强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。
两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

3.3、使用CDN （内容分发网络）

3.4、减少 HTTP 请求数

减少http的请求次数，将多个请求合并成同一个，减少http的开销。

3.5、压缩 JavaScript 和 CSS

四、非框架代码优化

4.1、减少重绘、重排

在优化 Web 性能的方法中，减少重绘、重排是一种很好的优化方式。减少重绘、重排措施：

1. 使用 class 操作样式，而不是频繁操作 style
2. 避免使用 table 布局
3. 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
4. Debounce window resize 事件
5. 对 dom 属性的读写要分离
6. will-change: transform 做优化

4.2、将 CSS 放在页面顶部

关注性能的前端工程师希望页面被逐步渲染，这时因为，我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈，比如进度条的重要性已经被大量研究和记录。在我们的情况中，HTML 页面就是进度条。当浏览器逐步加载页面头部，导航条，logo 等等，这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。

把样式表放在文档底部的问题是它阻止了许多浏览器的逐步渲染，包括 IE。这些浏览器阻止渲染来避免在样式更改时需要重绘页面元素。所以用户会卡在白屏。

HTML 规范 清楚表明样式应该在 <head> 里。

4.3、 将 JavaScript 放在页面底部

脚本会阻塞并行下载，HTTP/1.1 官方文档建议浏览器每个主机名下并行下载的组件数不要超过两个，如果图片来自多个域名，并行下载的数量就可以超过两个。如果脚本正在下载，浏览器就不开始任何其它下载任务，即使是在不同域名下的。

有时候，并不容易把脚本移动到底部。举个例子，如果脚本是用 document.write 插入到页面内容中的，就没办法再往下移了。还可能存在作用域问题，在多数情况下，这些问题都是可以解决的。

一个常见的建议是用推迟（deferred）脚本，有 DEFER 属性的脚本意味着不能含有 document.write，并且提示浏览器告诉他们可以继续渲染。不幸的是，Firefox 不支持 DEFER 属性。在 IE 中，脚本可能被推迟，但不尽如人意。如果脚本可以推迟，我们就可以把它放到页面底部，页面就可以更快地载入。

4.4、减少 DNS 查询

详细见另一篇文章

有关前端性能优化的方案—Vue 代码层面性能优化+Webpack 层面的优化+基础的 Web 技术优化+非框架代码优化相关推荐

1. 前端学习（1848）vue之电商管理系统电商系统的开发模式和技术选型

2. Vue项目的性能优化

   目录 前言 一.代码层面的优化 1. **v-if 和 v-show 区分使用场景** 2. **computed 和 watch 区分使用场景** 3. **v-for 遍历必须为 item 添加 ...

3. 提升MCU代码执行性能的十八般武艺~

   大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是在串口波特率识别实例里逐步展示i.MXRT上提升代码执行性能的十八般武艺. 恩智浦 MCU SE 团队近期一直在加班加点赶 SBL 项目 ...

4. 前端Vue项目打包性能优化方案

   文章目录 一.前言 二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件 三.工具推荐 可视化分析包大小 总结 一 ...

5. 【Web技术】985- 当聊到前端性能优化时，我们会关注什么？

   大前端  前端知识宝库  坚持日更 关于这期分享内容 性能优化一直是前端领域老生常谈的问题,系统的性能以及稳定性很大程度上决定着产品的用户体验以及产品所能达到的高度.而tob和toc系统又有着不同的业 ...

6. 10个技巧！实现Vue.js极致性能优化（建议收藏）

   导语 | Vue是一套用于构建用户界面的渐进式的JavaScript框架.它具有体积小,更高的运行效率,双向数据绑定,生态丰富.学习成本低等优点,所以Vue也被广泛用在移动端跨平台框架上.接下来,我将 ...

7. MIS性能优化常见问题与方案（辅助项目组性能优化的总结贴）

   最近帮忙公司的几个项目组进行了不同方面的性能优化,发现几个项目都出现了一些共性的问题.这里写一篇文章,总结一下这几类问题,以及其对应的解决方案.方便其它项目组参考. 常见问题一:打开页面非常慢,有的项 ...

8. code blocks代码性能分析_记一次Python Web接口优化，性能提升25倍！

   背景 我们负责的一个业务平台,有次在发现设置页面的加载特别特别地慢,简直就是令人发指 让用户等待 36s 肯定是不可能的,于是我们就要开启优化之旅了. 投石问路 既然是网站的响应问题,可以通过 Chr ...

9. 前端每周清单第 30 期：WebVR 指南，Vue 代码分割范式，理想的 React 架构特性

   前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID:front ...

最新文章

1. mysql internal_MySQLInternal笔记
2. php地址后面拼接页码,php分页类尾部页码导航代码
3. R语言绘制火山图（volcano plot）实战：为差异表达基因（DEGs）添加颜色、基于显著性阈值进行点的颜色美化、为选定基因添加标签
4. js 为false的几种情况
5. 手机控件查看工具uiautomatorviewer
6. Android中进度条控件使用
7. pps+linux版+x64,64位Ubuntu 11.04安装PPS的办法
8. Android对应用程序签名
9. H5活动产品设计指南基础版
10. Bootstrap 导航条
11. linux lsof
12. mapreduce代码示例_MapReduce算法示例
13. hwclock(Linux)
14. [源码和报告分享]基于Android-JavaEE-DB2实现的旧物交易平台
15. 用c#实现 catia插件speos的部分功能
16. 神州计算机u盘启动,神舟台式机bios怎么设置从u盘启动
17. 作为米粉，我不得不说一说小米11全系，小米还是最初的小米呀
18. 从简单工厂到抽象工厂
19. 蓝桥杯单片机-动态数码管
20. 如何用linux搭建简单的论坛

热门文章

1. springboot校园二手交易网站系统在线视频点播系统毕业设计毕设作品开题报告开题答辩PPT
2. 【笔记】VisionMobile：扁平、扩展、挖掘，Google的策略的三大支柱
3. Android开发：用adb命令安装apk到手机
4. 清华大学计算机学硕保研,2018年清华大学接收推荐免试直硕生拟录取名单公示...
5. emc整改措施及案例_我们推荐EMC整改效果_EMC整改方案相关
6. 洛谷P5707 【深基2.例12】上学迟到（c语言）
7. 可能是其他人在试图访问您的 Google 帐号。为了安全起见，您暂时无法登录。 请稍后重试，或使用其他设备登录。
8. 为什么企业需要数据仓库？
9. 微信小程序实现动态获取输入框的字符长度
10. 免费快递查询接口不限量对接