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

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

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

在

main.js

中，我有一行：

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

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

 myFunction("#myID");

---

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

外部脚本必须通过额外的HTTP请求加载。来自Google（）：

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

---

一旦加载代码，速度可能是相同的，但由于您必须发出额外的HTTP请求，外部JS的加载速度似乎会稍慢一些（大约是发出额外HTTP请求所需的时间长度）。

对于性能，脚本应该是外部的，因为用于维护和性能。更好的是，如果代码是独立的，那么浏览器很容易缓存它

雅虎规则 请查看此帖子

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

引用

它确实会影响网页的性能

JavaScript的问题在于它会阻止 这一页的其余部分。如果你有需要花很长时间的东西 您的JavaScript将阻止页面的其余部分 装载：

参见以下示例：

e。任何您需要的JavaScript

放在页面顶部也会有同样的效果。一般来说 最好将任何对页面布局至关重要的内容（如。 菜单插件什么的）。任何需要用户交互的东西 （弹出处理程序）或根本不涉及用户（谷歌分析） 应该放在这一页的底部

您可以使用惰性加载程序将脚本标记注入到 代码。由于代码不在HTML中，因此可以确保 整个页面已正确呈现，并且包含的JS 不会阻挡任何东西

---

首先，jQuery不是纯JS

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

这里有一个jQuery选择器。选择器可能很重（如您所知，jQuery和

document.querySelector

接受类似CSS的选择器），因此会对性能产生负面影响。但在您的情况下，如果这只是ID，jQuery可能会使用内置函数

document.getElementById

，这比类似CSS的查询要快，但是

如果从总体上讲，如果

• 外部JS缓存在客户端，重量低，对服务器的ping低（即使是告诉您JS未修改的请求也需要时间）
• 您不需要处理具有巨大DOM的页面，也不需要在循环中多次执行此操作（100K或更多迭代）

当然，您应该异步加载JS，将

标记放在页面底部，以避免可能的加载/解析延迟，并首先显示内容，但通常您看不到区别

---

所以我更喜欢将绑定放在

onclick

或

中，这取决于我需要什么、我需要它在哪里、我需要它的速度有多快，以及考虑到我用来构建站点的框架，维护它有多困难。

通常被大多数程序员使用-你知道吗？或者这只是你的断言？不管你怎么做，你的电脑都很无聊，速度也一样快。问题是，如何才能最好地使用该代码。唯一真正的区别是，当在一个额外的脚本中使用JS时，会有第二个HTTP请求，这会带来一些开销。但是你可以将其缓存为np。我认为，通过删除外部代码中的jQuery引用，这个问题会得到改进——这会混淆一个有趣的讨论。最好的方法是

document.getElementById（id）.addEventListener（“change”，function（）{}）

——没有jQuery，你是说jQuery的键入速度更快吗，或者你真的认为jQuery比原生JS运行得更快吗？因为你在第二个问题上是错的。这就是为什么你应该把脚本和样式放在

之前。第一次会有一个额外的请求，但是它会被缓存，所以在第一页之后，负载会减少。

 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

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