探秘网页打开的完整过程:DNS解析、CDN加速和Nginx负载均衡的协同驱动

浅谈一个网页打开的全过程(涉及DNS、CDN、Nginx负载均衡等)

1、概要

从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程。下面我将依靠自己的经验,总结一下整个过程。如有错漏,欢迎指正。

阅读本文需要读者已有一定的计算机知识,了解TCP、DNS等。

2、分析

众所周知,打开一个网页的过程中,浏览器会因页面上的css/js/image等静态资源会多次发起连接请求,所以我们暂且把这个网页加载过程分成两部分:

  1. html(jsp/php/aspx) 页面加载(假设存在简单的Nginx负载均衡)
  2. css/js/image等 网页静态资源加载(假设使用CDN)

2.1 页面加载

先上一张图,直观明了地让大家了解下基本流程,然后我们再逐一分析。

ef1b5a82f58439043e32821dc2cb32d1.jpeg

2.1.1 DNS解析

什么是DNS解析?当用户输入一个网址并按下回车键的时候,浏览器得到了一个域名。而在实际通信过程中,我们需要的是一个IP地址。因此我们需要先把域名转换成相应的IP地址,这个过程称作DNS解析。

1) 浏览器首先搜索浏览器自身缓存的DNS记录。

或许很多人不知道,浏览器自身也带有一层DNS缓存。Chrome 缓存1000条DNS解析结果,缓存时间大概在一分钟左右。

(Chrome浏览器通过输入:chrome://net-internals/#dns 打开DNS缓存页面)

2) 如果浏览器缓存中没有找到需要的记录或记录已经过期,则搜索hosts文件和操作系统缓存。

在Windows操作系统中,可以通过 ipconfig /displaydns 命令查看本机当前的缓存。

通过hosts文件,你可以手动指定一个域名和其对应的IP解析结果,并且该结果一旦被使用,同样会被缓存到操作系统缓存中。

Windows系统的hosts文件在%systemroot%\system32\drivers\etc下,linux系统的hosts文件在/etc/hosts下。

3) 如果在hosts文件和操作系统缓存中没有找到需要的记录或记录已经过期,则向域名解析服务器发送解析请求。

其实第一台被访问的域名解析服务器就是我们平时在设置中填写的DNS服务器一项,当操作系统缓存中也没有命中的时候,系统会向DNS服务器正式发出解析请求。这里是真正意义上开始解析一个未知的域名。

一般一台域名解析服务器会被地理位置临近的大量用户使用(特别是ISP的DNS),一般常见的网站域名解析都能在这里命中。

4) 如果域名解析服务器也没有该域名的记录,则开始递归+迭代解析。

这里我们举个例子,如果我们要解析的是mail.google.com。

首先我们的域名解析服务器会向根域服务器(全球只有13台)发出请求。显然,仅凭13台服务器不可能把全球所有IP都记录下来。所以根域服务器记录的是com域服务器的IP、cn域服务器的IP、org域服务器的IP……。如果我们要查找.com结尾的域名,那么我们可以到com域服务器去进一步解析。所以其实这部分的域名解析过程是一个树形的搜索过程。

e597e1e2325e53af1f93051e39346dff.jpeg

根域服务器告诉我们com域服务器的IP。

接着我们的域名解析服务器会向com域服务器发出请求。根域服务器并没有mail.google.com的IP,但是却有google.com域服务器的IP。

接着我们的域名解析服务器会向google.com域服务器发出请求。...

如此重复,直到获得mail.google.com的IP地址。

为什么是递归:问题由一开始的本机要解析mail.google.com变成域名解析服务器要解析mail.google.com,这是递归。

为什么是迭代:问题由向根域服务器发出请求变成向com域服务器发出请求再变成向google.com域发出请求,这是迭代。

5) 获取域名对应的IP后,一步步向上返回,直到返回给浏览器。

2.1.2 发起TCP请求

浏览器会选择一个大于1024的本机端口向目标IP地址的80端口发起TCP连接请求。经过标准的TCP握手流程,建立TCP连接。

关于TCP协议的细节,这里就不再阐述。这里只是简单地用一张图说明一下TCP的握手过程。如果不了解TCP,可以选择跳过此段,不影响本文其他部分的浏览。

b3ddc4b5bdbbb0fa468b6a5038a7e42f.jpeg

2.1.3 发起HTTP请求

其本质是在建立起的TCP连接中,按照HTTP协议标准发送一个索要网页的请求。

2.1.4 负载均衡

什么是负载均衡?当一台服务器无法支持大量的用户访问时,将用户分摊到两个或多个服务器上的方法叫负载均衡。

什么是Nginx?Nginx是一款面向性能设计的HTTP服务器,相较于Apache、lighttpd具有占有内存少,稳定性高等优势。

负载均衡的方法很多,Nginx负载均衡、LVS-NAT、LVS-DR等。这里,我们以简单的Nginx负载均衡为例。关于负载均衡的多种方法详情大家可以Google一下。

Nginx有4种类型的模块:core、handlers、filters、load-balancers。

我们这里讨论其中的2种,分别是负责负载均衡的模块load-balancers和负责执行一系列过滤操作的filters模块。

1) 一般,如果我们的平台配备了负载均衡的话,前一步DNS解析获得的IP地址应该是我们Nginx负载均衡服务器的IP地址。所以,我们的浏览器将我们的网页请求发送到了Nginx负载均衡服务器上。

2) Nginx根据我们设定的分配算法和规则,选择一台后端的真实Web服务器,与之建立TCP连接、并转发我们浏览器发出去的网页请求。

Nginx默认支持 RR轮转法 和 ip_hash法 这2种分配算法。

前者会从头到尾一个个轮询所有Web服务器,而后者则对源IP使用hash函数确定应该转发到哪个Web服务器上,也能保证同一个IP的请求能发送到同一个Web服务器上实现会话粘连。

也有其他扩展分配算法,如:

fair:这种算法会选择相应时间最短的Web服务器

url_hash:这种算法会使得相同的url发送到同一个Web服务器

3) Web服务器收到请求,产生响应,并将网页发送给Nginx负载均衡服务器。

4) Nginx负载均衡服务器将网页传递给filters链处理,之后发回给我们的浏览器。

12fa02e4f717206f11fc61a79b5f7728.jpeg

而Filter的功能可以理解成先把前一步生成的结果处理一遍,再返回给浏览器。比如可以将前面没有压缩的网页用gzip压缩后再返回给浏览器。

2.1.5 浏览器渲染

1) 浏览器根据页面内容,生成DOM Tree。根据CSS内容,生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。

2) 根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)

3) 根据Render Tree渲染网页

但是在浏览器解析页面内容的时候,会发现页面引用了其他未加载的image、css文件、js文件等静态内容,因此开始了第二部分。

2.2 网页静态资源加载

以阿里巴巴的淘宝网首页的logo为例,其url地址为 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg

我们清楚地看到了url中有cdn字样。

什么是CDN?如果我在广州访问杭州的淘宝网,跨省的通信必然造成延迟。如果淘宝网能在广东建立一个服务器,静态资源我可以直接从就近的广东服务器获取,必然能提高整个网站的打开速度,这就是CDN。CDN叫内容分发网络,是依靠部署在各地的边缘服务器,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度。

接下来的流程就是浏览器根据url加载该url下的图片内容。本质上是浏览器重新开始第一部分的流程,所以这里不再重复阐述。区别只是负责均衡服务器后端的服务器不再是应用服务器,而是提供静态资源的服务器。

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

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

相关文章

【08】基础知识:React中收集表单数据(非受控组件和受控组件)

一、概念 非受控组件: 页面中所有输入类的 DOM,现用现取。 给组件绑定 ref 属性,在需要时通过 ref 获取相应值。 受控组件: 页面中所有输入类的 DOM,随着输入,将内容维护到状态 state中,当…

STM32CUBEMX_DMA串口空闲中断接收+接收发送缓冲区

STM32CUBEMX_DMA串口空闲中断接收接收发送缓冲区 前言: 我了解的串口接收指令的方式有:在这里插入图片描述 1、接收数据中断特定帧尾 2、接收数据中断空闲中断 3、DMA接收空闲中断 我最推荐第三种,尤其是数据量比较大且频繁的时候 串口配置 …

【每日一题Day350】LC2652倍数求和 | 数学+容斥原理

倍数求和【LC2652】 给你一个正整数 n ,请你计算在 [1,n] 范围内能被 3、5、7 整除的所有整数之和。 返回一个整数,用于表示给定范围内所有满足约束条件的数字之和。 暴力枚举 思路 枚举 [ 1 , n ] [1,n] [1,n]范围内每个数,判断是…

智慧党建小程序源码系统+在线答题考试二合一 带完整的搭建教程

大家好,今天来给大家分享一个智慧党建小程序源码系统。以下是部分核心代码图: 系统特色功能一览: 积分体系:党员可以通过完成各种党建活动,如学习党的理论知识、参加组织生活、开展志愿服务等获得积分,积分…

全局事件总线

全局事件总线 功能:可以解决所有组件之间通信传数据的问题原理:通过一个共享对象,将所有组件全部绑定到对象上,即可通过这个对象实现组件与组件之间的传递数据,而这个共享对象叫做全局事件总线。 如何分清楚谁是发送方…

Linux命令行 从入门到精通系列讲解 - 总目录

👦 作者介绍:Bazinga bingo,专注linux领域应用硬核干货分享,潜心修炼,虚心学习。 📕 本文收录于《Linux心法:指令精要》专栏,包含Linux入门到精通的命令大全详解。 📘 本…

基础课3——自然语言处理的应用

自然语言处理是一种将人类语言转换为机器语言,以实现人机交互的技术。应用非常广泛,例如: 人机交互:自然语言处理技术可以应用于人机交互,让机器能够理解和运用人类语言,从而实现更加智能化的交互体验。 机…

一元函数极值问题

一元函数极值问题 0 引言 在高等数学课程中,我们应该都学习过一元函数的极值问题,这篇文章我们再来回顾一下相关知识点。为什么要对一元函数的极值问题进行回顾?因为后面我会出一篇非线性规划问题的极值问题,其中会涉及到多元函…

什么是库存管理?无需Excel,2023年这几款大热库存管理软件你get了吗?

什么是库存管理?库存管理是什么意思?都有哪些好用的库存管理系统?相信这些都是大家非常关注的话题,这篇就跟大家详细唠唠什么是库存管理,都用什么系统可以进行库存管理,并且为大家盘点2023年这几款大热库存…

LeetCode 只出现一次的数字 合集

一:只有一个元素出现一次,其他出现两次 给你一个 非空 整数数组 nums ,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题,且该…

Java关键字 —— super 详细解释!一看就懂 有代码实例运行!

super在父类、子类相关联的操作中经常被用到 super 是Java中的关键字,用于引用父类(超类)的成员变量、方法或构造函数。它有以下主要用途: 访问父类中的成员变量调用父类中的构造方法调用父类中的方法 在没有继承和被继承关系的类…

(九)类特殊成员(属性和方法)

Python 类中,凡是以双下划线 "__" 开头和结尾命名的成员(属性和方法),都被称为类的特殊成员(特殊属性和特殊方法)。例如,类的 __init__(self) 构造方法就是典型的特殊方法。 Python …

Macos数据库管理:Navicat Premium 中文

Navicat Premium提供了直观且易用的图形用户界面,使得操作更为便捷。Navicat Premium 中文支持多种数据库系统,如MySQL、MariaDB、Oracle、SQLite、PostgreSQL等,可以让用户在同一平台上管理不同类型的数据库。Navicat Premium拥有强大的数据…

Oracle 运维篇+应用容器数据库的install、upgrade、patch、uninstall

★ 知识点 ※ DEFAULT_SHARING参数的取值 METADATA: 元数据链接共享数据库对象的元数据,但其数据对于每个容器是唯一的。这些数据库对象被称为元数据链接的应用程序公共对象。此设置为默认设置。DATA: 数据链接共享数据库对象,其数据对于应用程序容器中…

医疗实施-闭环管理

闭环管理 1.闭环管理概念2.医院闭环的种类2.1 患者追踪闭环2.1.1住院追踪闭环2.1.2门诊追踪闭环 2.2 药品医嘱闭环2.2.1 住院药品医嘱闭环2.2.2 门诊药品医嘱闭环 2.3 检验医嘱闭环2.3.1住院检验闭环2.3.2门诊检验闭环 2.4检查医嘱闭环2.4.1住院检查闭环2.4.2门诊检查闭环 2.5手…

elasticsearch常用命令

Elasticsearch概念 ElasticsearchmysqlIndex(索引)数据库Type(类型)表Documents(文档)行Fields列 常用命令 索引 # 索引初始化,number_of_shards:分片数,不可修改;number_of_replicas:副本数,可修改 PUT lagou {"settings…

关于代理服务器那点事

问题:我们有时候会遇到,后端再本地服务器开发,不是测试服上,这时候我们就需要代码几个baseurl 答:一个axios只能代理一个baseurl axios 库本身只能代理一个 baseURL。在一个 axios 实例中,只能指定一个基准 URL 来发送请求。如果需要在应用程序中使用多个不同的 baseUR…

Discuz户外旅游|旅行游记模板/Discuz!旅行社、旅游行业门户网站模板

价值328的discuz户外旅游|旅行游记模板,本模板需要配套【仁天际-PC模板管理】插件使用。 模板说明 1、模板页面宽度1200px,简洁大气,较适合户外旅行、骑行、游记、摩旅、旅游、活动等类型的论坛、频道网站; 2、所优化的页面有&…

优雅而高效的JavaScript——Proxy 和 Reflect

🤔博主:小猫娃来啦 文章核心:优雅而高效的JavaScript——Proxy 和 Reflect 文章目录 Proxy 和 Reflect是什么Proxy创建 Proxy 对象拦截器方法拦截器示例:属性拦截拦截器示例:方法拦截 ReflectReflect 的静态方法Reflec…

ESP32单片机环境搭建(VScode + PlatformIO IDE)

一、环境搭建(VScode PlatformIO IDE) 1、官网下载VScode; 2、安装最新的插件(C/C、PlatformIO IDE、python、Chinese); 3、在PlatformIO IDE中新建工程:Platforms——Projects——Create New Project——…