0%

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

最近项目并不紧张了,于是得空把一些基础理论梳理下

  1. 当用户URL输入一个网址,浏览器根据用户输入的信息判断是关键词还是网址,如果是关键词则利用默认搜索引擎拼接输入的关键词形成网址,如果输入即是有效网址,则加上协议形成URL,用户输入完内容,按下回车
  2. 回车前,如果当前有页面存在则,执行beforeunload方法
  3. 浏览器导航栏显示loading
  4. 浏览器进程构建请求行信息,以IPC方式将请求行信息发送给网络进程
  5. 网络进程接收到该URL请求
  6. 网络进程中查询该URL资源是否有缓存(强缓存),如果有则相当于请求结束拿到响应数据,直接返回200响应头给浏览器进程,如果没有,则继续发起网络请求
  7. 网络进程中查询DNS确定URL对应的真正IP地址,如果是HTTPS,建立TLS连接
  8. 通过IP地址和端口与目标服务器建立TCP连接【TCP连接三次握手】,成功后开始构建请求头(附带Cookie),向服务器发送HTTP请求【单个域名TCP连接数量限制,比如Chrome是6】
  9. 服务器获得信息后,会构建响应信息,发送给网络进程
  10. 网络进程获得响应信息,解析响应行的状态码来确定下一步的动作,如果是301,302则获取location,然后重复执行接收到一个URL之后的一系列动作,如果是304说明客户端有缓存,则返回304头部到浏览器进程,如果是200则继续
  11. 根据响应头的内容类型来确定下一步的动作,如果是下载类型,则唤起浏览器下载器进行下载,如果是HTML则继续
  12. 渲染进程存在打开新进程的情况,如果是新开的页面,开启新的渲染进程,如果是A页面打开的B页面,同站点,且没有开启noopener则复用A的渲染进程
  13. 浏览器进程接收网络进程的响应头数据,向渲染进程发送【提交文档】信息,渲染进程接收到【提交文档】信息后,与网络进程建立传输数据管道
  14. 渲染进程接收完毕,向浏览器进程发送【确认提交】
  15. 浏览器进程接收【确认提交】信息后,进行安全栏,前进后退界面更新
  16. 渲染进程:DOM生成=>样式计算=>布局=>分层=>图层绘制=>分块=>光栅化=>合成绘制
  17. 渲染进程渲染完成后,向浏览器进程提交页面加载完毕

参考资料