浏览器渲染原理DOM解析DOM树构建流程:1.根据HTML文档的内容,根据label对词进行分词2.根据token3产生对应的节点Node3。根据嵌套关系将节点组合成一个对象节点树DOM浏览器增量解析DocumentObjectModelDOM,无需等待整个HTML文档加载完成即可开始解析DOMC。CSSOM解析会阻塞HTMLParser;JavaScript脚本文件执行会阻塞HTML解析;CSS、JavaScript、Images和ForFont等静态资源的异步加载、页面渲染、CSS解析、JavaScript执行都会相互依赖。CSS解析CSSOM树构建CSSOM解析依赖于选择器,选择器的匹配是由内而外。所以选择器的嵌套层次越深,匹配的时间就越长。CSSOM只解析可见部分的body标签中的内容,并构建一个包含所有匹配元素的CSSOM树。从根节点向下,向下继承所有节点的属性。RenderTree树的构建使用DOM和CSSOM的结合来构建RenderTree。RecaculateStyleRenderTree对应的节点包含所有渲染网页必须的节点,不会被添加到RenderTree中,比如head和display:none;节点可见性:隐藏;节点会被添加到RenderTree中,浏览器通过GET请求获取网页,同时对HTML文档进行增量解析,生成DOM树。在解析DOM节点树时,所有需要加载的资源都会异步加载,但是CSS解析、JavaScript执行、字体文件下载会阻塞HTMLParser的本地DOM树和CSSOM树构建完成后,立即组装RenderTree渲染浏览器渲染页面。增量解析解析DOM树,完成相应的CSSOM解析后(RenderTree依赖DOM树,CSSOM树),直接开始渲染页面。4.2CSS加载会阻塞初始渲染。对于与首页无关的样式,您需要使用适当的方法来避免阻塞初始渲染:document.write()会阻塞页面的初始渲染。使用media=print媒体查询,虽然加载了样式表,但它只是在打印时才应用样式,并不会阻塞初始渲染。通过DOMAPI引入CSS,可以避免阻塞。
