译者 | 未央
白眉林 | 胡春雨
责任编辑经许可转发
最晚期的合作开发，多半都采用jQuery，它给他们增添了许多的便捷：加速挑选出原素，方便快捷操作方式DOM原素的API，各应用程序间轻松的相容性，拉艾操作方式，动画电影、ajax之类都是jQuery为前端合作开发相关人员来带的益处。为何那时太少他用了呢？我来分几点，阐释我的设想：
JS预览增添的压制
1.加速挑选出DOM结点
对绝大部分采用jQuery的合作开发技师而言，能加速选取DOM结点，那个毫无疑问是两个关键的其原因，但就现阶段情形而言，那个竞争优势或许早已不复存在了，为何呢？
跟大家说两个API，这两个API早已非常多的人在用了，就是document.querySelector和document.querySelectorAll方法。
这两个方法可以通过传入CSS选择器形式的字符串，就可以匹配到预期的DOM结点。以下是现阶段两个API的兼容情形：
querySelector兼容情况
querySelectorAll兼容图
从图中可以看到，这两个API早已很好的兼容各应用程序。
所以说jQuery加速选择DOM结点的竞争优势早已不存在了。
2.方便快捷操作DOM原素的API
可以方便快捷操作方式DOM原素的API，比如addClass 、removeClass 、toggleClass。那时原生JS也得到了支持，那个API叫做classList。
虽然说IE兼容的不太轻松，但最基本该实现也都实现了。
3.动画电影
那时CSS3动画电影技术早已非常的成熟，早已完全可以取代jQuery做的动画电影，而且还能比jQuery的Animate方法实现更复杂的动画电影，相容性好，性能消耗小，何乐而不为呢？
举个例子吧，比方说如果实现背景颜色过度，CSS3可以轻松的实现，但jQuery就不行。
并且那时早已出现了许多优秀的CSS3动画电影库，大名鼎鼎的Animate.css库大家肯定都有耳闻吧。
现阶段CSS3动画电影的相容性
4.Ajax操作方式
jQuery的ajax操作方式，为他们省去了兼容应用程序方面的问题，并且也提供了简明的API去调用get和post，让合作开发者从繁琐的相容性与采用原生API上解脱出来。但那时，那个竞争优势也早已非常微小了。
不管是原生JS的Fetch API还是Axios。都为他们提供了强大的Ajax采用能力，并且Axios还有拦截器那个竞争优势。这时相较而言，jQuery的Axios确实早已无法相比了。
当然Fetch在IE上而言，肯定是没法用的
Fetch相容性
但早已有了Fetch的Polyfill方案：github/fetch
这样只需要引用这两个小小的JS，就可以采用方便快捷的Ajax了。相较于jQuery，那是小巧许多的。
性能问题
在原来的合作开发中，技师们不会太纠结于性能问题。但那时不同了，为了提高用户体现，首要的就是解决应用程序绘制所带了的性能问题。最经典的莫过重绘和回流这两个概念。
重绘：就是页面重新进行绘制，比方说，修改两个原素的背景颜色。
回流：一般而言，应用程序进入页面的时候就早已进行了一次回流，回流其实指的就是页面重新进行排版布局。
既然他们想提高性能，那么就可以先从这两概念入手，肯定是以最小的代价预览页面是提高性能最好的手段。但可惜的是，jQuery并没有做到。为何这么说，请看以下分析:
当他们拿到一组新闻数据要渲染到ul标签里时，通常他们会先将新闻数据逐条进行字符串拼接，紧接着采用$符选择ul原素，并修改ul的innerHTML的值为拼接好的字符串（采用html API），此时完成了第一次渲染。这次页面进行了重绘（这时必然的），首先不分析第一次的性能好或坏，用下两个说明将更加有力。
素重新删除，再重新添加一遍吗？答案肯定是不需要（下图所示，创建两个原素的代价有多大）。
两个li结点上的所有属性
因为这时他们只需要将每两个li里的文字和a标签里的链接修改即可，那或许是没有必要像上面那样重新再添加一遍li的。
因为两个DOM原素，可能包含上百条属性，这对性能开销是很大的。
那么那时出现的新概念Virtual DOM（虚拟DOM），就可以解决那个问题。其实Virtual DOM就是对真实DOM结点的描述，通过改变Virtual DOM来以最小变动来改变真实DOM（Virtual DOM不一定真的比jQuery性能更好）。
那么，网上都说操作方式真实 DOM 慢，但测试结果却比 React 更快，为何？
现代框架对jQuery的影响
那时国内比较火的React 、Vue 、Angular框架，都是属于MV*框架的范畴，其设计特点，主要是以数据为核心。
可以说操作方式DOM的事儿，就留给框架去做了。这比传统jQuery合作开发效率高，代码可维护性高，可扩展性强、性能好。
打个比方：
我让jQuery去买瓶酱油，给了他100块钱，这时他们需要告诉他去小卖铺的路怎么走、怎么跟老板说买啥酱油，买多少钱的酱油，找多少零钱，还得告诉他怎么回来（命令式）。
这时我让Vue去买酱油去了，这时我只需要给他钱，并且告诉他目的地在哪儿，买什么酱油即可，不需要手把手教他（函数式）。
这就是传统合作开发和现代框架合作开发的不同。
采用现代框架合作开发，可以采用Webpack（当然采用jQuery也可以采用Webpack）,可以采用人家提供的现成的脚手架，比方说create-react-app，vue-cli。
极大提高了合作开发的效率，并且可以采用最新的ES6、ES7语法进行合作开发，在编码体验上，就提高了两个档次。
那时jQuery早已轻松地退出了历史的舞台，它早已完成了它所要完成的任务。
译者简介：未央，喜欢技术，喜欢分享，喜欢写文章的文艺前端技师。
【完】
微信改版了，
想加速看到CSDN的热乎文章，
赶快把CSDN公众号设为星标吧，
打开公众号，点击“设为星标”就可以啦！
推荐阅读：
PYPL 12 月 IDE 榜单：Eclipse 有望超越 Visual Studio
今日头条挖角微信；中国 iPhone 购买意创新低；小程序将分级 | 极客头条
