【HTML】前端性能优化之CDN和WPO的比较
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题。WPO解决方案,如Radware的FastView,则在前端进行性能提升处理,使页面更有效地呈现在浏览器中。
“我已经使用了内容交付网络(Content Delivery Networks, CDN),为什么还需要前端性能优化(Web Performance Optimization,WPO)解决方案呢?”这是用户咨询最多的问题之一。要想了解前端WPO如何弥补CDN的不足,并最终为网页或企业应用提供显著的加速效果,你就必须了解这两个解决方案各自所能解决的不同问题。
CDN可以解决的性能问题
虽然内容交付网络(CDN)为全球用户改善了网络的可用性和节省了带宽,但CDN解决的主要问题还是延迟。延迟就是托管服务器从接收到对页面资源(图像、CSS文件等)的访问请求到处理完这一请求并最终将网页及相关资源传送给访问者所需要的时间。
延迟时间在很大程度上取决于用户与服务器之间的距离,以及网页中包含的资源数量。如果你所有的资源都托管在旧金山,位于伦敦的用户访问你的页面,那么每一个请求都会经历一个从伦敦到旧金山再返回伦敦的漫长的往返行程。如果你的页面中包含100个对象,那么为了获取这些对象,用户的浏览器就必须向你的服务器发送100个独立请求。
通常延迟时间在75-140毫秒的范围内,但是也可能会变得更高,尤其是对通过3G网络访问网站的移动用户而言,页面的加载时间一般会增加到2~3秒钟,想想这只是导致页面加载变慢的因素之一,你就会理解Web性能优化的重要性。
内容交付网络(CDN)通过在跨区域或全球范围的分布式服务器上进行内容缓存,使网页资源向用户靠近,缩短用户与服务器之间的往返时间,进而解决延迟问题。

CDN并非处处有用
对多数网站来说,CDN必不可少,但并不是每个网站都需要CDN。例如:如果你的资源托管在本地,用户也是本地用户,那么CDN对Web性能的提升就不会有太多的帮助。
与一些网站运营商的观点相反,CDN不是独立的性能解决方案。在电子商务和SaaS领域,两个最常见的性能难题就是对第三方内容和服务器端的处理, CDN对这些要求是无能为力的。
WPO如何弥补CDN的不足
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题。WPO解决方案,如Radware的FastView,则在前端进行性能提升处理,使页面更有效地呈现在浏览器中。
WPO解决方案采用了一些优化处理措施来增加渲染时间。FastView的处理措施包括以下几个:
· 资源整合,使得网络上传送的包变少,从而降低延迟。
· 资源(图像、文本)压缩,以减少总的负载大小。
· 优化资源在浏览器中的渲染方式,确保优先加载关键内容,将不太重要的内容延后加载,如:页面分析等第三方脚本。
· 对浏览器缓存加以优化利用,以便对用户访问所有涉及到的多个网页资源进行缓存。
· 智能预测下一个访问页面,并将相关资源预加载到浏览器缓存中,使资源处于可用状态,以便网页渲染处理进程能够立即调用。
· 许多其它WPO技术。目前,FastView采用了22个高级加速处理技术,Radware的研发团队也在不断用新的前沿专利技术升级该解决方案。
CDN与前端WPO整合带来的益处
如下表所示,CDN与WPO解决方案进行整合之后对各个页面评测指标有很大的影响,从请求数到有效负载,再到开始渲染和加载时间,都得到了很大改善。

总而言之,整合的CDN/WPO解决方案可以将网页速度提升四倍,并将总的有效负载减少了70%。
使用自动化的WPO解决方案来补足CDN的不足还能带来很多其它的益处,例如:
自动重命名文件,使之可以服务于CDN,而如果手动完成,这将是一个十分耗时的工作。FastView解决方案可以自动进行此操作,大大节省了开发人员的时间。
添加失效头文件是应该善加利用的最佳页面优化技术。虽然加入头文件相对来说较为容易,但进行版本控制却很棘手,尤其是在使用CDN之后,要么需要花费大量人力关注CDN清除工具,要么需要花费大量的开发时间来整合CDN的API。自动化的WPO解决方案可以解决这些问题,节约很多开发时间,降低误差幅度。
总结
Radware安全专家指出,CDN与前端WPO具有很强的互补性,可以很好地结合在一起。而且用户也发现,CDN和WPO这两种技术可以与企业内部性能引擎进行整合,作为Web性能加速策略的一部分。FastView作为Radware的最佳Web加速解决方案,可以帮助用户最大限度地提升Web性能。
原文链接:用前端性能优化方案解决CDN的不足
【HTML】前端性能优化之CDN和WPO的比较的更多相关文章
- website 性能检测 & 前端性能优化
website 性能检测 & 前端性能优化 https://cdn.xgqfrms.xyz/ https://mobile.xgqfrms.xyz/ PageSpeed Insights ht ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- Wen前端性能优化
Web前端性能优化 一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等.主要优化手段有优化浏览器访问.使用反向代理.CDN等. 一.浏览器访问优化 减少h ...
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...
- Web前端性能优化的9大问题
1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...
- WEB前端性能优化小结
转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...
- 阿里巴巴 web前端性能优化进阶路
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...
- 基于GruntJS前端性能优化
在本文中,如何使用GruntJS为了使治疗简单的前端性能优化自己主动,我写了一个完整的样本放在Github上.能够參考一下.关于Yahoo的前端优化规则请參考:Best Practices for S ...
随机推荐
- 【nodejs】FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
当使用大批量(>100)的SQL进行MySql数据库插值任务时,会发生以下错误: 总计将有371579条数据将被插入数据库 开始插入DB <--- Last few GCs ---> ...
- 关于 URL 编码及 JavaScript 编码函数【转载+整理】
原文地址:http://www.ruanyifeng.com/blog/2010/02/url_encoding.html 本文内容 引入 环境 测试 JavaScript 编码函数 引入 URL ...
- OSX系统的sublime配置php执行编译
OSX系统的sublime配置php执行编译 1).进入如下菜单 2)弹出内容如下: { "cmd": ["make"] } 修改为: { "cmd& ...
- C语言代码复习笔记:第二章
输出星星 #include <stdio.h> void printStart( int num ) { ) { printf("*"); }; } int main( ...
- Linux网络编程:基于TCP的程序开发回顾篇《转》
面向连接的TCP程序设计 基于TCP的程序开发分为服务器端和客户端两部分,常见的核心步骤和流程: 其实按照上面这个流程调用系统API确实可以完全实现应用层程序的开发,一点问题没有.可随着时间的推移,你 ...
- MVC 之 缓存机制(一)
一.概述 缓存是将信息(数据或页面)放在内存中以避免频繁的数据库存储或执行整个页面的生命周期,直到缓存的信息过期或依赖变更才再次从数据库中读取数据或重新执行页面的生命周期.在系统优化过程中,缓存是比较 ...
- 查看java进程启动的详细参数和过程
jsp 查看java进程: 6448 main 然后,使用jinfo pid 查看: jinfo 6448 有一行VM Flages:表示启动参数 VM Flags: -Dproc_main -*** ...
- 001-Go JSON处理
在golang中提供的encoding/json包可以编码JSON以及解码JSON数据. 1.编码JSON 使用json包中的Marshal函数进行编码,源码如下: func Marshal(v in ...
- 转:nginx模块开发——handler(二)
模块上下文结构 这是一个ngx_http_module_t类型的静态变量.这个变量实际上是提供一组回调函数指针,这些函数有在创建存储配置信息的对象的函数,也有在创建前和创建后会调用的函数.这些函数都将 ...
- 利用mvn进行多环境配置
代码里的resource信息有很多,代码里写死某一个环境的配置的话,有以下若干问题. 1. dev,不同的beta上,使用的resource信息不同. 2. 代码没有发布到对应的环境上,需要去机器上需 ...