浏览器从输入URL到页面加载完成的过程

从输入URL到页面加载完成

从输入URL到网站页面加载完成的过程

• DNS解析
• 建立TCP链接
• 发送HTTP请求
• 服务器响应请求，并返回HTTP报文
• 浏览器解析加载页面

DNS解析

DNS解析的过程就是网址到IP地址的转换。当我们在浏览器中输入 一个地址时，比如：http://wwww.baidu.com,这个地址实际并不是网站的真正地址，在互联网上，每一台机器的唯一标识是它的IP地址，但是，IP地址不方便记忆。所以我们将IP地址转换成为一个网站的地址。这就需要DNS进行解析。

当我们输入网址时，若是第一次请求，首先会在本地域名服务器中查找匹配的IP地址，如果没有找到，本地域名服务器会向根域名服务器发送一个请求，进行IP地址的匹配；如果根域名服务器也不存在该域名时；本地域名会向com顶级域名服务器发送一个请求，以此类推。直到找到所匹配的地址为止。并且浏览器会自动对该解析结果进行缓存，以便下次请求时直接使用。

如果不是第一次请求该域名，则首先会在本地缓存中进行查找匹配域名，然后再向高一级的域名服务为中进行查找.......

TCP连接

TCP三次握手建立的过程：

服务端的TCP进程先创建传输控制块TCB，准备接受客户端进程的连接请求，然后服务端进程处于LISTEN状态，等待客户端的连接请求，如有，则作出响应。

1. 客户端的TCP进程也首先创建传输控制模块TCB，然后向服务端发出连接请求报文段，该报文段首部中的SYN=1，ACK=0，同时选择一个初始序号seq=i。TCP规定，SYN=1的报文段不能携带数据，但要消耗掉一个序号。这时，TCP客户进程进入SYN—SENT（同步已发送）状态，这是TCP连接的第一次握手。

2. 服务端收到客户端发来的请求报文后，如果同意建立连接，则向客户端发送确认。确认报文中的SYN=1，ACK=1，确认号ack=i+1，同时为自己选择一个初始序号seq=j。同样该报文段也是SYN=1的报文段，不能携带数据，但同样要消耗掉一个序号。这时，TCP服务端进入SYN—RCVD（同步收到）状态，这是TCP连接的第二次握手。

3. TCP客户端进程收到服务端进程的确认后，还要向服务端给出确认。确认报文段的ACK=1，确认号ack=j+1，而自己的序号为seq=i+1。TCP的标准规定，ACK报文段可以携带数据，但如果不携带数据则不消耗序号，因此，如果不携带数据，则下一个报文段的序号仍为seq=i+1。这时，TCP连接已经建立，客户端进入ESTABLISHED（已建立连接）状态。这是TCP连接的第三次握手，可以看出第三次握手客户端已经可以发送携带数据的报文段了。

当服务端收到确认后，也进入ESTABLISHED（已建立连接）状态。

HTTP请求

发送HTTP请求的过程就是构建HTTP请求报文，并通过TCP协议中发送到服务器指定端口（HTTP协议80/8080，HTTPS协议443），HTTP请求报文是由三部分组成：请求行，请求报头，请求报文。

请求行

格式：Method Request-URL HTTP-Version CRLF

eg: GET index.html HTTP/1.1
复制代码

常用请求方法：

• GET :请求获取Request-URI所标识的资源
• POST： 在Request-URI所标识的数据后附加新的数据
• HEAD： 请求获取由Request-URI所标识的资源的响应消息报头
• PUT： 请求服务器存储一个资源，并用Request-URI作为其标识
• DELETE： 请求服务器删除Request-URI所标识的资源。与PUT相反
• TRACE：追踪路径，客户端可以对请求消息的传输路径进行追踪。
• CONNECT： 要求用隧道协议链接代理。要求在与代理服务器通信建立隧道，实现隧道协议进行TCP通信。主要用于SSL链接

请求报头

允许客户端向服务器传递请求的附加信息和客户端自身的信息

PS: 客户端不一定特指浏览器，有时候也可使用Linux下的CURL命令以及HTTP客户端测试工具等。

常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。

请求正文

当使用POST, PUT等方法时，通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息，例如: 现在的Web应用通常采用Rest架构，请求的数据格式一般为json。这时就需要设置Content-Type: application/json。

服务器处理请求并返回HTTP报文

后端在固定的端口接受到TCP报文。对TCP链接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP request对象

HTTP响应报文：状态码、响应报头、响应报文

状态码：三位数字组成

• 1xx：指示信息–表示请求已接收，继续处理。
• 2xx：成功–表示请求已被成功接收、理解、接受。
• 3xx：重定向–要完成请求必须进行更进一步的操作。
• 4xx：客户端错误–请求有语法错误或请求无法实现。
• 5xx：服务器端错误–服务器未能实现合法的请求。平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(分别表示什么请自行查找)。

响应报头：

常见的响应报头字段有: Server, Connection...。

响应报文：

服务器返回给浏览器的文本信息，通常HTML, CSS, JS, 图片等文件就放在这一部分。

浏览器解析渲染页面：

浏览器引擎

• 渲染引擎：获取页面内容，整合页面讯息，以计算网页的显示方式，布局页面，并输出到显示器或者打印机上
• JS引擎：解析执行Js代码，实现网页动态效果

浏览器内核类型

• Trident：IE
• Gecko： 网景、火狐
• Presto： Opera
• webkit：Safari、chrome

渲染原理：

1. 解析HTML以重建DOM树：渲染引擎开始解析HTML文档

2. 构建渲染树：解析CSS，根据CSS选择器计算出节点样式，创建渲染树

3. 布局渲染树：从根节点地柜调用，计算每一个元素的大小，位置，给出每个节点所应该出现在屏幕上的精确坐标

4. 绘制渲染树：遍历渲染树，每个节点使用UI后端绘制

reflow/repaint

reflow: 页面某个部分发生 变化，影响布局，需要倒回重新渲染。如：树状目录的折叠，展开，（实质上是元素的显示或者隐藏）只要是引起页面上某个元素的占位面积，定位方式，边距属性发生变化，都会引起reflow

repaint: 若只是改变某个元素的背景颜色，文字、边框颜色，不影响周围元素的布局，会引起repaint

转载于:https://juejin.im/post/5a50320c6fb9a01cb912b64a