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

478 阅读3分钟

总所周知,在浏览器搜索栏输入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 Request
一般情况下,服务器接受并处理客户端发过来的请求后会返回一个HTTP响应消息,HTTP响应消息包括以下格式: 状态行(status line)、消息报头(reponse header)、空行和响应正文
HTTP Response

服务器响应

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

客户端渲染

步骤图
浏览器工作流程:解析HTML以构建DOM树 -> 构建render树(CSSOM) -> 布局render树(在此之前DOM树与CSSOM一起生成渲染树) -> 绘制render树
流程图(webkit)
了解了浏览器渲染机制之后才能够针对性的优化,接下来的文章会介绍前端性能优化与黑客攻防。