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

时间:2011-12-03 13:55:44

标签: javascript

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

<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>

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:1)

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

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