输入网址后会发生什么
当我们输入网址时,浏览器会对url进行解析,确定请求协议和请求的地址,如果出现非法字符会进行转译,如果带非法字符,会使用搜索,否则先会寻找该域名对应的IP地址
,这里涉及到第一个知识点。
DNS查询
DNS
的作用就是通过域名
查询到具体的IP
。
当浏览器访问www.google.com
时,会进行一下操作:
- 本地客户端先在本地缓存中查找IP
- 查找不到,则会到系统配置的
DNS服务器
(如8.8.4.4
)中查询 - 如果还是查找不到,会直接到
DNS根服务器
(13个根,其中10个在美国,英国和瑞典各1个,日本1个)查询,会先找出负责com
这个一级域名的服务器 - 然后回去该服务器查询
google
这个二级域名 - 接下来查询三级域名,其实也是我们自己配置的
以上是DNS的迭代查询
,还有一种是递归查询,区别在于,前者是客户端发送请求,后者是系统配置的DNS服务器发送请求,得到结果再返回给客户端。
普通DNS查询基于
UDP
实现的原因?
- 查询内容不超过512字节
- 不需要TCP三次握手,负载更低,响应更快 DNS在进行区域传输的时候使用
TCP
协议?- 两种类型:
主DNS服务器
和辅助DNS服务器
- 当一个辅助DNS服务器启动时,它需要与主DNS服务器通信,并加载数据信息,这就叫做
区域传送
- 对准确性要求比较高,而且会产生大于512字节的数据包,因此使用TCP协议。
TCP连接
拿到IP地址后,接下来是 TCP 握手,应用层会下发数据给传输层,这里 TCP 协议会指明两端的端口号,然后下发给网络层。网络层中的 IP 协议会确定 IP 地址,并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中,最后就是物理层面的传输了。
HTTPS连接
当 TCP 握手结束后就会进行 TLS 握手,然后就开始正式的传输数据。
服务器响应
数据在进入服务端之前,可能还会先经过负责负载均衡的服务器,它的作用就是将请求合理的分发到多台服务器上,这时假设服务端会响应一个 HTML 文件。
首先浏览器会判断状态码是什么,如果是 200 那就继续解析,如果 400 或 500 的话就会报错,如果 300 的话会进行重定向,这里会有个重定向计数器,避免过多次的重定向,超过次数也会报错。
浏览器渲染
浏览器开始解析文件,如果是 gzip 格式的话会先解压一下,然后通过文件的编码格式知道该如何去解码文件。
文件解码成功后会正式开始渲染流程,先会根据 HTML 构建 DOM 树,有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话,会判断是否存在 async 或者 defer ,前者会并行进行下载并执行 JS,后者会先下载文件,然后等待 HTML 解析完成后顺序执行。
如果以上都没有,就会阻塞住渲染流程直到 JS 执行完毕。遇到文件下载的会去下载文件,这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。
CSSOM 树和 DOM 树构建完成后会开始生成 Render 树,这一步就是确定页面元素的布局、样式等等诸多方面的东西
在生成 Render 树的过程中,浏览器就开始调用 GPU 绘制,合成图层,将内容显示在屏幕上了。
这一部分就是渲染原理中讲解到的内容,可以详细的说明下这一过程。并且在下载文件时,也可以说下通过 HTTP/2 协议可以解决队头阻塞的问题。