前端开发技术团结互助，让我们共同进步！

当前位置：主页 > 技术资讯 > 开发技术 > 前端开发技术 >

我们的优势： 10年相关行业经验，专业设计师量身定制设计师一对一服务模式，上百家客户案例！企业保证，正规流程，正规合作 7*24小时在线服务，售后无忧

Jquery为什么越来越多的人选择逃离？

文章来源：https://www.023niu.com 围观次数：

分享到:

摘要：大多数最早的开发都使用了jQuery，它为我们带来了很多便利：快速选择元素，轻松访问DOM元素的API，浏览器之间的完美兼容性，链操作，动画，ajax等。两者都是jQuery的优点前端开发人员。

大多数最早的开发都使用了jQuery，它为我们带来了很多便利：快速选择元素，轻松访问DOM元素的API，浏览器之间的完美兼容性，链操作，动画，ajax等。两者都是jQuery的优点前端开发人员。为什么现在使用它的人越来越少？让我分清以下几点并解释我的想法：

一，现代框架对jQuery的影响：

如今，国内的React，Vue和Angular框架都在MV *框架的范围内。设计特征主要基于数据。可以说DOM的操作留给了框架。这比传统的jQuery开发更有效，具有高代码可维护性，可伸缩性和性能。

例如：

我让jQuery买了一瓶酱油给了他100元。这时候，我们需要告诉他怎么去小店，怎么告诉老板买酱油，买多少酱油，找多少变化，还是要告诉他怎么回来（命令）。

这时，我让Vue去买酱油。这时，我只需要给他钱，并告诉他目的地在哪里，买什么酱油，而不需要教他（功能）。

这是传统发展与现代框架发展之间的差异。

使用现代框架开发，您可以使用Webpack（当然使用jQuery或Webpack），您可以使用其他人提供的现成脚手架，例如create-react-app，vue-cli。大大提高了开发效率，并且可以使用最新的ES6，ES7语法进行开发，在编码体验方面，它提升了一个档次。

现在jQuery完全退出了历史舞台，他已经完成了他必须完成的任务。

二，性能问题：

在最初的开发中，工程师们并没有过多地纠缠于性能问题。但现在情况有所不同。为了改进用户的实施例，首先要解决浏览器绘图带来的性能问题。最经典的是重绘和回流的概念。

重绘：重绘页面，例如，修改元素的背景颜色。

回流：通常，浏览器在进入页面时已经执行了重排。 Reflow实际上是指页面的重新布局。

由于我们希望提高性能，我们可以从这两个概念开始，并且确保以最低成本更新页面是提高性能的最佳方法。但不幸的是，jQuery没有。为什么这么说，请看以下分析：

当我们得到一组要呈现到ul标签中的新闻数据时，我们通常首先将新闻数据逐个连接起来，然后使用$ character选择ul元素，并将ul的innerHTML的值修改为stitched 字符。字符串（使用html API）完成此时的第一次渲染。这个页面已被重绘（此时不可避免），首先，不要分析第一次表现的好坏，接下来的描述会更加强大。

例如，我们此时还有一个更改按钮。在传统的开发模式中，此时的更改按钮仍然必须执行上面的代码，获取元素，修改元素的innerHTML，但现在出现问题，是否有必要再次删除所有元素，然后添加它再次？？绝对不需要答案（如下图所示，创建元素的成本有多高）。

li节点上的所有属性

因为此时我们只需要修改每个li中的文本和a标签中的链接，显然没有必要像上面那样重新添加li。由于DOM元素，它可能包含数百个属性，这是一个很大的性能开销。

然后新概念Virtual DOM（虚拟DOM）可以解决这个问题。实际上，Virtual DOM是对真实DOM节点的描述。通过更改Virtual DOM以最小的更改来更改真正的DOM（Virtual DOM不一定比jQuery性能更好）。

尤玉玺：网上说真正的DOM很慢，但测试结果比React快，为什么呢？

第三，JS更新的影响：

1.快速选择DOM节点

对于大多数使用jQuery的开发工程师来说，快速选择DOM节点的能力无疑是一个重要原因，但在目前的情况下，这种优势显然已经消失，为什么呢？我们来谈谈两个API。这两个API已经被很多人使用，即document.querySelector和document.querySelectorAll方法。通过以css选择器的形式传入字符串，可以将这两个方法与预期的DOM节点进行匹配。以下是两个API的当前兼容性：

querySelector兼容性

querySelectorAll兼容图

从图中可以看出，这两个API与每个浏览器都很兼容。

此API还用于Vue中的元素检索：

因此，jQuery快速选择DOM节点的优势已不复存在。

2.易于操作的DOM元素API

可以轻松操作DOM元素的API，例如addClass，removeClass和toggleClass。现在也支持原生JS。此API称为classList。

尽管IE兼容性并不完美，但也实现了最基本的实现。

3.动画

现在CSS3动画技术非常成熟，它可以完全取代jQuery制作的动画，并且可以实现比jQuery的动画方法更复杂的动画，兼容性好，性能消耗小，为什么不呢？例如，如果你获得过多的背景颜色，CSS3可以完美实现，但jQuery将无法正常工作。现在已经有很多优秀的CSS3动画库，必须听到着名的Animate.css库。

当前的CSS3动画兼容性

4.Ajax操作

jQuery的ajax操作使我们免于兼容的浏览器问题，并且还提供了一个简洁的API来调用get和post，从而使开发人员免于繁琐的兼容性和使用本机API。但现在，这个优势已经非常小了。无论是原生JS Fetch API还是axios。两者都为我们提供了强大的ajax使用，而axios具有拦截器的优势。这时，jQuery的ajax确实无法与之匹敌。

当然，Fetch在IE中绝对没用。

获取兼容性

但已经有Fetch的Polyfill解决方案：github / fetch

这只需要参考这个小JS，就可以使用方便的ajax。与jQuery相比，它要小得多。

本文由 https://www.023niu.com 整理发布,转载请保留出处，内容部分来自于互联网，如有侵权请联系我们删除。

相关热词搜索：jquey jquey入门前端开发

上一篇：JavaScript 不容错过的八大优化建议，来自Google Chrome 工程师
下一篇：2019前端热门技术汇总整理