第一步,HTML的文件引用:
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主要功能是在不同的地点缓存内容,通过负载均衡技术,将用户的请求定向到最合适的缓存服务器上去获取内容,比如说,是北京的用户,我们让他访问北京的节点,深圳的用户,我们让他访问深圳的节点。通过就近访问,加速用户对网站的访问。解决Internet网络拥堵状况,提高用户访问网络的响应速度。

简单介绍下CDN与传统网站访问的区别:

传统访问访问:&amp;lt;img src="https://pic2.zhimg.com/f9708de32d641358e47edc96307775d5_b.png" data-rawwidth="433" data-rawheight="444" class="origin_image zh-lightbox-thumb" width="433" data-original="https://pic2.zhimg.com/f9708de32d641358e47edc96307775d5_r.png"&amp;gt;

使用了CDN的网站访问:
&amp;lt;img src="https://pic4.zhimg.com/79c1abc468349073fb433d0949423717_b.png" data-rawwidth="824" data-rawheight="567" class="origin_image zh-lightbox-thumb" width="824" data-original="https://pic4.zhimg.com/79c1abc468349073fb433d0949423717_r.png"&amp;gt;

与传统访问方式不同,CDN网络则是在用户和服务器之间增加缓存层,将用户的访问请求引导到最优的缓存节点而不是服务器源站点,从而加速访问速度。

完整的CDN工作流程:

&amp;lt;img src="https://pic4.zhimg.com/049b124feb55100ff2f147b768ad4c8b_b.png" data-rawwidth="400" data-rawheight="423" class="content_image" width="400"&amp;gt;

总结一下CDN的工作原理:通过权威DNS服务器来实现最优节点的选择,通过缓存来减少源站的压力。

CDN应用场景:

静态网页

图片小文件、博客

大文件下载

软件下载、视频点播或图片存储网站

动态加速

直播网站

应用加速

手机APP

最后看一下使用了CDN后的实际访问效果

&amp;lt;img src="https://pic4.zhimg.com/2e6b0715d5759589e79664678c157963_b.png" data-rawwidth="870" data-rawheight="364" class="origin_image zh-lightbox-thumb" width="870" data-original="https://pic4.zhimg.com/2e6b0715d5759589e79664678c157963_r.png"&amp;gt;

上图数据来源于腾讯云CDN,对比用户的网站使用了CDN和没有使用CDN的效果,帮助大家更形象的理解CDN解决什么问题。

不用CDN时,访问请求导源站用的时间是1.27S。

而使用了腾讯云CDN后,会将这个访问时间缩短为0.29s,访问速度提高了5倍,而且可用性也可以得到很好的提升,原因是CDN的网络的链路质量都比较好。

CDN 内容分发网络的更多相关文章

  1. CDN 内容分发网络技术

    1.前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加,用户数量也在不断增加,受Web服务器的负荷和传输距离等因 ...

  2. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案之CDN内容分发网络

    背景分析 EasyDSS流媒体解决方案提供一站式的转码.点播.直播.录像.检索.时移回放服务,极大地简化了开发和集成的工作,并且EasyDSS支持多种特性,完全能够满足企业视频信息化建设方面的需求.其 ...

  3. 深度剖析:CDN内容分发网络技术原理--转载

    1.前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加,用户数量也在不断增加,受Web服务器的负荷和传输距离等因 ...

  4. CDN内容分发网络

    CDN的全称是Content Delivery Network,即内容分发网络,其设计思想是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定. CDN系统是在网络 ...

  5. 史上最全的CDN内容分发网络实战技巧(网络优化)

    今天来给大家分享下关于 CDN 的东西,以及我自己的一些发现.一些个人的拙见.总共分为 3 个部分:原理.详解.各种坑. 首先说一下 CDN 的基本原理部分,主要分 4 块来描述:CDN 的由来.调度 ...

  6. 什么是CDN内容分发网络?【刘新宇】

    CDN 使用第三方OSS服务的好处是集成了CDN服务,下面来了解一下什么是CDN. CDN 全称:Content Delivery Network或Content Distribute Network ...

  7. jquery CDN(内容分发网络)使用

    jquery CDN 给开发者提供一种捷径,即不下载jquary 就通过CDN能使用各个版本的jquery. 使用方法很简单,就是在HTML 文档中引用相关版本的jquery. 例如:我用百度的CDN ...

  8. 缓存---CDN(内容分发网络)

    4.CDN   内容分发网络(content distribution network,CDN)是一种互联的网络系统,它利用更靠近用户的服务器从而更快更可靠的将静态资源分发给用户. cdn主要有以下优 ...

  9. http 协议_DNS_域名解析 DNS 服务器_内容分发网络 CDN_缓存机制_HTML5 浏览器存储技术_cookie_sessionStorage_localStorage

    TCP/IP 协议族 是按层次去划分的 应用层    决定了向用户提供应用服务时通信的活动. FTP 协议(文件传输协议)DNS(域名协议)HTTP(超文本传输协议) 传输层    提供处于网络连接中 ...

随机推荐

  1. HDU 1907 John(博弈)

    题目 参考了博客:http://blog.csdn.net/akof1314/article/details/4447709 //0 1 -2 //1 1 -1 //0 2 -1 //1 2 -1 / ...

  2. 1.Linux入门介绍

    1.1 Linux概述 1.1.1 Linux简要介绍 Linux的由来: Linux的内核最初是由芬兰人李纳斯·托瓦茨在上大学的时候编写的一个内核,它是基于Unix操作系统编写的 大多服务器使用的是 ...

  3. codevs1961 躲避大龙

    1961 躲避大龙  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 你早上起来,慢悠悠地来到学校门口, ...

  4. 求n!(高精度问题)

    #include <iostream> #include <stdio.h> #define MAX 10000 using namespace std; void Mul(i ...

  5. 转:Windows Phone 7 设计简介

    英文原文:smashingmagazine 导读:Windows Phone 7 引进了一个全新的内容管理和用户界面,命名为Metro的设计语言和理论.微软这次所看准的市场和用户群也与之前的老一代 W ...

  6. 《hello-world》第八次团队作业:Alpha冲刺-Scrum Meeting 2

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 <hello--worl ...

  7. SqlServer转换为Mysql(mss2sql)

    SqlServer转换为Mysql(mss2sql)工具 http://pan.baidu.com/s/1c2d8R8O 参考链接: http://www.cnblogs.com/angestudy/ ...

  8. 【Codeforces 4D】Mysterious Present

    [链接] 我是链接,点我呀:) [题意] 要求长度和宽度都严格递增(选择一个序列) 然后你一开始有一个长度和宽度 要求这个一开始所给的长度和宽度能接在你选择的一段连续的长度宽度的开头 (且保持原来的性 ...

  9. python实现字符串之间的映射

    类似于凯撒密码一样的加密 # *-* coding=utf-8 *-* import string intab = string.lowercase outtab = 'qwertyuiopasdfg ...

  10. ESXi License过期解决办法

    http://blog.sina.com.cn/s/blog_538439270101pqls.html