前后端都应该理解的CDN是什么？运用CDN有什么优势？
编辑：[db:作者] 时间：2024-08-25 08:52:35
这个问题的解答，须要分五步。
HTML的文件头（也有文件中，文件尾）那边常有其他文件引用，比如CSS以及JS的引用。
就以bootstrap常用的引用来举个栗子
你常见的引用可能会是这样的：
<head> <title>Mushroom</title> <meta name=\"大众viewport\"大众 content=\"大众width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"大众 charset=\公众utf-8\"大众> <meta http-equiv=\公众X-UA-Compatible\公众 content=\"大众IE=edge,Chrome=1\"大众 /> <meta http-equiv=\"大众X-UA-Compatible\"大众 content=\"大众IE=9\公众 /> <!-- 引入 Bootstrap --> <link href=\"大众/css/bootstrap.min.css\"大众 rel=\"大众stylesheet\公众> <!-- jQuery (Bootstrap 的 JavaScript 插件须要引入 jQuery) --> <script src=\公众/js/jquery.min.js\公众></script> <!-- 包括所有已编译的插件 --> <script src=\"大众/js/bootstrap.min.js\"大众></script></head>
这之中，<script src=\"大众/js/bootstrap.min.js\"大众></script> 这段便是外部脚本文件的一个链接，当前的这种链接是相对URL，指向站点内的文件，即你本项目里对应路径下面放置的文件。可以在 HTML <script> 标签的 src 属性 查看这个标签的详细属性。
属性值值 描述 URL 外部脚本的 URL。可能的值有：•绝对 URL - 指向其他站点（比如 src=\"大众www.example.com/example.js\"大众）•相对 URL - 指向站点内的文件（比如 src=\公众/scripts/example.js\"大众）
通过查看可以得知，URL的引用有两种办法，绝对和相对，绝对的办法便是直接引用其他站点的js地址，比如我把上方的引用改为
<script src=\"大众http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js\公众></script>
这样即是引用其他站点的js。
CSS文件的引用与此类似：HTML <link> 标签的 href 属性
图片以及其他文件的引用也类似，不赘述。
第二步，系统的资源引用在一个网站项目中，页面里常常会有许多js以及css的引用，打仗过开拓项目的一样平常都会理解，大部分界面里的脚本引用并不是像第一步里的那么精简，如果是直接引用项目内文件的话，他们可能是这样的：
<SCRIPT src=\"大众/iforums/templates/default/js/common.js\"大众 type=text/javascript></SCRIPT><SCRIPT src=\公众/iforums/templates/default/js/ajax.js\公众 type=text/javascript></SCRIPT><SCRIPT type=text/javascript src=\"大众/iforums/ueditor/third-party/jquery-1.10.2.min.js\"大众></SCRIPT><SCRIPT type=text/javascript src=\"大众/iforums/ueditor/ueditor.config.js\"大众></SCRIPT><SCRIPT type=text/javascript src=\"大众/iforums/ueditor/ueditor.parse.js\"大众></SCRIPT><SCRIPT type=text/javascript src=\"大众/iforums/ueditor/ueditor.all.js\"大众></SCRIPT>
可能乃至引用的更多，这样将资源文件与业务代码一锅炖的办法适用于小型的，运用做事器压力并不是太大的系统（并发、带宽、存储空间、资源等等）。这种办法的优点是开拓省力，发布省力，对做事器哀求小，省钱，没有详细公网接入需求。许多小型，内部利用型的网站系统每每采纳这种形式放置资源文件。
第三步，系统访问量变高了，速率变慢了怎么办怎么办？优化系统支配呗。
怎么优化？优化办法有很多，读写分离，负载均衡，这方面的东西可以讲上三天三夜。详细到本问题的范畴内，那便是资源做事器与运用做事器的分离。粗暴的理解办法便是，便是运用安在运用做事器（一台或者是集群），资源支配在资源做事器（单台或者是集群），这时候，js以及css的引用就须要变动为绝对URL，指向对应的资源做事器。
比如知乎的引用：
<link rel=\"大众apple-touch-icon-precomposed\公众 href=\公众http://static.zhihu.com/static/img/ios/zhihu(57px).png\"大众 /><link rel=\公众apple-touch-icon-precomposed\"大众 href=\"大众http://static.zhihu.com/static/img/ios/zhihu(72px).png\"大众 sizes=\公众72x72\"大众 /><link rel=\公众apple-touch-icon-precomposed\"大众 href=\"大众http://static.zhihu.com/static/img/ios/zhihu(76px).png\"大众 sizes=\"大众76x76\公众 /><link rel=\"大众apple-touch-icon-precomposed\"大众 href=\"大众http://static.zhihu.com/static/img/ios/zhihu(114px).png\"大众 sizes=\"大众114x114\"大众 /><link rel=\"大众apple-touch-icon-precomposed\公众 href=\"大众http://static.zhihu.com/static/img/ios/zhihu(120px).png\"大众 sizes=\"大众120x120\公众 /><link rel=\"大众apple-touch-icon-precomposed\"大众 href=\"大众http://static.zhihu.com/static/img/ios/zhihu(152px).png\"大众 sizes=\公众152x152\"大众 /><script src=\"大众http://static.zhihu.com/static/revved/js/-/vendor.min.5a2082ff.js\"大众></script><script src=\公众http://static.zhihu.com/static/revved/js/-/closure/app_core.fb4023ac.js\"大众></script><script src=\"大众http://static.zhihu.com/static/revved/js/-/closure/sign.e0ca7b10.js\"大众></script><script src=\公众http://static.zhihu.com/static/revved/js/-/closure/app.9eaaec15.js\"大众></script><script src=\公众http://static.zhihu.com/static/revved/js/-/closure/rich_text_editor.3a07c473.js\"大众></script>
有兴趣的话，你可以打开这个链接看看是什么页面：http://static.zhihu.com/
也可以打开这个看看：http://static.zhihu.com/static
第四步，网络方面的优化网站的访问速率，只基于一点，那便是页面包含的内容传输到用户电脑的速率，做事器搭的再好再完美，如果用户到做事器的链路之间有一段比较缓慢的话，整体速率也会被拉的十分差劲。
想象一下，你给公司做了个运行于公司内网的网站，统统运行良好，分布式支配也已搭建完毕，统统都很完美。
后来，你公司运营良好，开了一个十分迢遥的分公司（不要问为什么迢遥，再问自绝经脉），你们的内网也同时连了过去（对，便是那种很直接的搭了几条网线就把两个局域网连成一个局域网的黑科技）。但是由于太远了线节点太多了，分公司访问公司的系统十分缓慢，这时候你就愁啊，这可咋办？那弗成就在分公司那边支配一套内容缓存好了，内容进行同步，这样至少分公司的网页访问速率能提升很多，你也可以立功升职加薪了。
紧接着，由于你的出色表现，你们公司扩展十分厉害，在全国各地都建立了分公司，你又开始愁了，这不能每个分公司都搭一套啊，累得慌啊。思来想去，那就华东一套华北一套华南一套东北一套这样分吧，然后搭一些分发做事器，接入访问地址，然后跳转到就近的内容缓存做事器进行内容读取，OK，又到了升职加薪的时候了~
对，到这里，你已经完成了一套大略单纯CDN的培植。
第五步，CDN是什么？你的搭建只是基于你公司的大型局域网，而现行的盛行CDN则是基于地球搭建的超大型局域网--因特网。它的好处是什么呢？
比如你这么写：
<!-- 引入 Bootstrap --> <link href=\"大众http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css\"大众 rel=\"大众stylesheet\公众> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src=\"大众http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js\"大众></script> <script src=\公众http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js\公众></script> <![endif]--> <!-- jQuery (Bootstrap 的 JavaScript 插件须要引入 jQuery) --> <script src=\"大众http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js\"大众></script> <!-- 包括所有已编译的插件 --> <script src=\公众http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js\"大众></script>
上面的地址是百度CDN的链接地址。
那么用户在读取网页内容的时候，就会去百度的就近做事器上掏这些js和css，而不是在你的做事器里捞。
好处呢，第一，一样平常来说，访问速率有保障，稳定性也有保障；第二，你可以省下资源做事器的一部分资源包袱，节省空间节省流量，艰巨创业，能省则省啊。
这时候你会问了，为什么只有js和css呢？其他的图片啊html内容啊不能放进CDN吗？
能啊为啥不能，CDN做事就靠这赢利呢为啥不能，非广告非广告非广告，你看：
CDN-Content Delivery Network-百度开放云
同类产品还有阿里云等等等等。。
你看的文章中的CDN，一样平常都是指js和css文件的CDN存储
原文链接：https://www.zhihu.com/question/36514327/answer/68143522
本站所发布的文字与图片素材为非商业目的改编或整理，版权归原作者所有，如侵权或涉及违法，请联系我们删除，如需转载请保留原文地址：http://www.baanla.com/xyj/203589.html
