iframe預(yù)加載小記

CevenCheng 2012-05-24

展開全文

iframe預(yù)加載小記

昨天博客園上看到一篇《iframe異步加載技術(shù)與性能》，感覺不錯，感謝該博主的分享,對前端性能感興趣的朋友可以研究下,這里我不準備對原文進行重復(fù),只是做個記錄, 對博文中提到的Meebo工程師的印象較深, 所以自己也做了個小例子,用firebug的net面板看了下, 順便說一下iframe用于預(yù)加載也是一個相對不錯的選擇,這里有篇文章大家也可以參考《用javascript預(yù)加載圖片、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工程師提到的技術(shù),預(yù)先加載了jquery-1.7.js, 由于創(chuàng)建的iframe內(nèi)容一開始是空的, 后來通過給iframe的body內(nèi)聯(lián)屬性onload設(shè)置了一段腳本, 腳本的作用就是動態(tài)加載jquery-1.7.js, iframe被加入原頁面body后, 其load事件會立即觸發(fā), 這樣iframe自身對原頁面的加載性能(比如說會推遲原頁面load事件的時間點)影響較小, 之后我們?nèi)绻儆?loadbtn去加載jquery-1.7.js,花的時間很短只有10ms左右(從cache中取出).

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