0

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

  1. 正常包括JS文件：（typekit用这个）

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

  2. 将 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);
  })();

这些方法有什么区别，有什么优势？我应该使用哪种方法？

4

3 回答 3

1

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

如果您有大型 js 库要添加到页面，这种方法显然是有利的，但这确实意味着该库不一定可用，除非您的代码是从其中的回调触发的。

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

于 2013-09-09T10:15:16.940 回答
1

当您希望在开始时加载小部件时使用第一种方法。即，如果这对您很重要，那么您可以将 js 文件添加到 <script> 标记中。我确定您正在使用.ready事件或类似的东西来确保所有内容都已加载。所以，在第一点你有：

  1. 加载页面的资产
  2. 加载小部件文件
  3. 触发onload事件
  4. 您的应用程序逻辑开始
  5. 初始化小部件

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

  1. 加载页面的资产
  2. 触发onload事件
  3. 您的应用程序逻辑开始
  4. 加载小部件文件
  5. 初始化小部件

我认为这取决于您的小部件的重要性。在某些情况下，第二个选项更好，因为您要尽快向用户展示一些东西，然后加载花哨的东西。如果您遵循这种方式，您的小部件将不会影响初始页面呈现。

于 2013-09-09T10:15:39.310 回答
1

有很多考虑。

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

如果您在标头中包含完整的脚本，您的代码将在渲染 DOM 之前被解析。这会稍微延迟 DOM 的渲染。

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

通过编译/缩小 JavaScript、启用 (gzip) 压缩和设置适当的缓存标头（指纹等），您将获得更多性能。永远没有理由这样做。

于 2013-09-09T10:16:05.393 回答