在浏览器地址栏中输入地址后浏览器发生了什么?

2023-11-18


前言

当我们向浏览器的地址栏中输入一个网址并按下enter键之后,便可以跳转到网址对应的页面,那么浏览器内部是如何实现该功能的呢?从浏览器获取url到成功加载出页面主要经历了以下几个过程:


一、DNS查询

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。一个网址到IP地址的转换,这个过程就是DNS解析。当浏览器解析到ip地址后,便会向该ip地址的服务器发送请求。
DNS解析是一个递归查询的过程。例如:
查找www.google.com的IP地址过程。首先在本地域名服务器中查询IP地址,如果没有找到的情况下,本地域名服务器会向根域名服务器发送一个请求,如果根域名服务器也不存在该域名时,本地域名会向com顶级域名服务器发送一个请求,依次类推下去。直到最后本地域名服务器得到google的IP地址并把它缓存到本地,供下次查询使用。从上述过程中,可以看出网址的解析是一个从右向左的过程: com -> google.com -> www.google.com。

二、TCP连接

HTTP:
HTTP协议是使用TCP作为其传输层协议的。HTTP报文是包裹在TCP报文中发送的,服务器端收到TCP报文时会解包提取出HTTP报文。但是HTTP报文是明文,如果中间被截取的话会存在一些信息泄露的风险。这就需要加密的HTTPS协议。
HTTPS:
HTTPS协议的本质就是HTTP + SSL(or TLS)。在HTTP报文进入TCP报文之前,先使用SSL对HTTP报文进行加密。

TCP的连接是通过三次握手实现的。
第一次握手:客户端应用进程主动打开,并向服务器端发送请求(即:发送端发送一个带有SYN标记的数据包给接收端)
第二次握手:服务端应用进程被动打开,若同意客户端的请求,则返回一个确认报文(即:接收端接收到数据包之后,回传一个带有SYN/ACK标记的数据包给发送端表示确认)
第三次握手:客户端接收到确认报文后,通知上层应用进程连接已经建立,并向服务器发送一个确认报文。服务器接收到客户端的请求也通知其上层应用进程连接已建立。(最后,发送端再回传一个带有ACK标记的数据包给接收端,代表“握手”’结束)
在这里插入图片描述

三、发送HTTP请求

发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。

HTTP请求报文是由四部分组成: 请求行, 请求头,空行和请求体
请求行:请求方式+请求路径+协议版本
常用的求方式有: GET, POST, PUT, DELETE, OPTIONS, HEAD,TRACE,CONNECT.
(详细介绍请看文章《HTTP请求方式中8种请求方法》)
请求头:请求的附加信息和客户端自身的信息
下面是一些最常见的请求头:

MIME类型:可以理解为文件类型
Accept:浏览器可接受的MIME类型。
Accept - Charset:浏览器可接受的字符集。
Accept - Encoding:浏览器能够进行解码的数据编码方式,比如gzip。
Accept - Language:浏览器所希望的语言种类,当服务器能够提供一种以上的语言版本时要用到。
Authorization:授权信息。
Connection:表示是否需要持久连接。值为keep-alive时告诉服务器回传数据不要马上关闭,保持一小段时间的;为closed则马上关闭。
Content - Length:表示请求消息正文的长度。
Cookie:这是最重要的请求头信息之一。
From:请求发送者的email地址。
Host:初始URL中的主机和端口。
If - Modified - Since:只有当所请求的内容在指定的日期之后又经过修改才返回它,否则返回304“Not Modified”应答。
Pragma:指定“no - cache”值表示服务器必须返回一个刷新后的文档,即使它是代理服务器而且已经有了页面的本地拷贝。
Referer:包含一个URL,用户从该URL代表的页面出发访问当前请求的页面。
User - Agent:浏览器类型。
UA - Pixels,UA - Color,UA - OS,UA - CPU:由某些版本的IE浏览器所发送的非标准的请求头,表示屏幕大小、颜色深度、操作系统和CPU类型。
空行:请求头后面的空行是必须的。
请求体:当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。
例子:

POST / HTTP1.1
host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022) 
Content-Type:application/x-www-form-urlencoded 
Content-Length:40 
Connection: Keep-Alive 

name=Professional%20Ajax&publisher=Wiley

第一部分:请求行,第一行明了是post请求,请求根路径,以及http1.1版本。
第二部分:请求头,第二行至第六行。
第三部分:空行,第七行的空行。
第四部分:请求数据,第八行。

四、服务器处理HTTP请求并返回HTTP报文

HTTP响应也由四个部分组成,分别是状态行、消息报头、空行和响应正文。
状态行:由HTTP协议版本号, 状态码, 状态消息三部分组成。
状态码规律:
• 1xx:指示信息–表示请求已接收,继续处理。
• 2xx:成功–表示请求已被成功接收、理解、接受。
• 3xx:重定向–要完成请求必须进行更进一步的操作。
• 4xx:客户端错误–请求有语法错误或请求无法实现。
• 5xx:服务器端错误–服务器未能实现合法的请求。
平时遇到比较常见的状态码有:200, 301, 302, 304, 401, 403, 404, 500
200 (OK): 找到资源并成功返回数据。
301:永久重定向。
302:临时重定向。
304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
401 (UNAUTHORIZED): 未经授权。这通常会使得浏览器要求用户输入用户名和密码,以登录到服务器。
403 (FORBIDDEN): 没有权限。这通常是在401之后输入了不正确的用户名或密码。
404 (NOT FOUND): 在指定的位置不存在所申请的资源。找不到页面
500:服务器内部出错。

响应报头:常见的响应报头字段有:Server, Connection…。
空行
响应正文:服务器返回给浏览器的文本信息,通常HTML, CSS, JS, 图片等文件就放在这一部分。
例子:

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8
 
<html>
      <head></head> <body> <!--body goes here--> </body> 
</html>

第一行为状态行,(HTTP/1.1)表明HTTP版本为1.1版本,状态码为200,状态消息为(ok)
第二行和第三行为消息报头,
Date:生成响应的日期和时间;Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8
空行后面的html部分为响应正文。

五、浏览器解析并渲染页面

浏览器是一个边解析边渲染的过程。首先浏览器的HTML解析器解析HTML文件构建DOM树,然后CSS解析器解析CSS文件构建渲染树,再结合HTML树和CSS树构建render树(渲染树),等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。
JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始(此处涉及到js的事件循环机制,见以下分析)。但是又存在某些任务比较耗时,如IO读写等,所以需要一种机制可以先执行排在后面的任务,这就是:同步任务和异步任务。JS的执行机制就可以看做是一个主线程加上一个任务队列。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时先依次运行执行栈,然后会从任务队列里提取事件,运行任务队列中的任务,每清空所有的微任务就执行一次宏任务,这个过程是不断重复的,所以又叫做事件循环(Event loop)。
浏览器在解析过程中,如果遇到请求外部资源时,如图像,iconfont,JS等。浏览器将重复1-5过程下载该资源。请求过程是异步的,并不会影响HTML文档进行加载,但是当文档加载过程中遇到JS文件,HTML文档会挂起渲染过程,这是因为渲染引擎和js引擎是互斥的。要等到文档中JS文件加载执行完毕,才会继续HTML的渲染过程。原因边渲染页面边执行js时js 有可能修改DOM结构,所以应该等js执行完毕再继续页面的渲染,否则起初渲染好的页面结构可能被js的解析执行破坏,所以js脚本一般放在页面最底部。CSS文件的加载不影响JS文件的加载,但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

六、HTTP连接断开

我们已经知道HTTP是依赖于TCP的,HTTP的连接断开依赖于TCP的连接断开,TCP的连接断开采用四次挥手策略。
第一次挥手:客户端的应用程序发出连接释放的报文,并停止发送数据。
第二次挥手:服务端接收到连接释放的报文后,发出确认报文。此时连接处于半封闭状态,客户端不再继续向服务端发送数据,但是服务端继续向客户端发送数据。
第三次挥手:若服务端没有了要向客户端发送的数据,其应用进程会通知服务器释放TCP连接
第四次挥手:客户端接收到释放报文后,必须确认。再经过2MSL(最长报文寿命)s后,本次TCP连接正式结束。

四次挥手详解请看这里

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

在浏览器地址栏中输入地址后浏览器发生了什么? 的相关文章

  • 使用 PEM 证书的 HTTPS 连接

    我正在尝试使用 PEM 证书发布 HTTPS 请求 如下所示 import httplib CERT FILE path certif pem conn httplib HTTPSConnection 10 10 10 10 443 cer
  • 在 HTTP 标头中发送 UTF-8 值会导致 Mojibake

    我想使用 servlet 发送阿拉伯语数据HTTPServletResponse给客户 我正在尝试这个 response setCharacterEncoding UTF 8 response setHeader Info arabicWo
  • 应用程序传输安全已禁用,但仍然出现 SSL 握手错误

    我在通过 HTTPS SSL 连接到 API 时遇到问题 我已经使用下面的字典完全禁用了应用程序传输安全性 ATS 尽管 SSL 证书通过了 NSCURL 的所有测试
  • 无法对 Elastic Beanstalk AWS 上运行 ASP.NET 的网站强制使用 HTTPS(使用经典负载均衡器)

    这样我终于能够成功创建一个https网站了 它只是运行模板 ASP NET Web 项目 我有一个证书 并且该证书已添加到 AWS 中的 ELB 弹性负载均衡器 经典 中 我的环境可以浏览到https www mvc cloudy skie
  • 是否可以检测 http git 远程是智能还是愚蠢?

    我正在我的应用程序中实现一个选项来使用 depth 1制作 git repo 的最小功能克隆 我刚刚意识到愚蠢的 http 传输不支持 depth 我想自动检测 http 远程是愚蠢的还是聪明的 这样我就可以省略 depth与哑 http
  • 尝试克隆一个 git 存储库,但它卡在克隆到中

    我使用的是 Windows 10版本 10 0 19042 内部版本 19042 GIT Ver 2 32当尝试使用 git bash 执行以下命令时git clone depth 1 b carla https github com Ca
  • 将nodejs Express静态请求重定向到https

    我需要将所有 http 请求重定向到 https 包括对静态文件的请求 My code app use express static dirname public app get function req res if req secure
  • HTTPURLConnection 不遵循从 HTTP 到 HTTPS 的重定向

    我不明白为什么JavaHttpURLConnection不遵循从 HTTP 到 HTTPS URL 的 HTTP 重定向 我使用以下代码来获取页面https httpstat us https httpstat us import java
  • 使用 JSON 的 Pentaho HTTP Post

    我是 Pentaho 的新手 我正在尝试执行以下工作流程 从数据库中读取一堆行 做一些转换 将它们以 JSON 格式发布到 REST Web 服务 我已经使用输入步骤和 Json 输出步骤解决了前两个问题 但是 我在执行最后一步时遇到两个问
  • 以 REST 方式更新整个资源集合

    我有一个资源列表的 REST URI 例如 http foo com group users 这些用户中的每一个都有一个序列号 我想公开一种方法来为集合中的所有用户重新编号这些值 并使访问该列表的每个人都可以使用此更改 由于这是对整个集合的
  • 客户端/服务器使用哪些 Cache-Control 标头值?

    我试图了解哪些值Cache Control将在请求中使用 并将在响应中使用 This https stackoverflow com questions 42652931 why use cache control header in re
  • ASP.NET - 将所有 https 请求重写为 http

    我的问题正是所提出的问题here https stackoverflow com questions 16276860 iis 7 adding ssl to one site all other sites responds to htt
  • Rest 和 Http 中“无状态”的含义

    当我阅读有关 REST 是什么的文档时 他们总是说 REST api 应该是无状态的 在这里 我感觉有点尴尬 因为普通的 HTTP 也是无状态的 既然REST可以说是一种使用HTTP协议的特殊架构 那么说REST应该是无状态的似乎是多余的
  • 使用 CustomBinding 的 WCF 服务配置 HTTPS

    我需要 WCF 服务上的自定义绑定 以允许我将原始内容传递到 WCFRest 服务 效果很好 但我无法让它接受传输级安全性 我想要 https 和 basicauthentication 就像我在其他地方使用的那样 端点看起来像这样
  • 如何防止 Firefox 缓存

    我尝试了很多可能的解决方案 但无法解决问题 这些不起作用 有人可以帮忙吗 我正在使用jsp servlet application 是websphere Portal 6 1 的一个portlet 切勿
  • 当支持 SPDY 的浏览器收到 HTTP2 (H2) 响应时会发生什么?

    我的直觉是 支持 SPDY 的浏览器会将其视为 SPDY 响应 然而 我能找到的最多的是 H2 响应将优雅地降级到 HTTP1 1 的保证 我正在考虑以面向 H2 的方式提供资产 多个请求 无域分片等 但我确实需要支持一些非 H2 浏览器
  • Response.Redirect 并不总是重定向

    我们在一个工作不一致的页面上有一个简单的 Response Redirect IIS 6 0 大多数情况下 它会正确重定向 但我们收到一些用户抱怨 他们没有重定向 而是看到 302 对象移至此处 页面 该页面显示标题信息以及正确的位置 如果
  • 如何解析来自基于 C 的 Web 服务器的 HTTP 请求

    我有一个编程项目 我必须创建一个处理 HTTP 请求的多线程 Web 服务器 我刚刚学习了套接字编程 并且运行了一个客户端和一个服务器 我想知道解析 HTTP 请求标头的最佳方法是什么 我看到了这个 如何用C 解析http请求 https
  • 通过 HTTPS 的隧道

    在我的工作场所 流量拦截器 防火墙变得越来越糟糕 我无法通过端口 22 连接到我的家用计算机 并且缺乏 ssh 访问权限让我感到难过 我以前可以通过将 SSH 移动到端口 5050 来使用它 但我认为最近的一些过滤器现在将此流量视为 IM
  • 如何用 C 语言通过 HTTP 协议发送图像?

    我是一名正在做网络服务器练习的学生 我需要一些帮助 我的网络服务器在文本页面上运行良好 但是每当浏览器发送一个 GET img jpg HTTP 1 1请求 我不知道如何处理 我听说 HTTP 协议是基于文本的 那么如何在 HTTP 响应中

随机推荐

  • Mybatis对数据的增删改查

    文章目录 创建sql的映射文件 增加 插入数据 修改 删除 查找 向数据库参数传递 简单参数 多个参数 传入对象 使用map传递 Mybatis的基本增删改查总的代码演示 创建sql的映射文件
  • 在 esp32 上运行 lvgl + freetype

    前言 最近有个需求 如何在 esp32 上运行 lvgl freetype 这个想法的难点是 freetype 的环境搭建 我想将其做得非常简单 最好的办法是做成组件来使用 所以我将 freetype 的相关依赖做成了 esp idf 组件
  • JS基础 预编译 与 AO对象

    预编译发生在函数执行的前一刻 预编译在函数执行的前一刻完成 function pre a console log a var a 100 console log a console log b var b function console
  • 将代码上传到指定仓库的步骤(git指令)

    1 git status 查看状态 2 git branch 查看目前所在的分支 3 git add 将内容从工作目录添加到暂存区 有的时候git add 不起作用 这时可以用 git add A 4 git commit m v1 更新代
  • 如何在CSDN博客添加友情链接

    如何在CSDN博客添加友情链接 每次看到别人的CSDN博客左侧都能够加上友情链接 我发现没有直接制定的 所以经过研究 我发现可以这样来添加友情链接 首先 进入博客设置 找到博客栏目 在里面新建一个栏目 名字随便 我这叫BLOG推荐 然后把下
  • 分布式锁工具 Redisson,贼香!!

    一 Redisson概述 二 分布式锁 三 Redisson分布式锁 四 RLock 五 公平锁 六 总结 一 Redisson概述 什么是Redisson Redisson是一个在Redis的基础上实现的Java驻内存数据网格 In Me
  • 攻防世界 web篇(一)

    攻防世界 web篇 一 inget fileclude easyupload fileinclude very easy sql 攻防世界 是一群信息安全大咖共同研究的答题 竞赛 以游戏方式结合的一款新型学习平台 融入多种场景在线题型 集实
  • 渗透测试——报错注入

    1 报错注入原理 由于后台没有对数据库的信息做过滤 会输出到前台显示 那么我们就可以通过制造报错函数 将查询语句带入到数据库中 以报错信息显示出来 2 报错注入漏洞产生的条件 1 参数用户可控 前端传入的参数内容由用户控制 2 参数带入数据
  • ArcGISMapsSDK for UnrealEngine_Beta2_00

    ArcGISMapsSDK for UnrealEngine Beta2 00 Prepare 1 Esri Community 2 All Communities 3 ArcGIS Maps SDK for Unreal Engine 4
  • Swing可视化设计:在IntelliJ IDEA中安装JFormDesigner教程

    Swing可视化设计 在IntelliJ IDEA中安装JFormDesigner教程 前言 最近课设大多需要gui设计 排除自学的情况 大部分同学都只接触过swing设计gui swing可视化插件将大大提高工作效率 这里提高破解版使用方
  • 数据结构与算法【Java】02---链表

    前言 数据 data 结构 structure 是一门 研究组织数据方式的学科 有了编程语言也就有了数据结构 学好数据结构才可以编写出更加漂亮 更加有效率的代码 要学习好数据结构就要多多考虑如何将生活中遇到的问题 用程序去实现解决 程序 数
  • 微信小程序申请 wx.getLocation 接口 审核一直不通过

    项目需要通过微信的 getLocation 获取本地的位置信息 经纬度 但是提交很多次审核都不通过 最后通过写了个项目里用不到的 导航功能 截图录屏才通过了审核 以下申请文案及配图仅供参考 因当前业务涉及就近医院挂号取号业务 需获取用户地理
  • python 使用pip install 手动安装本地包的方法

    Installing pystan manually fixed the issue otherwise it would just hang forever GitHub git clone https github com facebo
  • 【js中的单元测试】【30秒快速入门】

    什么是单元测试 测试是一种验证我们代码是否可以按预期工作的方法 换种说法就是写些代码来验证一段代码的正确性 被测试的对象可以是样式 功能 流程 组件等 单元测试是对软件中最小可测试单元进行检测和验证 单元测试能有效的提升工作效率 1 能监测
  • 常见swap()函数实现和细节讲解

    前言说明 swap 函数的作用是进行交换传入的两个值 本文都以整形int举例说明 且用C语言描述 常见的swap的实现方式有三种 格外一个空间的临时存放发 无格外空间的位运算异或法 无额外空间的加减法 主程序框架 include
  • 使用HAL库开发STM32:UART进阶使用

    文章目录 目的 发送处理 存在的问题 解决方法 个人常用处理方式 数据接收与解析 数据接收 数据解析 对于HAL库的吐槽 总结 目的 在前面文章 使用HAL库开发STM32 UART基础使用 中介绍的UART的基础使用 基础使用非常简单 不
  • U盘插入电脑后,有提示音,但不能显示出来,如何解决?

    导致此类问题的原因可能是用户的失误操作或者病毒的恶意修改等 1打开我的电脑 U盘没有显示出来 2打开控制面板单击选择设备和打印机 3在设备那一栏里会发现如图中已点击的图标 如果你的U盘没有改名字的话默认就是这个名字 有些品牌点击的U盘显示的
  • daily-timeline.js——打造每日时间轴

    最近因为需要在做会议室预约系统 其中需要用到一个显示当天预约情况的时间轴 去网上找了一下 发现只有和微博类似的历史时间轴 于是便自己动手做了一个当日时间轴控件 daily timeline js 实际使用效果如下 原理是Canvas的绘制
  • c语言中strcat函数的作用

    原型 extern char strcat char dest char src 用法 include
  • 在浏览器地址栏中输入地址后浏览器发生了什么?

    文章目录 前言 一 DNS查询 二 TCP连接 三 发送HTTP请求 四 服务器处理HTTP请求并返回HTTP报文 五 浏览器解析并渲染页面 六 HTTP连接断开 前言 当我们向浏览器的地址栏中输入一个网址并按下enter键之后 便可以跳转