浅析从输入URL到页面显示的过程

89 阅读2分钟

1.通过DNS解析浏览器域名,获取服务器的IP地址

2.向服务器发起三次握手的请求

3.服务器重定向到万维网下二级域名,即在协议后加上www.(可选,最终还是回到同一个IP,有利于SEO

4.客户端根据重定向地址,向万维网域名发送请求

5.建立连接,服务器在指定资源路径上获取文件/数据

6.服务器返回一个http响应,并带回数据

7.客户端收到响应,根据响应数据准备渲染

8.浏览器根据数据,创建html的DOM树

9.发请求获取嵌在html中的资源

10.创建CSSOM树,转换样式表中的属性值,使其标准化,计算节点的具体样式

11.遍历DOM树,将DOM节点及其计算好的样式规则添加进Render树中

12.根据Render进行布局,此时浏览器会得到各个节点在页面中的确切位置和大小,即重排,并且布局阶段的输出是一个盒子模型,它会精确地捕获每个元素在屏幕内的确切位置与大小,所有相对的测量值(em)也都会被转换为屏幕内的绝对像素值,即重绘

13.我们知道DOM元素并非全属于标准流,此时,渲染引擎会为他们生成专用的图层,并生成对应的图层树

14.渲染引擎会对图层树中的每个元素进行绘制。合成线程会把分层树的图层变成图块

15.GPU的栅格化把视窗附近的图块变成位图,然后保存在GPU的进程中。(因为一个页面可能很大,而用户只能看到视口中页面的一部分,如果全部绘制开销会很大,所以合成线程会按照视口附近的图块来优先生成位图)

16.栅格化完成之后,浏览器进去GPU进程里取出页面内容显示在屏幕上,这就完成了渲染阶段