JavaScript的异步加载和执行顺序 [英] Javascript async loading and order of execution

问题描述

我要寻找的浏览器如何根据执行异步风格脚本的页面的其余部分的更多信息。

我有下面的异步加载模式，像这样一个JS脚本：

 变种S =使用document.createElement（'脚本'）;
s.type =文/ JavaScript的';
s.async = TRUE;
s.src ='http://yourdomain.com/script.js';
VAR X = document.getElementsByTagName（'脚本'）[0];
x.parentNode.insertBefore（S，X）;
 

我明白这是一个非阻塞下载页面会继续，而这一下载来加载。到现在为止还挺好。现在让我们后来说我上声明一些变量：

  VAR X =东西;
 

我的问题是，这个变量提供给我装previously脚本？如果我做了

 警报（X）;
 

在上面加载的剧本，它似乎工作，但我不知道它会永远如此。还怎么样的DOM元素。如果有一些DIV后来在页：

 ＆LT; D​​IV ID =myDiv＆GT;＆LT; / DIV＆GT;
 

在我的剧本我

  DIV VAR =的document.getElementById（myDiv）;
 

将这项工作是否正确？在我的测试，这些事情似乎工作，但我不知道，如果有更多的页面内容，这将是异步脚本或不可见。

所以我的问题基本可以缩小到，它是安全访问从异步加载脚本项，不检查一些DOM加载事件？

解决方案

1. 通过添加＆LT;脚本＆GT; 与异步设置为true，然后声明一个变量一个＆LT;脚本＆GT; 低下来啄食顺序，这是一个竞争状态变量是否在第一个可用的。

   如果第一个＆LT;脚本＆GT; 被缓存，或者第二个执行＆LT;脚本＆GT; 被延迟（即其间的第一/第二元素是同步的，加载缓慢），你将最终变量是不确定的。




2. 可以保证一个＆LT;脚本＆GT; 将执行不早于它在DOM位置。如果＆LT; D​​IV＆GT; 定位的前的的＆LT;脚本＆GT; ，它会的总是的使用。否则，拉秸秆。

在两个的这些情况你可以用包含在事件处理程序脚本这是监听的事件，如的window.onload 或 DOMContentLoaded 事件推迟执行，直到这些事件已经解雇了（和所有＆LT;脚本＆GT; 将是present和正确的）。

I am looking for some more information on how browsers execute async style scripts with regards to the rest of the page.

I have a JS script that follows the async loading pattern like so:

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);

I understand that this is a non-blocking download and the page will continue to load while this downloads. So far so good. Now lets say later on I declare some variable:

var x = "something";

My question is, will this variable be available to the script I loaded previously? If I do a

alert(x);

in the script loaded above, it seems to work but I'm not sure it will always be the case. Also what about DOM elements. If there is some div later on in the page:

<div id="myDiv"></div>

and in my script I do

var div = document.getElementById("myDiv"); 

Will this work correctly? In my testing these things seem to work, but I'm not sure if there was much more page content that it would be visible to the async script or not.

So my question can be basically narrowed down to, is it safe to access items from a asynchronously loaded script without checking for some DOM loaded event?

解决方案

1. By adding a <script> with async set to true and then declaring a variable in a <script> lower down the pecking order, it's a race condition whether the variable is available in the first.

   If the first <script> is cached, or if the execution of the second <script> is delayed (i.e. an element inbetween the first/ second is synchronous and slow to load) you will end up with the variable being undefined.

2. You can guarantee that a <script> will execute no earlier than it's position in the DOM. If the <div> is positioned before the <script>, it will always be available. Otherwise pull straws.

In both of these situations you can wrap JavaScript code contained within the scripts in event handlers which are listening for an event such as window.onload or DOMContentLoaded event to delay the execution until those events have fired (and all <scripts> will be present and correct).

这篇关于JavaScript的异步加载和执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！