1. CDN原理及阿里云CDN配置
说到CDN我们也不得不说说我们熟悉的 DNS (Domain Name System)。我们都知道DNS是将域名解析成IP地址的。
DNS也有不同的记录类型，我们来简单说说：
第二列表示的是TTL(Time to Live)，默认是秒，所以这里设置的TTL的时间是30分钟。
在阿里云的域名解析中设置的 TTL 就是30分钟。
如果这时候我们ping a.example.com，此时我们会a.example.com的别名b.example.com，然后根据b.example.com的A类型找到其所对应的IP地址。
当我们想把一个网站迁移到一个新域名，旧的域名也同时可以访问。或者我们想将图片、文件等一些静态资源放到CDN上加速的时候，CNAME就会发挥作用了。
这样凡是@qq.com的邮件都会被发送到 mx1.qq.com 、 mx2.qq.com 、 mx3.qq.com 中的一个，第五列30、10、20是代表 优先级 的，数字越小优先级越大，会先发送到mx3.qq.com，其次mx2.qq.com最后mx1.qq.com，然后通过A记录或者AAAA记录获取该域名的IP。6848表示 TTL (Time to Live)，默认是秒。
MX记录必须直接指向A记录或者AAAA记录，禁止MX记录指向CNAME。
TXT 记录的两个最重要用途是防止垃圾邮件和域名所有权验证。
虽然域所有权验证最初不是 TXT 记录的一个功能，但这种方法已经被一些网站管理员工具和 云 提供商采用。
管理员可以通过上传包含特定信息的新 TXT 记录，或编辑当前的 TXT 记录，来证明他们控制着该域。工具或云提供商可以检查 TXT 记录，并看到它已按要求进行了更改。这有点像用户通过打开并点击发送到该电子邮件的链接来确认其电子邮件地址，证明他们拥有该地址。
从DNS的存储结构上来说，Name Server中含有权威DNS服务的目录。NS记录指定哪台server是回答DNS查询的权威域名服务器。当一个DNS查询看到NS记录的时候，会再去NS记录配置的DNS服务器查询，得到最终的结果。
当解析a.com的时候，我们看到a.com有两个NS记录，所以确定a.com的记录在ns1.a.com和ns2.b.com上。ns1和ns2是网站a.com提供的智能DNS服务器，可以提供高可用、负载均衡、分布式sharding等服务。比如当一个北京用户想要访问a.com的时候，ns1看到这个这是一个北京的ip就返回一个离北京最新的机房IP。
我们配置CDN的时候要弄清楚几个概念：
加速域名 ：比如图中的static.example.com就是加速域名，也就是使用该域名访问的静态资源会走CDN加速。
源站 ：也就是资源实际存放的节点，通常是服务提供方或者像OSS这样专门存储资源的地方。
同时也要配置一条加速域名指向CDN的智能DNS服务器的一条CNAME记录比如是。
访问流程：
同时CDN的智能DNS还充当了负载均衡的作用，如果一个节点压力过大，则可以叫流量导向其他的节点。
登录阿里云控制台打开CDN进入域名管理页面
点击添加域名
填写源站信息，点击确定
点击下一步，需要审核后才能继续配置
审核通过后在回到域名管理
点击打开配置向导
根据2中的信息在自己的域名下添加这条CNAME记录
回到域名管理的首页，CNAME验证已生效
勾选localcdn.chencm.cn，点击启用
我们可以dig localcdn.chencm.cn
可以看到已经生效了，可以再通过浏览器访问验证下：
2. webpack使用HtmlWebpackPlugin进行cdn配置
在前面的 文章 中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：
其中BootCDN 是 Bootstrap 中文网 支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，可以在线测试cdn是否正常，所以下面以 Bootcdn 为例说明。
在前段项目开发中，我们经常使用webpack进行项目搭建， 主要作用有两个，分别是
在webpack中使用cdn是在打包生成静态资源的时候做处理，主要原理是使用 html-webpack-plugin 动态插入cdn链接。
关于webpack的使用这里不做过多的介绍，将以vue--cli 2.x生成的默认项目为例做介绍
html-webpack-plugin 是webpack的一个插件，可以动态的创建和编辑html内容，在html中使用 esj语法 可以读取到配置中的参数，简化了html文件的构建。
我们这次主要是使用它来动态插入cdn链接，如link标签和script标签。
在线项目地址
vue-cli 2.x
创建名为 webpack-cdn-demo ，类型为webpack的 vue 项目，如果安装的vue-cli是3.x版本，命令不太一样，详细可看 vue-cli 3 。
安装依赖
启动项目
下面简单介绍一下目录结构
其中build文件夹中的 webpack.prod.conf.js 是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。
在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。
在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。
注意安装时记得 -S ，它的作用是安装完后在 package.json 项目文件中插入记录，后续操作需要读取已安装模块
对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。
依次搜索出前面模块，结果如下
按照规律，得出cdn资源路径规则为
其他cdn服务商同理
使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。
如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行
name 模块名称，与package.json同名
scope 模块作用域命名
js js地址
css css地址
这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery， 具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配 (目前没找到更好的做法)。
在webpack热启动本地调试的时候，我们可以使用cdn。
在 build/webpack.dev.conf.js 中，默认已经引入了 utils.js ，所以可以直接调用相关方法，如果是自定义的文件，记得引入。
我们可以往里面添加点自定义属性，方便在index.html中调用。 ，修改如下：
其中 cdnConfig 和 onlyCss 自定义属性，在html上通过 htmlWebpackPlugin.options 可以读取到。
更多html-webpack-plugin配置情况官网，这里暂时不需要更多。
在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。
注意此处的 externalMoles ，后面用到，也就是比dev多的步骤。
加入和dev一样的两个配置，不过需要把onlyCss改为 true ，因为我们希望打包时不单单使用css。
webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是 ejs ，和asp.net，jsp，php类似。
通过 <% %> 和 htmlWebpackPlugin.options 用js遍历 插入 link标签和script标签。
ps: 修改了webpack配置，需要重启项目才会生效
打包项目
可以看到打包体积大大减小了
页面上也正确引入了cdn资源。
最后奉上git地址： https://gitee.com/zhkumsg/webpack-cdn-demo
比悲伤更悲伤的分割线
原来两年前已经有人做了一个类型的webpack-cdn-plugin
3. 如何将大量的HTML中的js和css整体的切换到cdn的服务器上去
方法一：修改html里面js, css引用链接，指向cdn服务器（这些都有规律，直接替换应该可行）
方法二：在服务器做rewrite，将*.js, *.css的访问301到cdn
方法三：将所有的css, js引用改为xx.php，在xx.php里面集中处理这些请求，替换链接。
建议使用第一种。
4. 为什么需要使用及如何使用CDN
CDN的全称是Content Delivery Network，即分发网络。基本原理是采用各种缓存服务器，内将这些缓存服务器分布容到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
哪些业务需要办CDN许可证？
根据规定：企业从事为为视频网站、门户网站、个人网站、购物网站、企事业单位网站或数据提供网络加速服务的，均需要办理内容分发网络（CDN）许可证，办理操作可在阿里云了解。
CDN许可证应用范围有：
（一）
1、门户网站加速；
2、视频网站加速；
3、购物网站加速；
4、个人网站加速；
5、企事业单位网站加速。
（二）
CDN支持的业务类型有：
1、多媒体视音频点播/直播/大文件下载;
2、场景加速，支持渐进式点播、流媒体直播，提供高质量低时延的视听加速服务;
3、视频流媒体直播服务，媒资存储、切片转码、访问鉴权、内容分发加速一体化解决方案;
4、视音频渐进式点播服务，低缓冲时间，高流畅度播放体验，支持 MP4、FLV 视频格式;
5、支持资源链接鉴权，可自定义鉴权 KEY，保障您的媒体资源安全，免去盗链担忧。
5. 如何把CSS中的图片自动部署到CDN上
主要是处理CSS中的图片，统一转化图片的路径为相对于站点的根目录，并且按图片名字、尺寸、内容重命名图片，方便缓存的自动清理。
gulp-cdn-service主要是对gulp-custom-css-urls输出的图片进行上传至CDN处理。目前只支持上传到七牛的CDN。该模块还有一个特点就是，对于已经上传的图片不会再次进行上传，提高项目构建发布的速度。
6. css里的背景图cdn可以加速么
cdn相当于一个服务器集群，相对来说在不同的地方用不同的服务器用户端资源加载速度可能快一点，而且不占主服务器带宽，而且可以同时加载资源，我觉得应该是这样理解的。
像背景图片这个只要你放到cdn上，css指定网址到cdn的图片路径，是可以实现加速的。
7. java web项目中有很多的图片，如何存放
一般有两种情况，
一种是前端开发需要显示的图片，这个是页面构成必须的元素，一般这些会做 动静分离，后台接口 跟 前端资源会部署在不同的服务器上，有不同的优化，一般会有转发的服务器，判断是后台接口，就转发到后台的服务器，如果是前端资源，就转发到前台的服务器。一般情况下，前端服务器，跟后台的服务器，是分离开的，有不同的人去管理，如果项目小的话，可能就全放在一个。这个优化的化，你可以去了解下 CDN原理。这个是用来优化静态资源加载情况的。
另一种情况是，显示的图片，不是前端构成的，是用户上传文件产生的，这种情况下，现在一般有专门的对象存储，用过 七牛云，跟阿里的。这个的逻辑是文件上传的时候，不是上传到我们自己的服务器，上传到专门的云服务器，我们自己数据库只需要保存这些上传文件的地址，真正使用的时候，把连接给前端，前端自动会根据内容到专门的云服务器上去获取。所有的安全，优化，带宽，缓存命中，这些都有由云服务器去保证。 简单来说，只有有钱，这些东西根本不会成为你项目的瓶颈。
作为技术，我们讨论的应该不是这些。图片会做备份，这个可以有专门的磁盘阵列去实现，简单来说，就是上传的内容保存到磁盘的时候，会自动多保存几个备份到不同的磁盘上。还是那句话，多去了解下CDN的原理，最后这段，个人理解，不一定对。
8. 为什么要把图片和css等静态资源放在单独的域名下
主要是提升网站的性能
把图片、css、js文件放在另一个服务器上（资源服务器）
1.有利于cpu负载和带宽均衡。而网页中html标签的href、src属性如果引用一个ip地址是不妥的（因为资源服务器的ip地址可能会变），所以给资源服务器注册一个独立域名，便于href、src属性的设置一劳永逸。
2.CDN缓存更方便
3.突破浏览器并发限制
4.Cookieless, 节省带宽，尤其是上行带宽 一般比下行要慢
5.防止不必要的安全问题(
6.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事
9. 前端网站常规优化方案
1、减少请求次数
2、减小资源大小
3、提高响应和加载速度
4、优化资源加载时机
5、优化加载方式
1、合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）
2、Nginx开启Gzip，进一步压缩资源（减小资源大小）
3、图片资源使用CDN加速（提高加载速度）
4、符合条件的图标做base64处理（减小资源大小）
5、样式表放首部，JS放尾部（JS单线程，会阻塞页面；资源加载方式）
6、设置缓存（强缓存和协商缓存，提高加载速度）
7、link或者src添加rel属性，设置prefetch或preload可预加载资源。（加载时机）
8、如果使用了UI组件库，采用按需加载（减小资源大小）
9、SPA项目，通过import或者require做路由按需（减小资源大小）加载
10、服务端渲染SSR，加快首屏渲染，利于SEO
11、页面使用骨架屏，提高首页加载速度（提高加载速度）
12、使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显
13、使用图片懒加载-lazyload
10. cdn的原理是什么
cdn的原理是什么？
网络流量分流(CDN)是一种新型的网络构建方式，它是为能在传统的IP网发布宽带丰富媒体而特别优化的网络覆盖层；而从广义的角度，CDN代表了一种基于质量与秩序的网络服务模式。简单地说，网络流量分流(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件，而内容管理和全局的网络流量管理是CDN的核心整体。
相关服务，因为前后流程比较复杂，可能还需要来去跑多次递交材料。若是想省心一些，还是推荐大家找靠谱一些的办理机构做协助像阿里云那边也是有这样服务的，可以到他们官网上了解一下。
CND许可证的办理流程：
1、从事经营性互联网活动的企业在管局网站进行申报；
2、购买系统，并完成系统评测。购买系统分为ICP/IP/域名备案系统和接入资源管理系统评测、信息安全管理系统评测、机房运行安全评测；
3、填写准备相关材料材料，申请CDN许可证需要把材料提交到管局进行审批；
CDN许可证申请需满足以下条件：
1、CDN许可证办理公司是依法设立的；
2、CDN许可证办理公司若申请跨地区idc证件需要注册资金不少于1000万，申请省内IDC证件不少于100万
3、CDN许可证办理公司至少给3名员工缴纳近一个月的社保