Detailed explanation of Jquery performance optimization

Detailed explanation of Jquery performance optimization_jquery

WBOY

Release： 2016-05-16 16:48:02

Original

1170 people have browsed it

After searching and searching, I finally found some articles about jquery performance optimization. The editor decisively collected them and of course I couldn’t forget to add some of my own summary and understanding.

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

a. Compress js. Use code compression technology to reduce file size. (Using jsmin, YUI Compressor, etc.).

b. Events bubble upward by default. Events that occur in child nodes can be handled by parent nodes. Put event registration on the parent node, so there is no need to register event listeners for each child node.

c. Using caching, when a jquery object is to be used multiple times, the jquery object can be cached in a variable.

Copy code The code is as follows:

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 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 id, id selection is the fastest way to select an element in jquery.

Copy code The code is as follows:

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

e. Use subquery

Copy code The code is as follows:

 zhuye.on("swiperight","#data li ",function(){
                                                                                                                                                              
f. Use find(), which does not use context search. The .find() function is faster and has been used in e above.

g. Use jquery’s internal function data() to store the state (this performance optimization method was first seen on Baidu, so let’s quote his example directly for the time being).

Copy code The code is as follows:$('#head').data('name ', 'value');

// Then call it in your application:

$('#head').data('name');

h. Finally, use the new version of jQuery and simplify the jquery code.

Copy code The code is as follows:$(document).ready(function (){

});

$(function (){
});