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进程里取出页面内容显示在屏幕上,这就完成了渲染阶段