从URL输入到页面渲染完毕发生了什么（详细且涵盖知识面广）

这个问题是面试中常考题目,也是一个很大的题目，它涵盖的知识点很多。包括域名解析，tcp连接的三次握手和四次挥手，页面渲染等。如果面试官问到这个问题，你回答的很清楚，那么会有很多知识都不会再问了。下面就来说一下，从 URL输入到页面渲染完毕到底发生了什么。

总体过程分以下为六步：

- 读取url识别协议并解析域名
- 建立TCP连接
- 发送HTTP请求获取资源
- 服务器处理请求返回相应资源
- 浏览器解析HTML，渲染页面
- 结束连接

1、读取url识别协议并解析域名

（1）浏览器识别协议，判断是http,https,ftp等

​ 这里涵盖的知识点就有HTTP和HTTPS的区别：

​ 1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。

​ 2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议，采用对称加密（DES）和非对称（ 密钥交换算法 RSA，数据签名摘要算法MD5）算法

​ 3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

​ 4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

（2）域名解析（浏览器查找域名的IP地址）

​ 1、查找DNS缓存：一般来说浏览器会将DNS记录缓存一段时间，所以在进行域名解析的时候首先去查找缓存，如果有缓存就直接返回IP地址，如果没有就进行下一步。

​ 2、查找系统缓存：即查找本地hosts文件，如果有对应的IP地址，就返回，如果没有就进行下一步。

​ 3、 查找路由器缓存：前面查询无果，则需借助网络，路由器一般都有自己的DNS缓存，将前面的请求发送给服务器，查找ISP服务商缓存DNS的服务器，若查找到，则返回IP地址，否则下一步。

2、浏览器与服务器之间建立TCP连接

​ 主机服务器通过DNS解析，找到目标服务器的IP地址，并于其建立TCP连接

​ TCP连接就是三次握手连接，三次握手指的就是

​ 1、浏览器所在的客户端向服务端发送链接请求

​ 2、服务器接收到来自服务器的请求，同意请求，并向浏览器发送请求确认报文

​ 3、浏览器接收到服务器的确认报文，再次向服务器发送已接收到确认报文的消息。至此TCP三次握手连接也就完成了，可以通信了。

3、发送HTTP请求获取资源

​ 一个完整的HTTP请求一般包括请求起始行，请求报头，请求主体三个部分

​ 请求头部一般包括请求方法，请求地址和协议版本

​ 请求的地址组成是：<协议>//：<主机>：<端口>/路径，如果请求方式是GET的时候组成中还会包括参数

​ 请求方法有：GET，POST，PUT，DELETE，PATCH，Head，Options，Trace,其中最常见的就是GET，和POST

​ 补充：GET和POST的区别

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET产生的URL地址可以被Bookmark，而POST不可以。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的2KB（这是浏览器规定的，服务端处理的最大长度是64KB），而POST么有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在Request body中。

​ 但是。。 从底层TCP/IP协议的角度来看，GET和POST是没有区别的，他们都是HTTP协议的请求方式，本质上是没有区别的， 要给GET加上request body，给POST带上url参数 技术上也都是行得通的，就只是能不能被接收到的问题。以上这些所谓的区别大都是使用时的规范问题所导致的区别。这两种方式最大的区别其实是GET只有一个数据包，POST有两个数据包。也就是说，GET方式，浏览器讲http header和Data一起发送给服务端，服务端响应200Ook，而POST浏览器先将http header 发送给服务端，服务端响应100continue，浏览器才会将data继续发送出去，服务器接收到，返回200 ok.

​ 至此关于第四步HTTP 请求相关的东西也就结束了

4、服务器处理请求，并返回响应

服务器在收到 浏览器发送的http请求之后，会将收到的http报文 封装成http的request对象，通过不同的web服务器进行处理，将处理完成的结果封装成Response对象返回 。这个response队形中包括，状态码，响应头，响应报文三个部分。

状态码包括以下几种类别：

- 1XX：指示信息，表示请求已接收，继续处理

- 2XX：表示请求已被成功接收

- 3XX:重定向，要返回请求必须要执行的把一步操作

- 4XX:客户端错误--表示请求有语法错误或者请求无法实现

- 5XX:服务端错误--服务器未能实现合法的请求

--常见的状态码有    100，200/202/204，301/302/304，400/401/403/404，500/503，



100：continue，他就是告诉客户端继续发送请求，像上文提到的POST请求方式时，服务端在收到第一个数据包request body时向客户端发送响应100意为可以继续发送data部分

\--------------------------------------------------------------------------------------

200：最常见的一个状态码，意为请求成功

202：表示服务器接收请求了，但是还没有处理，而且后续也不一定会处理

204：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；

\--------------------------------------------------------------------------------------

301：永久性重定向，重新分配url，之后请求就一直使用这个url

302：临时性重定向，重新分配url，之后请求不一定一直使用这个url，有可能会变；

304：表示客户端发送附带条件的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；（附带条件是指：采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）

\--------------------------------------------------------------------

400：表示请求报文中存在语法错误；

401：未经许可，需要通过HTTP认证；

403：服务器拒绝该次访问（访问权限出现问题）；

404：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；

\--------------------------------------------------------------------

500：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；

503：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

5、浏览器解析HTML，渲染页面

​ 渲染页面这一部分算是到了浏览器的主场。浏览器接收到服务器的响应和资源就开始解析HTML代码开始渲染页面，渲染页面有以下基本步骤：

 --创建DOM树；

  --创建CSSOM 树（在这部分中如果遇到JS文件，就阻塞创建DOM和CSSOM树，优先加载JS文件，加载完毕再继续创建）;

  --创建 渲染树（render tree）；

  --页面的重绘重排。如果在js中进行DOM操作那么就会引起重排和重绘；（后面会详细讲重绘和重排）

​ 1、浏览器开始解析html代码，创建一个DOM树，浏览器并行的加载CSS/HTML/JS在树中，每一个html标签都是一个DOM节点，这些节点包括：文本节点，注释节点，属性节点，元素节点，文档节点。文档的更节电就是documentElenemt，它所对应的也就是html标签。

​ 2、浏览器解析CSS代码，创建一个cssom树，在解析css大妈过程中主要做的还是计算最终的样式数据，当遇到非法的语法就会直接忽略掉。这里还有一个知识点需要关注，那就是解析CSS的优先级：html中的style>内联样式>外链样式>用户设置>浏览器默认样式。

​ 加载js时阻塞创建树的原因是，浏览器无法预见js会有哪些行为，会不会操作DOM，因此说这样就是为了避免无效操作。

​ 3、创建 渲染树（render tree）就是讲DOM树和CSSOM书的合并过程，但是这并不代表着创建渲染树就要等到DOM树和CSSOM树创建完毕才开始。以上这三步没有先后顺序，一边解析，一边创建，一边渲染才是真正的工作模式。

​ 4、页面的重绘和重排是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。

​ 重绘（repaint ）：** 是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

​ 重排（reflow）：** 当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

​ 引起reflow的因素有哪些：**

​ ① 改变窗口大小

​ ② font-size大小改变

​ ③ 增加或者移除样式表

​ ④ 内容变化（input中输入文字会导致）

​ ⑤ 激活CSS伪类（:hover）

​ ⑥ 操作class属性，新增或者减少

​ ⑦ js操作dom

​ ⑧ offset相关属性计算

​ ⑨ 设置style的值 …

​ 如何避免重绘和重排：**

​ 1、将读写操作分开

​ 2、样式集中改变，不要一个一个的改变

​ 3、批量修改dom

​ 4、利用position:absolute; 使其脱离文档流，进行一系列操作后，再取消position:absolute；

​ 5、用createDocumentFragment(创建的是虚拟节点，不会出现在dom树中)以及拼接html字符串创建dom

​ 6、利用display:none;使其隐藏，进行一系列操作后，再取消display:none;

6、结束连接或者持续链接

​ 这里的结束连接指的就是四次挥手断开TCP连接，下面就简单说一下四次挥手：

​ 1、客户端向服务端发送断开连接的释放报文，并停止传送数据

​ 2、服务端收到客户端的释放报文，向客户端发送确认报文，此时服务端就进入了等待状态；

​ 客户端收到服务端的确认报文，客户端也进入等待状态，等待服务端发送释放报文。（在此之前，服务端还需要将最后的数据传给客户端）

​ 3、服务端将最后的数据传输完毕后，就给客户端发送释放报文。

​ 4、客户端收到服务端的释放报文，向服务端发送确认报文。服务端接收到这个确认报文就立即进入CLOSED状态，结束此次TCP连接。

写在最后的话：文章是自己理解总结的，如若有不对的地方希望有人能指出来，相互学习。文章总结时间很早了，参考了很多，现在也找不到原出处了，后面如果找到了也可以联系我注明。