在地址栏里输入一个 URL,到这个页面呈现出来,中间会发生什么?

简化过程:

1、DNS 解析
2、TCP 连接
3、发送 HTTP 请求
4、服务器处理请求并返回 HTTP报文
5、浏览器解析渲染页面
6、连接结束

详细过程

  • 1、获取服务器ip地址( DNS 解析 )
    输入 url 后,首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip,浏览器首先会寻 找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存-》系统缓存-》路由器缓存,缓存中没有则查找系统的 hosts 文件中是否有记录,如果没有则查询 DNS 服务 器,最终获取服务器ip地址;
  • 2、构造一个 http 请求,并将请求封装在一个 tcp 包中
    得到服务器的 ip 地址后,浏览器根据这个 ip 以及相应的端口号,构造一个 http 请求,这个请求报文会包括这次请求的信息,主要是请求方法,请求header头部信息和请求参数,并将这个 http 请求封装在一个 tcp 包中,
  • 3、tcp包发送给服务器
    这个 tcp 包会依次经过传输层,网络层, 数据链路层,物理层到达服务器,
  • 4、服务器返回html
    服务器解析这个请求来作出响应,返回相应的 html 给浏览器
  • 5、浏览器构建 DOM 树
    浏览器根据这个 html 来构建 DOM 树,在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接,则会停止构建 DOM 树来执行和下载相应的代码,这会造成阻塞,这就是为什么推荐 JS 代码应该放在 html 代码的后面;
  • 6、浏览器构建CSS对象模型
    之后根据外部样式,内部样式,内联样式构建一个 CSS 对象模型,
  • 7、将DOM 树与CSS对象模型合并为渲染树,再进行布局
    将DOM 树与CSS对象模型合并为渲染树(这里主要做的是排除不需要显示的节点,比如 script,meta 标签和 排除 display 为 none 的节点),之后进行布局,布局主要是确定各个元素的位置和尺寸。
  • 8、布局之后就是渲染页面,并行下载资源
    布局之后就是渲染页面,因为 html 文件中会含有图片,视频,音频等资源,在解析 DOM 的过程中,遇到这些都会进行并行下载 ( 注意:浏览器对每个域的并行下载数量有一定的限制,一 般是 4-6 个),
    当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的区别 在于 Cache-Control 使用相对时间,Expires 使用的是基于服务器端的绝对时间,因为存在时差问题,一般采用 Cache-Control,在请求这些有设置了缓存的数据时,会先查看是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改,如果上一次响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给 服务器校验,如果一致,继续校验 Last-Modified,没有设置 ETag 则直接验证 Last-Modified,再决定是否返回 304

猜你喜欢

转载自blog.csdn.net/yiyueqinghui/article/details/121542218
今日推荐