更干净更快的 JavaScript，用 JavaScript 替换 jQuery答案

【问题标题】：Cleaner faster JavaScript, Replacing jQuery with JavaScript更干净更快的 JavaScript，用 JavaScript 替换 jQuery
【发布时间】：2012-08-01 16:54:02
【问题描述】：

像许多人一样，我通过学习 jQuery 来学习 JavaScript。

最近我一直在替换以下位：

$(this).attr('title') 与this.title

$(this).attr('id') 与this.id

$(this).val() 与 this.value

$(this).parent() 与 this.parentNode

$(this).attr('class') 与 this.className

我的代码不仅更干净，而且技术上更快。

这种类型的减少是否可以接受和鼓励？
我应该在 ~~raw~~ 纯 JavaScript 而不是 jQuery 中做任何其他常见的做法吗？
这种类型的简化主义是否存在任何潜在的跨浏览器问题？

【问题讨论】：

是的，我们鼓励这样做。进行（通常）两个函数调用以获取您已经可以立即访问的内容是没有意义的。
我不会将 Javascript 称为“原始”。
试图记住哪些在没有 jQuery 的情况下可以安全调用，哪些不是。当您有时不得不使用 jQuery 版本时，它看起来也不一致，因为边缘情况的错误修复和附加功能（例如采用回调函数）。我怀疑你会遇到性能问题，你通常不会一次对数千个元素进行操作才能有所作为。
@Hassan 我用的是普通的。那更好吗？
哈哈“Raw Javascript”对我来说听起来有点矛盾，但它对你的问题很有效。

标签： javascript jquery performance

【解决方案1】：

虽然许多人拒绝这样的说法，但我也观察到避免/最小化 jQuery 的使用可以产生明显更快的脚本。尤其要避免重复/不必要的$()；而是尝试做一些事情一次，例如a = $(a);

我注意到特别昂贵的东西是$(e).css({a:b})。

谷歌优化Closure Compiler据说也可以内联这么简单的函数！

事实上，它带有一个相当大的库（闭包库），它提供了大部分跨浏览器兼容性的东西，而没有引入一个全新的概念。

需要一点时间来适应在完全优化模式下导出变量和函数的闭包方式（所以它们不会被重命名！）。但至少在我的情况下，生成的代码非常好而且很小，而且我敢打赌它已经得到了一些进一步的改进。

https://developers.google.com/closure/compiler/

【讨论】：

【解决方案2】：

我建议尽可能使用 DOM 属性。几乎所有这些都不会造成任何问题，性能会提高，并且您对 jQuery 的依赖会减少。例如，对于像checked 这样的属性，你最好忘记所有关于 jQuery 的内容，这只会给简单的任务增加混乱。

如果您对某个特定属性有任何疑问，您可以查看 jQuery 源代码，看看它是否对该属性有任何特殊处理，并将其视为学习练习。

【讨论】：

+1 用于检查源代码。来源是获取有关来源信息的最佳信息来源。

【解决方案3】：

虽然使用原生 Javascript 函数通常比 jQuery 对应函数更快，但它确实会让您面临使用它们时可能出现的任何浏览器兼容性问题。 this.value 等不太可能导致问题，但其他类似的属性/功能可能不适用于所有浏览器。使用像 jQuery 这样的框架意味着您不必处理或担心这些事情。

如果性能是一个问题，我只会使用纯 Javascript，即你有很多紧密的循环和重复的操作。

【讨论】：

您说得对，先生。另一方面，我认为 jQuery 在特定时期内是绝对必要的。就像，jQuery 的“时代”应该“很快”结束，因为所有主要的浏览器供应商都越来越接近常见的 W3C 规范。 jQuery 曾经（当然现在仍然是）在许多情况下是一个很好的工具，可以规避那些浏览器的差异。但这不应该是最终和最终的答案。最终答案是，ECMAscript。
我非常同意 jAndy 的观点！应该 jQuery的死亡。
@jAndy 很像 Flash（主要用于视频）正在成为互联网肮脏历史的一部分。
@jAndy：虽然我不使用 jQuery，但我认为包装浏览器 API 的库不会消失或应该消失。总会有新的 API 和新的浏览器错误需要解决。
@TimDown：好吧，我对那里更乐观。我真诚地希望并认为，浏览器供应商最终会同意并致力于原始 W3C 规范（他们当然已经这样做了）。未来应该不需要如此庞大的库来抽象错误/错误/错误的实现。