您的位置:知识库 » .NET技术

20 种提升网页速度的技巧

作者: Marco Kotrotsos  来源: developerWorks 中国  发布时间: 2009-04-17 14:08  阅读: 4309 次  推荐: 0   原文链接   [收藏]  
摘要:您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%。
[1] 基本工具
[2] 常识:牢记设计规则
[3] 检查 cookie 使用情况
[4] 尽可能延迟脚本加载
[5] 使用 PNG 格式的图像
[6] 使用 YSlow 分析网页

尽可能延迟脚本加载

  我 在前面 提到过,移除完全不需要的 JavaScript 代码能够加快加载和处理速度。但是如果代码已经非常精简并且必须在页面中包含 JavaScript 代码的话,该怎么办?
在这种情形下,一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段 JavaScript 代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部,(在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。

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

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

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

按需加载 JavaScript 文件

  要按需加载 JavaScript,使用 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');
}

 注意:可以使用 defer 属性,但不是所有浏览器(包括 Firefox)都支持它。

优化 CSS 文件

  如果经过适当优化和维护,CSS 文件不一定很大。例如,具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样,您需要优化 CSS 文件,使其包含所需的所有内容,同时保持合理的大小。另外,使用外部文件代替内联定义来适应浏览器的缓存机制。

使用内容分布网络

  内容分布网络(Content-distribution network,CDN)是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时,用户能够从离他们最近的服务器下载这些图像。此外,大多数 CDN 都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。

对资产使用多个域来增加连接

  CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。因此,到其他资产的连接被延迟了。然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。

在合适的时候使用 Google Gears

  使用 Google Gears(参见 参考资料)是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序,但是也允许将页面元素持久化到用户的计算机上。因此,频繁加载但未进行更新的内容可以存储在 Gears 数据库中,该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库(而不是服务器)直接加载。

  安装 Gears 之后,获取 gears_init.js 文件,以便轻松访问 Gears 工厂和应用程序编程接口(API),将其保存为 gears_init.js,通过以下方式在您的代码中引用它:
<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>";
}
</scri

  如果未安装 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>

  这段代码在您的计算机或服务器上创建一个本地数据库 db。如果表 Test 不存在,则创建一个,然后插入测试数据(Monkey! 和时间)。代码从数据库获取数据,并在浏览器中以警告的形式呈现出来。

  想像一下可能发生的结果!

0
0
标签:Firebuy YSlow

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻