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 ：
querySelector Compatible with the situation
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 .
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 .
at present CSS3 Animation compatibility
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
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 ）.
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 .