从输入url到页面展示中间发生了什么

---

一、http请求

• 浏览器会构建请求行：例如GET / HTTP/1.1(请求方法是 get,路径为根路径，Http 协议版本为 1.1)
• 检查缓存(强缓存)，如果该请求缓存中存在，直接使用，否则进入下一步
• DNS解析 由于我们输入的是域名，而数据包是通过ip地址传给对方。DNS解析就是得到目标服务器的IP和PORT;浏览器同样提供了DNS 数据缓存功能。
• 建立TCP连接，chorme在同一个域名下要求最多只能有 6 个TCP连接，超过 6 个的话需要排队等待。建立TCP连接要通过三次握手(即总共发送三个数据包确认已经建立连接)建立客户端和服务端之间的连接。
• 发送HTTP请求 TCP连接建立完毕,浏览器可以和服务器通信，即开始发送HTTP请求。浏览器发HTTP请求要携带三个东西:请求行,请求头,请求体。首先，浏览器会向服务器发送请求行(由请求方法,请求 url,HTTP 版本协议组成),请求行在第一步就构建好了。请求头(比如 get 请求会把参数带在请求头中),请求体(只在POST方法存在,会把参数带在请求体中)

二、网络响应

• 网络响应 HTTP请求到达服务器，服务器进行对应的处理，然后把数据响应给浏览器。响应也分为三个部分:响应行,响应头,响应体.响应行由http协议版本号、状态码和状态描述组成。响应头包含了服务器及其返回数据的一些信息，服务器生成数据的时间，返回的数据类型以及即将写入的cookie信息。
• 响应完成之后，TCP并不会立马就断开，这时候会判断connection字段，如果请求头或响应头中包含Connection:Keep-Alive,表示建立了持久连接，这样tcp连接会一直保持，之后请求统一站点的资源会复用这个连接。 否则，会断开TCP连接(四次挥手)，请求-响应流程结束。

三、渲染页面

3.1 生成DOM树

• http响应完成之后，浏览器判断响应头中Content-type的值是text/html,那么浏览器会通知网络进程把得到的html字符串数据，传给渲染进程(FP)(这个过程是边加载边解析的，并不是等网络进程把html数据下载好之后再传给渲染进程).由于浏览器无法直接理解HTML字符串,所以浏览器会进行解析。(ParseHtml).解析的过程，叫做构建DOM树.
• 在构建DOM树的过程中，如果发现javascript脚本，渲染进程就会停止，而去执行脚本，并且，由于脚本会操作dom,所以，渲染进程在遇到js脚本时，会先去下载css文件(脚本执行会依赖 css)。整个来说就是：js会阻塞dom的解析，css会阻塞js的执行。

3.2 生成CSSDOM树

• 同样的，浏览器同样无法识别css文件，会解析css,生成CSSOM树,计算出DOM树所有节点的样式。这个过程叫样式计算。

3.3 生成布局树和图层

• DOM树和CSSOM都解析完成之后，会将两者结合，通过浏览器布局系统，确定元素的位置，生成布局树Layout Tree。
• 生成布局树之后，不会立马进行绘制，而是为特定的节点生成图层，并生成一颗对应的图层树(layer tree),类似于PS中的图层的概念，通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。(会生成单独图层的属性：定位属性,透明属性,css 滤镜，z-index,canvas，滚动条，overflow 等)

3.4 绘制

• 完成图层树的创建后，渲染引擎中合成线程会对图层树中每个图层进行绘制，(生成绘制列表)通常，图层会比较大，所以不会一次性绘制出所有的图层内容，合成线程会将图层划分为图块,图块的大小通常是256256或者512512。
• 合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。((所谓栅格化，是指将图块转换为位图)。 栅格化完成之后，合成线程会通知浏览器，把图片绘制到显示屏上。