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

【问题标题】：What is the best performance between inline Javascript code and pure Javascript code?内联 Javascript 代码和纯 Javascript 代码之间的最佳性能是什么？
【发布时间】：2014-05-22 16:03:10
【问题描述】：

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

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

但就我而言，我更喜欢创建一个扩展名为 .js 且仅包含 Javascript 和 .html 仅包含 HTML 的文件。所以在我的index.html 我有这行：

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

在main.js 我有这行：

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

 myFunction("#myID");

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

【问题讨论】：

通常被大多数程序员使用 - 你知道吗？或者这只是你的主张？
不管你怎么做，你的电脑很无聊，而且速度也一样快。问题是，如何才能最好地使用该代码。唯一真正的区别是，当在一个额外的脚本中包含 JS 时，会有第二个 HTTP 请求产生一些开销。但是你可以缓存它np。
我认为可以通过删除外部代码中的 jQuery 引用来改进这个问题——这会混淆一个有趣的讨论。
最好的方法是document.getElementById(id).addEventListener("change", function() {}) -- 没有jQuery，哈哈
你的意思是 jQuery 打字速度更快，还是你真的认为 jQuery 比原生 JS 运行得更快？因为你在第二个上就错了。

标签： javascript performance

【解决方案1】：

性能脚本应该是外部的，因为用于维护和性能。更好的是，如果代码是分开的，它可以很容易地被浏览器缓存。

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

【讨论】：

【解决方案2】：

一开始，jQuery 并不是纯 JS。

如果只考虑这些 sn-ps 而忽略 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>，这取决于我需要什么、我需要它的位置、我需要它的速度以及考虑到我用来构建的框架，维护它的难度如何网站。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

这就是为什么你应该把脚本和样式放在</body>之前。
第一次额外请求，但是会被缓存，所以第一页之后payload会减少。

【解决方案4】：

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

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

引用

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

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

e。您使用的任何 JavaScript

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

你可以获得惰性加载器，它将你的脚本标签注入到你的代码。由于代码不在 HTML 中，因此您可以确定您的整个页面已正确呈现，并且您包含的 JS 不会阻止任何东西

【讨论】：