地址栏输入一个url到呈现页面中间发生了什么?

72 阅读1分钟
  1. DNS解析
  2. TCP连接
  3. 发送http请求
  4. 服务器处理http请求并返回http报文
  5. 浏览器解析渲染页面
  6. 连接结束

以上便是浏览器输入网址到页面渲染的全部过程

输入URL 输入URL->找到URL的域名的服务器的IP

寻找缓存记录->浏览器缓存一>系统缓存一>路由器缓存
缓存中没有则查找DNS服务器

得到IP和端口构造一个http请求

将请求方法、请求说明、请求附带的数据,打包在一个tcp包里
此tcp包依次经过传输层->网络层->数据链路层->物理层到达服务器

服务器解析请求并做出响应,返回相应的html给浏览器

因为html是一个树形结构,浏览器根据html来构建dom树
在dom树的构建过程中,若遇到js脚本和外部js链接则会停止dom树的构建来执行和下载相应的代码(会造成阻塞),所以推荐js代码应放在html代码后面。
最后根据内部、外部、内联样式构建一个CSS对象模型树CSSOM树
构建完成后和DOM树合并为渲染树。
排除非视觉节点(比如script meta标签和排除display为none的节点)
进行布局(确定各元素的位置和尺寸)
渲染页面
解析DOM过程中遇到图片、视频、音频等会并行下载

浏览器渲染页面会发生回流,浏览器更新页面会发生重塑,回流一定重塑,重塑不一定回流。