20 种提升网页速度的技巧 [复制链接]

<script　type="text/javascript"　src="gears_init.js"></script>

　　要确定是否已安装 Gears，使用 清单 5 中的代码。

　　清单 5. 确定是否已安装 Gears




<script>
　if　(!window.google　||　!google.gears)　{
　　location.href　=　"http://gears.google.com/?action=install&message=<welcome　message>"　
　　　　+　"&return=<return　url>";
　}
</script>

　　如果未安装 Gears，代码将向您提供下载 Gears 的 URL。

　　当所有元素都通过验证并且 Gears 已安装之后，您可以测试 Gears 的极其有用的数据库功能，使用 清单 6 中的 JavaScript 代码。

　　清单 6. 测试数据库功能




<script　type="text/javascript">
　var　db　=　google.gears.factory.create('beta.db');
　db.open('database-test');
　db.execute('create　table　if　not　exists　Test'　+
　　　　　　'　(Phrase　text,　Timestamp　int)');
　db.execute('insert　into　Test　values　(?,　?)',　['Monkey!',　new　Date().getTime()]);
　var　rs　=　db.execute('select　*　from　Test　order　by　Timestamp　desc');

　while　(rs.isValidRow())　{
　alert(rs.field(0)　+　'@'　+　rs.field(1));
　rs.next();
　}
　rs.close();
</script>

　　YSlow 扩展

　　YSlow Firebug 扩展使主观的网页分析日渐被淘汰。YSlow 使用 Yahoo! 起草的面向高性能网站的权威规则，分析网页并告诉您它们变慢的原因。

　　使用 YSlow 分析网页

　　YSlow 是一个相对较小但非常有用的 Firefox 扩展。当启动 YSlow 时，该扩展在浏览器的下半部分中打开，如 图 4 所示。

　　图 4. Firefox 中的 YSlow 扩展

　　图 4 显示了 Performance 视图，可以在其中看到 YSlow 如何评估您的网页的性能，还能够看到该扩展检测到的问题。单击列表中的一个链接将打开一个页面，其中解释了相应的错误。如果存在可以改进的页面组件，YSlow 会给出改进建议。

　　在 Inspect 视图中，如 图 5 所示，您可以逐一分析元素来剖析页面。Inspect 视图的一个最有用的功能是，当您在页面上移动鼠标指针时，它会自动刷新，因此您无需通过滚动代码内容来查找需要检查的行。

　　图 5. Firefox 中的 YSlow Inspect 视图

　　从 Stats 视图的名称可以猜测到，它（如 图 6 所示）显示与当前页面有关的统计数据。这些数据包括空的和主要的缓存和 cookie。

　　图 6. Firefox 中的 YSlow Stats 视图

　　Components 视图（如 图 7 所示）列出了当前页面上的组件。显示的与每个组件有关的数据包括文件类型和路径、页面过期时间以及 HTTP 响应报头。单击一个组件可以将其打开，以供查看。单击一个列标题可以按升序或降序对表进行排序。

　　图 7. YSlow Components 视图

　　YSlow 是一个较小的、有用的扩展，可以在提高页面加载速度方面为您提供许多帮助。如果您以前未使用过它，那么现在应该使用了。

　　结束语

　　优化网页的加载速度并不复杂。实际上，您通常可以轻而易举地实现速度优化。如果遵循本文中介绍的技巧以及 Web 开发最佳实践，那么无需采用其他措施就可以提高页面的加载速度。

　　将大量页面优化技巧收集到一起很简单，我希望本文的资源具有一定的价值。但是，如果您认为速度优化技巧只有这里列出的这些，那么您将惊奇地发现远远不止这些。但是，即使您仅遵循这 20 多个技巧，您的页面的加载速度也会更快，您的用户也会更惬意 —— 无论他们通过拨号还是专用的宽带上网。