浏览器

1.浏览器渲染过程

① 首先是DOM树和CSSOM树的构建,分为解析,Token化,生成Nodes并构建几个过程

  • 解析:对获得的HTML原始字节码进行解码,得到相应字符串
  • Token化:根据得到的字符串,通过词法分析器进行Token化,Token会注明开始标签,结束标签,文本标签等
  • 生成Nodes并构建:根据Token化标签生成相应的Nodes,并将Nodes串联起来,构建DOM树和CSSOM树
    PS1:并非Token化全部完成后才会去生成Nodes,而是边Token化边生成Nodes,这样当Token化完成后DOM树和CSSOM树也就构建完成了
    PS2:js标签若不设置async或defer属性,会阻塞DOM树的构建,等待js代码解析并执行完毕才会继续构建DOM树,这时若js操作了还未构建完成的DOM就会报错; js并不会阻塞CSSOM树构建,由于js可能会对CSS进行操作,因此js会等待CSSOM构建完成后才会执行,而又由于js会阻塞DOM树构建,因此等待CSSOM构建时也会阻塞DOM树构建,这就是所谓的CSS阻塞
    PS3:CSSOM树要完全构建完成后才能使用,因为后面的CSS样式能会覆盖前面的CSS样式

② DOM树和CSSOM树构建完毕后,构建Render树

  • Render树为每一个节点构建一个RenderObject,它的每一个节点几乎都与DOM树的结点对应,并有相应的CSS样式属性
  • 一些标签和元素会被Render树忽略,如html,

你可能感兴趣的:(浏览器)