网站性能优化是一个大活儿，按工种划分的话，分前端、后端和db等，作为一名前端工程师，这系列文章只聊前端工程师应该知道的关于网站性能优化的那些事儿。
cdn——维基百科给出的解释是：内容分发网络（Content delivery network或Content distribution network，缩写：CDN）。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上，让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容，减少网络传输距离从而达到加速的目的（需要提过资源绝对地址告诉cdn厂商，让厂商去智能拉?。?。
如图1所示：当用户发起内容请求时，通过cdn厂商的智能DNS域名解析拿到cdn厂商边缘节点服务器的ip（cdn厂商会在运营商注册），然后向边缘节点服务器发起请求，请求内容数据(这件事情由浏览器完成)，边缘节点会检测当前节点是否有数据，如果没有就去front（父级节点，父级可能还会有父级节点，不同的网络环境策略会略有不同）节点要，如果还找不到就去源站拿，并依次序返回。如果某个边缘节点可以找到，会先校验内容有效期，当确定有效期之后返回给用户。注：“有效期校验有多种方式和http协议相关，内容比较多，我们留到下一期（前端-网站性能优化——缓存）再聊?！?/p>
知道了cdn是怎么一回事儿之后，咱们再聊聊前端如何利用cdn来优化网站性能。前端需要被加速的文件大致包括 js、css、图片、视频、和页面等文件,页面文件比较特殊(有动态和静态之分)我们稍后再聊，先聊聊js、css、图片和视频文件。这些文件和页面（html\jsp\aspx等）最大的区别是：这些文件都是静态的，改动较小，了解上面cdn工作原理之后我们就可以发现这类静态文件最适合做cdn加速。我们把这些静态文件通过cdn分发到全国乃至世界的各个节点，用户就可以在距离最近的边缘节点拿到所需要的内容，从而提升内容下载速度加快网页打开速度达到性能优化的目的。接下来我们聊聊页面，页面分动态页面(如：jsp等)和静态页面（html）。
> 动态页面：当收到用户请求时服务器会在服务端对页面进行一次后台渲染把数据渲染到页面之后再返回给用户（当然，服务端也可以做缓存）。
静态页面：收到用户请求时，服务端不做渲染工作直接返回给用户。
动态页面是不适合做cdn加速的。原因：参照上面讲的cdn工作原理，由于页面是动态的，内容的有效期就比较活跃。假如我们对动态页面做了cdn加速，那么场景应该是这样的：用户——>边缘节点（验证有效期发现失效）——>源站。经过这个过程才能拿到页面，这样并没有起到加速的作用反而更慢了，那我们还不如直接去源站拿(当然我们可以要求cdn厂商做定制化开发)。
静态页面（html）也是比较适合做cdn加速的。但是静态页面也分纯静态页面和非纯静态页面。
纯静态页面：只指直接通过浏览器输入地址就可访问的，后台服务器没有做鉴权登录等认证。
非纯静态页面：需要通过鉴权登录等认证才能访问的html页面。
如果非纯静态页面做cdn加速，参照上述的cdn工作原理，会出现用户没有通过任何服务器鉴权认证也可以正常在cdn边缘节点拿到想要访问页面（要求cdn厂商做定制化开发也可以避免这种情况）。
不过我们可以采用前后端彻底分离的方式（js发ajax请求的方式验证用户是否可以通过鉴权）来解决动态页面和非纯静态页面不适合做cdn加速的问题。
注：前后端分离实践我会在另外一个系列文章中分享
当你的网站使用上cdn加速，我相信你的页面加载速度会有一个非?？晒厶嵘?。
另外有一个我们不得不关注的问题我在想这篇文章中说一下，那就是：“浏览器对同一ip进行请求的最大并发连接数的问题”。不同浏览器的并发数量不一样：IE11 、IE10 、chrome、Firefox 的并发连接数是 6个，IE9是10个（如何查看浏览器并发连接数请自行google）。
如果页面静态资源（图片等）过多（大于6个）会存在资源请求等待的情况。目前现实状况是大多用户带宽越来越大，但是咱们的静态资源并非那么大，很多文件都是几k或者几十k，6个文件加起来都小于带宽。这样就导致了资源的浪费。解决方案是：用多个不同IP的服务器来存储这些文件，并在页面中通过绝对路径的方式引用（要求同一IP的文件不超过6个）。这样就可以尽可能的减少资源请求等待的情况。
总结：不同ip服务器存储静态文件再结合上cdn加速。页面加载速度就又会上升一个档次。
