虚拟DOM如何进化为真实DOM
Posted 前端简报
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了虚拟DOM如何进化为真实DOM相关的知识，希望对你有一定的参考价值。
第一时间关注技术干货！
前言
Vue和React的Render函数中都涉及到了Virtual DOM的概念，Virtual DOM也是性能优化上的重要一环，同时突破了直接操作真实DOM的瓶颈，本文带着以下几个问题来阐述Virtual DOM。
-
1.为什么要操作虚拟 DOM? -
2.什么是虚拟 DOM? -
3.手把手教你实现虚拟 DOM 渲染真实 DOM
希望阅读本文之后，能够让你深入的了解虚拟 DOM并且在开发和面试中收益。
为什么要操作虚拟 DOM
为了帮助我们更好的理解为什么要操作虚拟 DOM，我们先从浏览器渲染[1]一个 html 文件需要做哪些事情说起：
浏览器渲染机制大致可以分为以下 5 步走:
-
1.创建 DOM tree -
2.创建 Style Rules -
3.构建 Render tree -
4.布局 Layout -
5.绘制 Painting
我们过去使用原生javascript和jquery去操作真实DOM的时候,浏览器会从构建 DOM
以上是关于虚拟DOM如何进化为真实DOM的主要内容，如果未能解决你的问题，请参考以下文章