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

　　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 多个技巧，您的页面的加载速度也会更快，您的用户也会更惬意 —— 无论他们通过拨号还是专用的宽带上网。

<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>

　　使用 Firebug 扩展跟踪加载缓慢的文件，我敢打赌您的 JavaScript 文件是下载最慢的文件。压缩 JavaScript 文件会有所帮助，但是仅仅这样可能还不够。您可以使用以下代码片段延迟 JavaScript 的加载：

var　delay　=　5;
setTimeout("heavy();",　delay　*　1000);

　　这段代码将对 heavy()

　　方法的调用延迟了 5 秒。您可以将这段代码与下面的技巧结合使用来延迟整个 JavaScript 文件的加载。

　　按需加载 JavaScript 文件

　　要按需加载 JavaScript，使用 import() 函数，如 清单 3 所示。

　　清单 3. import() 函数




function　$import(src){
　var　scriptElem　=　document.createElement('script');
　scriptElem.setAttribute('src',src);
　scriptElem.setAttribute('type','text/javascript');
　document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

//　import　with　a　random　query　parameter　to　avoid　caching
function　$importNoCache(src){
　var　ms　=　new　Date().getTime().toString();
　var　seed　=　"?"　+　ms;　
　$import(src　+　seed);
}

　　验证函数加载

　　也可以验证一个函数是否被加载，如果没有，加载 JavaScript 文件。为此，使用 清单 4 中的代码。

　　清单 4. 验证函数是否被加载




if　(myfunction){
　//　The　function　has　been　loaded
}
else{　//　Function　has　not　been　loaded　yet,　so　load　the　javascript.
　$import('http://www.yourfastsite.com/myfile.js');
}

　　一些优化网页的技巧

　　可以使用许多方法来优化您的网页，包括压缩 JavaScript 文件，使用超文本传输协议（Hypertext Transfer Protocol，HTTP）压缩，以及设置图像大小。

　　压缩和缩小 JavaScript 文件

　　JavaScript 文件可能非常大，这意味着在某些情形中，它们的下载时间可能比所有其他组件下载时间之和还长。解决此问题的一种方法是压缩 JavaScript 文件。您可以使用 GNU zip (gzip) 来完成此任务，因为许多浏览器都支持这种压缩算法。

　　另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor（参见 参考资料）。

　　使用 HTTP 压缩，并始终使用小写的 div 和类名

　　可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩（.htaccess 文件），或者可以将其包含到页面中（对于 PHP，可以使用一个 HTTP_ACCEPT_ENCODING

　　选项）。但是请注意：不是所有浏览器都支持压缩。即使是支持压缩的浏览器，压缩和解压缩都会加重处理器的负载。要在 Apache 中启用地毯式（blanket）压缩（即压缩所有文本和 HTML），使用以下命令：

AddOutputFilterByType　DEFLATE　text/html　text/plain　text/xml

　　另外，考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩，因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。

　　另一种减少压缩工作的技巧是使用小写形式的 <div>

　　元素和类名。由于大小写敏感性，并且使用的是无损压缩，<header>