在这个项目中使用来自 jQuery 或 JavaScript 的选择器？答案

【问题标题】：Use selectors from jQuery or JavaScript in this project?在这个项目中使用来自 jQuery 或 JavaScript 的选择器？
【发布时间】：2012-08-24 05:07:56
【问题描述】：

我正在制作一个包含大量元素创建和附加的项目，经过一些研究后我想出了这个

$(newElement) 和$(selector)

比

慢

.createElement(newElement) 和 .getElementBy

因为我正在做一个待办事项列表应用程序，其中将包含大量的创建/附加/选择：

<div class="mainTaskWrapper clearfix">
    <div class="mainMarker"></div>
    <label for="task1">This is task1</label>
    <div class="holder"></div>
    <div class="subTrigger"></div>                            
    <div class="checkButton"></div>
    <div class="optTrigger"></div>
    <div class="mainOptions">
        <ul>
            <li id="mainInfo">Details</li>
            <li id="mainDivide">Divide</li>
            <li id="mainEdit">Edit</li>
            <li id="mainDelete">Delete</li>
        </ul>                               
    </div>
</div>

你会建议我使用什么？ jQuery选择和创建方式，还是JavaScript一种？

【问题讨论】：

天哪，jQuery 比普通 JS 慢，谁能想到？
我会推荐vanilla-js.com 框架，但如果你不熟悉VanillaJS，也可以使用jQuery。
在jsperf.com 中尝试两者，看看速度差异是否值得增加代码复杂性。
我有一个丰富的 web 应用程序，它有大量的 JS 交互，并且几乎所有事情都使用 jQuery。对我来说，任何操作都没有明显的性能问题。除非您的 DOM 很大，否则我认为您不会对 jQuery 有太大的问题。不过，基准测试取决于您。
哈哈 vanillaJS 网站让我崩溃了。

标签： javascript jquery performance jquery-selectors getelementbyid

【解决方案1】：

我建议您不要一次创建那么多相同的元素。相反，将它们放在您的 HTML 中一次并隐藏它（使用 display:none），然后根据需要使用 jQuery 来 .clone() 整个块。

但是：首先，摆脱那些id= 属性。同一 ID 的页面上不能有多个元素。

【讨论】：

【解决方案2】：

当您说“大量的创建/附加/选择”时，您究竟是什么意思？

是每秒几个，还是只是“很多”？由于代码将在客户端运行，因此每秒一个不会有太大问题。

jQuery 将是“最佳”选择，因为可维护性是一个很大的优势，而且您使用 jQuery 编写的任何代码都可能会更清晰。

【讨论】：

好吧，当用户按下某个按钮时，上面的代码将被创建并附加到其父 div 中。这取决于用户交互。
那么，（恕我直言，）您不必太担心 jQuery 增加的复杂性。它可能“更慢”，但很可能以毫秒为单位。使用纯 JS 的额外开发时间可能不值得。

【解决方案3】：

这确实是开发者偏好问题。

就个人而言，我发现严格使用 jQuery 选择器更容易编写和理解，并且在选择器变得更复杂时更加一致。使用原生 JavaScript 编译和渲染速度更快，但根据页面的复杂程度，您实际上可能看不出任何差异。

【讨论】：

【解决方案4】：

取决于你在做什么。在某些情况下，设置 innerHTML 是最快的（尤其是插入大块的块）。

也就是说，从开发人员的角度来看，jquery 方法确实是最可维护的。在性能成为问题之前，我可能会使用 jquery 版本，并将对 jquery 的调用包装在其他函数中，这样我可以在它发生时换掉。

【讨论】：