Google工程专家谈前端优化经验

前端性能对任何一个网站都是值得关注的关键问题，但如今日益丰富的内容和大量使用Ajax的Web应用程序已迫使浏览器达到其处理能力的极限。Google的工程专家Colt McAnlis和Steve Soulders在一次会议上分享了他们的前端优化经验，包括“减少对浏览器GC垃圾回收机制的依赖”和“页面预获取”等。

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

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

Steve Soulders负责Google公司的Web性能和开源组织。他是Firebug性能分析扩展工具——YSlow的创造者，也是O'ReillyWeb性能与运作会议Velocity的联合主席。他曾经在Yahoo!担任Chief Performance。

Steve在另一个讲座中，提到了部分新兴浏览器技术，这些新兴技术的作用在于页面被用户请求之前的预获取。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条增长到了如今的35条，但是最核心的一些基本原则依然被网站开发者作为圣谕，包括：

• 减少HTTP请求

• 使用CDN技术

• 设置HTTP文件头过期和缓存控制字段

• 启用Gzip压缩

• 尽量把样式表放在页面顶部

• 尽量把Javascript代码放在页面底部

• 避免CSS表达式

• 将Javascript和CSS外链

• 减少DNS查找

• 避免重定向

• 删除重复脚本

• 配置Etags

• 缓存Ajax

本文来源于：Google工程专家谈前端优化经验-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。