javascript - 将javascript文件插入dom(方法比较)

Question

我正在开发一个需要 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);
     })();
   

这些方法有什么区别以及优点是什么？我应该使用哪种方法？

Answer 1

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

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

第二种方法适用于不直接影响页面的事情，或者优先级较低的事情。流程为:

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

我认为这取决于你的小部件的重要性。在某些情况下，第二个选项更好，因为您可以尽快向用户展示某些内容，然后加载精美的内容。如果您遵循这种方式，您的小部件将不会影响初始页面渲染。