在《Effective前端6:避免页面卡顿》这篇里面介绍了浏览器渲染页面的过程:并且《从Chrome源码看浏览器如何构建DOM树》介绍了第一步如何解析Html构建DOM树,这个过程大概如下:浏览器每收到一段html的文本之后,就会把它序列化成一个个的tokens,依次遍历这些token,实例化成对应的html结点并插入到DOM树里面。我将在这一篇介绍第二步Style的过程,即CSS的处理。1. 加载CSS在构建DOM的过程中,如果遇到link的标签,当把它插到DOM里面之后,就会触发资源加载——根据href指明的链接:上面的rel指明了它是一个样式文件。这个加载是异步,不会影响DOM树的构建,只是说在CSS没处理好之前,构建好的DOM并不会显示出来。用以下的html和css做试验:DOCType htmlhello, worlddemo.css如下:.text{font-size:20px;}.textp{color:#505050;}从打印的log可以看出(添加打印的源码略):[DocumentLoader.cpp(558)] “DOCType html\n\n\n\n\n\n\nhello, world\n\n\n\n”[HTMLDocumentParser.cpp(765)] “tagName: html |type: DOCTYPE|attr:
...
继续阅读
(52)