Google专家分享网站优化最新技术
发布时间：2013-12-23
性能是任何一个网站成功的关键，然而，如今日益丰富的内容和大量使用 Ajax 的 Web 应用程序已迫使浏览器达到其处理能力的极限。
性能是任何一个网站成功的关键，然而，如今日益丰富的内容和大量使用 Ajax 的 Web 应用程序已迫使浏览器达到其处理能力的极限。在最近举行的O'Reilly Velocity 会议上，来自 Google 的工程专家 Colt McAnlis 和 Steve Soulders 分享了最新的前端优化技术，包括“减少对浏览器 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
……
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
……
24小时免费服务咨询热线：
立即咨询
联系我们
立即咨询
联系我们