关于前端:Vuejs-比较重要知识点总结五

## 概述

• 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