Question

我知道很多网络分析工具都使用以下脚本来动态创建脚本标记：

<script type="text/javascript">
    var s = document.createElement( 'script' );
    s.type = 'text/javascript';
    s.src = 'http://s/s.js';
    document.body.appendChild( s );</script>

我的问题是，如果我按照以下方式静态嵌入脚本会有不同之处：

<script type="text/javascript" src="http://s/s.js"></script>

Answer 1

他们这样做是为了它以异步方式加载，或者至少只有在普通JS加载并执行后才加载它。它避免了渲染树等待加载这个JS，因此页面更快。

Answer 2

当您静态嵌入脚本标记时，当浏览器通过dom中定义的脚本标记时，将下载该文件。进一步处理html文档直到下载js文件，这可能会减慢页面加载时间，这就是为什么建议将脚本标记保留在dom的末尾

但是通过动态添加到DOM，您可以确保仅在运行javascript时下载脚本文件。请注意，此代码在DOM中遇到时执行，因此将其置于html文件的中间仍将阻止进一步呈现页面。

动态创建脚本标记和静态嵌入脚本标记有什么区别？

2 个答案: