一个页面从输入URL到页面呈现发生了什么

83 阅读1分钟

网络篇

  • 构建请求,如果输入内容符合URL规则,浏览器进程会通过进程间通信把URL请求发送至网络进程,网络进程接收到URL请求后,会发起真正的URL请求流程
  • 查找强缓存,如果命中直接使用,否则进行DNS解析,将域名解析为ip地址
  • 建立TCP连接,发送HTTP请求
  • 服务器端响应,返回请求的数据

解析篇

  • 解析HTML,生成DOM Tree
  • 解析CSS,生成CSS Tree
  • 合并HTML Tree和CSS Tree,生成Render Tree(渲染树)
  • 通过浏览器的布局系统,计算确定各个元素的位置和样式,生成Layout Render(布局树)

渲染篇

  • 生成Layer Tree(图层树)
  • 生成绘制列表、进行图层绘制
  • 生成图块并栅格化
  • 显示器显示内容

参考文献: juejin.cn/post/699406…