Shulou(Shulou.com)06/01 Report--

This article will give you a detailed explanation on how to improve the performance of JQuery. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Now our motherland has risen.. The configuration of the computer also rises in a straight line. But the performance problems of js are still not to be underestimated. Especially in the evil IE.. the js engine is slow.. If JS is not well written again, it must be common for the client to open more windows to fake death. Nonsense, let's talk about some small Tips that improve the performance of js.

When choosing, it is best to start with the ID selector

I think this is easy to understand, because JQuery internally uses the document.getElementByID method for ID selection, which is faster than all other methods for DOM selection, so it's best to start with $("#"), such as:

$(".b.c.d") / / slow one

$("# a .b. C. D") / / fast one

Provide the context of $()

When selecting page elements using $(), providing a range of selections reduces the selection time, in other words, letting the selector filter only within a small range of the page rather than the whole page certainly reduces the filtering time, which can be achieved by providing a second parameter as the context in the $() function

Hi

Alert ($(".inner", document.getElementById ("test")) .text ()); / / increase the speed by provide context

Alert ($(".inner") .text ()); / / traverse all the element so that is slower than above

Of course, within the jquery definition (or js function) event, you can refer to the context through this:

Hi

$("# test") .click (function () {

Var text = $(".inner", this) .text (); / / this means $("# test")

Alert (text); / / alert hi

});

Of course, the above example can also be written in the following two ways:

Hi

Alert ($("# test .inner") .text (); / / method 1

Alert ($("# test"). Find (".inner") .text (); / / method 2 and it was best one

Among them, the use of find is the most efficient of all methods.

Of course, if you use the id selector, which is $("#..") To select, there is no need to provide context parameters. This has no effect on speed.

Save frequently used JQuery wrapped elements

For example, this is important because it takes time to use $() to select page elements. This waste can be avoided when saving as a variable, such as:

One

Two

Three

Four

Five

For (I = 0; I < $("ul li") .length; iTunes +) {/ / very bad,select $("ul li") so many times,waste a lot of time

Alert ($("ul li") [I] [xss_clean]); / / same here,very bad

}

Var $li = $("ul li")

For (I = 0; I < $li.length; iTunes +) {/ / good one,only selct $("ul li") once

Alert ($Li [I] [xss_clean]); / / same here,good

}

As you can see from the code, avoiding repeated selections can improve performance

Use selector as little as possible

JQuery's selector is array-oriented, so minimize the use of selectors when conditions permit, such as:

$("# Div0") .slideDown ("slow")

$("# Div1") .slideDown ("slow")

$("# Div2"). SlideDown ("slow"); / / slow

$("Div0,Div1,Div2") .slideDown ("slow"); / / fast

As you can see, using selectors and commas to separate the selected elements and selecting multiple elements not only makes the code more concise, but also slightly outperforms the performance by creating fewer instances of JQuery!

Avoid using $(). Each when there are many loops, and use for loops instead

Using the $(). Each method makes programming easier when looping, and the performance impact of a small number of loops using $(). Each is negligible, but when this number is large, the impact on performance begins to become significant.

This number, I checked the data, it is said that less than 1000 can use the $(). Each method, and if this number continues to increase, it should use the for loop statement.

Minimize the operation of DOM

DOM operations are expensive on a page (such as inserting or deleting a piece of text on a page), and minimizing this change is a best practice for maintaining performance! For example:

Var $list = $("# test")

For (I = 1; I < 101; iTunes +) {

$list.append ("Item" + I + "")

} / / very bad,change dom 100 times

Var listItem = ""

For (j = 1; j < 101; jacks +) {

ListItem + = "Item" + j + ""

}

$list.html (listItem)

/ / good practice,only modify dom once

As you can see, the performance gap above is obvious when the first example modifies DOM 100 times, while the second example modifies DOM only once.

Can mask the animation effects of JQuery

In some cases, if you can turn off JQuery animation, you can improve performance to a certain extent, and the method of shielding is:

JQuery.fx.off = true

If the parameter can be a JS object, try to use the object

Especially for JQuery plug-ins, or JQuery's css and attr methods both accept key / value or js key / value object pairs as parameters, passing key-value objects can reduce the creation of JQuery objects, such as:

$("div") .css ("display", "block")

$("div") .css ("background-color", "blue")

/ / slow,because it create more Jquery object

("div") .css ({"display": "block", "background-color": "blue"})

/ / fast,only create one object

Of course, you can also use concatenation:

$("div") .css ("display", "block") .css ("background-color", "blue")

But the performance of this way is not as good as the one above. Two methods are required, and more temporary objects need to be generated.

This is the end of the article on "how to improve the performance of JQuery". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.