浏览器渲染，虚拟节点，diff

一，浏览器拿到html文件渲染过程

1，解析html文件，构建dom规则树(dom树)。
2，解析css文件，构建css规则树(渲染树)
3，将dom数和css树关联起来，生成render(渲染)树
4，布局(layout/reflow，回流),浏览器根据render树的每个节点，确认在屏幕的具体位置，尺寸。
5，绘制渲染树。绘制页面像素信息到屏幕上，这个过程叫paint(重绘)。
**回流和重绘的区别，

回流：当render tree中一部分或全部因为元素的规模尺寸，布局，隐藏等变化导致render tree需要重新构建，就称为回流。每个页面至少需要回流一次，因为页面初次加载需要进行一个render tree的构建；回流的过程中会浏览器把受到影响部分的render tree让其失效，并重新进行该部分render tree重新进行渲染，完成回流后，浏览器会重新把该部分render tree的节点绘制在屏幕上。该过程称为重绘（所以回流必然会引起重绘）。
重绘：当render tree的部分属性发生改变只改变元素外观，风格，不会影响元素的规模尺寸，布局，例如background-color。则称为重绘。****

结论：使用原生js或jquery去操作dom操作，都会经过上述过程。所以频繁操作dom就会引起不必要的计算；导致页面卡顿，影响体验。这时候就出现虚拟dom，virtual node(VNode)用js对象表示，根据VNode计算出真实dom的最小变动(这个算法叫diff算法)，然后再去实际操作dom，减少不必要的渲染计算，提高渲染效率。

二，虚拟节点Virtual DOM

1，虚拟dom结构
使用js对象记录真实dom的节点。
2，流程
⑴先用虚拟节点记录真实dom节点。⑵当数据发生变化时，将数据变化后生成的虚拟节点和先前的节点使用diff算法进行比较。
⑶将替换完的虚拟节点渲染到页面上。
3，diff算法
逐层比较，替换虚拟节点。一层层比较只需一个循环，时间复杂度（n）
4，实际dom树的渲染