传统的DOM渲染方式

传统的渲染方式分为四步 1、htmly用html解析器来解析 浏览器在解析HTML文档时，会把HTML解析为一种称为文档对象模型（Document Object Model）的对象集合，简称DOM。DOM的结构是树状的。 解析器通常把工作分给两个组件——分词程序负责把输入切分成合法符号序列，解析程序负责按照句法规则分析文档结构和构建句法树。词法分析器知道如何过滤像空格，换行之类的无关字符。 解析器输出的树是由ＤＯＭ元素和属性节点组成的。 解析的结果通常是一个表征文档的由节点组成的树，称为解析树或句法树。 2、css样式表用css解析器来解析 CSS选择器的读取顺序是从右向左。 #main div.hello span{color:#fff} 如上 先找到span然后顺着往上找到class为“hello”的div再找到id为“main”的元素。成功匹配到则加入结果集，如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程。整个过程会形成一条符合规则的索引树，树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。 3、DOM树和样式表相结合生成一个render树
HTML解析完毕后，开始构建呈现树RenderTree，这一步的主要工作在于将css样式应用到DOM节点上。 CSS树和DOM树连接在一起形成一个render tree，渲染树用来描述所有可见的DOM内容，并且将CSS样式信息附加到节点上。 为了形成渲染树，浏览器大致做的事情有: 1、 从DOM树根节点开始，遍历每一个可见的节点 2、对每一个可见的节点，找到合适的匹配的CSS规则，并且应用样式 3、显示可见节点（节点包括内容和被计算的样式） DOM树上的每个节点都有一个attach方法，它接收计算好的样式信息，返回一个render对象（又名renderer） 构建渲染树时，由于包含了这些render对象，每个render对象都需要计算视觉属性（visual properties）；这个过程通过计算每个元素的样式属性来完成。 4、浏览器会根据渲染的节点在页面上进行渲染 构造了渲染树以后，浏览器引擎开始着手布局（layout）。 浏览器将会通过遍历渲染树，调用每个节点的paint方法来绘制这些render对象。paint方法根据浏览器平台，使用不同的UI后端API（agnostic UI backend API）。 通过绘制，最终将在屏幕上展示内容。