search

Home >Web Front-end >JS Tutorial >Performance optimization of JQuery teaching_jquery

Performance optimization of JQuery teaching_jquery

WBOY
WBOYOriginal
2016-05-16 16:48:191045browse

jQuery is a very excellent javascript framework. When we use jQuery, we never want to go back to the lengthy code of javascript, so the optimization of jQuery is in front of us. So what aspects should we start from when optimizing JQuery?

1. Use the latest version of jQuery

The new version will have performance improvements compared to the old version, as well as adding new features.

2. Use of selectors

We usually use id selectors, class selectors, element selectors, pseudo-class selectors and element selectors. My suggestion when using it is that it is best to use the id selector, followed by the class selector > element selector > Element selector > pseudo-class selector.

When talking about selectors, it is necessary to insert a sentence if it is not necessary. When using a selector to search, it is best to start from the parent element with the id and search downwards step by step.

3. Don’t use jQuery excessively

Remember one sentence: native is the fastest. jQuery is write less, do more (write less, do more).

4. Do a good job of caching

If you want to reuse a node, you can use a variable to store it and call it when using it. Avoid repeatedly acquiring nodes and reducing efficiency.

Copy code The code is as follows:

var inputSelect = $("#head .head_right input" );
inputSelect.find("a");
inputSelect.find("i");

5. Use chain operations

One of the highlights of jQuery is that it can use chain operations.

Copy code The code is as follows:

$("#content").find(". div").eq(2).html("Hello World");

6. Event delegation

When multiple sibling elements are required to execute a type of event, event delegation can be used. Example:

Copy code The code is as follows:




;div>



When each div with class="div" has a click event, we can use event delegation,

Copy code The code is as follows:
$("#content").on("click ","div",function(){ 
 $(this).css("color","#ff5500");
});

7. Handle loops correctly

Looping is a time-consuming operation. If you can use a selector to directly select elements, do not use loops to traverse the elements one by one.

Javascript’s native methods for and while are faster than jQuery’s each(). Therefore, native methods should be used first.

8. Reduce the generation of JQuery objects

Generating a Query object will generate corresponding properties and methods, which takes up more resources. So try to reduce the generation of jQuery objects.

9. Scope of variables

When a variable is not needed in multiple function calls, the variable should be placed within the function to reduce the time of searching for the code when the code is executed.

10. Defer certain functions to $(window).load execution

$(document).ready is really easy to use, but it can be executed before other elements are downloaded when the page is rendered.

11. Merging of scripts

Scripts are loaded one by one, reducing the number of scripts can also improve efficiency.

12. Element encapsulation

When inserting content into a node, you can encapsulate the content first and then insert it.

Copy code The code is as follows:

var content = "";
$(" #head").html(content);

The other is to compress js files.

As jQuery continues to be used, more and more optimization methods will be discovered.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Native js pop-up layer and the window inside it is centered_javascript skillsNext article：Native js pop-up layer and the window inside it is centered_javascript skills

Related articles

See more

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved