js同步阻塞_非阻塞非同步JS-CSDN博客

js同步阻塞

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/

2013年10月更新：要获得在野外，IE和所有环境中经过测试的更防弹的版本，请访问http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern检查Philip的代码段/

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...

异步JS很酷，但是它仍然阻止window.onload事件(IE 10之前的版本除外)。这很少出现问题，因为window.onload重要性越来越小，但仍然...

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.

在今天的Velocity会议演讲上，Philip“ Log Normal ” Tellis询问是否有一种加载异步JS而不阻止onload 。我说我不知道，回想起来是哪！因为我在演讲开始时谈到了Meebo的非阻塞框架(未提供详细信息)。

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.

几分钟后，我想了一下Meebo的方法应该会有所帮助。不幸的是，所有Meebo文档都已从他们的站点中删除，但是我们仍然有他们早些时候的Velocity演讲( PPT )。那里缺少一些片段，但是我能够重建一个片段，该片段应异步加载JavaScript而不阻止onload。

Here it goes:

它去了：

(function(url){
  var iframe = document.createElement('iframe');
  (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";
  var where = document.getElementsByTagName('script');
  where = where[where.length - 1];
  where.parentNode.insertBefore(iframe, where);
  var doc = iframe.contentWindow.document;
  doc.open().write('<body onload="'+
    '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.

演示页面就在这里。它加载一个脚本( asyncjs1.php )，该脚本被故意延迟了5秒钟。

特征 (Features)

loads a javascript file asynchronously
异步加载JavaScript文件
doesn't block window.onload nor DOMContentLoaded
不阻止window.onload或DOMContentLoaded
works in Safari, Chrome, Firefox, IE6789 *
适用于Safari，Chrome，Firefox，IE6789 *
works even when the script is hosted on a different domain (third party, CDN, etc), so no x-domain issues.
即使脚本托管在其他域(第三方，CDN等)上，该脚本也可以工作，因此没有x域问题。
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.

*该脚本在Opera中也能正常工作，但是会阻止onload 。歌剧在这里很奇怪。甚至常规的异步脚本也会阻止DOMContentLoaded ，这很可惜。

退税 (Drawback)

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

脚本(asyncjs1.php)运行在iframe中，因此所有document和window引用均指向iframe，而不是宿主页面。

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:

有一个简单的解决方案，无需更改整个脚本。只需将其包装在一个立即函数中，然后传递脚本期望的document对象：

(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
创建iframe而不将src设置为新的网址。这会立即触发iframe的onload ，整个过程完全无法进行
style the iframe to make it invisible
设置iframe的样式以使其不可见
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.
获取到目前为止的最后一个script标记，即代码片段本身。这是为了将iframe粘贴到包含它的代码段。
insert the iframe into the page
将iframe插入页面
get a handle to the document object of the iframe
获取iframe document对象的句柄
write some HTML into that iframe document
将一些HTML写入该iframe文档
this HTML includes the desired script
该HTML包含所需的脚本