将脚本加载异步属性delay onload事件？ [英] Will script loaded with async attribute delay onload event?

问题描述

我在HEAD部分有一个脚本标签的页面：

 < script src =somescript.jstype =text / javascriptasync>< / script> 
  

由于它包含 async 属性，它异步加载并且浏览器解析该页面，而不用等待该脚本被下载。一旦下载，此脚本也将异步执行，所以浏览器可以继续解析该页面。

此脚本一旦下载将执行一些操作，并通过动态插入另一个脚本类似的东西：

  var a = document.createElement（'script'）; 
 a.type ='text / javascript'; 
 a.src ='http：//domain/otherscript.js'; 
 
 var elem_body = document.getElementsByTagName（'body'）[0]; 
 elem_body.appendChild（a）; 
  

这个新的动态插入脚本也将异步执行，浏览器可以继续其他的东西，所以根据需要解析页面或执行其他脚本。

现在，我的理解是，脚本从开始到结束执行都不会以任何方式阻止浏览器。它将加载，插入另一个脚本并完全异步执行。 DOMContentLoaded 事件根本不会减慢。

Hoever，这可能会延迟触发 onload 事件？在我看来，这个脚本会在页面几乎被解析时开始。然后它会请求其他脚本，并且 onload 事件可能会延迟等待这个最后一个脚本来做它的事情。

<我的理解正确吗？

编辑

href =http://plnkr.co/edit/BCDPdgCjPeNUmLbf7wNR?p=preview =nofollow> http://plnkr.co/edit/BCDPdgCjPeNUmLbf7wNR?p=preview
和Chrome似乎延迟了onload事件

解决方案

是的，根据您的建议，它会延迟 window.onload 事件。

您的第一个脚本 somescript.js 添加一个小孩脚本元素到页面，在页面加载完成之前（例如在 window.onload 之前已经触发），并且该页面现在必须下载并执行该新的src在脚本元素之前，可以触发 onload 事件。

如果您不希望延迟 onload 事件，您可以使用 AJAX 请求获取 otherscript.js 的内容，简单地 eval 它使其在全局上下文中执行（实际上与通过脚本标记，但不会延迟 onload 事件）。

I have a page with a script tag in HEAD section:

<script src="somescript.js" type="text/javascript" async></script>

As it contains async attribute it loads asynchronously and browser parses the page without waiting for this script to be downloaded. Once downloaded, this script will execute, also asynchronously so browser can continue on parsing the page.

This script, once downloaded will perform some actions and inserts yet another script dynamically via something similar to this:

var a = document.createElement('script');
    a.type = 'text/javascript';
    a.src = 'http://domain/otherscript.js';

    var elem_body = document.getElementsByTagName('body')[0]; 
    elem_body.appendChild(a);

This new dynamically inserted script will also be executed asynchronously and again browser can continue on to other things, so parsing the page or executing other scripts as needed.

Now, my understanding is that this script, from beginning to the end of its execution will not block browser in any way. It will load, insert another script and execute completely asynchronously. DOMContentLoaded event will not be slow down at all.

Hoever, will this possibly delay firing of onload event? It seems to me that as this script would start when the page is almost parsed. Then it would request other scripts and onload event would be possibly delayed further waiting for this last script to do its thing.

Is my understanding correct?

EDIT

Added test at http://plnkr.co/edit/BCDPdgCjPeNUmLbf7wNR?p=preview and in Chrome it seems that it does delay onload event

解决方案

Yes, as you suggest, it will delay the window.onload event.

Your first script, somescript.js adds a child script element to the page, before the page has finished loading (e.g. before window.onload has fired), and the page now has to download and execute the src of that newly appended script element before it can fire an onload event.

If you didn't want it to delay the onload event, you could make an AJAX request to get the contents of otherscript.js and simply eval it so it executes in the global context (effectively the same as specifying it via a script tag, but without delaying the onload event).

这篇关于将脚本加载异步属性delay onload事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！