Performance optimization of JQuery teaching

JQuery is an excellent javascript framework, and when we use jQuery, we don't want to go back to the tedious code of javascript, so the optimization of jQuery is in front of us. So what should we do to optimize JQuery?

              1. Use the latest version of jQuery

              The new version will offer performance improvements over the previous version, as well as new features.

              2. Use of selectors

              We typically use id selectors, class selectors, element selectors, pseudo-class selectors, and element selectors. My advice is to use the id selector, followed by the class selector > Element selector > Element selector > Pseudo-class selector.

              When it comes to selectors, insert a line that is not mandatory, and it is best to start with the parent element that has an id and look it up step by step.

              3. Don't overuse jQuery

              Remember that the original is the fastest. JQuery is write less,do more.

              4. Cache

              If you want to reuse a node, you can use a variable to store it and call it when you use it. Avoid repeated node acquisition and reduce efficiency.

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

              5. Chain operation

              One of the great things about jQuery is that you can use chain operations.

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

              6. Event delegation

              When more than one sibling element is required to execute a type of event, you can delegate the event. Ex. :

<div id="content">
    <div><div>
    <div><div>
    <div><div>
    <div><div>
    <div><div>
<div>

      We can take the event delegate when each div class="div" has a click event,

$("#content").on("click","div",function(){    
    $(this).css("color","#ff5500");
  });

              7. Handle the cycle correctly

                Looping is a time-consuming operation. If you can use a selector to select elements directly, do not use a loop to iterate through them.

              Javascript's native methods, for and while, are faster than jQuery's each(). So use native methods first.

              8. Reduce the generation of JQuery objects

              Generating a Query object generates the corresponding properties and methods, and compares the resources. So minimize the generation of jQuery objects.

              9. Scope of variables

              When a variable does not need to be called in multiple functions, the variable should be placed in the function to reduce the time it takes to find the code when the code executes.

              10. Defer some functions to $(window).load

              $(document).ready is nice, but it can be executed while the page is rendered before the other elements have been downloaded.

              11. Script merging

              Scripts are loaded one by one, and reducing the number of scripts also increases efficiency.

              12. Element encapsulation

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

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

              Another is to do js file compression.

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