序
浏览器缓存只是为了提升页面再次被访问的速率，而对付提升首次访问的相应能力，常日是采取CDN进行加速。CDN在前端优化过程中起着关键性的浸染，理解CDN的事情事理对前端开拓职员提升网站性能有着很大的帮助，本文从CDN事情事理、CDN缓存干系、前端优化三个角度对CDN常见问题进行根本先容。
CDN事情事理
CDN是什么？
CDN（Content delivery networks，内容分发网络），其目的是通过在源做事器和用户之间增加一层新的网络架构，将网站的内容分发到最靠近用户的网络“边缘”，利用户可以就近取得所需的内容，提高用户访问网站的相应速率。我们的日常生活中，无论是在网站上看新闻，网上购物，不雅观看视频，还是谈天，都和CDN息息相关。
利用CDN好处？
提升网页加载速率
处理高流量负载
无需本钱完成本地化覆盖
减少带宽花费
在多台做事器间均衡负载
使你的网站免于DDoS（谢绝做事）的攻击
……
CDN是如何事情的？
为了利用户和网站源做事器之间的“间隔”最短，CDN须要在不同的地理位置（PoPs，接入点）存储网站内容的缓存。一样平常来说，每个PoP都包含多个缓存做事器，它们的紧张浸染是利用户访问到最近的缓存做事器，以此减少信息的来回韶光，达到减少相应韶光的目的。缓存做事器卖力存储和分发缓存文件，紧张功能是提升网站相应速率和减少带宽花费。这些缓存文件会被存储在固态硬盘或者RAM中。
CDN缓存干系
CDN缓存？
用户在浏览网站的时候，浏览器在硬盘上保存网站中的图片或者其他文件的副本，用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了HTTP要求数量。与做事器在硬盘上存储缓存文件类似，CDN将网站的内容移动到更为强大的代理做事器上，通过动态域名解析，用户的要求被分配到离自己最快的做事器，CDN做事器直接返回缓存文件或通过专线代理原站的内容，进而提升内容分发的速率。此时，浏览器和做事器的交互可以用下图表示：
CDN缓存内容的更新？
客户端浏览器先检讨是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起要求，CDN边缘节点会检测用户要求数据的缓存是否过期，如果没有过期，则直接响运用户要求，此时一个完成http要求结束；如果数据已经由期，那么CDN还须要向源站发出回源要求（back to the source request），来拉取最新的数据。
CDN缓存静态资源，常用的有：图片、视频、音乐、css、js文件等。
CDN缓存内容的有效期？
1. 原站apache吐出的静态文件：由apache的expire和header模块掌握
紧张两项：last-modified，cache-control：max-age
apache缺省配置，所有静态文件在cdn只缓存3600s（须要我们按需求调度被加速做事器的apache设置），3600s后CDN失落效，用户访问时会重新要求原站，如果没有变革，缓存失落效周期自动延长10%。
2. 原站jsp或php吐出的动态内容（url形式必须是静态的）
由程序掌握last-modified，cache-control：max-age public ，apache的设置将不起浸染，CDN根据这两项判断是否须要到原站更新内容。
CDN和运用的结合策略？
1. 变革不频繁的页面，在原站天生静态页面，原站apache上定义过期韶光，例如1天。原站上静态文件更新后，可以等待CDN过期。或者主动关照CDN更新（随着CDN节点越来越多，代价会非常高）。
2. 变革频繁的页面，不天生静态页面，由jsp或php定义过期韶光，例如5s或60s。CDN过期后，如果有用户访问就从原站上抓取。
优点：干系页面内容更新后，不须要主动关照100个原站都来抓取，有效降落原站的压力。
如果页面内容没有变革，返回last-modified不变，这样原站会直接返回304给CDN，CDN也会返回304给用户。减少网络传输和速率。
3. 分外静态资源，或者频繁访问、频繁更新的页面，通过apache no-cache见告IE不缓存，html中就不须要利用pinglun.js?123456这样的代码形式，然后用max-age见告CDN缓存1s，这样避免每次用户要求都转到原站。
CDN缓存策略？
开拓职员采取HTTP缓存头来标记可缓存的内容以及设置缓存过期韶光，采取缓存策略来确保内容的新鲜度。如“Cache-Control: max-age=600”表示该文件在用户浏览器缓存的副本将在10分钟后过期，Fiddler可以方便地查看缓存的header。浏览器缓存干系内容在此不做先容。
CDN有两种办法可以检测浏览器中缓存和源做事器上文件是否匹配：比较最新修正日期Last-Modified和比较ETag。
如果每个文件都进行标记，会导致效率非常低下。如果创造缓存头指令不再适宜，开拓职员可以对缓存头进行重写。现有的很多智能缓存掌握算法都可以通过机器学习，识别动态天生工具的缓存。
前端优化
HTTP要求数？
我们都知道减少HTTP要求可以提升网站的相应能力，虽然CDN本身不能减少要求的数量，但是CDN可以通过预池连接（pre-pooling connection）来减少关闭和重新打开TCP连接引起的韶光延迟。
缓存掌握？
很多CDN都供应缓存掌握选项，许可我们根据文件类型或者位置对单个文件乃至全体文件组设置缓存规则。CDN通过机器学习可以缓存动态内容，这就减轻了险些所有的缓存管理任务。
Gzip和Minify？
CDN在前端优化的过程中起着关键性浸染，常常被用来简化很多耗时的优化任务。例如CDN会供应自动压缩文件功能，避免了手动压缩。
图片优化？
CDN每每是图片缓存的首选项，并且须要购买才能利用这项做事。很多前辈的CDN在原来无损压缩的观点上提出一种渐进渲染的方法，先加载像素化版本的图片，随后用一系列更“清晰”的版本代替该图片，直到实际的图片做好了加载的准备。渐进渲染可以在不捐躯图片质量的条件下缩短加载韶光。
总结
本文对CDN的事情事理和CDN缓存进行了根本先容，理解CDN缓存和浏览器缓存将对前端事情职员的优化之路供应很大的帮助，更多前端优化的技能将在后续陆续为大家呈现。
若有理解不对的地方欢迎大家批评示正。
