引入CDN

已于 2024-07-14 12:01:41 修改
阅读量426 收藏 4
点赞数 5
文章标签： 网络
于 2024-07-14 11:45:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28722667/article/details/140414612
版权

what

CDN（Content Delivery Network，内容分发网络）是通过将源站内容分发至靠近用户的加速节点，使用户可以就近获得所需的内容，解决Internet网络拥挤的状况，提高用户访问的响应速度和成功率，从而提升您业务的使用体验。
您可以在CDN管理控制台添加加速域名，然后前往域名服务商处配置CNAME解析，即可启用CDN加速。还可以根据业务需要，为加速域名进行缓存、安全、性能优化配置，优化加速效果、缓解源站压力。

能力

  • 静态加速
  • 卸载源站，减少源站的压力
  • 防攻击能力，CDN是天然的大型分布式系统，有效将攻击由中心化分散到CDN边缘
  • 定制化模块开发能力，如图片压缩、格式转化、自适应图片下载等功能

网络拓扑变化

原始链路 DNS->WAF 改造成 DNS->CDN->WAF
CDN需要配置回源地址

HTTP请求流程说明：

1.用户在浏览器输入要访问的网站域名www.example.com，向本地DNS发起域名解析请求。
2.本地DNS检查缓存中是否有www.example.com的IP地址记录。如果有，则直接返回给终端用户；如果没有，则向网站授权DNS查询。
3.网站DNS服务器解析发现域名已经解析到了CNAME：www.example.com.c.cdnhwc1.com。
4.请求被指向CDN服务。
5.CDN对域名进行智能解析，将响应速度最快的CDN节点IP地址返回给本地DNS。
6.用户获取响应速度最快的CDN节点IP地址。
7.浏览器在得到最佳节点的IP地址以后，向CDN节点发出访问请求。

  • 如果该IP地址对应的节点已缓存该资源，节点将数据直接返回给用户，如图中步骤7和8，请求结束。
  • 如果该IP地址对应的节点未缓存该资源，节点回源请求资源。获取资源后，结合用户自定义配置的缓存策略，将资源缓存至节点，如图中的北京节点，并返回给用户，请求结束。
    -在这里插入图片描述

原理

CDN加速的原理就是将源站资源缓存到遍布全球的各个边缘节点，终端用户就近获取资源，从而达到加速效果。
加速资源
静态资源、动态资源（api接口）
在这里插入图片描述

缺点

  • 缓存未按计划过期，用户获取的是过期资源，此处就涉及缓存过期策略设置
  • 网络链路增加复杂度，增加运维难度
  • 盗刷流量，钱包顶不住

缓存过期

您可以通过修改资源的缓存规则，控制资源在CDN节点的缓存时间，提高缓存命中率、减轻源站压力。
检查源站资源cache-control配置，如果设置为不缓存（no-cache、private、no-store），同时在CDN侧开启了“缓存遵循源站”功能，则CDN节点无法缓存，用户每次访问这个资源都需要回源，无法达到加速的目的。

计费

流量计费
按照每小时实际使用的流量进行计费，

  • 流量计费适用于域名流量曲线波动较大，全天内带宽利用率小于30%，且有带宽尖峰的用户。
    峰值宽带计费
    获取排序第95%的 峰值带宽速率 作为计费标准，适用于有峰值的网站
  • 峰值带宽计费适用于域名流量曲线比较平稳，全天内带宽利用率大于30%的用户。
    性能指标

CDN效果验证

针对CDN本身

ping全局调度域名，使用第三方专业性能监控公司提供更多instant test 从不用区域ping获取边缘服务器的ip地址

上线

时延、回源率，丢包率、缓存命中率

无极之岚
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js脚本 vue 引入cdn_vue/webpack 引入 cdn 资源
weixin_33952775的博客
01-14 400
使用 vue 的 webpack 模版开发 spa 项目时，我们习惯使用 npm install 安装各种组件和依赖到本地，但引入的组件越来越多，打包时可能会导致 app.js 过大的问题，对加载很不友好。准确的说，vue/webpack 其实是一个 webpack 工程，怎么将 cdn 资源引入到项目中是对 webpack 进行相关配置。webpack 配置项 externalsmodule.e...
详解Webpack如何引入CDN链接来优化编译后的体积
10-16
但随着项目规模的不断扩大，打包后的资源体积也会相应增加，这时引入CDN（内容分发网络）技术，可以进一步优化应用的加载速度和性能。 在Webpack中引入CDN主要是为了分离库文件，将其从打包文件中移出，以减少打包...
第五章 静态资源 CDN 引入
JavaAlenboy
04-29 4829
第五章 静态资源 CDN 引入 静态请求 CDN 用户将静态资源数据请求到ECS服务器，ECS服务器解析到阿里云的CDN中，CDN可以理解为一个无限大的内容磁盘缓存，本身没有文件存储。当用户访问 getItem 的一个静态资源文件的时候，会根据路由规则查看本地是否有这样的文件，如果有直接返回，没有就回源到源站，回源到下面的OSS中获取静态资源文件。 CDN一边返回对应的文件，一边将文件按照http指示的生命周期缓存起来，以便下次用户访问时，直接返回。 Cache Control 响应头 Cache
关于CDN与本地加载的选择
guanhy594230的博客
03-29 7040
关于CDN与本地加载的选择 一、使用部分CDN加载echarts加载过慢原因  在页面中引用echarts.js库时,采用的是cdn加载,首次加载页面,会向cdn服务器去请求文件,并加载,javascript是单线程语言,部分请求必须在先加载完echarts.js 后续的代码才能执行,如若此阶段请求echarts的实际时间过长,导致js部分请求延迟,导致页面加载过慢 二、CDN加载对比本地加载优缺...
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
半只
03-04 2918
请检查 引入的时候 组件名称是否 是 CDN资源中的别名。那么这个教程不适合！这个只适合Vue版本为。把 需要依赖引入的代码全部去掉了 , 例如。, 一般是在 public 文件夹下。
html 引入cdn,JavaScript js 引入CDN 不生效 注意事项
weixin_36000045的博客
06-29 1424
【博客园cnblogs笔者m-yb原创，转载请加本文博客链接，笔者github: https://github.com/mayangbo666，公众号aandb7，QQ群927113708】https://www.cnblogs.com/m-yb/p/10075717.htmljs可以用引入cdn替代引入js本地文件的方式, 使用一些js工具;引入某个工具的cdn可以远程使用到js工具的函数/特性...
uniapp 引入cdn文件
li365820713的博客
11-24 1192
uni.request({ url: 'https://cdn.xxx/area2.json', //你的文件地址。
webpack html 引入cdn,Webpack如何引入CDN连接来优化编译后的体积
weixin_36116139的博客
07-07 462
背景在 Vue 项目中，引入到工程中的全部 js 文件，编译时都会被打包进 vendor.js，也就致使了 vendor.js 文件体积变得至关臃肿，必定程度上影响着页面的渲染。为了减小编译后的体积，提升页面渲染速度，咱们能够经过引入 CDN 连接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么咱们如何作呢？css步骤1.引入CDN连接在项目的 index.html 中，常规方式引入 ...
vue项目引入cdn资源及配置
热门推荐
weixin_43817709的博客
08-11 1万+
1.首先在index.html加入cdn资源 <script src="//cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.5.3/vue-router.min.js"></script> &l...
css vue 引入cdn_Vue中使用cdn加载资源
weixin_36374366的博客
01-17 1287
搭建vue的时候，一般都使用vue官方推荐的命令行工具。需要打包的时候，默认会把所有代码合并生产新文件,其中包括各种库，就会导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方...
webpack引入cdn资源
IF_YOU5849的博客
01-27 1649
安装插件webpack-cdn-plugin npm install webpack-cdn-plugin --save-dev // or webpack-cdn-plugin --dev 位置webpack.base.config.js，引入插件webpack-cdn-plugin 下面展示一些 内联代码片。 const WebpackCdnPlugin = require('webpack-cdn-plugin') new WebpackCdnPlugin plugins: .
jquery引入外部CDN 加载失败则引入本地jq库
10-18
首先，推荐使用的第一种方法是通过在HTML中同时引入CDN的jQuery库和一个检查脚本。例如，使用百度CDN的代码如下： ```html <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> if ...
vue_cli_optimize_cdn:vue-cli 项目优化之：引入 cdn（待补充）
05-15
vue_cli_optimize_cdn 一个Vue.js项目构建设置 # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for ...
import-cdn-js:从CDN链接导入JavaScript库
05-17
导入CDN-JS 从CDN链接导入JavaScript库安装$ npm i -s import-cdn-js 用法ImportCDNJS（链接：字符串，库名：字符串）：承诺 import ImportCDNJS from 'import-cdn-js' ;ImportCDNJS ( '//cdn.bootcss....
什么是核心交换机？这样回答太到位了
08-12 506
核心交换机是一种高性能的网络设备，位于网络层次结构的最顶层，负责处理大量数据流量并将其快速转发到正确的目的地。在这个背景下，核心交换机作为网络基础设施的中枢神经，扮演着至关重要的角色，相信大家在工作中也经常打交道。如果想从0到1系统学习，也欢迎私信我，告知学习意向，我会为你推荐最适合你的方式。今天就来讲讲核心交换机，从交换机是什么，到如何选择与部署，统统给你盘明白。衡量交换机最大数据处理能力的指标，确保它能满足当前和未来的网络流量需求。）和第3层（网络层）的交换功能，有的还支持第4层到第7层的应用级处理。
华为路由的AAA是什么？
最新发布
huaqianzkh的专栏
08-14 523
华为路由的AAA是Authentication(认证)、‌Authorization(授权)和Accounting(计费)的简称，‌是一种提供认证、‌授权和计费的安全管理机制。‌AAA作为一种网络安全管理机制，‌主要提供以下功能和服务：‌认证：‌验证用户是否可以获得网络访问权，‌确定哪些用户可以访问网络。‌授权：‌授权用户可以使用哪些服务，‌即对用户赋予不同的权限，‌限制用户可以使用的服务。‌计费。
10.1 网络基础知识
yoyo勰的博客
08-14 97
了解非授权访问没有预先经过同意，就使用网络或计算机资源则被看作非授权访问，如有意避开系统访问控制机制，对网络设备及资源进行非正常使用，或擅自扩大权限，越权访问信息。它主要有以下几种形式：假冒、身份攻击、非法用户进入网络系统进行违法操作、合法用户以未授权方式进行操作等。信息泄漏或丢失指敏感数据在有意或无意中被泄漏出去或丢失，它通常包括：信息在传输中丢失或泄漏、信息在存储介质中丢失或泄漏以及通过建立隐蔽隧道等窃取敏感信息等。
网络安全入门教程（非常详细）从零基础入门到精通，看完这一篇就够了。
2401_84466359的博客
08-12 518
这个方向更符合于大部分人对“黑客”的认知，他们能够黑手机、黑电脑、黑网站、黑服务器、黑内网，万物皆可黑（当然是要有授权的，不然进橘子我可不管），这个方向初期比较容易入门一些，掌握一些基本技术，拿起各种现成的工具就可以开黑了。是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。压箱底的好资料，全面地介绍网络安全的基础理论，包括逆向、八层网络防御、汇编语言、白帽子web安全、密码学、网络安全协议等，将基础理论和主流工具的应用实践紧密结合，有利于读者理解各种主流工具背后的实现机制。
uniapp 引入cdn
06-01
要在uniapp中引入CDN，可以按照以下步骤进行： 1. 打开uniapp项目的根目录下的 `vue.config.js` 文件。 2. 在文件中添加以下代码： ```javascript module.exports = { configureWebpack: { externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter' } }, chainWebpack: config => { config.plugin('html').tap(args => { args[0].cdn = { css: [ // 在这里添加需要引入的CDN链接 ], js: [ // 在这里添加需要引入的CDN链接 ] } return args }) } } ``` 上述代码中，我们通过 `configureWebpack` 和 `chainWebpack` 来配置webpack。其中，`externals` 是用来配置外部依赖，我们将 `vue`、`vuex`、`vue-router` 这三个常用的依赖设置为外部依赖，以便在本地打包时不会将这些依赖打包进去。 `chainWebpack` 中的 `plugin` 可以获取到生成的HTML插件实例，我们通过修改它的选项来实现在HTML中引入CDN链接。 3. 在需要引入CDN的页面中，在 `head` 标签中添加以下代码： ```html <% if (htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css && htmlWebpackPlugin.options.cdn.css.length) { %> <% htmlWebpackPlugin.options.cdn.css.forEach(item => { %> <link href="<%= item %>" rel="stylesheet"> <% }) %> <% } %> <% if (htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js && htmlWebpackPlugin.options.cdn.js.length) { %> <% htmlWebpackPlugin.options.cdn.js.forEach(item => { %> <script src="<%= item %>"></script> <% }) %> <% } %> ``` 上述代码会根据 `vue.config.js` 中配置的CDN链接来动态生成HTML中的 `link` 和 `script` 标签，实现在页面中引入CDN链接。 需要注意的是，由于CDN链接可能会随时变动，因此在实际使用时需要根据情况进行更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值