虚拟DOM

Virtual DOM

Virtual DOM，是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM。

真实DOM

比如：随便从网页里搞一个查一下：

image.png

typeof(ele) 是object

发现是这么多的属性。

所以，创建一个真实DOM的成本是十分高的。

虚拟DOM：

比如：

{
    sel:”div”,//描述标签
    data:{},
    children: undefined,
    text: “hello virtual dom”,//描述文本
    elm: undefined,
    key: undefined
}

因此，可以得到，创建一个虚拟dom的成本比真实dom的成本低很多。

为什么要使用虚拟DOM

image.png

MVVM框架，解决了视图和状态的同步问题，也就是，当数据发生变化，自动更新视图；反之，当视图发生变化，自动更新数据。

模板引擎？？

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在.Net下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。
模板引擎可以让（网站）程序实现界面与数据分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。
——来自《百度百科》

模板引擎没有解决跟踪状态变化的问题是因为，当数据发生变化后，无法获取上一次的状态，只好把界面上的元素删除重新创建（可能造成闪烁，性能较低）。

虚拟dom树内部的算法来找到如何有效的更新DOM。(真是牛啊。

虚拟DOM的作用

• 维护视图和状态的关系
• 复杂视图情况下提升渲染性能（简单不会）
• 除了渲染DOM以外，还可以实现SSR（NUxt.js/Next.js）、原生应用（Weex/React Native）、小程序（mpvue/uni-app）等。

SSR（Server-Side Rendering）：服务端渲染，在服务端将Web应用渲染成HTML。是一种前端渲染模式。

image.png

React、Vue是CSR(Client-Side Rendering) – rendering an app in a browser, generally using the DOM. 即，客户端渲染，是指用 JS 直接在浏览器里渲染页面，包括数据请求、视图模板、路由在内的所有逻辑都在客户端处理。

image.png

P.S.其中出现的 FCP 与 TTI 是两个重要的性能指标：

1. FCP（First Contentful Paint）：用户所请求的内容在屏幕上可见的时间点
2. TTI（Time To Interactive）：页面可交互的时间点

其他的渲染模式：

Rehydration：二次渲染，复用服务端渲染的 HTML DOM 结构和数据，在客户端“温启动”JS 渲染。将 CSR 与 SSR 结合起来了，服务端渲染出基本内容后，在客户端进行二次渲染（Rehydration）

Prerendering：预渲染，在编译时运行一个客户端应用抓取其初始状态生成静态 HTML。主要区别在于，静态渲染得到的页面已经是可交互的，无需在客户端额外执行大量 JS 代码，而预渲染必须经客户端渲染才真正可交互。也就是说，禁用 JS 后，静态渲染的页面几乎不受影响，而预渲染的页面将只剩下超链接之类的基本功能。

Static Rendering：静态渲染，将生成 HTML 页面的工作放到编译时，而不必在请求带来时动态完成。为每个 URL 预先单独生成 HTML 文件，并进一步借助CDN加速访问。