iframe預加載小記昨天博客園上看到一篇
《iframe異步加載技術與性能》，感覺不錯，感謝該博主的分享,對前端性能感興趣的朋友可以研究下,這里我不準備對原文進行重復,只是做個記錄, 對博文中提到的Meebo工程師的印象較深, 所以自己也做了個小例子,用firebug的net面板看了下, 順便說一下iframe用于預加載也是一個相對不錯的選擇,這里有篇文章大家也可以參考
《用javascript預加載圖片、css、js的方法研究》.下面我就貼出我的代碼, 只為正好看到此文的你提供個參考,順便讓自己加深印象.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(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前端性能優化
