Google专家分享网站优化最新技术

分享了最新的前端优化技术，包括“减少对浏览器GC垃圾回收机制的依赖”和“页面预获取”等。 Colt McAnlis目前是Google公司的关注于原生客户端的开发工程师，在此之前他曾经作为一名系统和图形程序员就职于游戏行业的Blizzard、Ensemble和Petroglyph等公司。Colt讨论和解决了当前移动Web开发者们感到最棘手问题之一：JavaScript的性能。因为JavaScript解析引擎使用GC(垃圾回收机制)管理内存，所以基于Web的JavaScript应用程序可能会遭遇性能问题，尤其是在移动客户端上。McAnlis告诉Web开发者听众: “你们不应该依靠垃圾回收器。”

GC通过自动将程序不再需要的内存返回到操作系统来帮助程序员。不过用C和C++等低级别的语言编写代码来管理内存是一个艰苦的过程，并且不管怎样，这样的语言不被浏览器所原生支持。 许多JavaScript Web应用存在的问题是，JavaScript引擎会在看似随机的时间执行其垃圾回收的例行任务，这样会使得应用程序暂时变慢。例如，视频应用的帧频可能会降低，或者应用程序执行操作的时间可能会从标准的3至5毫秒跳跃到可引起人注意的20毫秒。

McAnlis引用了一个研究结论说，总体而言，若要让GC在不被用户察觉的情况下工作，系统内存至少需要六倍于现在的设备所使用的内存。而考虑到移动设备有限的内存与其运行的需要大量内存的应用程序的数量，这会是一个苛刻的要求。

闭包是一种扩大本地定义变量可用性的程序员友好型技术，其使用的增加加剧了这一问题。例如， jQuery是一种被广泛使用的依靠闭包的JavaScript库，其结果是在内存分配中造成大量的挥霍。

当提及闭包在其所消耗的内存的量方面是多么的不可预测时，McAnlis说:“闭包所引起的问题吓到我了。”他建议，为了提高性能并更好地管理内存，开发人员应该使用一种类似于中间件库 Emscripten所使用的方法，这种方法正被用于构建高性能的HTML5 Web游戏。

Emscripten把用C和C++编写的代码转换成JavaScript, 使其可以从应用程序自身内部管理内存。基于Emscripten的程序会预先从系统中分配出一块内存。程序员连同Emscripten一起决定何时不再需要内存，并把这部分未使用的内存归还到其内部的可用内存中。JavaScript引擎不对程序做任何垃圾回收工作，所以不会影响程序的性能。

McAnlis说，一般而言，利用这项技术编写的程序可比典型的JavaScript程序的运行速率高两至四倍，并免于遭受由于GC的操作而带来的偶尔性能滞后。 Steve Soulders负责Google公司的Web性能和开源组织。他是Firebug性能分析扩展工具——YSlow的创造者，也是O'ReillyWeb性能与运作会议Velocity的联合主席。他曾经在Yahoo!担任Chief Performance。Steve在另一个讲座中，提到了部分新兴浏览器技术，这些新兴技术的作用在于页面被用户请求之前的预获取。Soulders解释道，这个想法就是，浏览器应该能够在用户请求页面之前便预见到其可能想看的下一页。“你不知道用户的下一步会是什么，但是你能从他/她在刚刚请求的页面上的意图找到更多的线索”，Soulders说。然后他解释了开发利用这一知识的几种技术。 开发人员可以向一个页面的超链接添加HTML dns-pre-fetch, pre-fetch和pre-render标签。一旦一个页面被加载，此类标签可以在用户请求之前，命令浏览器去获取在这个原始页面中被链接的页面的部分内容。dns-pre-fetch标记告诉浏览器查找Web页面链接所指向的页面的域名，pre-fetch标签告诉浏览器抓取整个页面，pre-render告诉浏览器构建整个页面，就好像浏览器正在一个隐藏的选项卡上显示这个页面。当被部署时，所有这三个种标签可以缩短请求Web页面和显示那个页面的时间间隔。 Soulders警告开发者要明智地使用这些标签，因为它们会增加带宽和处理器的使用率。但在许多情况下，例如在一个登陆或者显示搜索结果的页面上，有相当高的可能性，用户将点击其于页面上发现并已经被交付的链接之一。不同的浏览器对于这些标签的支持各不相同，但大多数浏览器制造商似乎在向其即将到来的新版本添加对它们的支持。 浏览器本身也有一些加快网页交付速度的方法，如DNS预解析和TCP预连接。利用DNS预解析，通过观察用户在导航栏中开始键入的字母是什么，或者甚至通过例行获取用户最常访问的Web网站的IP地址等操作，浏览器可以预见到下一个将被访问的站点的域名。TCP预连接通过类似的手段预见用户的下一步行动。Soulders说，它通过打开端口并针对一个最终请求设置所有协议，来“预热”与站点的连接。 提起网站优化，许多前端开发者会立刻想到Yahoo的 网站优化准则，随着研究和技术的不断发展，规则也从最初的14条增长到了如今的34条，但是最核心的一些基本原则依然被网站开发者作为圣谕，包括： 减少HTTP请求 使用CDN技术 设置HTTP文件头过期和缓存控制字段 启用Gzip压缩 尽量把样式表放在页面顶部 尽量把Javascript代码放在页面底部 避免CSS表达式 将Javascript和CSS外链 减少DNS查找 避免重定向 删除重复脚本 配置Etags 缓存Ajax ……

转载于:https://my.oschina.net/txz0917/blog/1530476