程序员经验分享-hwhale

在浏览器中输入网址后回车发生了哪些事情

2023-11-06

最近在和许多同学交流面经的时候，发现有一个问题：无论你是前端开发，还是后端开发，被问到的概率很高，在此，我想把这个问题记录一下

总体来说，在浏览器的地址栏中输入网址后，发生了如下的事情：

  1. DNS解析

  2. TCP连接

  3. 发送HTTP请求

  4. 服务器处理请求并返回HTTP报文

  5. 浏览器解析渲染页面

  6. 连接结束

 下面还是具体说说每一步的大致原理

1.DNS解析

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当我们在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。网址到IP地址转换的过程是如何进行的?

解析过程

DNS解析是一个递归查询的过程。


上述图片是查找www.google.com的IP地址过程。首先在本地域名服务器中查询IP地址，如果没有找到的情况下，本地域名服务器会向根域名服务器发送一个请求，如果根域名服务器也不存在该域名时，本地域名会向com顶级域名服务器发送一个请求，依次类推下去。直到最后本地域名服务器得到google的IP地址并把它缓存到本地，供下次查询使用。从上述过程中，可以看出网址的解析是一个从右向左的过程: com -> google.com -> www.google.com。但是你是否发现少了点什么，根域名服务器的解析过程呢？事实上，真正的网址是www.google.com.，并不是我多打了一个.，这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，既然是默认情况下，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上，所有网址真正的解析过程为: . -> .com -> google.com. -> www.google.com.。

2.进行TCP连接

建立TCP链接，就是通常说的三次握手，首先是客户端向服务器发送请求是否可以建立链接，服务器返回同意后，客户端回馈服务器的响应，即完成3次通话。TCP中的三次握手，大家可以自行百度，这里就不多说了。

3.发送HTTP请求

在完成TCP连接后，接下来做的事情就是客户端向服务器端发送http请求，http请求内容包括：

  • 请求行：方法+地址+http版本
  • 请求头
  • 请求体

请求行

请求行的格式为：

Method Request-URL HTTP-Version CRLF

举个例子：GET www.baidu.com    HTTP/1.1

当然请求的方法分为GET POST PUT DELETE OPTION HEAD这些类型

请求头

请求头是指在客户端向服务器传递请求的附加信息和客户端自身的信息。PS: 客户端不一定特指浏览器，有时候也可使用Linux下的CURL命令以及HTTP客户端测试工具等。例如postman、火狐的Restclient。常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。常见有Accept Accept-Charset Conent-Type Authorization

请求体

当使用POST, PUT等方法时，通常需要客户端向服务器传递一些参数数据。这些数据就储存在请求体中。在请求包头中有一些与请求体相关的信息，例如: 现在的Web应用通常采用Rest架构，请求的数据格式一般为json。这时就需要设置Content-Type: application/json。

给一个HTTP请求的例子：

GET请求


POST请求


4.服务器处理请求并返回HTTP报文

服务器端接到http请求后在会作出响应，响应内容包括：

  • 响应行：http版本+状态码+状态描述
  • 响应头
  • 响应体

状态码

状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:

  • 1xx：指示信息–表示请求已接收，继续处理。

  • 2xx：成功–表示请求已被成功接收、理解、接受。

  • 3xx：重定向–要完成请求必须进行更进一步的操作。

  • 4xx：客户端错误–请求有语法错误或请求无法实现。

  • 5xx：服务器端错误–服务器未能实现合法的请求。
    平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500

响应头

与请求头部类似，为响应报文添加了一些附加信息，常见的响应头有Server Content-Type Content-Length Content-Charset等

响应体

服务器返回给浏览器的文本信息，通常后端返回的数据以及HTML, CSS, JS, 图片等文件就放在这一部分。

给一个HTTP响应报文的例子


5.浏览器解析渲染页面

浏览器在收到HTML,CSS,JS文件后，它将这些信息渲染到客户端页面上。下图对应的就是渲染的基本过程


浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

6.连接结束关闭TCP链接



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

计算机网络

在浏览器中输入网址后回车发生了哪些事情 的相关文章

随机推荐

  • python sqlalchemy 动态创建表，，或动态修改__tablename__的两种方法

    最近在学习sqlalchemy 有个动态修改 tablename 的需求 搜索了好几天 没有太完美的答案 要么看不懂 要么比较古老了 通过研究 整理以下几种sqlalchemy动态修改 tablename 的方法 一 函数封装table m

  • springboot+vue+elementui+阿里云oss上传文件

    才做完课程设计没多久 本来打算早点写这一篇文章 但是由于太懒了 就拖延了好几天 今天没什么事情 就打算写下一篇关于文件上传我文章 希望可以帮助到大家 需要准备 配置好maven 购买阿里云oss 第一步 导入指定的依赖

  • 浅谈测试用例设计

    一 测试用例为什么存在 1 1 定义 测试用例 Test Case 是指对特定的软件产品进行测试任务的描述 体现测试方案 方法 技术和策略 测试用例内容包括测试目标 测试环境 输入数据 测试步骤 预期结果 测试脚本等 最终形成文档类的输出

  • 华为交换机SSH和telnet登录配置

    华为交换机SSH和telnet登录配置 一 网络拓扑 二 SW2配置telnet 1 SW2配置 2 R1登录验证 三 SW2的ssh登录配置 1 生成本地密钥对 2 SW2配置命令 3 R1登录 四 配置console口密码 1 配置命令

  • 红黑树

    写在前面 当在10亿数据进行不到30次比较就能查找到目标时 不禁感叹编程之魅力 人类之伟大呀 学红黑树有感 终于 在学习了几天的红黑树相关的知识后 我想把我所学所想和所感分享给大家 红黑树是一种比较难的数据结构 要完全搞懂非常耗时耗力 红黑

  • 约束布局的使用(二)

    主要介绍app layout constraintWidth max app layout constrainedWidth app layout constraintDimensionRatio和Guideline的使用 一 app la

  • 无锁队列-使用hazard指针解决ABA问题

    无锁队列 使用hazard指针解决ABA问题 分类 网络安全 工具使用 文章 实现一个无锁队列 原子操作使用了tbb atomic ABA问题使用hazard指针解决 无锁队列实现 查看文本 打印 msque hpp Created on

  • Leetcode76 最小覆盖子串题解

    题目网址 https leetcode cn com problems minimum window substring 题目分析 这道题目 明显之处在于 我们需要在字符串 s 中框出一个窗口 来判断这个窗口中的子串是否覆盖了 t 如下图所

  • 2021-02-08

    学习目标 窗口函数等 天池龙珠计划SQL训练营 学习内容 5 1窗口函数 5 1 1窗口函数概念及基本的使用方法 5 2窗口函数种类 5 2 1专用窗口函数 5 2 2聚合函数在窗口函数上的使用 5 3窗口函数的的应用 计算移动平均 5 3

  • 工作失误点反思

    工作前考虑 1 查明工作服务对象 依赖对象 这个工作依赖于什么 为了什么 前置条件是否允许 2 是否有人做过 是否要重用 重用要考虑两者关系 工作时考虑 1 效率最高位 易读度第二位 编写复杂度最后位 2 头文件 格式 注释

  • 黄哥通过代码来说明：python语法糖

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 下面用一个例子来说明 coding utf 8 foo decorator foo 语句的作用是将foo函数作为参数传递到decorator 返回值赋值给foo 那么foo

  • Linux基础命令

    Linux基础命令 ls 列出 英文全称 list 格式 ls options 选项 arges 参数 root localhost ls l 总用量 4 rw 1 root root 1297 3月 18 02 38 anaconda k

  • log level

    一 LK层 首先 在LK中 有一个对log打印级别的控制文档 其路径一般为 vendor mediatek proprietary bootable bootloader lk include debug h 以mtk平台为例 在inclu

  • 机器学习-

    可用数据集 kaggle UCI scikit learn kaggle 网址 https www kaggle com datasets UCI 网址 https archive ics uci edu ml scikit learn 网

  • UE4 安卓AR 识别图片

    UE4 安卓AR 识别图片 开启一个插件 准备一个只有玩家出生点的场景 这个场景用来做识别图片的 新建一个游戏模式 设置好默认的pawn类 一个摄像机就行了 代表手机开启AR会话后的那个相机 然后gamemode 事件开始运行 就直接开启A

  • C/C++堆溢出（stack overflow）的解决

    问题 堆溢出 stack overflow 解决 1 在VS里面设置 属性 链接器 系统 堆栈保留大小 2 通过代码 第一个值是堆栈的保留空间 第二个值是堆栈开始时提交的物理内存大小 堆栈改变为100M pragma comment lin

  • 用Arduino和蓝牙模块做一个开门装置

    用Arduino和蓝牙模块做一个开门装置 闲来无事 给门上装一个不用钥匙开门的装置 如图 学校很老的锁也搞不出什么花样了 就拿个舵机拉根杜邦线拽着锁 很简单的东西 做着玩玩 好吧 我承认看着有点 低电平 用的好像是HC04蓝牙模块吧 就网上

  • C++中函数对象(仿函数)的基本使用

    什么是函数对象 重载函数调用操作符的类 称其为函数对象 函数对象使用重载的 行为类似函数调用 也叫仿函数 1 函数对象在使用的时候 可以像普通函数那样调用 可以有参数 有可以有返回值 但本质上并不是一个函数 而是一个对象 类名 class

  • xxl-job的使用

    1 下载xxl job调度中心代码 可从这两个地址下载 https github com xuxueli xxl job https gitee com xuxueli0323 xxl job 2 下载后解压用idea打开 目录 doc d

  • 在浏览器中输入网址后回车发生了哪些事情

    最近在和许多同学交流面经的时候 发现有一个问题 无论你是前端开发 还是后端开发 被问到的概率很高 在此 我想把这个问题记录一下 总体来说 在浏览器的地址栏中输入网址后 发生了如下的事情 DNS解析 TCP连接 发送HTTP请求 服务器处理请

热门标签