URL到页面: 探索网页加载的神秘过程

这篇具有很好参考价值的文章主要介绍了URL到页面: 探索网页加载的神秘过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

当我们从浏览器的地址栏输入 URL, 按下回车,

URL到页面: 探索网页加载的神秘过程

再到最后出现需要的网页界面,

URL到页面: 探索网页加载的神秘过程

这中间究竟发生了什么, 接下来就一步步进行解析.

主要是如下过程:

  1. 输入网址
  2. DNS 解析
  3. 客户端发送 HTTP 请求
  4. 建立 TCP 连接
  5. 服务器处理请求, 计算响应, 返回响应
  6. 浏览器渲染页面
  7. 关闭连接

本篇中只是概述整个过程, 主要是说明从输入 URL 到展示出页面这个过程中做了什么, 但不会对这中间的每个子过程进行详细的介绍, 这些内容在我前面的博客都有总结过, 不清楚的话可以参考看一看, 具体如下.

计网之初识网络(理解网络传输的基本流程)

计网传输层协议:UDP和TCP

计网之IP协议和以太网, DNS

计网之HTTP协议

1. 输入网址

当在浏览器中输入 URL 后敲下回车, 浏览器会对输入的信息进行以下判断:

  1. 检查输入的内容是不是一个合法的 URL 链接还是一个待搜素的关键词.
  2. 如果是合法的URL链接, 判断输入的URL是不是一个完整的URL, 如果不是, 浏览器就会自己猜测, 然后补全这个URL.
  3. 如果是一个待搜索的关键词, 浏览器就会结合用户设置的默认搜索引擎的 URL 来进行搜索.

2. 进行DNS域名解析

DNS 是由解析器和域名服务器组成的, 作用是将域名转化成 IP 地址.

我们平时在浏览器中输入的网址, 其实就是域名, 当我们输入网址按下回车时, 就发起了一个 GET 请求, 此时浏览器的 DNS 系统首先要做的事情就是解析这个域名, 将域名转化成 IP 地址.

通俗的讲, 我们更习惯于记住一个网站的名字, 比如 www.baidu.com, 而不是记住它的 IP 地址, 比如: 167.23.10.2; 而计算机更擅长记住网站的 IP 地址, 而不是像 www.baidu.com 等链接; 类比一下, 其实 DNS 就相当于一个电话本, 你要找 www.baidu.com 这个域名, 那就去翻一翻电话本, 就能知道它的电话 (IP) 是 167.23.10.2.

3. 进行封装

浏览器拿到域名对应的 IP 地址之后, 就可以构造出 HTTP 数据报, 将其交给传输层, 会以一个随机端口 (1024~65535) 向服务器的 Web 程序的 80 端口 (是服务器侦听网页客户端请求的默认端口) 发起 TCP 的连接请求 (三次握手) , 接着将数据交给了网络层, IP协议将其封装成立IP数据报, 然后交给数据链路层, 转换成二进制形式的比特 (bit) 流, 从网卡发送出去, 再把比特转换成电子, 光学或微波信号在网络中传输最终通过网卡传输出去.

4. 进行传输

传输的过程中, 经过一些网络设备, 交换机和路由器等;

  • 交换机把数据分用到数据链路, 再重新封装, 继续转发.
  • 路由器会把数据分用到网络层, 重新封装, 接着路由器会根据数据报中的目的 IP 在路由表中匹配, 找个合适的方向发出去, 每次转发 TTL 都会减1 (TTL 是一个 IP 协议的值, 它告诉网络, 数据包在网络中的时间是否太长而应被丢弃).

5. 服务器接收请求, 根据请求计算响应, 重新封装, 返回响应

服务器通过监听端口来获取到客户端的 HTTP 请求, 与客户端建立 TCP 连接后, 服务器开始接收客户端发来的数据, 首先进入到网卡, 然后是进入到内核的 TCP/IP 协议栈分用数据 (用于识别该连接请求, 解封包, 一层一层的剥开), 终通过 HTTP 解码, 从接收到的数据中进行解析, 找到你想要访问的那个资源, 将资源构造成 HTTP 响应, 再将响应层层封装发送给客户端浏览器.

这样一个 HTTP 通信就完成了, 服务器会根据 HTTP 请求中的 Connection 字段, 决定是否关闭 TCP 连接通道, Connection 字段值为 keep-alive 时, 服务器不会立刻关闭连接, 保证通信的完成.

6. 浏览器接收响应, 进行渲染页面, 最终呈现一个完整的页面

浏览器接收到响应内容之后, 还是先对数据进行分用, 最后浏览器会解析 HTML 文件生成主页框架(构建 dom 树), JS 的解析是由浏览器中的 JS 解析引擎完成的, 比如谷歌的是 V8.

在解析过程中, 如果同时遇到请求外部资源时, 如图片, 外链的 CSS 等静态资源的引用, 会向服务器继续发送请求, 请求的内容就是主页里的一些资源, 例如图片, 视频, JS文件等…

这些请求过程是异步的, 并不会影响 HTML 页面进行加载.

7. 断开连接

此时整个过程结束, 最后通过四次挥手, 浏览器和客户端的连接.文章来源地址https://www.toymoban.com/news/detail-475286.html

到了这里,关于URL到页面: 探索网页加载的神秘过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从输入URL到浏览器显示页面的过程中都发生了什么?

    用户在浏览器中输入一个 url 或直接点开一个 url 后,就可以看到网页内容了。虽然可以直接显示,但在这背后却经过了非常复杂的操作,主要有五大过程:         ip 指的是网络为每一台电脑分配的一个地址。由于 ip 地址不容易被记住,所以有了域名,浏览器拿到域名后

    2024年02月11日
    浏览(55)
  • Android项目在 app 中通过 WebView 访问 url显示空白,使用浏览器可以打开,Android WebView加载出现空白页面问题解决

    服务器证书校验主要针对 WebView 的安全问题。 在 app 中需要通过 WebView 访问 url,因为服务器采用的自签名证书,而不是 ca 认证,使用 WebView 加载 url 的时候会显示为空白,出现无法加载网页的情况。 使用 ca 认证的证书,在 WebView 则可以直接显示出来,不需要特殊处理。 以往

    2024年02月04日
    浏览(54)
  • 浏览器访问url的查找过程

    首先查找浏览器自身的缓存,是否缓存了该网页,如果缓存了,就直接返回缓存的页面。当然,这个页面可能是过时的。 如果浏览器的缓存没有,则会查找系统的缓存,也就是hosts文件。如果hosts文件中找到了域名的ip,则会访问这个ip地址。 如果hosts文件里也没有,则会尝试

    2024年02月10日
    浏览(44)
  • 浏览器输入url后执行的整个过程(详细解析)

    这个问题也是老生常谈了,更是经常被作为面试的压轴题出现。在此稍微全面一点记录下。 检查网页重定向 URL 重定向 (也称为 URL 转发 )是一种为页面、表单或者整个 Web 站点/应用提供多个 URL 地址的技术。 当实际资源(如单个页面、表单或者整个 Web 应用)被迁移到新的

    2024年02月03日
    浏览(84)
  • 面试:浏览器从输入url到渲染页面,发生了什么

    用户输入阶段 合成 URL :浏览区会判断用户输入是合法 URL,比如用户输入的是搜索的,默认的搜索引擎会合成新的,如果符合url规则会根据url协议,在这段内容加上协议合成合法的url      查找缓存 网络进程获取到 URL,先去本地缓存中查找是否有缓存资源,如果有则

    2024年02月06日
    浏览(51)
  • UniApp开发安卓以及H5实现页面级权限管理,避免用户浏览器直接输入url访问页面

    前言:uni-app如何像vue-router中的beforeEach一样实现跳转拦截功能呢? 为此uniapp官方提供了专门的API方法 uni.addInterceptor 举个栗子 我们发现底部有四个菜单分别是:首页、分类、购物车、我的;按常理来说首页和分类是不需要登陆就能查看的。另外两个则需要先登陆才能查看没登

    2024年01月16日
    浏览(66)
  • 浏览器录屏技术:探索网页内容的视觉记录之道

    在当今数字化时代,浏览器录屏技术已经成为了一种强大的工具,用于记录和分享网页内容的视觉体验。无论是用户体验测试、教育培训、产品演示还是远程协作,浏览器录屏技术都能提供便捷、高效的解决方案。 在线录屏 | 一个覆盖广泛主题工具的高效在线平台(amd794.com

    2024年03月09日
    浏览(34)
  • 网页布局(解决浏览器缩放页面乱版问题)

    主要解决两个问题: 1. div盒子随Ctrl+【+/-】缩放而缩放的问题 2. 最小化窗口然后进行缩放页面的布局问题 3. 顶部导航固定问题 ### 第一个问题,则需了解 (1) 容器的布局:margin: auto、定位等等 (2) 尺寸单位:具体尺寸、可视尺寸(vh、vw)、百分比尺寸 ### 第二个问题,则需了解

    2024年02月04日
    浏览(57)
  • 从您输入网站 URL 到其在屏幕上完成加载的整个过程

    以下是从输入网站 URL 到其在屏幕上完成加载的整个过程: 1. 用户输入网站 URL(例如,http://www.example.com)并按下“Enter”键。 2. 网络协议根据 URL 中的信息确定要访问的服务器 IP 地址。 3. 网络协议建立与该服务器的 TCP 连接。 4. 网络协议通过 HTTP 请求向服务器发送请求。

    2024年02月07日
    浏览(33)
  • 配置SSl证书后,https访问,页面获取的url却是http,导致页面资源无法加载

    有个朋友来问,为什么我配置完ssl证书之后,https可以正常访问,但是页面中的资源却无法正常加载。 打开浏览器调试页报错如图: 废话不多说直接处理问题: 方式一: 这页面head标签内 添加 meta标签配置, 内容如下: 或者直接修改页面资源地址 加上 https:// 如果使用requ

    2024年02月09日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包