从在浏览器的输入框输入一个网址,到看到网页的内容,这个过程中发生了什么?

2023-11-13

https://www.cnblogs.com/ouyang99-/p/10284271.html

 

     当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。

一、网络通信

    互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信。分层由高到低分别为:应用层、传输层、网络层、数据链路层。发送端从应用层往下走,接收端从数据链路层网上走。如图所示:

TCPIP

1. 在浏览器中输入url

    用户输入url,例如http://www.baidu.com。其中http为协议,www.baidu.com为网络地址,及指出需要的资源在那台计算机上。一般网络地址可以为域名或IP地址,此处为域名。使用域名是为了方便记忆,但是为了让计算机理解这个地址还需要把它解析为IP地址。

2.应用层DNS解析域名

   客户端先检查本地是否有对应的IP地址,若找到则返回响应的IP地址。若没找到则请求上级DNS服务器,直至找到或到根节点。

3.应用层客户端发送HTTP请求

HTTP请求包括请求报头和请求主体两个部分,其中请求报头包含了至关重要的信息,包括请求的方法(GET / POST)、目标url、遵循的协议(http / https / ftp…),返回的信息是否需要缓存,以及客户端是否发送cookie等。

4.传输层TCP传输报文

   位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输,将大块的数据分割成以报文段为单位的数据包进行管理,并为它们编号,方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。

  “三次握手”的过程是,发送端先发送一个带有SYN(synchronize)标志的数据包给接收端,在一定的延迟时间内等待接收的回复。接收端收到数据包后,传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中,如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求,而再次发送,直到收到回复为止。

TCP

5.网络层IP协议查询MAC地址

   IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址,也就是物理地址。IP地址和MAC地址是一一对应的关系,一个网络设备的IP地址可以更换,但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时,需要多次中转才能到达最终的目标,在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

6.数据到达数据链路层

   在找到对方的MAC地址后,就将数据发送到数据链路层传输。这时,客户端发送请求的阶段结束

7.服务器接收数据

   接收端的服务器在链路层接收到数据包,再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。

8.服务器响应请求

   服务接收到客户端发送的HTTP请求后,查找客户端请求的资源,并返回响应报文,响应报文中包括一个重要的信息——状态码。状态码由三位数字组成,其中比较常见的是200 OK表示请求成功。301表示永久重定向,即请求的资源已经永久转移到新的位置。在返回301状态码的同时,响应报文也会附带重定向的url,客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

9. 服务器返回相应文件

   请求成功后,服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。

二、页面渲染

   现代浏览器渲染页面的过程是这样的:jiexiHTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

   DOM树是由HTML文件中的标签排列组成,渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素,像<head>元素或display属性值为none的元素都不在渲染树中。

   在浏览器还没接收到完整的HTML文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

 

二:一些通信名词解释

DNS:

作用: 将主机名转换为ip的一种协议

TP/IP

网络协议:http://www.cnblogs.com/linhaifeng/articles/5937962.html#_label5

详解TCP|IP :https://www.cnblogs.com/wsnb/tag/TCP%2FIP/

TCP通信过程包括三个步骤:建立TCP连接通道,传输数据,断开TCP连接通道

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

从在浏览器的输入框输入一个网址,到看到网页的内容,这个过程中发生了什么? 的相关文章

  • “性能压测揭密:关键指标分析!“

    在进行全链路压测和性能测试时 需要关注多个关键性能指标 KPIs 来评估系统的性能表现 以下是一些常见的性能测试指标 1 吞吐量 Throughput 系统在单位时间内能够处理的请求数量或事务数量 通常以每秒请求数 RPS TPS 来衡量
  • Python 如何安装Selenium(推荐)

    一 Selenium的定义 Selenium 是一个 Web的自动化测试工具 最初是为网站 自动化测试而开发的 Selenium 可以直接调用浏览器 它支持所有主流的浏览器 包括PhantomJS 这些无界面的浏览器 可以接收指令 让浏览器
  • 真的干不过,00后整顿职场已经给我卷麻了,想离职了...

    在程序员职场上 什么样的人最让人反感呢 是技术不好的人吗 并不是 技术不好的同事 我们可以帮他 是技术太强的人吗 也不是 技术很强的同事 可遇不可求 向他学习还来不及呢 真正让人反感的 是技术平平 却急于表现自己的人 每天加班到12点 在老
  • 【软件测试】学习笔记-高效提交Bug

    本篇文章介绍如何才能写出一份高效的软件缺陷报告 测试工程师需要利用对需求的理解 高效的执行力以及严密的逻辑推理能力 迅速找出软件中的潜在缺陷 并以缺陷报告的形式递交给开发团队 缺陷报告是测试工程师与开发工程师交流沟通的重要桥梁 也是测试工程
  • 软件测试|Python Selenium 库安装使用指南

    简介 Selenium 是一个用于自动化浏览器操作的强大工具 它可以模拟用户在浏览器中的行为 例如点击 填写表单 导航等 在本指南中 我们将详细介绍如何安装和使用 Python 的 Selenium 库 安装 Selenium 库 使用以下
  • 软件测试|Windows系统配置pytest+allure环境教程

    前言 allure可以输出非常精美的测试报告 也可以和pytest进行完美结合 不仅可以渲染页面 还可以控制用例的执行 本文我们将介绍Windows系统中如何配置allure环境 第一步 配置Java环境 因为 allure 的运行依赖于J
  • 使用Hypothesis生成测试数据

    Hypothesis是Python的一个高级测试库 它允许编写 测试用例 时参数化 然后生成使测试失败的简单易懂的测试数据 可以用更少的工作在代码中发现更多的bug 安装 pip install hypothesis 如何设计 测试数据 通
  • 软件测试|Python openpyxl库使用指南

    简介 我们之前介绍过 python在自动化办公方面可以大放异彩 因为Python有许多的第三方库 其中有很多库就支持我们对office软件进行操作 熟练的使用Python对office进行操作 可以实现自动化办公 极大提升我们的工作效率 本
  • Python接口自动化测试处理不同接口间参数依赖

    2024软件测试面试刷题 这个小程序 永久刷题 靠它快速找到工作了 刷题APP的天花板 CSDN博客 文章浏览阅读2 2k次 点赞85次 收藏11次 你知不知道有这么一个软件测试面试的刷题小程序 里面包含了面试常问的软件测试基础题 web自
  • 38条Web测试经验分享

    1 页面链接检查 每一个链接是否都有对应的页面 并且页面之间切换正确 可以使用一些工具 如LinkBotPro File AIDCS HTML Link Validater Xenu等工具 LinkBotPro不支持中文 中文字符显示为乱码
  • 外包干了3个月,技术退步明显。。。。。

    先说一下自己的情况 本科生 19年通过校招进入广州某软件公司 干了接近4年的功能测试 今年年初 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了四年的功能测试 已经让我变得不思进取 谈了2年的女朋友
  • 软件测试|深入了解Python中的super()函数用法

    简介 Python中的super 函数是一种强大的工具 用于在子类中调用父类的方法 它在面向对象编程中非常有用 可以让你轻松地扩展和重用现有的类 本文将详细介绍super 函数的用法 并提供一些示例来帮助你更好地理解它的功能 什么是supe
  • 软件测试|Python数据可视化神器——pyecharts教程(九)

    使用pyecharts绘制K线图进阶版 简介 K线图 Kandlestick Chart 又称蜡烛图 是一种用于可视化金融市场价格走势和交易数据的图表类型 它是股票 外汇 期货等金融市场中最常用的技术分析工具之一 可以提供关于价格变动 趋势
  • 新手也能看懂的【前端自动化测试入门】

    2024软件测试面试刷题 这个小程序 永久刷题 靠它快速找到工作了 刷题APP的天花板 CSDN博客 文章浏览阅读2 3k次 点赞85次 收藏11次 你知不知道有这么一个软件测试面试的刷题小程序 里面包含了面试常问的软件测试基础题 web自
  • 新手也能看懂的【前端自动化测试入门】!

    前言 最近在网上搜索前端自动化测试相关的文档 但是发现网上的文章都是偏使用 没有把一些基础概念说清楚 导致后续一口气遇到一些 karma Jasmine jest Mocha Chai BDD 等词汇的时候很容易一头雾水 这次一方面整理一下
  • 月薪2W的软件测试工程师,到底是做什么的?

    在生活中 我们常常会遇到以下几种窘迫时刻 准备骑共享单车出行 却发现扫码开锁半天 车子都没有反应 手机导航打车 却发现地图定位偏差很大 司机总是跑错地方 买个水 却遭遇自动售货机吐币 或者不找零钱 好不容易休息打个游戏 却一直出现卡顿 闪退
  • 外包干了2个月,技术倒退2年。。。

    先说一下自己的情况 本科生 20年通过校招进入深圳某软件公司 干了接近4年的 功能测试 今年国庆 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了四年的功能测试 已经让我变得不思进取 谈了3年的女朋
  • 15:00面试,15:06就出来了,问的问题有点变态。。。

    从小厂出来 没想到在另一家公司又寄了 到这家公司开始上班 加班是每天必不可少的 看在钱给的比较多的份上 就不太计较了 没想到9月一纸通知 所有人不准加班 加班费不仅没有了 薪资还要降40 这下搞的饭都吃不起了 还在有个朋友内推我去了一家互联
  • 外包干了3个月,技术退步明显。。。。。

    先说一下自己的情况 本科生 20年通过校招进入广州某软件公司 干了接近3年的 功能测试 今年年初 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了3年的功能测试 已经让我变得不思进取 谈了2年的女朋
  • Airtest自动化测试工具

    一开始知道Airtest大概是在年初的时候 当时 看了一下官方的文档 大概是类似Sikuli的一个工具 主要用来做游戏自动化的 通过截图的方式用来解决游戏自动化测试的难题 最近 移动端测试的同事尝试用它的poco库来做自动化 看样子还不错

随机推荐

  • 解决The code generator has deoptimised the styling of xxxx.js as it exceeds the max of 500kb

    解决The code generator has deoptimised the styling of xxxx js as it exceeds the max of 500kb 1 需求背景 最近在vue项目引用了一个js文件 由于这个
  • #pragma once和#ifndef的区别

    转载自 百度百科 pragma once 和 ifndef的区别 pragma once和 ifdef都是可以避免同一个文件被include多次 在能够支持这两种方式的编译器上 二者并没有太大的区别 但是两者仍然还是有一些细微的区别 1 p
  • AcWing 894. 拆分-Nim游戏 (博弈论)

    题目 数论章节中的最后一题 也是博弈论的最后一节 堆ai拆分成b1 b2后 一个重要的性质就是sg b1 b2 sg b1 sg b2 import java io BufferedReader import java io IOExcep
  • 工业软件系列之仿真篇:正向研发的加速器

    已剪辑自 https mp weixin qq com s 0VVwg08JH PZhKpvcoRYTA 仿真是通过模型来模拟现实系统中发生的过程 其本质是将物理化学公式模型进行代码化表示 并借助计算机实现计算求解 仿真在离散制造和流程制造
  • 解决linux git已生成配置密钥出现Permission denied (publickey).问题

    前言 在我使用linux的git时 配置的ssh密钥 并且添加进的github 但是在执行git clone 时仍然出现Permission denied publickey 的问题 经过多次的尝试 发现的解决问题的方法 方法 这个问题的原
  • 你知道DashO Pro/Dotfuscator有效保护应用的秘诀吗?看了这篇你就明白了

    Gartner在其2019年7月应用内保护应用内保护市场指南中将应用内保护称为 关键 该指南的摘要建议安全和风险管理负责人 在保护其应用程序客户端时应格外小心 以避免 安全性失败 这就提出了一个问题 什么构成 应有的注意 尽管术语和术语可能
  • Person类

    题目 设计一个 Person 类 成员包括 姓名 性别 年龄 需要实现的功能 成员函数 输入 输出 修改成员 根据有关信息初始化对象 main 函数先输出把对象初始化为缺省值的结果 再输出修改各成员的结果 再输出经输入函数修改各成员的结果
  • origin如何绘制双y轴曲线_如何通过紫外可见漫反射光谱计算带隙/禁带宽度(方法2.tauc plot法)...

    微信公众号试行乱序推送 为了不错过更新 请点击本页面最上方的 结构分析表征 进入公众号主页 点击右上角的三个小点点 在弹出的界面点击 设为星标 并在看完图文或视频后点击右下角的 在看 和 赞 本公众号以各类仪器的测试 分析教程 欢迎关注同名
  • 《机器学习》又名西瓜书个人笔记

    周志华老师写在第十次印刷之际 这是一本教科书 这是一本入门教科书 这是一本面向理工科高年级本科生和研究生的教科书 本书适宜多读几遍 初学机器学习 容易陷入一个误区 以为熟练了 十大算法 便可以解决任何问题 于是将目光仅聚焦在具体算法推导和编
  • Vuforia 的 模型识别中 数据集 Database

    数据集 使用ObjectTracker数据集API可以选择使用的模型目标 可以从中创建和加载模型数据集 继承自DataSet ObjectTracker 加载后 可以激活数据集以供数据集使用ObjectTracker 与我们现有的功能类似
  • SQL注入详解

    一 什么是SQL注入 SQL注入是一种将SQL代码添加到输入参数中 传递到SQL服务器解析并执行的一种攻击方式 select from table where name appName 攻击者利用appName参数值的输入 来生成恶意的SQ
  • mac typora低版本出现图片不显示

    由于mac的系统版本低 安装的typora的版本也相对低 但是会遇到一些问题 尤其是遇到加载的图片 出现不显示 需要手动一个一个修改一下才能显示 如果图片较多就麻烦了 可以切换源代码模式 在源码模式下 编写一个图片的链接 可以在 和imag
  • 使用openCV查看png图片的各通道值

    png格式的图片除了能展现出各种各样的色彩外 还能表现出 透明 的特点 这是因为这种格式的图片除了含有我们常见的RGB三个颜色通道外 还有一个A通道来控制图片的透明效果 使用openCV可以方便的查看各种格式图片各个通道的值 思路如下 首先
  • windows 下的composer 可能遇到(Loading composer repositories with package information)

    最容易遇到下面这个问题 Loading composer repositories with package information Updating dependencies including require dev 在dos界面下输入
  • Unity Inputfield获得和失去焦点

    获取焦点 public InputField inputField void Start inputField ActivateInputField 失去焦点 public InputField inputField void Start
  • electron-egg: 新一代桌面应用开发框架

    当前桌面软件技术有哪些 语言 技术 优点 缺点 C wpf 专业的桌面软件技术 功能强大 学习成本高 Java swing javaFx 跨平台和语言流行 GUI库少 界面不美观 C Qt 跨平台 功能和类库丰富 学习成本高 Swift 无
  • 用Python画笑脸

    开心一下 喵 很早之前画的 放上来做个纪念吧 代码如下 from turtle import screensize 600 600 speed 10 def Arc initial degree step rotate rangeNum s
  • cmake

    ubuntu系统当库安装后 需要包含头文件一般在 usr local include 比如 include directories usr local include ImageMagick 7 这样就能调用各种功能头文件 但还要包含 so
  • 数据结构基本概念及算法分析

    文章目录 1 数据结构基本概念 1 1 基本概念和术语 1 1 1 数据 1 1 2 数据元素 1 1 3 数据项 1 1 4 数据对象 1 1 5 数据结构 1 2 逻辑结构与物理结构 1 2 1 逻辑结构 我们最需要关注的问题 1 2
  • 从在浏览器的输入框输入一个网址,到看到网页的内容,这个过程中发生了什么?

    https www cnblogs com ouyang99 p 10284271 html 从在浏览器的输入框输入一个网址 到看到网页的内容 这个过程中发生了什么 当在浏览器地址栏输入网址 如 www baidu com后浏览器是怎么把最