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

唠唠叨:我不想误人子弟,我这篇算是搬运工,加上自己的理解做点总结,所以还请大家科学上网去看这篇: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.mzph.cn/news/782964.shtml

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

相关文章

杰发科技——Jlink插件使用

0. 简介 杰发自带的烧录工具是ATCLink&#xff0c;基于DapLink适配。个人不太喜欢ATCLink&#xff0c;推荐使用Jlink&#xff0c;毕竟自己买&#xff0c;不用问原厂要&#xff0c;而且带Jlink&#xff0c;至少5Mhz以上。 V9烧录器使用7.50以下版本驱动。 V11烧录器可以使用7…

热烈祝贺阿里云PolarDB登顶2024最新一期中国数据库流行榜

热烈祝贺阿里云PolarDB登顶2024最新一期中国数据库流行榜 墨天轮墨天轮国产数据库流行度排行PolarDB首度夺魁关于话题的讨论数据库流行度排行榜会影响你的数据库选型吗&#xff1f;对于 PolarDB 的本次登顶&#xff0c;你认为关键因素是什么&#xff1f;PolarDB“三层分离”新版…

【Review】小米汽车发布会

动力方面 顶配双电机四驱&#xff0c;小米超级电机21000转&#xff0c;最大马力673ps&#xff0c;峰值功率495kW&#xff0c;峰值扭矩838N.m。风阻系数最低0.195&#xff0c;零百加速最快2.78秒&#xff0c;时速最高265km/h。 底盘方面 前双叉臂&#xff0c;后无五连杆&#xf…

springcloud第4季 远程调用openfegin的介绍4

一 openfegin的介绍 1.1 openfegin的介绍 openfegin是一个声明式的web客户端&#xff1b;只需要创建一个rest接口并在该接口上添加注解FeginClient即可。openfeign基本上就是当前微服务之间调用的事实标准。 openfeign同时还集成了sprigcloud loadbalance。

01-XML-01认识XML

XML 被设计出来用于数据的记录和传递&#xff0c;经常被作用为配置文件 什么是XML 可扩展标记语言&#xff08;Extensible Markup Language&#xff09;,没有固定的标签&#xff0c;所有的标签都可以自定义。使用简单的标记来描述数据通常&#xff0c;xml被用于信息的记录和传…

An Interview

What is your experience with Python and MySQL? Can you provide examples of projects you have worked on using these technologies? How would you handle customer requirements gathering and analysis? Can you provide an example of how you have translated cu…

C++—vector的介绍及使用 vector的模拟实现

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、vector的介绍及使用 1.1 vector的介绍 1.2 vector的使用 1.2.1 vector的定义 1.2.2 vector iterator 的使用 1.2.3 vector 空间增长问题 1.2.4 vecto…

20240323-1-条件随机场面试题CRF

条件随机场面试题 1. 简单介绍条件随机场 条件随机场&#xff08;conditional random field&#xff0c;简称 CRF&#xff09;是给定一组输入随机变量条 件下另一组输出随机变量的条件概率分布模型&#xff0c;其特点是假设输出随机变量构成马尔可夫随机场&#xff0c;是一种鉴…

【C语言】贪吃蛇【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 一、游戏说明&#xff1a; 一个基于C语言链表开发的贪吃蛇游戏&#xff1a; 1. 按方向键上下左右&#xff0c;可以实现蛇移动方向的改变。 2. 短时间长按方向键上下左右其中之一&#xff0c;可实现蛇向该方向的短时间…

JQuery的attr()属性和JS的属性的方法

JQuery的attr属性&#xff1a; 我们先来看那一下JQuery的attr属性attr是一个jQuery方法&#xff0c;用于读取或设置HTML元素的属性值。它用于获取或设置HTML属性&#xff0c;例如src、href、title等。attr返回的值通常是属性的字符串表示。 $("标签名").attr("…

Unity 基于Rigidbody2D模块的角色移动

制作好站立和移动的动画后 控制器设计 站立 移动 角色移动代码如下&#xff1a; using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; using UnityEngine;public class p1_c : MonoBehaviour {// 获取动画组件private Animator …

最短路径——Floyd算法、Dijkstra算法(未完...)

这里写目录标题 例题引入&#xff1a; 路径——蓝桥2021省赛题目分析题解&#xff01;&#xff01;&#xff01;求最短路径问题&#xff01;&#xff01;&#xff01;应用场景图的基础Floyd算法Acwing-843.有边数限制的最短路简单的思路讲解 Dijkstra算法 例题引入&#xff1a;…

车载以太网AVB交换机 gptp透明时钟 8口 千兆/百兆可切换 SW1100TR

SW1100TR车载以太网交换机 一、产品简要分析 8端口千兆和百兆混合车载以太网交换机&#xff0c;其中包含2个通道的1000BASE-T1采用罗森博格H-MTD接口&#xff0c;5通道100BASE-T1泰科MATEnet接口和1个通道1000BASE-T标准以太网(RJ45接口)&#xff0c;可以实现车载以太网多通道…

微信开发者工具webview的页面上使用console.log,日志在哪儿看?

webview的页面上使用console.log,日志在哪儿看&#xff1f; | 微信开放社区

Acrobat Pro DC 2023 for Mac PDF编辑管理软件

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑和管理软件&#xff0c;旨在帮助用户轻松处理PDF文件。它提供了丰富的工具和功能&#xff0c;使用户可以创建、编辑、转换和注释PDF文件&#xff0c;以及填写和签署PDF表单。 软件下载&#xff1a;Acrobat Pro DC 2023 for …

程序员de工作是怎么样的?

程序员是干什么的程序员是从事计算机程序设计、开发、测试、维护的基层工作人员。他们用特定的编程语言&#xff0c;根据客户或项目的需求&#xff0c;编写和维护计算机程序。这些工作涵盖了从需求分析、设计、编码、测试&#xff0c;到维护的全过程。 程序员按照不同的技术领…

Matlab将日尺度数据转化为月尺度数据

日尺度转化为月尺度 clcclear all% load datadata xlread(data.xlsx) % 例如该数据为1961-01-01至2022-12-31&#xff0c;共计22645天data data(:,1:3) % 该数据有22645行&#xff0c;数据分别为降水&#xff0c;气温&#xff0c;湿度等三列dt datetime(1961-01-01):datatim…

一种调用所有LLM模型API的方式

公众号&#xff1a;【可乐前端】&#xff0c;每天3分钟学习一个优秀的开源项目&#xff0c;分享web面试与实战知识&#xff0c;也有全栈交流学习摸鱼群&#xff0c;期待您的关注! 每天3分钟开源 hi&#xff0c;这里是每天3分钟开源&#xff0c;很高兴又跟大家见面了&#xff0…

C++之STL整理(1)之STL、vector、map、set数据结构初识

C之STL整理&#xff08;1&#xff09;之STL、vector、map、set数据结构初识 注&#xff1a;整理一些突然学到的C知识&#xff0c;随时mark一下 例如&#xff1a;忘记的关键字用法&#xff0c;新关键字&#xff0c;新数据结构 C 的 STL C之STL整理&#xff08;1&#xff09;之ST…

Flutter开发的Web应用 构建及部署 标准流程指南

前言 Flutter是Google推出的跨平台开发框架&#xff0c;支持多种平台&#xff1a;Windwos&#xff0c;Mac&#xff0c;iphone&#xff0c;Android&#xff0c;Web&#xff0c;Linux&#xff0c;甚至经过一些折腾还可以支持树莓派&#xff0c;十分强大&#xff0c;笔者曾写过一…