在浏览器输入URL到页面展示发生了什么?

2023-10-31

很多前端伙伴问题有没有体系的面试题?
今天为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

查询缓存

其实从填写上url按下回车后,我们就进入了第一步就是 DNS 解析过程,首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip,浏览器首先会寻找缓存,查看缓存中是否有记录缓存的查找记录为:浏览器缓存=》系统缓存=》路由 器缓存缓存中没有则查找系统的 hosts 文件中是否有记录,

DNS服务器

如果没有缓存则查询 DNS 服务器,得到服务器的 ip 地址后,浏览器根据这个 ip 以及相应的端口号发送连接请求;当然如果DNS服务器中没有解析成功,他会向上一步获得的顶级DNS服务器发送解析请求。

在这里插入图片描述

TCP三次握手

客户端和服务端都需要直到各自可收发,因此需要三次握手。

在这里插入图片描述

从图片可以得到三次握手可以简化为:

1、浏览器发送连接请求;
2、服务器允许连接后并发送ACK报文给浏览器;
2、浏览器接受ACK后并向后端发送一个ACK,TCP连接建立成功

HTTP协议包

构造一个 http 请求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个 http 请求封装在一个 tcp 包中;这个 tcp 包也就是会依次经过传输层,网络层, 数据链路层,物理层到达服务器,服务器解析这个请求来作出响应;返回相应的 html 给浏览器;

浏览器处理HTML文档

因为 html 是一个树形结构,浏览器根据这个 html 来构建 DOM 树,在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接,则会停止构建 DOM 树来执行和下载相应的代码,这会造成阻塞,这就是为什么推荐 JS 代码应该放在 html 代码的后面

在这里插入图片描述

渲染树
之后根据外部样式,内部样式,内联样式构建一个 CSS 对象模型树 CSSOM 树,构建完成后和 DOM 树合并为渲染树,在排除非视觉节点,比如 script,meta 标签和排除 display 为 none 的节点,之后进行布局,布局主要是确定各个元素的位置和尺寸,之后是渲染页面,因为 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

到这里就结束了么?其实按照标题所说的到渲染页面我们确实到此就说明完了,但是严格意义上其实我们后面还会有TCP的四次挥手断开连接,这个我们就放到后面单独出一篇为大家介绍吧!

TCP 和 UDP 的区别

1、TCP 是面向连接的,udp 是无连接的即发送数据前不需要先建立链接。
2、TCP 提供可靠的服务。也就是说,通过 TCP 连接传送的数据,无差错,不丢失, 不重复,且按序到达;UDP 尽最大努力交付,即不保证可靠交付。 并且因为 tcp 可靠, 面向连接,不会丢失数据因此适合大数据量的交换。
3、TCP 是面向字节流,UDP 面向报文,并且网络出现拥塞不会使得发送速率降低(因 此会出现丢包,对实时的应用比如 IP 电话和视频会议等)。
4、TCP 只能是 1 对 1 的,UDP 支持 1 对 1,1 对多。
5、TCP 的首部较大为 20 字节,而 UDP 只有 8 字节。
6、TCP 是面向连接的可靠性传输,而 UDP 是不可靠的。

很多前端伙伴问题有没有体系的面试题?
今天为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

写在最后

改 变 能 改 变 的 , 接 受 不 能 改 变 的 ! \textcolor{pink}{ 改变能改变的,接受不能改变的!}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在浏览器输入URL到页面展示发生了什么? 的相关文章

  • JW Player javaScript API 不工作

    我使用 jwplayer version 5 10 2295 和浏览器 chrome 25 My code jwplayer container setup file path width 300px height 100px autost
  • 带换行符的 React/Momentjs 日期格式

    我有一个日期字符串 我想对其进行格式化 其中数字位于月份下 Jul 6 我尝试了几种不同的方法来添加新行
  • 如何实时改变setInterval的速度

    我想知道如何实时更改 setInterval 的速度 例如 if score lt 10 repeater setInterval function spawnEnemy 1000 if score gt 10 repeater setIn
  • 使用 Jest 和 React JS TestUtils 测试表单

    我有一个带有 3 个单选按钮的表单 如下所示 假名
  • 如何判断一个网页是否支持jquery?

    确定网页是否启用 jquery 的最佳方法是什么 如果这是确定它的最佳方法 则使用 jquery 本身 if jQuery jquery object exists jQuery 并不神奇 它本质上只是一个大对象 您可以像检查任何其他对象一
  • 使用 Firefox 插件 sdk 的 nsISocketTransportService

    我正在尝试使用 Firefox 来读取 SSH 横幅 IE 当您最初连接到 SSH 服务器时 服务器会向您发送其横幅 标识服务器软件 并且您向 SSH 服务器发送您的横幅 标识您的客户端软件 为此 我使用以下 URL 中的示例 firefo
  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问
  • JavaScript 将键添加到数组中的每个值

    我下面有这个数组 它由一个简单的数组组成 我想要完成的是放一把钥匙id在每个数组值前面以实现类似的效果 id a id b id c id d 有没有一种简单的方法可以做到这一点 任何帮助将不胜感激 谢谢 var test a b c d
  • 将 Firebase FCM 添加到 ReactJS 应用程序

    我正在尝试向我的 ReactJS 应用程序中的用户发送推送通知 我已添加 firebase 请求用户通知权限 这正在发挥作用 但现在我想注册设备令牌 但这给了我错误 消息传递 我们无法注册默认的 Service Worker 无法注册 Se
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • 如果一个对象结构与另一个对象结构不匹配/不匹配,如何引发异常

    我将读取格式正确的用户输入对象 也就是说 输入对象现在可以具有接口中未定义的任何键或子结构 如果用户提供了无效的对象 我如何抛出异常 预定义接口 export interface InputStructureInterface tableN
  • 使用 WCF 支持“application/x-www-form-urlencoded”发布数据的最佳方式?

    我正在基于 W3C 规范构建 WCF 服务 该规范定义了接受 application x www form urlencoded 发布数据的 RESTful Web 服务端点 默认情况下 WCF 不支持这种类型的消息编码 我发现了许多创建如
  • 注册期间现有电子邮件的 422 或 409 状态代码

    我正在构建 RESTful API 遇到了一种情况 在用户注册期间 如果电子邮件已存在 则在422 and 409哪个http响应代码有意义 我浏览过类似的one https stackoverflow com questions 9269
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • Javascript 浮点乘以 100 仍然有错误

    我有一个货币字段的文本输入 我在字段中输入 33 91 并在尝试使用 乘以 100 技术时得到以下结果 var curWth parseInt trans withdraw index val 100 3390 var curWth par
  • 如何在画布上所有其他内容后面绘制图像? [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前
  • 以角度访问窗口 TemplateUrl 内的范围

    我的模式有一个 windowTemplateUrl 如下 div class modal fade div class modal dialog div class modal content square btn div div div
  • 将多维数组转换为单数组(Javascript)

    我有一个对象数组 来自 XLSX js 解析器 因此其长度和内容各不相同 表示已给予项目的资助 简化后 它看起来像这样 var grants id p 1 location loc 1 type A funds 5000 id p 2 lo
  • 如何在运行脚本之前提交活动单元格中所做的更改? (Google 表格/Google Apps 脚本)

    我正在使用 Google Apps 脚本在 Google 表格中创建提交表单 该表单位于一页上 提交内容被移至第二个隐藏页面 当用户填写表单后 他们按下提交页面上的按钮以激活脚本 我遇到的问题是 当用户填写最后一个单元格然后单击按钮时 输入

随机推荐

  • sql_mode设置(临时or永久)

    临时和永久设置MySQL sql mode非容器方式和容器方式 MySQL 文章目录 临时和永久设置MySQL sql mode 前言 查看sql mode 临时修改sql mode 永久修改sql mode 永久修改sql mode 容器
  • 工业操作系统不是ARM吗?鸿蒙是

    未来工厂如何建 工厂要怎样的数字化平台 褚健认为 面向未来的数字化工厂建议 需要走一条大规模 低成本 生态化之路 正如移动互联时代需要安卓 iOS APP 智能工厂时代需要工厂操作系统 工业APP 工厂操作系统的基础理念包括统一的数据底座
  • ykhmi是什么触摸屏软件_一体机使用中常见问题-中达优控

    1 一体机的屏在组态软件中选择的型号 4 3寸一体机选S430A 5寸一体机选S500A 7寸一体机选S700A 10寸一体机选S1001A 2 一体机发脉冲的Y点用法 A 步进电机驱动器 伺服电机驱动器可以直接接 B 可以用来驱动指示灯
  • Java程序员不得不会的124道面试题(含答案)

    专注于编程 互联网动态 最终将总结的技术 心得 经验 数据结构与算法 源码分析等 享给大家 这里不只限于技术 还有职场心得 生活感悟 以及面经 点击上方 关注按钮 第一时间送达 多线程 并发及线程的基础问题 1 Java 中能创建 vola
  • Chandy-Lamport快照算法仿真实现

    Chandy Lamport快照算法仿真实现 分布式系统中存在的问题 在简单的非分布式环境中发现的问题 如互斥 饿死和死锁等 它们都有可能出现在分布式环境中 实际上 后一种环境下出现这些问题的可能性更大 因为它涉及到很多的实体 它们会引起混
  • 《Java基础教程案例》读书心得

    建议新入门的Java程序猿观看 书籍里面共包含 11 章内容 涵盖了Java基础的全部知识 配备了 20 个任务案例 22到思考题 这本书在我读完以后觉得还是挺不错的一本书 每章的知识点讲的还是挺详细的 最主要的还是你学过此章节的知识点后
  • 传统制造业进行转型过程当中所要面临的主要难点

    在历史上 人类经历了四次工业革命 每一次工业革命都会伴随着一个标志性事物的出现 比如蒸汽机 这标志着人类进入了蒸汽时代 这也是第一次工业革命的开始 第二次工业革命以电力的出现为代表 标志着人类进入了电力时代 以计算机的出现为代表的第三次工业
  • 使用 Kotlin Compose Desktop 实现了一个简易的"手机助手"

    1一 adbd connector adbd connector 是一个实现 adb server 和 adb daemon 之间的通信协议的库 使用 Kotlin 编写 支持 PC 端直接连接 Android 设备操作 adb 相关的指令
  • Vue命令行终端插件使用——vue-web-terminal

    今天分享一个用Vue写的网页端终端插件 可以在web页面模拟原生命令行终端实现一些高级的操作 插件地址 https github com tzfun vue web terminal npm地址 https www npmjs com pa
  • echarts两个饼图关联

    需求一开始显示两张饼图 第一张是各罪名数量的饼图 第二张是嫌疑人各文化数量的饼图 显示之后 要求点击第一个饼图的某个罪名 第二张饼图显示该罪名嫌疑人各文化数量的饼图 给第一张饼图绑定点击事件 默认传入params参数 会输出你点击的这个饼图
  • 代码启动流程

    1 新建Vue项目 vue create app 2 运行项目 yann serve 3 安装electron插件 vue add vue cli plugin electron builder 选择Electron版本 这里需要等很久 请
  • QT实现浏览器访问网页,使用QWebEngineView,支持播放mp4

    QT实现浏览器访问网页 使用QWebEngineView 支持播放mp4 参考 https blog csdn net weixin 40355471 article details 120698537 增加了调试和播放mp4的功能 屏幕放
  • moment.js

    将时间戳转换为number moment Number date format
  • 用itext生成指定宽和动态高的二维码图片

    为什么80 的码农都做不了架构师 gt gt gt 标题和摘要中都提到 本文的一个目的就是生成定宽的二维码图片 还有一个很特别的要求 打印出来得图片需要被条码枪识别 用的第三方工具类库是itext 版本是2 0 为了实现二维码的指定宽高 我
  • Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“

    报错如下 在vue获取后台系统的菜单menu时 报此错 length未定义 经排查 是vue访问后台获取menu list数组的长度时引发的 那么问题来了 后台menu菜单的length必然是 gt 0的 但是这里未获取到就离谱 因为项目在
  • Java+MyEclipse+Tomcat (四)Servlet提交表单和数据库操作

    前面三篇文章讲述了如何配置MyEclipse和Tomcat开发JSP网站 如何配置Servlet简单实现表单提交 如何配置MySQL实现JSP数据库查询 这篇文章主要讲述Servlet表单的提交 Java中实现数据库的查询操作和自己遇到的瓶
  • Vue组件的组成结构

    1 由3个标签节点构成
  • JavaScript如何运行

    项目场景 一些小伙伴刚入手前端开发 对Javascript十分陌生 下面就专门总结运行js文件的几种常用方法 一 Node js Node js 就是运行在服务端的 JavaScript Node js是一个事件驱动I O服务端JavaSc
  • 最大子矩阵(动态规划c++)

    题目描述 已知矩阵的大小定义为矩阵中所有元素的和 给定一个矩阵 你的任务是找到最大的非空 大小至少是1 1 子矩阵 比如 如下4 4的矩阵 0 2 7 0 9 2 6 2 4 1 4 1 1 8 0 2 的最大子矩阵是 9 2 4 1 1
  • 在浏览器输入URL到页面展示发生了什么?

    输入URL后 查询缓存 DNS服务器 TCP三次握手 HTTP协议包 浏览器处理HTML文档 TCP 和 UDP 的区别 写在最后 很多前端伙伴问题有没有体系的面试题 今天为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题