20种提升网页速度的技巧(7)

20种提升网页速度的技巧

载最慢的文件。压缩 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('/myfile.js');

}

注意：可以使用 defer 属性，但不是所有浏览器（包括 Firefox）都支持它。 优化 CSS 文件

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

使用内容分布网络

内容分布网络（Content-distribution network，CDN）是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。此外，大多数 CDN 都在快速服务器上运行，