首页 > 解决方案 > 这两个javascript代码片段有什么区别?

问题描述

我知道他们或多或少都在做同样的事情,这只是其完成方式的方法。

<script src="example.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function OptanonWrapper() { }
</script>

<script type="text/javascript">

var x = x || [];
  (function(){
        setTimeout(function(){
      var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';

      s.async = true; s.src = "example.js"; f.parentNode.insertBefore(s,f);

    }, 1);

  })();

</script>

--

我不是本地 js 程序员,因此将不胜感激您的帮助。

标签: javascriptcomparereview

解决方案


在第一个示例中,第二个<script>标签只会在example.js加载完成后执行。

在第二个例子中,<script>加载的标签example.js是动态创建并插入到文档中的(以一种不必要的迂回方式,如果我可以添加我自己的两分钱的话),它将开始异步加载,即它不会延迟任何执行<script>后面的标签。这样可以达到同样的效果:

<script src="example.js" async></script>
<script>
    function OptanonWrapper() { }
</script>

<script>阅读MDN上的元素以获取更多详细信息:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script


推荐阅读