码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 前端面经 在地址栏输入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
    。

  • 相关阅读:
    计算机毕业设计springboot+vue+elementUI基本微信小程序的新冠疫苗预约小程序
    产品质量模型
    推特营销|推特群推你有无限可能
    vscode安装svn扩展(windows)
    第五章第三节:数和二叉树的应用(二叉排序树和哈夫曼树及哈夫曼编码)
    THFuse: An infrared and visible image fusion network using transformer and hybrid feature extractor 论文解读
    VUE3+TS学习-项目搭建
    DevExpress FMX Data Grid全面编辑和定制
    K8S:K8S自动化运维容器Docker集群
    Webpack 如何安装依赖,-D 和 -S的区别?
  • 原文地址:https://blog.csdn.net/qq_56303170/article/details/127839629
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号