资讯频道 → 互联网
阅读更多

24顶
2踩

互联网

转载新闻 Google提出Web性能优化新方法——Diffable

2010-08-13 10:19 by 副主编 just_cool 评论(11) 有9138人浏览
Web Google velocity

 

Google Maps的开发人员Josh和James最近提出并实现了一种Web性能优化新方法——Diffable，即在浏览器加载Web页面时，促使其比较相关文件（Html、JavaScript等）在服务器端和客户端缓存区的版本并只下载差量（Deltas），降低网络下载造成的延迟。本文简要介绍了Diffable方法的背景、原理、优势和实现情况。

 

　　背景

　　众所周知，Google Maps是一款“重量级”的富互联网应用，主要JavaScript文件大小接近300K，而一个平常的补丁更新只有不到20K，这意味着如果用户的浏览 器已经缓存了旧版本的JavaScript文件，那么在通常情况下，用户不得不下载多余的280K（内容没有变化），页面加载速度就会受此影响。为了解决 类似问题，Google Maps的工程师提出了Diffable方法。

　　原理

　　Diffable方法需要在服务器端和客户端同时实施，如图1所示。

  • 服务器组件记录网页相关文件版本更新的差量，以便在客户端需要时向其发送补丁以更新过时的缓存文件。
  • 客户端组件（采用JavaScript编写）检测是否缓存了过时文件并在必要时请求新版本的差量补丁，与缓存的文件合并完成更新。

图1. Diffable方法原理图（来源：Velocity 2010年会演讲资料）

　　性能优势

　　对于Google Maps来说，Diffable方法节省了1200毫秒（减少页面加载时间的25%），请注意这种方法只对已经缓存旧版页面文件的Google Maps用户有效，此类用户约占全部用户的20%-25%，参见图2所示：

 


 

图2. Diffable方法在Google Maps应用的性能对比（来源：Velocity 2010年会演讲资料）

 

　　实现

　　Diffable方法是一种Web性能优化思想，目前Google的开发人员已经针对J2EE应用完成了相应的开源实现，采用Apache License 2.0授权，具体细节可以参考以下文档：

　　感兴趣的朋友可以登陆Diffable开源项目官方网站了解更多详情。

 

  • 大小: 14.8 KB
  • 大小: 74 KB
来自: infoq
24
顶
2
踩
评论 共 11 条 请登录后发表评论
11 楼 rimoer 2012-11-01 11:33
想法很不错，真的。
10 楼 rubynroll 2010-08-16 05:34
ray_linn 写道
小打小闹的东西，script占据的不到页面内容的2%，像google map这种东西，首先还是本地缓存效率太低，flash client或者sliverlight client远比javascript操作顺畅。


同意这个观点，仅仅对script实施diffable意义有限。但要是能对页面中的所有内容进行diffable，效果将完全不一样。

我做过一个定制的系统(Web middle ware + customized browser)，通过对资源进行CRC标注，大幅度减少HTTP请求，要是能再加上diffable，效果将更好。
9 楼 ray_linn 2010-08-15 08:54
小打小闹的东西，script占据的不到页面内容的2%，像google map这种东西，首先还是本地缓存效率太低，flash client或者sliverlight client远比javascript操作顺畅。
8 楼 treblesoftware 2010-08-15 07:16
nhyjq 写道
treblesoftware 写道
方法一提出，就要想办法变为标准，一旦标准是自己的，接下来就可以垄断。


有本事的话自己也可以搞个方法出来垄断一下啊。

不要以人家财宏势大为借口，有钱如盖茨大叔也垄断不了服务器的操作系统，渺小如芬兰某学生也能搞个垄断大半服务器的操作系统核心。


现在做技术垄断靠技术？

7 楼 fcrong 2010-08-14 21:13
对google这样的公司, gmail这样的应用有用
对其他的..... 没看出有多少价值
6 楼 ghyghoo8 2010-08-14 18:23
很好。。跟游戏补丁更新一样
5 楼 nhyjq 2010-08-14 18:12
treblesoftware 写道
方法一提出，就要想办法变为标准，一旦标准是自己的，接下来就可以垄断。


有本事的话自己也可以搞个方法出来垄断一下啊。

不要以人家财宏势大为借口，有钱如盖茨大叔也垄断不了服务器的操作系统，渺小如芬兰某学生也能搞个垄断大半服务器的操作系统核心。
4 楼 treblesoftware 2010-08-14 10:09
方法一提出，就要想办法变为标准，一旦标准是自己的，接下来就可以垄断。
3 楼 calvinlyc 2010-08-14 08:44
很好的idea，支持下
2 楼 unika_ly12 2010-08-14 08:30
恩，很棒的东西，可以尝试尝试
1 楼 mysoko 2010-08-13 15:51
不错  

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • ajax获取file文件夹绝对路径,JS获取input file绝对路径的方法(推荐)

    最近因需要上传文件到oracle blob里， 在获取文件路径的遇到些问题，由于安全原因，新版的浏览器都不支持直接获取本地URL，在网上找了些方法，如下：//FX获取文件路径方法function readFileFirefox(fileBrowser) {...

  • php获取input file路径,JavaScript_JS获取input file绝对路径的方法(推荐)，最近因需要上传文件到oracle blo - phpStudy...

    JS获取input file绝对路径的方法(推荐)最近因需要上传文件到oracle blob里， 在获取文件路径的遇到些问题，由于安全原因，新版的浏览器都不支持直接获取本地URL，在网上找了些方法，如下：//FX获取文件路径方法...

  • 项目在服务器的绝对路径,java获得项目绝对路径

    在jsp里，根目录是WebRoot 在class文件中，根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getProperty("user.dir")获取你工程的绝对路径。1.jsp中取得路径：以工程名为TEST为例：(1)得到包含工程名的当前...

  • JS获取input file绝对路径问题

    最近因需要上传文件到oracle blob里， 在获取文件路径的遇到些问题，由于安全原因，新版的浏览器都不支持直接获取本地URL，在网上找了些方法，如下： //FX获取文件路径方法 function readFileFirefox(file...

  • html js 获取站点路径,js获取file的文件路径

    js中获取file控件的文件名不要路径实例。。js中获取file控件的文件名不要路径实例。。不要文件路径就要文件名。文RunJSvar ck=function(inp){alert(inp.value.replace(/.*\\([^\\]+)$/,"$1"));};怎么用js来获取 file...

  • php如何获取文件的绝对路径,php如何获取表单上传文件的绝对路径

    获取的是 1.jpg如何获取包含绝对路径的地址，如：D:\php\Essamp\wwwroot\huaxia\Img\1.jpg回复讨论(解决方案)当file改变(onchange时间记录)时候将src给隐藏域赋值，服务端获取该隐藏域就行了获得这个路径有意义吗？...

  • ie9下获取上传文件的绝对路径

    var fileName = $('#file').val(); var obj=document.getElementById("file");  if (obj) {  if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  obj.select();  document.getElementById(

  • java 获取tomcat的相对路径_tomcat获取相对路径和绝对路径总结

    绝对路径的要领 4.1单独的Java类中取得绝对路径 根据java.io.File的Doc文挡，可知: 默认情况下new File("/")代表的目录为：System.getProperty("user.dir")。 一下程序取得执行类的当前路径 Java代码 packageorg....

  • 关于使用file上传图片获取图片绝对路径

    input file 上传图片获取图片的绝对路径

  • html中js获取图片路径怎么写,JS获取本地文件绝对路径-预览本地图片

    通过file input框显示本地文件的绝对路径，在网上找了很久，一直只有IE和Firefox的实现，没有谷歌。这里有个解决方案，可以显示本地图片，但是读不到绝对路径。3function getFullPath(obj) {if (obj) {//Internet ...

  • 获得虚拟服务器相对路径,在web应用中获取相对路径和绝对路径

    1.jsp中取得路径：以工程名为TEST为例：(1)得到包含工程名的当前页面全路径：request.getRequestURI()结果：/TEST/test.jsp(2)得到工程名：request.getContextPath()结果：/TEST(3)得到当前页面所在目录下全名称：...

  • java获取图片相对路径_相对路径和绝对路径的区别,java获取项目访问路径的方法...

    例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使...

  • ie浏览器jsp页面选择文件上传获取不到绝对路径问题

    ie浏览器jsp页面选择文件上传获取不到绝对路径问题 问题描述： 选择"C:\Users\73543\Desktop\test.txt"文件，显示的却是"C:\fakepath\test.txt" 原因分析： ie浏览器安全设置的问题 解决步骤： 打开ie浏览器–>...

  • 关于input type=file 获取文件的路径问题

    可以获取文件的绝对路径，在不同浏览器下，显示存在兼容问题。 在IE下可以获取绝对路径，在火狐浏览器下获取的是文件的名称。 在ie8以下的执行结果： 在火狐浏览器下的执行结果：

  • Linux 驱动根据struct file获取全路径和文件名

    vfs层获取文件全路径

  • 计算机发展与计算机应用概述.pdf

    计算机发展与计算机应用概述.pdf

  • 计算机二级公共基础知识全集合.pdf

    计算机二级公共基础知识全集合.pdf

  • 计算机机试答案.pdf

    计算机机试答案.pdf

  • 基于STM32F103的750W全桥逆变器并离网设计方案及其实现

    内容概要：本文详细介绍了基于STM32F103RCT6的750W全桥逆变器设计方案，涵盖硬件电路设计、软件编程以及保护机制等方面。硬件部分包括主控芯片的选择、PWM配置、Boost升压电路、PCB布局优化等；软件部分涉及并离网切换的状态机设计、过流保护、风扇控制算法、并机功能实现等。文中还分享了许多实战经验和调试技巧，如死区时间配置、电流采样方法、并网同步算法等。 适合人群：具有一定电子电路和嵌入式开发基础的技术人员，尤其是从事逆变器及相关电力电子产品开发的工程师。 使用场景及目标：适用于希望深入了解逆变器工作原理和技术实现的开发者，特别是那些需要掌握并离网切换、高效电源管理及可靠保护机制的人群。目标是帮助读者构建一个稳定可靠的逆变器系统，能够应对各种复杂的工作环境。 其他说明：本文不仅提供了详细的理论讲解，还有丰富的代码片段和实践经验分享，有助于读者更好地理解和应用相关技术。

  • 基于Simulink的单相全桥逆变器仿真与优化：MATLAB环境下的详细实现

    内容概要：本文详细介绍了如何利用Simulink在MATLAB环境中搭建单相全桥逆变器的仿真模型。首先，通过构建H桥结构，连接直流电源和RL负载，并引入PWM控制器进行开关管的控制。接着，针对仿真过程中遇到的各种问题，如谐波失真、开关管直通等问题，提出了具体的解决方案，包括加入LC滤波器、设置死区时间和优化PWM参数等。此外，还探讨了通过MATLAB脚本自动化测试不同参数组合的方法，以及如何提高电压利用率和降低谐波失真。最终，通过对仿真结果的分析，验证了所提方法的有效性和优越性。 适合人群：电力电子工程师、科研人员、高校学生等对逆变器仿真感兴趣的群体。 使用场景及目标：适用于研究和开发高效、稳定的逆变器系统，旨在通过仿真手段减少实验成本，优化设计方案，提高系统的性能指标。 其他说明：文中提供了详细的建模步骤和技术细节，帮助读者更好地理解和掌握相关技术和方法。同时，强调了仿真参数的选择和优化对于获得理想仿真结果的重要性。

Global site tag (gtag.js) - Google Analytics