前端重点:DNS和CDN

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 前端重点:DNS和CDN

原文来自我的个人博客

1. DNS

1.1 DNS是什么?

DNS(Domain Names System),域名系统,是互联网一项服务,是进行域名和与之相对应的 IP 地址进行转换的服务器

简单来讲,DNS 相当于一个翻译官,负责将域名翻译成 ip 地址

  • IP 地址:一长串能够唯一地标记网络上的计算机的数字
  • 域名:是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识

Snipaste_2022-11-10_00-23-32.png

1.2 域名

域名是一个具有层次的结构,从上到下一次为根域名、顶级域名、二级域名、三级域名...

Snipaste_2022-11-10_00-40-26.png
例如 www.baidu.comwww 为三级域名、baidu为二级域名、com为顶级域名 ,系统为用户做了兼容,域名末尾的根域名.一般不需要输入

在域名的每一层都会有一个域名服务器,如下图:

Snipaste_2022-11-10_00-40-35.png

1.3 查询方式

DNS 查询方式有两种

  • 递归查询:如果 A 请求 B ,那么 B 作为请求的接收者一定要给 A 想要的答案

Snipaste_2022-11-10_00-43-32.png

  • 迭代查询:如果接收者 B 没有请求者 A 所需要的准确内容,接收者 B 将告诉请求者 A,如何去获得这个内容,但是自己并不去发出请求

Snipaste_2022-11-10_00-43-40.png

1.4 域名缓存

在域名服务器解析的时候,使用缓存保存域名和 IP 地址的映射

计算机中 DNS 的记录也分成了两种缓存方式:

  • 浏览器缓存:浏览器在获取网站域名的实际 IP 地址后会对其进行缓存,减少网络请求的损耗
  • 操作系统缓存:操作系统的缓存其实是用户自己配置的 hosts 文件

1.5 查询过程

解析域名的过程如下:

  • 首先搜索浏览器的 DNS 缓存,缓存中维护一张域名与 IP 地址的对应表
  • 若没有命中,则继续搜索操作系统的 DNS 缓存
  • 若仍然没有命中,则操作系统将域名发送至本地域名服务器,本地域名服务器采用递归查询自己的 DNS 缓存,查找成功则返回结果
  • 若本地域名服务器的 DNS 缓存没有命中,则本地域名服务器向上级域名服务器进行迭代查询

    • 首先本地域名服务器向根域名服务器发起请求,根域名服务器返回顶级域名服务器的地址给本地服务器
    • 本地域名服务器拿到这个顶级域名服务器的地址后,就向其发起请求,获取权限域名服务器的地址
    • 本地域名服务器根据权限域名服务器的地址向其发起请求,最终得到该域名对应的 IP 地址
  • 本地域名服务器将得到的 IP 地址返回给操作系统,同时自己将 IP 地址缓存起来
  • 操作系统将 IP 地址返回给浏览器,同时自己也将 IP 地址缓存起
  • 至此,浏览器就得到了域名对应的 IP 地址,并将 IP 地址缓存起

流程如下图所示:

image.png

1.6 DNS记录

DNS 记录是存储在 DNS 数据库中的特定资源记录,允许你配置和控制有关你的域名的其他信息。例如,你可以设置你的 DNS 记录,告诉世界你的域名将使用什么类型的邮件服务器(例如,微软Exchange),或者当有人访问你的网站时,应该返回哪个 IP 地址。

DNS记录可以理解成一个键值对:

  • 键:域名;
  • 值:与域名关联的值;

事实上,除了 IP 地址,DNS 记录值还可以是 IPv6 地址别名文本等等。有超过 30 种类型的 DNS 记录.常见的 DNS 记录类型有以下:

  • A记录:定义主机的IP地址
www.example.com. IN A 139.18.28.5;
域名映射IP
IN 代表 Internet互联网
  • AAAA记录:定义主机的 IPv6地址
123124.s2txip6.com. 103 IN AAAA 240e:940:401:1:1a::
  • CNAME记录:定义域名的别名
www.example.com IN CNAME example.com.
a.example.com IN CNAME b.example.com.
  • MX记录:定义邮件服务器
;happy.example.com作为邮件服务器
IN MX happy.example.com.

;A记录描述邮件服务器IP
happy.example.com. IN A 123.123.123.123;
  • NS记录:定义提供 dns 信息的服务器
;定义为zhihu.com提供dns信息的服务器
zhihu.com. 52908 IN NS n24.dnsv5.com.
  • SOA记录:定义多个 dns 服务器中哪个是主服务器
; ns3,dnsv5.com. 是主服务器
IN SOA ns3.dnsv5.com. enterprise3dnsadmin.dnspod.com. 15947187885 3600180 1209600 180
  • TXT记录:提供文本信息
;zhihu.com提供的文本信息
zhihu.com. 600 IN TXT "m5g7qjk31l5d1hkq6m3zvcf6lg2f0h16"

1.7 DNS查询工具

  • dig(DNS look utility) 查询 dns 的小工具

image.png

  • nslookup 交互式查询域名服务工具

image.png

  • host(DNS look utility) 查询 dns 的小工具

image.png

1.8 host修改

  1. 编辑 hosts文件 vim /etc/hosts
  2. 添加 3.3.3.3 www.baidu.com
  3. ping www.baidu.com

结果

image.png

2. CDN

2.1 CDN是什么?

CDN (全称 Content Delivery Network),即内容分发网络

构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡内容分发调度等功能模块,使用户就近获取所需内容降低网络拥塞,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。

简单来讲,CDN 就是一个基于地理位置的分布式代理服务器/数据中心。它会根据用户位置分配最近的资源。

于是,用户在上网的时候不用直接访问源站,而是访问离他 “最近的” 一个 CDN 节点,术语叫边缘节点,其实就是缓存了源站内容的代理服务器。如下图:
image.png

2.2 CDN实现原理

当用户输入一个网址,浏览器会检查这个网址上所有资源的请求。以一个 js 文件为例

  1. 它首先会做 DNS 查询,通常在没有应用 CDN 时,会返回一个 ip 地址,浏览器直接根据 IP 地址请求 js 资源;应用 CDN 后,DNS 返回的不再是 IP 地址,而是一个 CNAME(Canonical Name ) 别名记录
  2. 浏览器对别名做 CDN 查询,返回 CDN 智能 DNS 服务的 ip 地址
  3. 查询 CDN 智能调度 DNS ,它会根据以下情况,返回合适的边缘节点ip 给用户

    • 地理位置,找相对最近的边缘节点
    • 运营商网络,找相同网络的边缘节点
    • 边缘节点的负载情况,找负载较轻的节点
    • 节点的“健康状况”、服务能力、带宽、响应时间等
  4. 根据节点 ip 请求 js 文件,如果请求的资源

整体流程图如下:

image.png

2.3 缓存代理

缓存系统是 CDN 的另一个关键组成部分,缓存系统会有选择地缓存那些最常用的那些资源。

其中有两个衡量 CDN 服务质量的指标:

  • 命中率:用户访问的资源恰好在缓存系统里,可以直接返回给用户,命中次数与所有访问次数之比
  • 回源率:缓存里没有,必须用代理的方式回源站取,回源次数与所有访问次数之比

缓存系统也可以划分出层次,分成一级缓存节点和二级缓存节点。一级缓存配置高一些,直连源站,二级缓存配置低一些,直连用户。

回源的时候二级缓存只找一级缓存,一级缓存没有才回源站,可以有效地减少真正的回源。

现在的商业 CDN 命中率都在 90% 以上,相当于把源站的服务能力放大了 10 倍以上。

3. 小结

  • DNS 就是个域名系统,负责将域名翻译成 ip 地址;CDN 是一个基于地理位置的分布式代理服务器,会根据用户位置分配最近的资源,就是为了提高资源的访问速度
  • 两者都有缓存设计,DNS(浏览器缓存、操作系统缓存)、CDN(一节缓存、二级缓存)

参考文献

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
8天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
33 1
|
8天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
13 1
|
12天前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
11天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
18天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
19天前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
|
12天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
18天前
|
JSON 前端开发 JavaScript
前端模块打包器的深度解析
【10月更文挑战第13天】前端模块打包器的深度解析
|
18天前
|
存储 前端开发 JavaScript
前端模块化打包工具的深度解析
【10月更文挑战第13天】前端模块化打包工具的深度解析
|
18天前
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
74 0

相关产品

  • 云解析DNS
  • 推荐镜像

    更多