前端面经 在地址栏输入URL,到页面呈现,中间会发生
- 输入url后,首先需要找到这个url域名的服务器ip
- 浏览器首先寻找缓存,查看缓存中是否有记录
查找记录为:浏览器缓存->系统缓存->路由器缓存 - 缓存没有则查找系统的host文件中是否有记录
- 如果没有则查询DNS服务器
- 得到服务器的ip后,浏览器根据这个ip以及相应的端口号,构造一个http请求,这个请求封装在一个tcp包中,这个tcp包会依次经过传输层、网络层,数据链路层,物理层到达服务器
- 服务器解析这个请求并做出响应,返回相应的html给浏览器
- 浏览器根据html来构建DOM树
在DOM树的构建过程中如果遇到JS脚本和外部JS连接,则会停止构建DOM树来执行和下载相应的代码,这会造成阻塞 - 根据内部样式、外部样式、内联样式构建一个CSS对象模型树CSSOM树;构建完成后和DOM树合并成渲染树
这里主要做的是排除非视觉节点,比如script,meta标签和排除display为none的节点 - 进行布局,布局主要是确定各个元素的位置和尺寸
- 渲染页面
因为html 文件中会含有图片,视频,音频等资源,在解析 DOM 的过程中,遇到这些都会进行并行下载,浏览器对每个域的并行下载数量有一定的限制,一般是 4-6 个
请求中需要关注缓存
当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过Cache- Control、Last-Modify等首部字段控制。Cache-Control 使用相对时间,Cache-Control,在请求这些有设置了缓存的数据时,会先查看是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改,
如果上一次 响应设置了ETag 值会在这次请求的时候作为 If-None-Match 的值交给服务
器校验,如果一致,继续校验 Last-Modified,没有设置ETag 则直接验证
Last-Modified,再决定是否返回 304。