Why is jQuery less and less used? Will it withdraw from the stage of history?

Gentle in autumn 2021-01-22 17:26:54
jquery used withdraw stage history

The earliest development , Most of them use jQuery, It brings us a lot of convenience : Quick selection of elements , Convenient operation DOM Elemental API, Perfect compatibility between browsers , Chain operation , Animation 、ajax And so on jQuery Benefits for front-end developers . Why are fewer and fewer people using it now ? Let me divide the following points , Explain what I think :

One 、JS The impact of renewal :

1. Quick selection DOM node

For most uses jQuery For the development engineer , Can quickly select DOM node , This is undoubtedly an important reason , But for the moment , This advantage is obviously gone , Why? ? Let's talk about two API, these two items. API It's been used by a lot of people , Namely document.querySelector and document.querySelectorAll Method . These two methods can be passed in css A string in the form of a selector , You can match the expected DOM node . Here are the current two API Compatibility of :

 Why? jquery Fewer and fewer people use it ? Will you quit the stage of history ?

querySelector Compatible with the situation

 Why? jquery Fewer and fewer people use it ? Will you quit the stage of history ?

querySelectorAll Compatibility diagram

As you can see from the diagram , these two items. API Already very good compatibility each browser .

Vue This is also used in API For element acquisition :

So jQuery Choose... Quickly DOM The advantage of nodes no longer exists .2. Convenient operation DOM Elemental API It's easy to operate DOM Elemental API, such as addClass 、removeClass 、toggleClass. Now native JS There's also support , This API be called classList.

Although I say IE Compatibility is not perfect , But the most basic implementation is also realized .

3. Animation

Now? CSS3 Animation technology has been very mature , It can completely replace jQuery Animation done , And it's better than jQuery Of animate Method to achieve more complex animation , Compatibility is good. , Low performance consumption , Why not do it ? Let's give you an example , For example, if the background color is excessive ,CSS3 It can be perfectly realized , however jQuery No way. . And now there are a lot of excellent CSS3 Animation library , big-name Animate.css Ku, you must have heard of it .

 Why? jquery Fewer and fewer people use it ? Will you quit the stage of history ?

at present CSS3 Animation compatibility

4.Ajax operation

jQuery Of ajax operation , It saves us the problem of compatible browsers , And it also provides a concise API To call get and post, Let developers from the cumbersome compatibility and use of native API Get out of it . But now , This advantage is already very small . Whether it's original JS Of Fetch API still axios. They all provide us with powerful ajax Ability to use , also axios And the advantage of interceptors . By comparison ,jQuery Of ajax It's really impossible to compare .

Of course Fetch stay IE Come up and say , It's not going to work

 Why? jquery Fewer and fewer people use it ? Will you quit the stage of history ?

Fetch Compatibility

But there are already Fetch Of Polyfill programme :github/fetch

So you just need to quote this little JS, It's easy to use ajax 了 . Compare with jQuery, It's a lot smaller .

Two 、 Performance issues :

In the original development , Engineers don't worry too much about performance . But now it's different , In order to improve the user performance , The most important thing is to solve the performance problem of browser rendering . The most classic concepts are redrawing and reflow .

Repaint : It's about redrawing the page , For example , Modify the background color of an element .

backflow : Generally speaking , When the browser enters the page, it already has a reflow , Reflow actually refers to the re layout of the page .

Since we want to improve performance , Then we can start with these two concepts , It's definitely the best way to improve performance to update the page with the least cost . But unfortunately ,jQuery Didn't do it . Why do you say that? , Take a look at the analysis below :

When we get a set of news data to render to ul In the label , Usually, we will string splice the news data one by one , Then use $ Character selection ul Elements , And modify it ul Of innerHTML The value of is the concatenated string ( Use html API), This completes the first rendering . This time the page was redrawn ( It is inevitable that ), First of all, do not analyze the performance of the first good or bad , It will be more powerful with the next illustration .

For example, we have a change button at this time . In the traditional development mode , At this time, the change button must execute the above code , Get elements , Modify element innerHTML, But now the problem is , It is necessary to delete all the elements again , Add it again ? The answer must be No ( Shown below , How much does it cost to create an element ).

 Why? jquery Fewer and fewer people use it ? Will you quit the stage of history ?

One li All the attributes on the node

Because at this time we just need to put each one li The words and a The link in the tag can be modified , Obviously, there is no need to add it again as above li Of . Because a DOM Elements , It may contain hundreds of attributes , It's a huge performance overhead .

So the new concepts that are emerging now Virtual DOM( fictitious DOM), And then we can solve this problem . Actually Virtual DOM It's about being true DOM Description of nodes , By changing Virtual DOM To change reality with minimal change DOM(Virtual DOM It's not necessarily better than jQuery Better performance ).

Especially the rain creek : It's said on the Internet that the operation is real DOM slow , But the test results are better than React faster , Why? ?

3、 ... and 、 The modern framework is right for jQuery Influence :

It's quite popular in China now React 、Vue 、Angular frame , All belong to MV* The category of frame , Its design features , It's mainly about data . It can be said that operation DOM Affair , It's left to the framework . It's more than traditional jQuery High development efficiency , High maintainability of code , High scalability 、 Good performance .

For example :

I let jQuery Go buy a bottle of soy sauce , To him 100 Yuan , Then we need to tell him the way to the store 、 How to tell the boss what soy sauce to buy , How much is soy sauce , How much change , And tell him how to get back ( imperative ).

And then I let Vue I went to buy soy sauce , I just need to give him money , And tell him where the destination is , Just buy soy sauce , There's no need to teach him ( Functional expression ).

This is the difference between traditional development and modern framework development .

Use modern frameworks to develop , have access to Webpack( Of course use jQuery You can also use Webpack), You can use the ready-made scaffold provided by others , For example create-react-app,vue-cli. Greatly improve the efficiency of development , And you can use the latest ES6、ES7 Grammar development , In the coding experience , It's a step up .

Now? jQuery Has been a perfect exit from the stage of history , He's done what he's going to do .

 Why? jquery Fewer and fewer people use it ? Will you quit the stage of history ?

 Why? jquery Fewer and fewer people use it ? Will you quit the stage of history ?

本文为[Gentle in autumn]所创,转载请带上原文链接,感谢

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云