Vue.js 比较重要知识点总结五

概述

• Vue3 性能提升主要体现在哪几方面？
• 你对 Vue 项目做过哪些优化
• 关于虚拟 DOM
• Vite是什么

Vue3 性能提升主要体现在哪几方面？

• 响应式性能提升 [defineproperty、proxy]
• 编译优化
  • 优化编译和重写虚拟dom
  • Fragments, 模板里面不用创建唯一根节点,可以直接放同级标签和文本内容
  • 静态提升
  • patch flag, 跳过静态节点,直接对比动态节点
  • 缓存事件处理函数
• 源码体积的优化
  • vue3移除了一些不常用的api
  • 使用tree-shaking

更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。

你对 Vue 项目做过哪些优化

代码层面的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• ⻓列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染

Webpack 层面的优化

• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

基础的 Web 技术的优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

关于虚拟 DOM

虚拟 DOM是什么

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react ，vue等技术出现之前，我们要改变页面 展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到 更新 ui 的目的。

这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成 了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

为什么操作 DOM 性能开销大？

其实并不是查询 dom 树性能开销大而是 dom 树的实现模块和 js 模块是分开的这些跨模块的通讯增加了 成本，以及 dom 操作引起的浏览器的回流和重绘，使得性能开销巨大，原本在 pc 端是没有性能问题的，因为 pc 的计算能力强，但是随着移动端的发展，越来越多的网页在智能手机上运行，而手机的性能 参差不齐，会有性能问题。

新技术如何解决性能问题？

angular， react ，vue 等框架的出现就是为了解决这个问题的。

他们的思想是每次更新 dom 都尽量避免刷新整个页面，而是有针对性的去刷新那被更改的一部分，来释 放掉被无效渲染占用的 gpu， cup 性能。

angular

angular 采用的机制是 脏值检测查机制 所有使用了 ng 指令的 scope data 和 {{}} 语法的 scope data 都会被加入脏检测的队列

vue

vue 采用的是虚拟 dom 通过重写 setter ， getter 实现观察者监听 data 属性的变化生成新的 虚拟 dom 通过 h 函数创建真实 dom 替换掉dom树上对应的旧 dom。

react

react 也是通过虚拟 dom 和 setState 更改 data 生成新的虚拟 dom 以及 diff 算法来计算和生 成需要替换的 dom 做到局部更新的。

虚拟 DOM 实例

我们来尝试实现一个解析虚拟 dom 的 render 函数。

如何解析这个虚拟 DOM 呢？

可以将这段代码复制到浏览器测试一下。

const dom = render(HelloWorld)
document.body.append(dom)

虚拟 DOM 优缺点

优点：

• 保证性能下限：

框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的 实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此 框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保 证性能的下限；

• 无需手动操作 DOM：

我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框 架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效 率；

• 跨平台：

虚拟 DOM 本质上是 JavaScript 对象,⽽ DOM 与平台强相关，相比之下虚拟 DOM 可以进 行更方便地跨平台操作，例如服务器渲染、 weex 开发等等。

缺点:

• 无法进行极致优化：

虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些 性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

实现原理

虚拟 DOM 的实现原理主要包括以下 3 部分：

• ⽤ JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
• diff 算法 — 比较两棵虚拟 DOM 树的差异；
• pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

Vite是什么

1. 前端打包工具
2. 在开发环境下，使用ES6 Module，不打包，启动快
3. 生产环境打包使用rollup

参考地址：

• https://tangjiusheng.com/web/4935.html
• https://blog.csdn.net/weixin_41759744/article/details/125305021
• https://www.jb51.net/article/263720.htm