[译]Google+提升网页性能的5个小秘密

原文地址: https://plus.google.com/115060278409766341143/posts/ViaVbBMpSVG

1.使用Closure

我们使用Closure库、模版以及编译器来渲染Google+里每一个页面的每一个节点——甚至包括掌控页面的Javascript脚本。以下几点有助于加速网页的显示:

-Closure模版可以在服务器端用Java渲染,也可以在浏览器里用JS生成。这样的话,我们需要的内容总是能立即获取到;同时,我们也可以在”后台”( 指浏览器中的异步加载 )中载入javaScript(就像“装饰”一个网页,在主干之上,不断给各节点增加事件的响应)

-同时,Closure套件为JS提供了许多新特性:强类型、更强的错误检测、“死代码”预估、跨模块的通信以及很多的优化手段。

(欲了解更多的Closure套件细节,访问 http://code.google.com/closure/ )

2.总是在最适当的时候,书写最恰当的JS代码

我们将JS代码分割程序多小的模块,并能被异步加载,从而更方便的管理Google+中的JS脚本。而用户只需要按需下载最少的JS脚本。我们依照两个规则来进行设计:

-客户端必须包含一个核心的代码,它通过历史标记(也就是记录浏览器地址栏中的地址)来判断加载需要的模块。

-如果需要的JS模块没有加载完全,我们会阻塞页面所有的操作,直到加载完毕。

3.无刷新实现页面间的跳转

一旦JS脚本载入完毕,我们将脱离服务器,在本地渲染所有的内容,因此可以达到很快的速度。我们设置了一个全局的事件监听器——它监听页面上所有的锚点的单击事件。我们尽可能将单击事件转换为页面内的跳转。然而,对于不能在客户端渲染,或是用户单击鼠标中键或者按住CTRL键的情况下,将打开一个新的页面。

在这种情况下,浏览器中的地址可以代表当前页面的状态,所以我们可以复制/分享这个地址以分享当前页面。

4.刷新输出数据块

为了让数据下载完就立刻呈现出来,我们使用刷新输出数据块的技术(flushing chunks),这样用户就不需要等待整个页面载入完成。

我们的实现方法是:
-最开始只载入最精简的数据,剩下的交由异步请求去获取。
-仅当需要的数据没有下载完全的时候才阻塞页面的渲染。

这个系统也可以让我们更快的加载CSS,JS,图像等等资源,并让这个网站显得更快且响应更加及时。

5.使用IFRAME

突破浏览器并行加载JS脚本的限制(参见 http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/),[一般浏览器在一个页面中最多会并行加载3个JS脚本或是其他资源文件]——我们在页面的BODY的最前面加上一个IFRAME。其间的具体实现比较复杂,但是幸好我们还有Closure套件,实现此类功能非常方便。总而言之,相较网页速度的提升,这些努力都是值得的。

同时,你可能发现了我们通过XHR而非<style>标签来加载CSS样式表——这个设定并非为了优化,只是为了突破IE浏览器中一个样式表内选择器个数的限制。

最后的话

略。。。。

填写留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

无觅相关文章插件,快速提升流量