昨天博客园上看到一篇《iframe异步加载技术与性能》，感觉不错，感谢该博主的分享,对前端性能感兴趣的朋友可以研究下,这里我不准备对原文进行重复,只是做个记录, 对博文中提到的Meebo工程师的印象较深, 所以自己也做了个小例子,用firebug的net面板看了下, 顺便说一下iframe用于预加载也是一个相对不错的选择,这里有篇文章大家也可以参考《用javascript预加载图片、css、js的方法研究》.下面我就贴出我的代码, 只为正好看到此文的你提供个参考,顺便让自己加深印象.
(function(doc) {
var ifr = doc.body.appendChild(doc.createElement('iframe')),
ifr_doc = ifr.contentWindow.document;
ifr.frameborder = '1px';
ifr.height = '1px';
ifr.width = '1px';
ifr.style.display = 'none';
var loadjs = '<body onload="' +
'var d = document;d.getElementsByTagName(\'head\')[0].appendChild(' +
'd.createElement(\'script\')).src' +
'=\'javascript/jquery-1.7.js\'">';
ifr_doc.open();
ifr_doc.write(loadjs);
ifr_doc.close();
})(document);
$('loadBtn').addEvent('click', function() {
var script = document.createElement('script');
script.async = true;
script.src = 'javascript/jquery-1.7.js';
document.getElementsByTagName('head')[0].appendChild(script);
});
这里我用Meebo工程师提到的技术,预先加载了jquery-1.7.js, 由于创建的iframe内容一开始是空的, 后来通过给iframe的body内联属性onload设置了一段脚本, 脚本的作用就是动态加载jquery-1.7.js, iframe被加入原页面body后, 其load事件会立即触发, 这样iframe自身对原页面的加载性能(比如说会推迟原页面load事件的时间点)影响较小, 之后我们如果再用#loadbtn去加载jquery-1.7.js,花的时间很短只有10ms左右(从cache中取出).