当前位置: 首页 > Web前端 > HTML

从URL输入到页面加载——页面渲染

时间:2023-04-02 15:20:50 HTML

前言在web相关的问题中,无法回避从输入URL到加载显示整个页面给用户的问题。主要涉及两个步骤:请求页面渲染解析HTML文件,构建DOM树解析CSS文件,构建CSSOM树合并DOM树和CSSOM树,生成渲染树计算渲染树的布局将布局渲染到屏幕上本文主要介绍页面渲染部分。构建DOM树什么是DOM树?DOM模型:HTML和XML文档的编程接口。它提供了文档的结构化表示,并定义了一种从程序内部访问此结构以更改文档的结构、样式和内容的方法。DOM将文档解析为节点和对象(包含属性和方法的对象)的结构化集合。简而言之,它将网页与脚本或编程语言链接起来。DOM的结构由各种子节点组成,然后以HTMLDocument为根节点,其余节点为子节点,则组织树状数据结构的表示就是DOM树。使用HTML解释器构建DOM树HTML解释器将从网络或本地获取的HTML文件解析为DOM树。需要经过以下步骤:将字节流转换为字符流,根据不同的编码进行解码,通过词法分析将字符流解析为词(Tokens)。此过程会跳过空格和换行符。词法分析由HTMLTokenizer完成。使用XSSAuditor来验证和过滤词主要是出于安全考虑。经过XSSAuditor过滤后,解释器调用构建DOM节点的方法。由以上DOM节点构建DOM树,包括为元素节点创建属性节点。CSSOM什么是CSSOM?CSSOM(CSSObjectModel)为CSS本身定义了媒体查询、选择器和一系列API(包括通用的解析和序列化规则)。是样式依附于DOM结构树的一种表达方式,类似于DOM树的表示方式,只是每个节点都会携带一个样式属性,包括显式定义和隐式继承的样式。CSS是一种渲染阻塞资源(renderblockingresource),在进入生成渲染树的环节之前需要完全解析。CSS不能像HTML那样执行和显示部分,因为CSS具有继承属性,以后定义的样式会覆盖或修改以前的样式。如果我们只在样式表中使用部分解析的样式,我们可能会得到错误的页面效果。因此,我们只能等待CSS完全解析完毕,才能进入关键渲染路径的下一步。在CSSOM构建之前,页面会一直处于空白状态,这就是为什么建议将CSS引用和