从输入url到页面展示,中间发生了什么?

281 阅读5分钟

从输入url到页面展示,中间发生了什么?看似简单的问题,其实覆盖了很多知识点,例如OSI七层网络模型、浏览器进程、缓存、浏览器渲染等。下面我们详细梳理一下。

image.png

1. url合法性判断:
浏览器根据用户输入,判断是搜索内容还是访问网址。如果是搜索内容则将搜索内容+默认搜索引擎进行搜索;如果是符合网址规则,浏览器根据URL协议,在这段内容上加上URL协议生成合法的URL。

2. 按下回车键
用户输入完毕,按下回车键,浏览器导航显示loading状态,页面呈现仍旧是当前页面,新页面的相应数据还没有返回。

3. 浏览器进程通信到网络进程
浏览器构建请求行信息(请求方式 请求路径 协议及版本),通过进程间通信(IPC)将URL请求发送给网络进程。

4. 网络进程判断缓存或进入网络请求
网络进程获取到URL,先去本地缓存中查找,如果缓存中有则拦截请求直接返回200。否则进入网络进请求过程。

5. DNS域名解析
首先查看本机hosts文件夹,其次查看本地域名服务器,然后递归或迭代向上查找,直到根域名服务器,解析出域名对应的ip和端口号。如果没有端口号,http默认80,https默认443。

6. TLS连接
https请求,需要建立TLS连接。建立过程是:

  • 客户端请求建立https连接,服务端返回带有公钥的证书。
  • 客户端产生对称密钥,使用服务端提供的公钥进行加密。
  • 客户端发送加密后的对称密钥给服务端
  • 客户端和服务端通过对称密钥进行密文通信。

7. 传输层,建立TCP连接
TCP三次握手建立连接,http请求头加上TCP头部,包括源端口号、目标端口号、用于校验数据完整性的序号,向下传输。(浏览器最多建立6个TCP连接,多了排队)

8. 网络层
网络层在数据包上加上IP头部,包括源IP地址、目标IP地址,继续向下传输。

9. 数据链路层
数据链路层在数据包上加上数据帧 帧头帧尾,继续向下传输。

10. 物理层
通过光纤、双绞线传输给目的服务器主机。

11. 服务器数据链路层收到数据帧
目的服务器主机接收到数据链路层收到数据帧去帧头帧尾,继续向上传输。

12. 服务器网络层收到数据报
目的服务器主机接收到数据报,解析出IP头部,识别出数据部分,继续向上传输。

13. 服务器传输层收到数据段
目的服务器主机接收到数据段,解析出TCP头部,识别端口号,将数据传输到应用层。

14. 服务器应用层收到报文
应用层http解析请求头,请求体。

如果需要重定向,直接返回http响应数据的状态301302,请求头的location字段附上重定向地址,浏览器会根据code和location进行重定向。

匹配缓存,服务器根据请求头中的If-None-Match的值来判断请求资源是否有更新,没有则返回304,让浏览器继续使用存在本地磁盘或内存中的缓存。有则返回新数据,状态码200,如果想让浏览器缓存数据,设置Cache-control:max-age=6000 即可。

响应数据同样通过 应用层->传输层->网络层->传输层->应用层的顺序返回到了浏览器网络进程。

15. 数据传输完成,断开TCP连接
TCP四次挥手断开连接。如果浏览器或服务器在http头部加了Connection:keep-alive,则不断开连接。

16. 网络进程解析数据包
网络进程将获取到的数据包进行解析,根据响应头中的Content-type判断响应数据的类型。如果是字节流则交给下载管理器,本次流程结束。如果是text/html类型,则通知浏览器进程已获取到文档准备渲染。

17. 浏览器渲染进程接受文档数据
浏览器发出渲染指令给渲染进程,渲染进程收到消息后会和网络进程建立传输数据的管道,文档数据传输完成后,渲染进程会通知浏览器进程已传输完毕。

18. 浏览器更新页面状态
浏览器收到渲染进程传输完毕的消息后,更新页面状态,包括地址栏url、前进后退历史、并更新web页面。此时页面仍是空白页。

19. 浏览器渲染进程解析文档渲染页面
渲染进程对文档进行页面解析和子资源加载,HTML通过HTML解析器转换成DOM Tree,CSS通过CSS 解释器转换成CSSOM Tree。最后生成Render Tree。通过布局树进行分层,生成图层树,将不同图层进行绘制,最终转交给合成线程处理,最终生成页面展示在浏览器上。