iframe预加载小记

CevenCheng 2012-05-24

展开全文

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前端性能优化