浏览器渲染原理及流程和虚拟DOM渲染
1.1 浏览器渲染原理及流程
-
解析html，构建dom树=》构建render树=》布局render树=》绘制render树
-
什么是render树 解析html，形成DOM树，然后解析CSS，形成css rules，接着将 DOM Tree 与 Style Rules 合成为 Render Tree
-
1.构建dom树：解析html，将标签转换成DOM树中的DOM nod，生成内容树
-
2.构建render树：解析css信息，生成css rules，与dom树合成为render树
-
3.布局render树：从根节点开始调用，计算出每一个元素的大小和位置，然后给出每个节点的准确位置
-
4.绘制render树：遍历render树，绘制每一个节点
1.2 虚拟DOM渲染
-
用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。
-
频繁的去操作dom，会引起页面的卡顿，影响用户的体验，虚拟DOM就是为了解决频繁操作DOM的性能问题创造出来的
-
就是一个js对象，比如一次操作中有很多处更新，不使用虚拟DOM，浏览器就会重复多次操作DOM，虚拟DOM不会，而是把他们存入虚拟DOM里，然后将虚拟DOM一次性的attach到DOM树上， 将虚拟对象映射成真实的 DOM，通知浏览器去执行绘制工作，这样
可以避免大量的无谓的计算量。
-
优点：保证性能下限，无需手动操作 DOM，跨平台
-
缺点：无法进行极致优化
