从输入url到页面展示的过程

news2024/11/25 8:23:47

唠唠叨:我不想误人子弟,我这篇算是搬运工,加上自己的理解做点总结,所以还请大家科学上网去看这篇:https://aws.amazon.com/cn/blogs/mobile/what-happens-when-you-type-a-url-into-your-browser/

是这六个步骤:

  1. 您在浏览器中输入 URL 并按 Enter 键
  2. 浏览器查找域的 IP 地址
  3. 浏览器发起与服务器的TCP连接
  4. 浏览器向服务器发送HTTP请求
  5. 服务器处理请求并发回响应
  6. 浏览器渲染内容

小知识:
网站和服务器:网站是文件的集合,通常是HTML、CSS、JavaScript和图像,它们告诉浏览器如何显示网站、图像和数据。它们需要可供任何人随时随地的访问,因此将它们托管在家里的计算机上不具有可扩展性或可靠性。连接到互联网的强大外部计算机(称为服务器)存储这些文件。
IP地址:当您浏览器指向http://www.baidu.com这样的URL时,我的浏览器就必须找出Internet上的哪台服务器正在托管该站点。通过查找域www.baidu.com来查找地址来实现此目的。
互联网上的每台设备(服务器、手机、智能冰箱)都有一个唯一的地址,称为 IP 地址。 IP 地址包含四个编号部分:203.0.113.0
但这样的数字很难记住!这就是域名的用武之地。www.baidu.com比 203.0.113.0 更容易记住,对吧?想象一下,如果手机上没有联系人应用程序,则必须记住联系人的所有电话号码。您的通讯录应用程序可让您按姓名查找电话号码。
我们在互联网上也做同样的事情。域名系统或 DNS,就像我们手机上的通讯录应用程序。 DNS 帮助我们的浏览器(和我们)找到互联网上的服务器。我们可以进行 DNS 查找,根据域名 jennapederson.dev 查找服务器的 IP 地址。您可以在此处阅读有关 DNS 的更多信息。
现在您已经了解了不同的部分以及它们之间的相互关系,接下来让我们看看该过程的每个步骤以及当您键入 URL 时浏览器如何与服务器通信。无论您是输入 URL 还是单击当前页面中的链接 URL,过程都是相同的。
从输入 url 到页面的画面展示的过程。

输入url

关于浏览器的通讯协议:
在这里插入图片描述
在这里插入图片描述

查找域的IP地址

在浏览器中输入URL并Enter键后,浏览器需要确定要连接到 Internet 上的哪个服务器。为此,它需要使用您输入的域查找托管网站的服务器的 IP 地址。它使用 DNS 查找来完成此操作。超出了本文的范围。您可以在此处阅读有关 DNS 如何工作的更多信息,浏览器会先进入缓存查找。
由于 DNS 很复杂并且必须非常快,因此 DNS 数据缓存在浏览器之间的不同层以及 Internet 上的各个位置。浏览器会先检查自身的以下缓存

  1. 浏览器缓存:检查浏览器缓存。浏览器会在固定的时间之内维护之前访问的网站DNS记录存储库
  2. os缓存:如果它不在浏览器缓存中,则浏览器将对底层计算机操作系统进行系统调用(即Windows上的gethostname)来获取记录,因为os还维护DNS记录的缓存。
  3. 路由缓存:如果它不在我的计算机上,浏览器将与维护其自己的DNS记录缓存的路由器进行通信。
  4. 或互联网服务提供商 (ISP) 上的 DNS 服务器缓存。

注:DNS查找信息通畅混存在查询计算机本地或进程DNS基础设施中,这可以跳过DNS查找过程中的步骤并使其更快。然而,当没有缓存任何内容时,查询就会传输到Internet并有DNS递归解析器(即ISP)接收。

浏览器发起与服务器的TCP的连接

使用公共互联网路由基础设施,来自客户端浏览器请求的数据包通过路由器、ISP、互联网交换机来切换 ISP 或网络,所有这些都使用传输控制协议(通常称为 TCP)来查找具有要连接的 IP 地址。但这是一种非常迂回的方式,而且效率不高。
相反,许多网站使用内容交付网络(CDN)来缓存更靠近浏览器的静态和动态内容。CDN 是一个全球分布式缓存服务器网络,可通过使内容更接近用户来提高网站或应用程序(源)的性能。
客户端浏览器请求可以搭乘 AWS 全球网络,而不是依赖公共互联网路由基础设施并遭受额外的跃点、重新传递和数据包丢失。该请求会智能地通过性能最佳的位置进行路由,以将内容传送到您的浏览器。
一旦浏览器在 Internet 上找到服务器,它就会与服务器建立 TCP 连接,如果使用 HTTPS,则会发生 TLS 握手以确保通信安全。 TCP 和 TLS 是极其重要的主题。
一旦浏览器与服务器建立了连接,下一步就是发送 HTTP 请求以获取资源或页面。

浏览器向服务器发送HTTP请求

现在浏览器已连接到服务器,它遵循 HTTP(s) 协议的通信规则。首先浏览器向服务器发送 HTTP 请求以请求页面内容。 HTTP 请求包含请求行、标头(或有关请求的元数据)和正文。请求行包含服务器可用来确定客户端(在本例中为您的浏览器)想要执行的操作的信息。
请求行包含以下内容:
请求方法,是 GET、POST、PUT、PATCH、DELETE 或一些其他 HTTP 动词之一
路径,指向所请求的资源
要通信的 HTTP 版本
URL 请求的请求行如下所示:
GET /hello-world HTTP/1.1
请求行告诉服务器您想要获取 处的资源/hello-world并与之通信HTTP/1.1
请记住,HTTP 动词表达了您的请求的语义意图。您还可以使用 POST、PUT 或 PATCH 方法将数据发送到服务器进行存储,以创建新数据或更新请求路径上的现有数据。 DELETE 方法将删除给定路径上的资源。但是,重要的是要知道服务器不必支持所有动词。服务器可以用200 OK状态响应 DELETE 方法,但不对资源执行任何操作。
请求的下一部分是请求标头。标头从客户端传递额外信息,帮助路由请求,指示发出请求的客户端类型(用户代理),并可用于支持 A/B 测试、蓝/绿部署和金丝雀部署。
请求的最后一部分是正文。对于像我们这样的 GET 请求,主体(通常)是空的。对于操作资源的请求(例如 POST、PUT 或 PATCH),正文将包含来自客户端的要创建或更新的数据。
请求正文可以采用不同的格式,服务器根据请求标头理解该格式Content-Type。
一旦服务器收到客户端的请求,服务器就会处理该请求并发回响应。

浏览器处理请求并发回响应

服务器接受请求并根据请求行、标头和正文中的信息决定如何处理请求。对于请求,GET /hello-world/ HTTP/1.1服务器获取此路径上的内容,构造响应并将其发送回客户端。响应包含以下内容:

  • 状态行,告诉客户端请求的状态
  • 响应头,告诉浏览器如何处理响应
  • 该路径中请求的资源,可以是 HTML、CSS、Javascript 或图像文件等内容,也可以是数据
    状态行包含 HTTP 版本以及请求状态的数字和文本表示形式。响应如下所示:
HTTP/1.1 200 OK
Date: Tue, 25 May 2021 19:40:59 GMT
Server: Apache
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
Cache-Control: max-age=0, no-cache
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding
X-Mod-Pagespeed: 1.13.35.2-0
Content-Encoding: br
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked

<!DOCTYPE html>
<html lang="en">
<head>
    THE REST OF THE HTML

浏览器渲染内容

一旦浏览器收到服务器的响应,它就会检查响应标头以获取有关如何呈现资源的信息。上面的标Content-Type头告诉浏览器它在响应正文中收到了 HTML 资源。幸运的是,浏览器知道如何处理 HTML!
第一个 GET 请求返回 HTML,即页面的结构。但是,如果您使用浏览器的开发工具检查页面(或任何网页)的 HTML,您将看到它引用其他 Javascript、CSS、图像资源并请求其他数据,以便按设计呈现网页。
当浏览器解析和渲染 HTML 时,它会发出额外的请求来获取 Javascript、CSS、图像和数据。它可以并行完成大部分工作,但并非总是如此,这是另一篇文章的故事。
学习:https://aws.amazon.com/cn/blogs/mobile/what-happens-when-you-type-a-url-into-your-browser/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1559252.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot论坛管理系统

论坛管理系统 摘要&#xff1a; 在社会快速发展的影响下&#xff0c;论坛管理系统继续发展&#xff0c;使论坛管理系统的管理和运营比过去十年更加信息化。依照这一现实为基础&#xff0c;设计一个快捷而又方便的网上论坛管理系统是一项十分重要并且有价值的事情。对于传统的论…

如何提升公众号搜索量?分享内部运营的5步优化技术!

最近一直有自媒体同行朋友在写关于公众号的内容&#xff0c;很多都说公众号现在没得玩了。其实&#xff0c;在运营自媒体上面&#xff0c;思维不通&#xff0c;技术不到位&#xff0c;哪个平台都不适合你玩。 想要在自媒体上面运营变现&#xff0c;一定不要先点击广告变现&…

【Linux】详解文件系统以及周边知识

一、磁盘的基本知识 磁盘中可以被划分成一个一个的环&#xff0c;每个环都是一个磁道。每个磁道又可以被均分成一个一个的扇区&#xff0c;扇区是磁盘IO的基本单位&#xff08;想要修改扇区中的一个比特位就必须把该扇区的全部比特位都加载到内存中&#xff09;。磁盘中的盘面&…

「MySQL」索引事务

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;数据库 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 索引&事务 &#x1f349;索引&#x1f34c;特点&#x1f34c;通过 SQL 操作索引&#x1f34c;底层数据结构 &#x1f349;事务&…

张颂文|永远保持好奇心的人,是永远进步的人。

哈喽,你好啊,我是雷工! 今天看到了张颂文的一段演讲,提到了他因为好奇心而被改变的人生。 如果想把单一和枯燥的工作做的更好,张颂文的办法是像一个孩子一样保持好奇心,不停地提出一些有趣的问题。 在5年的导游经历中,对每次游览的地点都像初次游览般保持好奇心,正因为…

C++从入门到精通——引用()

C的引用 前言一、C引用概念二、引用特性交换指针引用 三、常引用保证值不变权限的方法权限的放大权限的缩小权限的平移类型转换临时变量 四、引用的使用场景1. 做参数2. 做返回值 五、传值、传引用效率比较值和引用的作为返回值类型的性能比较 六、引用和指针的区别引用和指针的…

工单系统的作用与优势!为什么企业需要它?

什么是工单系统&#xff1f;工单系统作为企业服务类工具&#xff0c;能在管理上和业务上为企业带来什么帮助吗? 什么是工单系统 ZohoDesk工单系统是一种用于管理和处理任务或请求的软件工具。它提供了一个集中的平台&#xff0c;使组织能够跟踪、分配和解决各种问题、请求和…

AWS创建IAM用户,以及通过IAM用户登录

基本概念&#xff1a; IAM Identity Center&#xff08;AWS SSO&#xff09; 跨账户访问&#xff1a;IAM Identity Center允许用户使用他们自己的单一登录凭证来访问多个AWS账户和应用程序。这意味着你可以拥有一个账户和密码&#xff0c;通过IAM Identity Center的用户门户&…

前端虚拟滚动列表 vue虚拟列表

前端虚拟滚动列表 在大型的企业级项目中经常要渲染大量的数据&#xff0c;这种长列表是一个很普遍的场景&#xff0c;当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题&#xff1b;大数据量列表性能优化&#xff0c;减少真实dom的渲染 看图&#xff1a;绿色…

攻防世界——catfly

这道题我觉得很难&#xff0c;我当初刷题看见这道题&#xff0c;是唯一一道直接跳过的&#xff0c;现在掌握了一点知识才回来重新看 这道题在linux运行下是这样&#xff0c;我首先猜测是和下面这个time有关&#xff0c;判断达到一定次数就会给我flag 但是我找了好久都没找到那…

NFT-前端开发(一)

使用 在我们想要保存项目的目录下打开终端运行npx create-react-app test2命令初始化&#xff0c;test2是我们的项目名字&#xff0c;可以自己去更改。 初始化完成后&#xff0c;我们目录下就会多出一个test2文件夹 &#xff0c;然后我们在vscode中打开该文件夹 然后我们打开j…

C++教学——从入门到精通 5.单精度实数float

众所周知&#xff0c;三角形的面积公式是(底*高)/2 那就来做个三角形面积计算器吧 到吗如下 #include"bits/stdc.h" using namespace std; int main(){int a,b;cin>>a>>b;cout<<(a*b)/2; } 这不对呀&#xff0c;明明是7.5而他却是7&#xff0c;…

(一)kafka实战——kafka源码编译启动

前言 本节内容是关于kafka消息中间键的源码编译&#xff0c;并通过idea工具实现kafka服务器的启动&#xff0c;使用的kafka源码版本是3.6.1&#xff0c;由于kafka源码是通过gradle编译的&#xff0c;以及服务器是通过scala语言实现&#xff0c;我们要预先安装好gradle编译工具…

暴力破解笔记

1 暴力破解简介 暴力破解&#xff1a; 蛮力攻击&#xff0c;又称为穷举攻击&#xff0c;或暴力破解&#xff0c;将密码进行逐个尝试验证&#xff0c;直到尝试出真正的密码为止。 暴力破解是指采用反复试错的方法并希望最终猜对&#xff0c;以尝试破解密码或用户名或找到隐藏的…

进无止境,砥砺前行,互联网营销专家杨建允助力多个品牌和机构提升营运效率!

进无止境&#xff0c;砥砺前行&#xff01;在过去的一年&#xff08;2023年&#xff09;&#xff0c;互联网营销专家杨建允持续为数十家品牌和机构提供了品牌和营销支持&#xff01;统计如下&#xff1a;&#xff08;排名不分先后&#xff09; 滴滴&#xff1b; 企查查&#…

了解XSS和CSRF攻击与防御

什么是XSS攻击 XSS&#xff08;Cross-Site Scripting&#xff0c;跨站脚本攻击&#xff09;是一种常见的网络安全漏洞&#xff0c;它允许攻击者在受害者的浏览器上执行恶意脚本。这种攻击通常发生在 web 应用程序中&#xff0c;攻击者通过注入恶意脚本来利用用户对网站的信任&…

属性选择器

1.[title]{background:yellow;}&#xff1a;所有带title标签设置成黄色 2.div[class]{background:yellow;}&#xff1a;所有div中带class标签设置成黄色 3.div[classbox1]{border:1px solid blue; }&#xff1a;div中包含class并且classbox1的设置成蓝边框 4. class…

【Linux】进程实践项目 —— 自主shell编写

送给大家一句话&#xff1a; 不管前方的路有多苦&#xff0c;只要走的方向正确&#xff0c;不管多么崎岖不平&#xff0c;都比站在原地更接近幸福。 —— 宫崎骏《千与千寻》 自主shell命令编写 1 前言2 项目实现2.1 创建命令行2.2 获取命令2.3 分割命令2.4 运行命令 3 源代码…

python mysql错误如何处理

错误代码类型&#xff1a;pymysql.err.InternalError: (1054, "Unknown column jack in field list") import pymysql d_mysql {host: 127.0.0.1, port: 33333,user: *****,password: *****,db: *****,charset: utf8} conn pymysql.connect(**d_mysql) cur co…

基于SSM远程同步课堂系统

基于SSM远程同步课堂系统的设计与实现 摘要 在这样一个网络数据大爆炸的时代&#xff0c;人们获取知识、获取信息的通道非常的多元化&#xff0c;通过网络来实现数据信息的获取成为了现在非常常见的一种方式&#xff0c;而通过网络进行教学&#xff0c;在网络上进行远程的课堂…