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. Sublime Es6教程2-基本语法

    2.基本语法 let, const, forEach,for of class, extends, super arrow functions, template string, destructur ...

  2. Javascript 创建对象的三种方法及比较【转载+整理】

    https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...

  3. Initialization failed for Block pool <registering> (Datanode Uuid unassigned) service to IP1:8020 Invalid volume failure config value: 1

    2017-02-27 16:19:44,739 ERROR datanode.DataNode: Initialization failed for Block pool <registerin ...

  4. AngularJS实现三级Table列表

    angular.module('yo03App') .controller('MyrouteCtrl', function ($scope) { $scope.professors = [{ 'nam ...

  5. javascript将算法复杂度从O(n^2)做到O(n)

    compare the difference of two giving array, return results: 1. elements in both array, 2. elements o ...

  6. NGUI 降低drawcall

    前置说明一: Unity中的drawcall定义: 每次引擎准备数据并通知GPU的过程称为一次Draw Call. Unity(或者说基本全部图形引擎)生成一帧画面的处理过程大致能够这样简化描写叙述: ...

  7. python的traceback模块

    import traceback try: 1/0 except Exception,e: traceback.print_exc() 输出结果是 Traceback (most recent cal ...

  8. nuxt框架学习

    1.static和assets文件夹区别 相同点:都可以存放静态文件 不同:assets下的文件 webpack会处理:static文件夹下的文件不会处理. 2.middleware middlewa ...

  9. ibatis中#和$如何当作字符使用?

      1.情景展示 在plsql中,可以正常执行 但是在ibatis的sqlMap文件中,报错信息如下: 2.原因分析 ibatis中 #.$ 是功能符号,用来取值的,当sql中出现这类字符时便会造成冲 ...

  10. python模块之importlib(py3中功能有明显加强)

    # -*- coding: utf-8 -*-#python 27#xiaodeng#python模块之importlib(py3中功能有明显加强)