一篇文章读懂浏览器渲染机制

总所周知，在浏览器搜索栏输入URL便可看到咱们想要的网站，可是这一个过程却不是那么的简单。在浏览器渲染以前，会执行以下操做：

1. DNS 查询
2. TCP 链接
3. HTTP 请求
4. 服务器响应
5. 客户端渲染

DNS 查询

域名解析过程

1. 首先浏览器搜索自身的DNS缓存，查看缓存中是否有对应且没有过时的条目，若是符合条件则解析结束。
2. 若是在浏览器自身缓存中没有找到对应的条目，那么接下来会搜索OS的DNS缓存，若是找到且没有过时则中止搜索解析结束。
3. 要是在OS的DNS中没有找到，那么会尝试读取hosts文件，查询是否有该域名对应的IP地址，若是有则解析成功
4. hosts也没有找到对应的条目的话，浏览器会发起一个DNS的系统调用，向本地配置的首选DNS服务器发起域名解析请求（UPD协议的53端口），运营商的DNS服务器首先查找自身的缓存，找到对应的条目切没有过时，解析成功
5. OS查找NetBIOS name Cache（最近一段时间内和我成功通信的计算机名和IP地址），若是正好几分钟前和我成功通信过，那么解析成功
6. 第五步没有成功，则会查询WINS服务器（NETBIOS名称和IP地址对应的服务器）
7. 第六步没有成功，客户端会进行广播查找
8. 第七步没有成功，那么客户端会读取LMHOSTS文件

DNS也是开销，一般浏览器查找一个给定域名的IP地址要花费20~120毫秒，在完成域名解析以前，浏览器不能从服务器加载到任何东西。

TCP 链接

在浏览器拿到域名对应的IP地址以后，会发起TCP链接请求，这个过程就是咱们熟知的TCP三次握手和四次挥手。

三次握手

客户端首先发送SYN=1给服务端，表示要建立链接，在服务端接收到后，加个ACK=1返回，告诉客户端我收到了，因而就变成了SYN=1,ACK=1。理论上这个时候建立链接成功了，可是要防止客户端没有收到请求，因此客户端再发一个消息给服务端肯定一下，这时只须要返回ACK=1就能够了。

四次挥手

首先客户端请求关闭客户端到服务器端的链接，这时客户端发送一个FIN=1，表示要关闭一个方向的链接，服务端接收后返回ACK=1确认。这时只关闭了一个方向，另外一个方向也须要关闭，因此服务端也向客户端发送FIN=1,ACK=1。客户端接收后发送ACK=1，表示接收成功。四次挥手完成。

HTTP 请求

客户端发送一个HTTP Request包括如下格式： 请求行（request line）、请求头（request header）、空行和请求数据

通常状况下，服务器接受并处理客户端发过来的请求后会返回一个HTTP响应消息，HTTP响应消息包括如下格式： 状态行（status line）、消息报头（reponse header）、空行和响应正文

服务器响应

服务器端WEB程序接收到http请求之后，就开始处理该请求，处理以后就返回给浏览器html文件

客户端渲染

浏览器工做流程：解析HTML以构建DOM树 -> 构建render树（CSSOM） -> 布局render树（在此以前DOM树与CSSOM一块儿生成渲染树） -> 绘制render树

了解了浏览器渲染机制以后才可以针对性的优化，接下来的文章会介绍前端性能优化与黑客攻防。