Jquery performance optimization details

I have finally found some articles about the optimization of jquery performance. Of course, this site should not forget to add their own summary and understanding.

First of all, the jquery chain operation in the previous article is one of the performance optimization methods of jquery. The specific implementation and advantages will not be repeated here. Second, the optimization of jquery is the same as some methods in web optimization.

A. compress js. Use code compression to reduce file size. (use jsmin, YUI Compressor, etc.).

B. The event bubbles up by default, and the event occurs in the child node, which can be handled by the parent node. By registering the event to the parent node, there is no need to register the event listener for each child node.

C. Using caching, you can cache jquery objects into variables when you want to use them more than once.

var nodeTd = $("table td");
var $cj = $("#cj");
$cj.on("click",function(){
    $cj.css("color","blue");} ) 

Jquery result cache, if you need to use the jquery result object elsewhere in the program, or if the function will be executed multiple times, you can store it in a variable.

D. Try to inherit from the id selector. Because of the uniqueness of ids, id selection is the fastest way for jquery to select an element.

$("#firstd").slideDown(500);
$("#firstd img").slideUp(500);//Use id selector inheritance to select multiple elements

E. Use subqueries

  zhuye.on("swiperight","#data li",function(){
            $(this).find(".delete").hide();
        });//Swiperight - see jquery - mobile  API content

F. Use find() instead of context lookup, the.find() function is faster and is already used in e above.

G. Use jquery's internal function data () to store state (this kind of performance optimization method was first seen in baidu, the example also temporarily directly cited his bar).

$('#head').data('name', 'value');
//Then in your application call:
$('#head').data('name');

H. finally, use the new version of jQuery and simplify the jQuery code.

$(document).ready(function (){
});
$(function (){
});