用户在浏览器输入URL地址到页面呈现发生的过程
1、用户输入URL
2、浏览器从URL中解析出主机名
3、浏览器将主机名转换成服务器的IP地址
4、浏览器将端口号从URL中解析出来
5、浏览器建立一条与目标Web服务器的TCP三次握手
6、浏览器向服务器发送一条HTTP请求报文
7、服务器向浏览器返回一条HTTP响应报文
8、关闭连接,浏览器解析文档
浏览器解析文档过程
1、根据HTML文件构建Dom树:
将一下节点,根据HTML文件,渲染出树形结构:文档节点、元素节点、文本节点、属性节点、注释节点。
2、构建CSSOM树:
在HTML的head标签中发现有link引入的css样式表,浏览器会立即发出对该CSS资源的请求,并进行CSSOM树的构建。
3、构建Render树(构建渲染树)
通过DOM树和CSS规则树,浏览器就可以通过它两构建渲染树了。浏览器会先从DOM树的根节点开始遍历每个可见节点,然后对每个可见节点找到适配的CSS样式规则并应用。
4、渲染树布局
布局阶段会从渲染树的根节点开始遍历,由于渲染树的每个节点都是一个Render Object对象,包含宽高,位置,背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置,布局阶段的输出就是我们常说的盒子模型。
5、渲染树绘制
渲染树的绘制工作是由浏览器的UI后端组件完成的。
网友评论