jquery Performance Optimization

jquery Performance Optimization

　　As a newly graduated small white, just work for a period of time, because the reasons for the work area began to use jquery, work encountered some performance optimization problems, so deliberately summarized down, as my first blog little left a thought.

　　

1. Select the appropriate selector

$ (' #id ')

　　Using ID to locate DOM elements in jquery is the quickest because it comes directly from the JavaScript getElementById () method .

$ ("div")

　　It is also good to use the element selector to locate DOM elements in jquery, because the Document.getelementbytagname () method is called directly

　$ ("[Attribute=value]")

　　The property selector uses the Queryselectorall () method, which is now supported by almost all major browsers. Includes IE8, Firefox, Chrome, Safari, Opera.

　　$ (". Class")

It is not recommended to use the element selector to locate DOM elements in jquery, because the Document.getelementbyclassname () method is called directly, and is not supported for IE8 or earlier versions.

　$ (": animated")

　　There is no native way of using attributes to locate DOM elements, and jquery needs to search all the elements for this way, performance is poor.

　　

　　2. Cache objects

$ ("#id"). CSS ("width", "100px"); $ ("#id"). Bind ("click",function() {});

When you wrote this code in jquery without actually developing it in the past, jquery would look for the DOM to create multiple jquery objects when creating each selector.

Let $id = $ ("#id") $id. CSS ("Background-color", "Red")    . FadeIn ("slow")

We should cache the object into a variable and then manipulate it.

3. Use Find () instead of context lookup

If a page has many DOM nodes, The . Find () function is faster:

4. Make reasonable use of the data property of HTML5

The Data property of HTML can help us to insert it. The data () method of jquery can effectively utilize the properties of HTML5 to automatically obtain

<div id= "a1" Data-value = ' Hello ' data-obj= ' {"name": "Lixiaolong"} ' ></div>

OK, let's take a look at the effect of. Data ()

$ (' #a1 '). Data ("value")  //"page"//"Lixiaolong"        

5. Try to use native JavaScript methods

　The following code, which is used to determine whether a multi-box is selected

var $CR = $ ("#cr") $cr. Click (function () {if ($CR. Is (": Checked")) {alert ("Thank you for your support!"). You can continue to operate! ")})

It uses the IS () method provided by jquery to determine if a multi-box is selected, but here you can use the native JavaScript method to see the following code:

var $cr = $ ("#cr")var cr = $cr. Get (0)   //DOM Object $cr. Click (function  () {if(cr.checked) {alert ("Hello")}})

The second is more efficient than the first, because it does not need to call many functions in a roundabout way.

　　

6. Use the direct function instead of the equivalent function

　For better performance, you should use direct functions such as $.ajax () instead of $.get (), $.getjson (), $.post (), since several of the following will call $.ajax ().

　　

7. Using jquery objects in an array way

　　In terms of performance, it is recommended to use a simple for loop or a while loop instead of $.each (), so that performance can be optimized a bit

$.each (array,function (index) {Array[index] = index;})

Use for instead of the each () method:

var arr = []; for (var i = 0; i<arr.length; i++) {array[i] = i;}

　　

8. Event Broker

JavaScript events will bubble to the parent element. For example, when we add the style to Li, we can add it to ul.

$ ("Li"). Click (function () {$ (this). CSS ("Background", "Red")})

This binding is inefficient, we only bind the event to the parent element once, and then pass the Event.target or fetch the current element of the click:

$ ("#table ul"). Clicked (function (e) {var $clicked = $ (e.target);//Snap to triggered element    $clicked. css ({"Background", "Red"})

　　

　　9. Compressing JS files

　　You can use the JavaScript compression tool, such as using Jsmin,yui Compressor, or JS Compressor.

　　

　　

　　

　

　　

　　

　　

jquery Performance Optimization