Question

这是一段代码，通常由大多数程序员使用：

<input type="text" id="myID" onchange="myFunction()" />
<script>
     function myFunction (){
          //DO THIS
     }
</script>

但在我的情况下，我更喜欢创建一个.js扩展名的文件，其中只包含仅包含HTML的Javascript和.html。所以在我的index.html我有这一行：

<input type="text" id="myID"/>

在main.js我有这一行：

function myFunction (id){
      $(id).change({
           //DO THIS
      });
 }

 myFunction("#myID");

这两种方法是相同的，做同样的事情，但最好的是什么？内联Javascript代码和纯Javascript代码之间的最佳性能是什么？

Answer 1

性能脚本的

应该是外部的，因为对于维护而言性能。它更好，因为如果代码是独立的，它可以很容易地被浏览器缓存。

雅虎规则 https://developer.yahoo.com/performance/rules.html#external

Answer 2

起初，jQuery并不是纯JS 。

如果仅考虑这些片段并忽略HTTP请求，页面加载和函数调用开销的超时，则第二个将比第一个慢。

为什么？

$(id).change({
    //DO THIS
});

我们有一个jQuery选择器。选择器可能很重（如你所知，jQuery和document.querySelector接受类似CSS的选择器），从而对性能产生负面影响。但在你的情况下，如果这只是ID，jQuery可能会使用内置函数document.getElementById，它比类似CSS的查询更快，但是people say it still slow。

如果一般说话，如果

你就不会看到这个小小的差异

外部JS缓存在客户端，低权重和ping到你的服务器很低（甚至一个请求，告诉你JS没有被修改需要时间）;
您没有处理具有大量DOM的页面，并且不需要在循环中多次执行此操作（100K以上的迭代次数）

当然，您应该异步加载JS，将<script>标记放在页面底部以避免可能的加载/解析滞后并首先显示内容，但通常您不会看到差异。

所以我更喜欢将绑定放置到onclick或<script>，具体取决于我需要什么，我需要它的地方，我需要它多快以及考虑到框架I＆＃如何难以维护它？ 39; m用于建立网站。

Answer 3

外部脚本必须由其他HTTP请求加载。来自Google（https://developers.google.com/speed/docs/best-practices/rtt?hl=fr-FR#CombineExternalJS）：

大多数浏览器会在下载和解析JavaScript文件时阻止加载页面的其余部分

加载代码后，速度可能相同，但由于您必须进行额外的HTTP请求，因此外部JS的加载速度会稍慢（大约需要花费额外的HTTP请求所需的时间））。

Answer 4

请查看此帖子Does the <script> tag position in HTML affects performance of the webpage?。

在性能比较的情况下，他们对以下案例进行了很好的分析：

QUOTED

它确实会影响网页的性能。

JavaScript的问题在于阻止了执行/加载   页面的其余部分。如果你有一些需要很长时间的东西   你的JavaScript然后它会阻止页面的其余部分   负载量：

请参阅以下示例：

 Script at top, blocks whole page: `http://jsfiddle.net/jonathon/wcQqn/`
> Script in the middle, blocks bottom:
> `http://jsfiddle.net/jonathon/wcQqn/1` Script at bottom, blocks nothing:
> `http://jsfiddle.net/jonathon/wcQqn/3/` You can see the effect the alert
> has on the rendering of the rest of the pag

即你

的任何JavaScript

放入页面顶部会产生同样的效果。一般来说，   最好放置对页面布局至关重要的东西（即   菜单插件或其他东西）。任何需要用户交互的东西   （弹出处理程序）或根本不涉及用户（Google Analytics）   应该到页面底部。

您可以使用懒惰的加载器将脚本标记注入您的   码。由于代码不在HTML上，您可以确定您的   整个页面已正确呈现，而您正在包含的JS   不会阻止任何事情

内联Javascript代码和纯Javascript代码之间的最佳性能是什么？

4 个答案: