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的比较的更多相关文章

  1. website 性能检测 & 前端性能优化

    website 性能检测 & 前端性能优化 https://cdn.xgqfrms.xyz/ https://mobile.xgqfrms.xyz/ PageSpeed Insights ht ...

  2. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. Wen前端性能优化

    Web前端性能优化 一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等.主要优化手段有优化浏览器访问.使用反向代理.CDN等. 一.浏览器访问优化 减少h ...

  5. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  6. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  7. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

  8. 阿里巴巴 web前端性能优化进阶路

    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...

  9. 基于GruntJS前端性能优化

    在本文中,如何使用GruntJS为了使治疗简单的前端性能优化自己主动,我写了一个完整的样本放在Github上.能够參考一下.关于Yahoo的前端优化规则请參考:Best Practices for S ...

随机推荐

  1. jssor/slider图片的问题

    用jssor/slider这个控件,在显示图片的时候,每张图片都被拉伸到最大的图片的宽度和高度,导致变形,怎么处理? [答案] Yes. With no u="image" ima ...

  2. RobotFramework+Selenium2+Appium环境搭建

    转载:https://www.cnblogs.com/testway/p/7372326.html 装python 2.7 RobotFramework是python2 写的,图形界面使用的wxpyt ...

  3. AS-->创建项目(慢)和打开项目(慢)等需要注意的问题

    Android Studio 创建新项目的时候,会在进度条的界面滞留很久. 有时候一天都卡在这. 打开其它项目有些时候,也会出现这种情况. 主要的原因就是, 此过程正在 下载对应版本的 gradle. ...

  4. Linux网络编程:基于UDP的程序开发回顾篇

    基于无连接的UDP程序设计 同样,在开发基于UDP的应用程序时,其主要流程如下:   对于面向无连接的UDP应用程序在开发过程中服务端和客户端的操作流程基本差不多.对比面向连接的TCP程序,服务端少了 ...

  5. 通过16道练习学习Linq和Lambda

    http://kb.cnblogs.com/page/73528/ 1. 查询Student表中的所有记录的Sname.Ssex和Class列. select sname,ssex,class fro ...

  6. Redis3.2.5 集群搭建以及Spring-boot测试

    1:集群中的机器信息 IP PORT 192.168.3.10 7000,7001,7002 192.168.3.11 7004,7005,7006 2:安装Redis 分别在10与11机器上面安装R ...

  7. eclipse 运行简单JAVA程序事例

    开发JAVA已经有一段时间了,不过要运行JAVA程序,还是在命令行敲命令,很不方便,很麻烦,突然想到eclipse应该也有这个功能,于是百度了一下,将步骤晒出来,供大家参考. 1.创建JAVA工程 单 ...

  8. LNMP一键安装包-CentOS/Ubuntu/Debian自动安装Nginx,MySQL,PHP

    适用环境: 系统支持:CentOS.Ubuntu.Debian 内存要求:≥128M 安装了什么: 1.Nginx-1.2.1 2.MySQL 5.5.25 3.PHP 5.2.17或PHP 5.3. ...

  9. excel 如何快速实现绝对引用

    当函数输入完成并框选数据区域后,变成如上效果时,按“F4键”即可

  10. php函数method_exists() 与is_callable()区别

    php函数method_exists()与is_callable()的区别在哪?在php面相对象设计过程中,往往我们需要在调用某一个方法是否属于某一个类的时候做出判断,常用的方法有method_exi ...