昨天博客园上看到一篇《iframe异步加载技术与性能》，感觉不错，感谢该博主的分享,对前端性能感兴趣的朋友可以研究下,这里我不准备对原文进行重复,只是做个记录, 对博文中提到的Meebo工程师的印象较深, 所以自己也做了个小例子,用firebug的net面板看了下, 顺便说一下iframe用于预加载也是一个相对不错的选择,这里有篇文章大家也可以参考《用javascript预加载图片、css、js的方法研究》.下面我就贴出我的代码, 只为正好看到此文的你提供个参考,顺便让自己加深印象.
1 (function(doc) { 2 var ifr = doc.body.appendChild(doc.createElement('iframe')), 3 ifr_doc = ifr.contentWindow.document; 4 5 ifr.frameborder = '1px'; 6 ifr.height = '1px'; 7 ifr.width = '1px'; 8 ifr.style.display = 'none'; 9 10 var loadjs = '<body onload="' + 11 'var d = document;d.getElementsByTagName(\'head\')[0].appendChild(' + 12 'd.createElement(\'script\')).src' + 13 '=\'javascript/jquery-1.7.js\'">'; 14 15 ifr_doc.open(); 16 ifr_doc.write(loadjs); 17 ifr_doc.close(); 18 })(document); 19 20 $('loadBtn').addEvent('click', function() { 21 var script = document.createElement('script'); 22 script.async = true; 23 script.src = 'javascript/jquery-1.7.js'; 24 document.getElementsByTagName('head')[0].appendChild(script); 25 });
这里我用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中取出).