浏览器渲染——（一）渲染过程

当浏览器渲染一个html都发生了什么？

这个问题基本在面试的时候经常会问到吧。经常的回答是当html 被加载到浏览器中，解析html构建dom tree，通过link解析css，构建render tree。把这俩个组合在一起，渲染出看到的页面。（精简的回答。）对的，但不全面。本文进行深度剖析。

一，图解流程

1，解析代码。浏览器包含html解析器和css解析器。分别解析html和css代码。html解析器会解析出dom，css解析器会解析出cssDom。cssDom的样式映射都是全部计算过的，是个绝对值。我们在代码中写的往往不是最终结果（元素可能继承，默认，calc等其他影响，浏览器不理解相对概念只会以绝对值展示）。dom和cssDom都是树型结构。

2，合并树，从Dom根结点开始遍历每一个可见的节点，为其找到适配的cssDom规则并应用。将两个树合并成render tree 。a.某些节点不可见（如脚本标签