预加载CSS或JavaScript的JS代码

预加载CSS或JavaScript的两种常见方式

预加载资源通常采用两种主流方式：XMLHttpRequest（XHR）或动态插入DOM节点。其中，动态插入节点是最简单且应用广泛的异步加载手段（例如YUI Get模块）。然而，通过动态插入节点加载的资源会在加载完成后立即执行。JavaScript的执行不仅会占用浏览器的JS引擎进程，还可能改变页面结构；而CSS的执行则可能导致整个页面样式发生突变。相比之下，XHR方式虽然不会自动执行脚本，但受限于同源策略，且现代网站的静态资源多部署在CDN上，这使得预加载CSS和JS文件变得较为复杂。

Stoyan Stefanov 发表文章简明地阐述了一种加载文件但阻止其执行的方法。原文地址为 http://www.phpied.com/preload-cssjavascript-without-execution/

基于IE与其他浏览器的预加载实现方案

具体实现方案是：在IE浏览器中使用 new Image().src 属性来预加载文件，而在其他浏览器中则通过动态插入 <object> 标签来完成加载过程。

部分代码如下

 
window.onload = function () {
var i = 0,
max = 0,
o = null,
// list of stuff to preload
preload = [
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
], 
isIE = navigator.appName.indexOf('Microsoft') === 0;
for (i = 0, max = preload.length; i < max; i += 1) {
if (isIE) {
new Image().src = preload[i];
continue;
} 
o = document.createElement('object');
o.data = preload[i];
// IE stuff, otherwise 0x0 is OK
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden";
//o.type = "text/plain"; // IE
o.width = 0;
o.height = 0;
// only FF appends to the head
// all others require body
document.body.appendChild(o);
} 
}; 

demo 可见 http://phpied.com/files/object-prefetch/page1.php?id=1

关键技术细节与注意事项

几点说明：

1. new Image().src 之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存。

2. 动态插入的 object 标签需要插入到非 head部分，以触发加载。

3. ie7 ie8 也可以通过一些代码使用动态object加载文件（代码注释中有提到）。但是作者发现object 通常会消耗很大， so...

通过自身的实验发现相当不错的，有需求的同学不妨一试。