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

What is the best performance between inline Javascript code and pure Javascript code?

本文关键字：Javascript 代码 性能 是什么 最佳 之间 内联      更新时间：2023-09-26

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

<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代码之间的最佳性能是什么?

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

雅虎规则https://developer.yahoo.com/performance/rules.html外部

首先，jQuery不是纯JS。

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

为什么?

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

我们有一个jQuery选择器。选择器可能很重(如您所知，jQuery和document.querySelector接受类css的选择器)，因此会对性能产生负面影响。但在你的情况下，如果这只是id, jQuery可能会使用内置函数document.getElementById，这比css类查询更快，但人们说它仍然很慢。

一般来说，如果

  • 外部JS缓存在客户端，低权重和ping到你的服务器是低的(甚至一个请求告诉你JS没有修改需要时间);
  • 你不是在处理一个有巨大DOM的页面，不需要在一个循环中做很多次(100K和更多的迭代)

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

所以我更喜欢将绑定放置到onclick或<script>，这取决于我需要什么，我需要它的地方，我需要它的速度有多快，以及考虑到我正在使用的框架来维护它

外部脚本必须通过额外的HTTP请求加载。来自Google (https://developers.google.com/speed/docs/best-practices/rtt?hl=fr-FR#CombineExternalJS):

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

一旦代码被加载，速度可能是相同的，但由于你必须做出额外的HTTP请求，似乎外部JS将加载稍微慢一些(大约需要的时间长度，使额外的HTTP请求)

请查看这篇文章HTML中标签的位置影响网页的性能?

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

引用

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

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不会阻塞任何东西

相关文章：