Interview preparation--DNS & CDN

1 篇文章 0 订阅
DNS
  • 请求从客户端发出后,会先通过网络中的DNS才能找到对应的目的地,因为我们对IP地址等数字不敏感,无法很快的记住,因此我们需要一个类似www.baidu.com这种域名的方式找到我要访问的地址,因此就需要一个数据库用来存储www.baidu.com的IP地址信息。

  • DNS的目的是将域名解析成IP地址,类似一个存储了域名和 IP地址对应关系的分布式数据库

  • DNS记录类型:

    • A(Address):域名 与 IP地址对应关系。
    • CName(Canonical Name):域名与域名的对应关系。(一个IP可以置多个域名)
    • NS(name server):域名和 能解析此域名的服务器的对应关系。
  • DNS查询过程解析过程:xxx.a.baidu.com

  1. 浏览器 有没有缓存
  2. 操作系统有没有缓存
  3. 操作系统Host文件中有没有配置
  4. LDNS(本地DNS缓存)
  5. a.baidu.com 的ns服务器
  6. baidu.com 的ns服务器
  7. com 的ns服务器
优化DNS
  • 提前做好DNS缓存
  • 一个域名对应多个IP,通过DNS做负载均衡
    • 优点:(配件简单,没有成本)
    • 域名记录的新增和修改是有一定的时效性的。无法灵活使用
CDN
  • 大型系统部署多个节点

  • 请求多个节点优化:

    • 请求分配到多节点上,减少每个节点的并发数
    • 让用户请求落到离用户最近(网络拓扑最近)的节点上。
  • CDN存放静态资源:

    • 用户查询首先查询CDN资源
    • 如果CDN有,直接返回用户
    • 如果CDN没有,去原站查,CDN更具配置规则来决定是否要缓存此数据。
  • 节点数:

    • 多了优点在于用户能最少的访问节点来查到数据(极端情况每个省都有一个节点)
    • 但是数据同步太难,成本大。
  • CDN优点:

    • 减少每个系统并发数
    • 减少平均响应时间
    • 减少网络拥堵
    • 一般只缓存静态内容,动态内容只能源站处理。
设计CDN
  • 用户来源:依据IP查询用户地址信息
  • 就近分发:
    • 购买CDN节点N个,通过CName将目标URL 加入到DNS节点中,(www.baidu.com 映射到 aaa.baidu.com)所有请求转到aaa.baidu.com。通过IP判断来决定地理位置,在CDN节点中进行一个规则路由比如有个节点在北京,IP判断是北京就路由到北京。
  • 内容缓存:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-plugin-cdn-import 是一个 Vite 插件,用于将第三方依赖库从 CDN 引入到你的项目中,从而加速页面加载速度。以下是使用该插件的步骤: 1. 安装依赖 ```bash npm i vite-plugin-cdn-import -D ``` 2. 在 vite.config.js 中配置插件 ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import cdnImport from 'vite-plugin-cdn-import' export default defineConfig({ plugins: [ vue(), cdnImport({ // 配置需要从 CDN 引入的依赖库 libs: [ { name: 'vue', var: 'Vue', path: 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js' }, { name: 'element-plus', var: 'ElementPlus', path: 'https://unpkg.com/element-plus/lib/index.full.js' } ] }) ] }) ``` 3. 在 HTML 模板中使用引入的依赖库 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My App</title> <!-- 引入样式文件 --> <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css" /> </head> <body> <div id="app"></div> <!-- 引入脚本文件 --> <script src="/@modules/vue"></script> <script src="/@modules/element-plus"></script> <script src="/src/main.js"></script> </body> </html> ``` 4. 在代码中使用引入的依赖库 ```javascript import { createApp } from 'vue' import App from './App.vue' // 使用从 CDN 引入的 Vue const app = createApp(App) app.mount('#app') // 使用从 CDN 引入的 Element Plus const elButton = new ElementPlus.Button() elButton.$mount('#elButton') ``` 这样就可以使用 vite-plugin-cdn-import 插件将第三方依赖库从 CDN 引入到你的项目中了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值