iframe預(yù)加載小記

CevenCheng 2012-05-24

展開全文

iframe預(yù)加載小記

昨天博客園上看到一篇《iframe異步加載技術(shù)與性能》，感覺不錯(cuò)，感謝該博主的分享,對(duì)前端性能感興趣的朋友可以研究下,這里我不準(zhǔn)備對(duì)原文進(jìn)行重復(fù),只是做個(gè)記錄, 對(duì)博文中提到的Meebo工程師的印象較深, 所以自己也做了個(gè)小例子,用firebug的net面板看了下, 順便說一下iframe用于預(yù)加載也是一個(gè)相對(duì)不錯(cuò)的選擇,這里有篇文章大家也可以參考《用javascript預(yù)加載圖片、css、js的方法研究》.下面我就貼出我的代碼, 只為正好看到此文的你提供個(gè)參考,順便讓自己加深印象.

(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工程師提到的技術(shù),預(yù)先加載了jquery-1.7.js, 由于創(chuàng)建的iframe內(nèi)容一開始是空的, 后來通過給iframe的body內(nèi)聯(lián)屬性onload設(shè)置了一段腳本, 腳本的作用就是動(dòng)態(tài)加載jquery-1.7.js, iframe被加入原頁面body后, 其load事件會(huì)立即觸發(fā), 這樣iframe自身對(duì)原頁面的加載性能(比如說會(huì)推遲原頁面load事件的時(shí)間點(diǎn))影響較小, 之后我們?nèi)绻儆?loadbtn去加載jquery-1.7.js,花的時(shí)間很短只有10ms左右(從cache中取出).

分類: javascript, Web前端性能優(yōu)化

標(biāo)簽: javascript, web前端性能優(yōu)化

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： CevenCheng > 《Web前端》

舉報(bào)/認(rèn)領(lǐng)