Question

我正在开发一个网站小部件，需要一个javascript文件，它呈现一个小部件，我想知道两种不同方法之间有什么区别：

正常包含JS文件:( typekit使用此文件）

<script type="text/javascript" src="//use.typekit.net/mty1vkg.js"></script>

将JS文件动态插入DOM（谷歌分析示例）

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'http://' : 'http://') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

这些方法之间的区别是什么？我应该使用哪种方法？

Answer 1

第二种方法是异步加载javascript，这意味着页面在加载其余内容时不需要等待它。

这种方法显然有利于你有大的js库添加到你的页面，但它确实意味着库不一定可用，除非你的代码是从它内部的回调触发的。

如果您使用脚本标记正常加载js，就在页面的结束体标记内部，这通常就足够了。

Answer 2

当您想要在开头加载窗口小部件时，使用第一种方法。即如果这对您来说很重要，那么您可以在＆lt; script＆gt;中添加js文件。标签。我确定您正在使用 .ready 事件或类似的东西来确保所有内容都已加载。所以，在第一点你有：

加载页面资源
加载小部件文件
onload 事件被触发
您的应用程序逻辑启动
初始化小部件

第二种方法适用于不直接影响页面的内容，或者优先级较低的内容。流程是：

加载页面资源
onload 事件被触发
您的应用程序逻辑启动
加载小部件文件
初始化小部件

我认为这取决于你的小部件有多重要。在某些情况下，第二个选项更好，因为您正在尽快向用户显示某些内容然后加载花哨的东西。如果按照这种方式操作，则窗口小部件不会影响初始页面呈现。

Answer 3

有很多考虑因素。

Google Analytics是一个应该最后运行的脚本，因为它的优先级非常低。他们建议您在</body>之前放置它。这可确保其脚本 last 运行。然后他们延迟加载实际的分析脚本以减少初始页面加载时间。所以：跑到最后并运行懒惰。

如果在头文件中包含完整脚本，则在呈现DOM之前将解析代码。这会延迟DOM的渲染。

在实践中，虽然这些性能调整仅在您处理大容量或其他性能受限的设备（如移动设备）时才有用。我已经有很多小部件和大量的Javascript代码，其中大多数会立即运行，我不会因为延迟加载而烦恼太多。只有当你看到明显的性能优势时，才能选择花哨的技巧。

通过编译/缩小JavaScript，启用（gzip）压缩并设置适当的缓存标头（指纹识别等），您将获得更高的性能。从来没有理由这样做。

将javascript文件插入dom（方法比较）

3 个答案: