前端-网站性能优化——CDN加速

    网站性能优化是一个大活儿，按工种划分的话，分前端、后端和db等，作为一名前端工程师，这系列文章只聊前端工程师应该知道的关于网站性能优化的那些事儿。写此文章算是一个工作总结也算是留个笔记方便以后查看，更希望文章里的内容对阅读者有所帮助，小弟才疏学浅如文章里有地方欠考虑或用词不当之处还望不吝指教。如有意见或建议可以通过 haoshaochan@126.com 邮箱找到我。

cdn——维基百科给出的解释是：内容分发网络（Content delivery network或Content distribution network，缩写：CDN）。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上，让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容，减少网络传输距离从而达到加速的目的（需要提过资源绝对地址告诉cdn厂商，让厂商去智能拉取）。

目前最火的cdn厂商有：乐视云、金山云和网宿等。这些厂商的cdn业务的工作原理大致是这样的：图1

如图1所示：当用户发起内容请求时，通过cdn厂商的智能DNS域名解析拿到cdn厂商边缘节点服务器的ip（cdn厂商会在运营商注册），然后向边缘节点服务器发起请求，请求内容数据(这件事情由浏览器完成)，边缘节点会检测当前节点是否有数据，如果没有就去front（父级节点，父级可能还会有父级节点，不同的网络环境策略会略有不同）节点要，如果还找不到就去源站拿，并依次序返回。如果某个边缘节点可以找到，会先校验内容有效期，当确定有效期之后返回给用户。注：“有效期校验有多种方式和http协议相关，内容比较多，我们留到下一期（前端-网站性能优化——缓存）再聊。”

知道了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加速。页面加载速度就又会上升一个档次。

前端-网站性能优化——CDN加速相关推荐

前端网站性能优化建议
一.内容部分 • 尽量减少 HTTP请求 • 减少 DNS查找 • 避免跳转 • 缓存 Ajxa • 推迟加载 • 提前加载 • 减少 DOM元素数量 • 用域名划分页面内容 • 使 frame数量最 ...
小猿圈web前端之网站性能优化方案
现在前端不仅要能做出一个网站页面,还要把这个页面做的炫酷,那需要很大程度的优化,那么怎么优化才更好呢?小猿圈总结了一下自己优化的方案,感兴趣的朋友可以看一下. 一般网站优化都是优化后台,如接口的响应时 ...
【前端性能】网站性能优化
网站性能优化 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数, ...
前端面试—网站性能优化
我们常将网站性能优化措施归结为四大方面: 1.css优化: 2.js优化: 3.合理利用缓存,提升网络传输速率: 4.减小请求资源体积: 5.其它 1 css优化 1.1使用雪碧图,减少http请求, ...
前端如何进行网站性能优化
大家好,我是IT修真院学员,一枚正直纯洁善良的WEB程序员,今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点-前端如何进行网站性能优化. 一.背景介绍性能优化的目的 1.从用户角度而言, ...
[前端技巧] 网站性能优化（FCP、lCP）
网站性能优化 FCP(First Contentful Paint), 首次内容绘制 LCP(Largest Contentful Paint), 最大内容绘制打开控制台,选择 lighthouse ...
移动网站性能优化：网页加载技术概览
移动网站性能优化:网页加载技术概览 2013/08/27 | 分类: IT技术 | 0 条评论 | 标签: WEB开发, 性能优化, 移动分享到: 47 本文由伯乐在线 - 伯乐在线读者翻译自 ...
网站性能优化有哪些方法
网站性能优化有哪些方法一.总结一句话总结: web前端性能优化:浏览器访问优化.CDN加速.反向代理应用服务器性能优化:分布式缓存.异步操作.使用集群.代码优化 web前端性能优化方法有哪些 1 ...
网站性能优化从入门到粗通（PHP 篇）
本文来自作者蒋岩在 GitChat 上分享「网站性能优化从入门到粗通(PHP 篇)」,「阅读原文」查看交流实录. 「文末高能」编辑 | 哈比题外话:本次 Chat 的主题是入门到粗通,所以内 ...

前端-网站性能优化——CDN加速

前端-网站性能优化——CDN加速

前端-网站性能优化——CDN加速相关推荐

最新文章

热门文章