• 前端面经 在地址栏输入URL,到页面呈现,中间会发生


    前端面经 在地址栏输入URL,到页面呈现,中间会发生

    1. 输入url后,首先需要找到这个url域名的服务器ip
      • 浏览器首先寻找缓存,查看缓存中是否有记录
        查找记录为:浏览器缓存->系统缓存->路由器缓存
      • 缓存没有则查找系统的host文件中是否有记录
      • 如果没有则查询DNS服务器
    2. 得到服务器的ip后,浏览器根据这个ip以及相应的端口号,构造一个http请求,这个请求封装在一个tcp包中,这个tcp包会依次经过传输层、网络层,数据链路层,物理层到达服务器
    3. 服务器解析这个请求并做出响应,返回相应的html给浏览器
    4. 浏览器根据html来构建DOM树
      在DOM树的构建过程中如果遇到JS脚本和外部JS连接,则会停止构建DOM树来执行和下载相应的代码,这会造成阻塞
    5. 根据内部样式、外部样式、内联样式构建一个CSS对象模型树CSSOM树;构建完成后和DOM树合并成渲染树
      这里主要做的是排除非视觉节点,比如script,meta标签和排除display为none的节点
    6. 进行布局,布局主要是确定各个元素的位置和尺寸
    7. 渲染页面
      因为html 文件中会含有图片,视频,音频等资源,在解析 DOM 的过程中,遇到这些都会进行并行下载,浏览器对每个域的并行下载数量有一定的限制,一般是 4-6 个

    请求中需要关注缓存

    当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过Cache- Control、Last-Modify等首部字段控制。Cache-Control 使用相对时间,Cache-Control,在请求这些有设置了缓存的数据时,会先查看是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改
    如果上一次 响应设置了ETag 值会在这次请求的时候作为 If-None-Match 的值交给服务
    器校验,如果一致,继续校验 Last-Modified,没有设置ETag 则直接验证
    Last-Modified,再决定是否返回 304

  • 相关阅读:
    迷宫_Sarsa算法_边做边学深度强化学习:PyTorch程序设计实践(2)
    数据通讯基础
    别再张口闭口高并发海量数据了,Spring这些东西都会了吗?
    leetcode 32. 最长有效括号 (困难)
    这可能是2022年把微服务讲的最全了:SpringBoot+Cloud+Docker
    CMake Cookbook
    《软件方法》读后感
    【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?
    动态规划——状态机模型
    TCO-PEG-N3|TCO-PEG-azide|反式环辛烯-聚乙二醇-叠氮-齐岳生物
  • 原文地址:https://blog.csdn.net/qq_56303170/article/details/127839629