Question

十年左右后，我又开始进入网络开发。我在所有变体中设置了一个包含大约50个不同输入字段的页面，它们操纵div的内容。为了方便性能，我在原生JS中编写了所有事件处理程序。出于兴趣，我使用jQuery复制了页面。

现在，在本机JS中，我无法为这些输入字段组合任何事件处理程序，即使它们执行类似的操作。使用循环创建它们也不会节省太多代码，因为它永远不会超过1-3个相关的输入字段。最后，我有一大堆看起来像这样的函数：

var input = document.getElementById('input');
input.addEventListener('input', function() {
    // do stuff
});
input.addEventListener('change', function() {
    // do stuff
});

该测试页面的JS约为20 kb（未经宣传）。使用jQuery而不是本机JS的复制JS大约是9 kb（未经过分析）。

在研究jQuery时，所有针对它的文章都会提供一些基准测试，表明经过一些方法的x万次迭代后，原生JS比jQuery快x秒。

我问自己的问题是：这在现实世界的网络应用程序中有多重要。我的意思是，除了我花了大约四倍的时间来编写原生JS之外，不会下载超过两倍的JS，使每个方法的执行时间减少到理论上的速度超过理论上的百万分之一？

Answer 1

加载时间是否显着？

在许多情况下，下载jQuery通常可以忽略不计，因为如果使用CDN（https://trends.builtwith.com/cdn/jQuery-CDN - 占前10k网站的13％），它将被缓存 - 我发现使用jQuery编写你通常会得到更小的脚本（你的例子减少约50％）可以抵消一点。但是，如果没有缓存（在现代设备上内存和CPU的使用几乎可以忽略不计），那么80KB + jQuery可以显着增加页面下载量。我发现通常随着脚本的增长，使用jQuery（或其他库）的可能性越大，使用库的大小减少，但jQuery的大小完全被这些节省所抵消。 / p>

优化怎么样？

对于许多方法来说，节省几个周期通常也是微不足道的 - 通常最好采用更快/更容易的开发路线，然后根据需要进行优化（这可能意味着将jQuery作为依赖项删除，但对于许多浏览器而言案例DOM相关操作通常是最昂贵的任务）。直接针对完美优化通常会导致更多难以解决的错误/问题。

保存这几个周期值得吗？

如果它只有几毫秒（甚至高达20-50毫秒左右）的方法，每隔3-4秒调用一次，用户通常都不会注意到，但是如果你需要制作数千或数百万的调用一个花费百万分之几或千分之一秒的方法然后考虑优化该特定方法可能是个好主意。还要注意的一件事是您正在使用的设置来测试性能，因为它可能比您的用户明显更高。许多浏览器开发工具中内置的浏览器分析工具可以帮助识别优化目标。

那么回答你的问题在现实世界的应用程序中这是多么相关？

对于大多数方法和许多用例完全没有 - 下载通常是无关紧要的，因为它可能被缓存，并且许多应用程序的大部分代码都不会通过使用jQuery看到明显的负面性能影响。

据说jQuery不应该被用作一个适合所有解决方案 - 如果只使用一些功能，那么考虑使用本机替代品SO有很多问题，人们在寻找本地替代品，并且有一些网站，如{{ 3}}专门用于此目的。

Answer 2

从应用程序用户的角度来看，在不到0.1秒的时间内发生的所有事情都会立即发生。

如果用户在0.0999999或0.0000001秒内更改了页面元素，则完全相同。尽管last的速度要快999999倍，但这种速度仅对新的“超快速”框架的创建者以及那些以简单性和开发速度换来的数字毫无意义的幼稚的人重要。

原生JavaScript与jQuery - 真实世界的性能与理论基准

2 个答案: