昨天博客園上看到一篇《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中取出).