async js加载序列

Question

我正在尝试使用async加载模式执行以下操作：

<div id="mydiv">
    <script type="text/javascript">
        var test = .......;
        function() {
            var js = document.createElement('script');
            js.async = true;
            js.src = 'myscript.js';
            var first = document.getElementsByTagName('script')[0];
            first.parentNode.insertBefore(js, first);
         })();
    </script>
<div>

然后在myscript.js中我假设在执行myscript.js时，id mydiv的div可以保证可用。这个假设有效吗？听起来应该是这样的。但我有时遇到代码无法在myscript.js中找到div的情况。

还关于一般页面加载。是否首先加载所有标签？当这个异步加载模式发生时会发生什么？是否在首先加载所有原始标签后加载？

谢谢，

Answer 1

将script元素放在div元素之外。元素按顺序创建，正文中的脚本元素在创建时执行，因此这将保证在执行脚本时div可用。

这也避免了IE上的一个令人讨厌的错误，在脚本块中修改包含脚本块的元素会导致它拒绝完全呈现页面。