iframe预加载小记

昨天博客园上看到一篇《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中取出).

分类: javascript, Web前端性能优化

标签: javascript, web前端性能优化

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。