js 非阻塞加载

最新推荐文章于 2024-06-19 15:43:36 发布

weixin_30372371

最新推荐文章于 2024-06-19 15:43:36 发布

阅读量130

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/freeDesignLife/p/3396009.html

版权

Non-onload-blocking async JS

June 28th, 2012. Tagged: JavaScript, performance

Update Oct 2013: for a more bulletproof version, tested in the wild, IE and all, check Philip's snippet at http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/

Asynchronous JS is cool but it still blocks window.onload event (except in IE before 10). That's rarely a problem, because window.onload is increasingly less important, but still...

At my Velocity conference talk today Philip "Log Normal" Tellis asked if there was a way to load async JS without blocking onload. I said I don't know, which in retrospect was duh! because I spoke about Meebo's non-onload-blocking frames (without providing details) earlier in the talk.

Stage fright I guess.

Minutes later in a moment of clarity I figured Meebo's way should help. Unfortunately all Meebo docs are gone from their site, but we still have their Velocity talk from earlier years (PPT). There are missing pieces there but I was able to reconstruct a snippet that should load a JavaScript asynchronously without blocking onload.

Here it goes:

(function(url){variframe = document.createElement('iframe');
  (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";
  varwhere = document.getElementsByTagName('script');
  where = where[where.length - 1];
  where.parentNode.insertBefore(iframe, where);
  vardoc = iframe.contentWindow.document;
  doc.open().write('<body οnlοad="'+
    'var js = document.createElement(\'script\');'+
    'js.src = \''+ url +'\';'+
    'document.body.appendChild(js);">');
  doc.close();
})('http://www.jspatterns.com/files/meebo/asyncjs1.php');

The demo page is right here. It loads a script (asyncjs1.php) that is intentionally delayed for 5 seconds.

Features

loads a javascript file asynchronously
doesn't block window.onload nor DOMContentLoaded
works in Safari, Chrome, Firefox, IE6789 *
works even when the script is hosted on a different domain (third party, CDN, etc), so no x-domain issues.
no loading indicators, the page looks done and whenever the script arrives, it arrives and does its thing silently in the background. Good boy!

* The script works fine in Opera too, but blocks onload. Opera is weird here. Even regular async scripts block DOMContentLoaded which is a shame.

Drawback

The script (asyncjs1.php) runs is in an iframe, so all document and window references point to the iframe, not the host page.

There's an easy solution for that without changing the whole script. Just wrap it in an immediate function and pass the document object the script expects:

(function(document){document.getElementById('r')... // all fine})(parent.document);

How does it work

create an iframe without setting src to a new URL. This fires onload of the iframe immediately and the whole thing is completely out of the way
style the iframe to make it invisible
get the last script tag so far, which is the snippet itself. This is in order to glue the iframe to the snippet that includes it.
insert the iframe into the page
get a handle to the document object of the iframe
write some HTML into that iframe document
this HTML includes the desired script

转载于:https://www.cnblogs.com/freeDesignLife/p/3396009.html

weixin_30372371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 非阻塞加载

Non-onload-blocking async JSJune 28th, 2012. Tagged: JavaScript, performanceUpdate Oct 2013: for a more bulletproof version, tested in the wild, IE and all, check Philip's snippet at http://www.lo...
复制链接

扫一扫