I saw an article "iframe asynchronous loading technology and performance" in my blog yesterday. I feel good. Thanks to this blog, if you are interested in front-end performance, you can study it, I am not going to repeat the original article here. I just made a record and have a deep impression on the Meebo engineers mentioned in the blog, so I also made a small example, I checked it with the net panel of firebug. By the way, IFRAME is also a relatively good option for pre-loading, here is an article about . You can also refer to "Study on Methods of preloading images, CSS, and JS with JavaScript". next I will post my Code , which only provides a reference for you to see this article, and by the way, I will be impressed.
(function (DOC) {var IFR = Doc. body. appendchild (Doc. createelement ('iframe'), ifr_doc = ifr.content+doc ument; IFR. frameborder = '1px '; IFR. height = '1px '; IFR. width = '1px '; IFR. style. display = 'none'; var loadjs = ''; 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) ;});
here I used the technology mentioned by the Meebo engineer to pre-load the jquery-1.7.js since the created IFRAME content was empty at the beginning, later, by setting a script for the onload inline attribute of the IFRAME body, the role of the script is to dynamically load the jquery-1.7.js, IFRAME is added to the original page body, the load event will be immediately triggered, in this way, IFRAME has a small impact on the loading performance of the original page (for example, it will delay the time point of the original page load event). If we use # loadbtn to load the jquery-1.7.js, the time spent is about 10 ms (retrieved from the cache ).