详细分析:当我们用浏览器访问一个网站到页面展示,背后经历了什么?

简介: 详细分析:当我们用浏览器访问一个网站到页面展示,背后经历了什么?

当我们用浏览器访问一个网站到页面显示出来,身为用户我们只要用鼠标点点点就实现了页面展示,但是实际过程是有亿点点复杂。

大致过程为:

  1. 域名解析获取域名对应的IP地址
  2. 获得服务器的IP地址后与其建立TCP连接
  3. 客户机发送请求和接收资源

那么具体是怎样的过程的呢?


一、前提概要


1、网络分层模型image.png


2、什么是IP地址?

  • IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异。
  • IP地址是32比特的全球唯一标识符
  • IP地址在整个因特网范围内是唯一的。

3、什么是域名?

image.png

  • 因特网采用层次树状结构的命名方法,任何一个连接到因特网的主机或路由器,都有一个唯一的层次结构名称, 即域名
  • 是名字空间中一个可被管理的划分。域还可以划分为子域,而子域还可以继续划分为子域的子域,这样就形成了顶级域、二 级域、三级域等。
  • 每个域名都由标号序列组成,而各标号之间用点(“.") 隔开。

4、什么是DNS

  • 域名系统:因特网使用的命名系统,用来把便于人们记忆的具有特定含义的主机名(如 www.baidu.com)转换为便于机器处理的IP地址。
  • DNS使用了大量的域名服务器,他们以层次方式组织
  1. 根域名服务器
  2. 顶级域名服务器
  3. 授权域名服务器(权限域名服务器)
  4. 本地域名服务器

二、漫漫取经之路就在脚下

1、域名解析

访问www.baidu.com时,需要将域名映射为对应的IP地址。即域名解析的过程。

image.png

20210614210757723.png


2、建立TCP连接(三次握手)


  1. 服务器上会有一个进程一直在不断地监听TCP 80端口
  2. 客户机在获取到对应的 IP地址后,客户机向服务器发送一个连接请求报文
  3. 服务器监听到连接请求报文之后,向客户机返回一个确认报文,并为此次TCP连接分配缓存和变量
  4. 当客户机收到确认报文段后,再向服务器发出一个确认报文,并为此次连接分配缓存和变量
  5. 服务器再收到确认报文之后,TCP连接就建立成功了

3、获取资源

设HTTP协议使用持久连接5:

  1. TCP连接建立成功之后,客户机向服务器通过TCP连接发送携带请求资源信息的HTTP请求报文
  2. 服务器收到HTTP请求报文之后,通过HTTP响应报文将客户机请求的资源发送给客户机
  3. 如需多个资源,重复以上操作即可
注:

实际上,客户机向服务器在建立TCP的第三次握手时发送的确认报文可以携带上HTTP请求报文


4、浏览器解释

客户机在接收到服务器返回的资源后,对其进行解释,用超文本标记语言(html)将其显示在屏幕上



目录
相关文章
|
3月前
|
数据采集 人工智能 程序员
PHP 程序员如何为 AI 浏览器(如 ChatGPT Atlas)优化网站
OpenAI推出ChatGPT Atlas,标志AI浏览器新方向。虽未颠覆现有格局,但为开发者带来新机遇。PHP建站者需关注AI爬虫抓取特性,优化技术结构(如SSR、Schema标记)、提升内容可读性与语义清晰度,并考虑未来agent调用能力。通过robots.txt授权、结构化数据、内容集群与性能优化,提升网站在AI搜索中的可见性与引用机会,提前布局AI驱动的流量新格局。
180 8
|
8月前
|
数据采集 前端开发 JavaScript
深挖navigator.webdriver浏览器自动化检测的底层分析
本文详细讲解了如何通过技术手段破解浏览器 `navigator.webdriver` 检测,结合爬虫代理、多线程等策略,在豆瓣图书页面批量采集数据。具体包括:隐藏 Selenium 特征、配置代理突破 IP 限制、设置伪装用户、利用多线程提升效率。文章面向初学者,提供分步教程与示例代码,同时设有「陷阱警告」帮助规避常见问题。目标是从底层实现反检测,高效采集图书评分、简介、作者等信息,适合具备 Python 和 Selenium 基础的读者实践学习。
343 12
深挖navigator.webdriver浏览器自动化检测的底层分析
|
监控 供应链 前端开发
浏览器拨测:将网站护航的阵地再前推一米
近年来,针对网站的攻击形式愈发多样,手段也变得更加隐蔽,使用浏览器拨测来监控服务的整个生命周期有助于及时发现攻击,保护核心业务链路不受损。阿里云监控浏览器拨测使用真实的浏览器进行拨测,通过提供丰富的断言能力和脚本录制能力护航服务的全生命周期和核心业务链路,助力开发者更好地监控服务的可用性,消除潜在风险。
504 121
浏览器拨测:将网站护航的阵地再前推一米
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
525 17
使用Web浏览器访问UE应用的最佳实践
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
739 63
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
1555 9
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
Web App开发 监控 前端开发
如何确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示?
【10月更文挑战第24天】通过以上这些措施,可以最大程度地确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示。同时,不断的优化和改进也是保持网站兼容性的关键。
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
域名解析 网络协议 前端开发
浏览器输入域名网址访问后的过程详解
1、以91处理网为例,客户端浏览器通过DNS解析到www.91chuli.com,IP地址是202.108.22.5,通过这个IP地址找到客户端到服务器的路径。客户端浏览器发起一个HTTP会话到202.108.22.5,然后通过TCP进行封装数据包,输入到网络层。
583 2