在浏览器输入url到页面展示出来

一、解析URL

首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。

二、缓存判断

浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。

三、DNS解析

下一步首先需要获取的是输入的 URL 中的域名的 IP 地址。首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。

四、获取MAC地址

当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。

五、TCP三次握手

下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向服务器端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。

六、HTTPS握手

如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。

七、服务端处理请求并返回数据

当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。

八、浏览器渲染页面

浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。

1、解析HTML文件并构建 DOM 树

因为浏览器无法直接理解和使用HTML，所以需要将HTML转化为浏览器能够理解的结构—DOM树。在浏览器渲染中，我们使用的就是树结构。DOM树描述了文档的内容。元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。DOM节点的数量越多，构建DOM树所需的时间就越长。当解析器发现非阻塞资源，例如一张图片，浏览器会请求这些资源并且继续解析。当遇到一个CSS文件时，解析也可以继续进行，但是对于<script>标签（特别是没有 async 或者 defer 属性）会阻塞渲染并停止HTML的解析。

2、解析CSS代码并构建CSSOM树

（1）把CSS转换为浏览器内容理解的结构

和HTML文件一样，浏览器也是无法直接理解这些纯文本的CSS样式，所以当渲染引擎接收到CSS文本的时，会执行一个转换操作，将css文本转换为浏览器可以理解的结构—styleSheets

（2）转换样式表中的属性值，使其标准化

CSS 文本中有很多属性值，如 2em、blue、bold，这些类型数值不容易被渲染引擎理解，所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化

（3）计算出DOM树中每一个节点的具体样式

这里就涉及到CSS的继承规则和层叠规则了。首先是CSS的继承，css继承是每个DOM节点都包含父节点的样式。继承规则就是一般文本和字体相关样式都是可以继承的。层叠规则，嵌套的越深权重就越高。
总之，样式计算阶段的目的是为了计算出 DOM 节点中每个元素的具体样式，在计算过程中需要遵守 CSS 的继承和层叠两个规则。这个阶段最终输出的内容是每个 DOM 节点的样式。

3、DOM树和CSSOM合并后生成Render Tree

渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。

注意：Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

4、Layout

有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。根据DOM节点对应的CSS树中的样式，计算布局树节点的坐标位置。即计算元素在视口上确切的位置和大小。

5、分层 (图层树)

有了布局树之后，每个元素的具体位置信息都计算出来了，那么接下来是不是就要开始着手绘制页面了？不是。因为页面中有很多复杂的效果，如一些复杂的3D转换，页面滚动，或者使用z-index，为了更方便的实现这些效果，渲染引擎还需要为特定的节点生成专门的图层，并生成一棵对应的图层树(LayerTree)。这和PS的图层类似，正是这些图层叠加在一起才最终构成了页面图像。当然并不是布局树中的每一个节点都包含一个图层，如果一个节点没有对应的图层，那么这个节点就从属于父节点的图层。拥有层叠上下文属性的元素会被提升为单独的一层（如position:fixed和canvas等），渲染引擎才会为特定的节点创建新的图层。

6、图层的绘制

如果给你一张纸，让你先把背景涂成暗色，然后再中间中间位置花一个红色的圆，最后在圆上画一个绿色三角，你会怎么操作，通常你会按顺序操作。渲染引擎实现图层的绘制与之类似，会把一个图层的绘制拆分为很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表。绘制一个元素通常需要好几条绘制指令，因为每个元素的背景、前景、边框都需要单独的指令去绘制。所以在图层绘制阶段，输出的内容就是这些待绘制列表。

7、栅格化操作

当图层的绘制列表准备好之后，主线程会把该绘制列表提交给合成线程。

比如说，一个图层很大，页面需要滚动底部，才能全部显示。但是通过视口，用户只能看到页面很小的一部分，所以在此种情况下，要一次性绘制完图层所有的内容，会产生很大的开销，且没有必要。

基于这个原因，合成线程会将图层划分为图块，这些图块的大小通常是256 * 256或512 * 512。然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作就是有栅格化来执行的。所谓栅格化，**是指将图块转化为位图(所谓位图就是能够看的到的图层区域)。而图块是栅格化执行的最小单位。**渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行。

栅格化就是按照绘制列表中的指令生成图片。每一个图层都对应一张图片。

8、合成和显示

一旦所有图块被栅格化，合成线程就会生成一个绘制图块的命令—“DrawQuad”，然后将该命令提交给浏览器进程。
浏览器进程里有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将这些图片合成为“一张”图片，最后使用浏览器的 UI 接口对页面进行绘制，将生成的图片（页面内容）绘制到内存中，最后显示在屏幕上。

九、TCP四次挥手

最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。