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

How to optimize the performance of jQuery, I believe that many inexperienced people do not know what to do. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Now there are more and more jquery applications, and some students ignore the performance problems when enjoying refreshing coding, such as me. Although jquery performs well in many js class libraries, it is not developed with native javascript after all, and performance problems still need to be paid attention to. I found this article on twitter and simply translated it.

JQuery Performance Rules

Always inherit from the ID selector use tag to cache jquery objects before class master powerful chained operations use subqueries to restrict direct DOM operations bubble elimination invalid queries are postponed to $(window). Load compression js has a full grasp of the jquery library

1. Always inherit from the ID selector

The fastest selector in jquery is the ID selector. Because it comes directly from Javascript's getElementById () method.

Traffic Light Red Yellow Green

Selecting buttons like this is inefficient:

Var traffic_button = $("# content .button")

It is more efficient to select buttons directly with ID:

Var traffic_button = $("# traffic_button")

Select multiple elements

When it comes to multi-element selection, we are actually talking about DOM traversal and looping, which are slow things. To improve performance, it is best to inherit from the nearest ID.

Var traffic_lights = $("# traffic_light input")

two。 Use tag before class

The second fastest selector is the tag selector ($('head')). Similarly, because it comes from the native getElementsByTagName () method.

Always limit (modify) the class with a tag name (and don't forget the nearest ID):

Var active_light = $("# traffic_light input.on")

Note: Class is the slowest selector in jquery. It traverses all DOM nodes in the IE browser no matter where it is used.

Don't use tag name to modify ID. The following example will iterate through all the p elements to find which node has an id of 'content':

Var content = $("p#content")

Decorating ID with ID is also superfluous:

Var traffic_light = $("# content # traffic_light")

3. Cache jquery objects

Get into the habit of caching jquery objects into variables.

Never do this:

$("# traffic_light input.on"). Bind ("click", function () {… }); $("# traffic_light input.on"). Css ("border", "3px dashed yellow"); $("# traffic_light input.on"). Css ("background-color", "orange"); $("# traffic_light input.on"). FadeIn ("slow")

It is best to cache the object into a variable before operating:

Var $active_light = $("# traffic_light input.on"); $active_light.bind ("click", function () {… }); $active_light.css ("border", "3px dashed yellow"); $active_light.css ("background-color", "orange"); $active_light.fadeIn ("slow")

To remember that our local variable is encapsulated by jquery, we usually use a $as the variable prefix. Remember, never let the same selector appear multiple times in your code.

Cache jquery results, standby

If you plan to use jquery result objects in other parts of the program, or if your function executes multiple times, cache them in a global variable.

Define a global container to hold jquery results, and we can reference them in other functions:

/ / define an object in the global scope (e.g. window object) window.$my = {/ / initialize all queries that may be used more than once head: $("head"), traffic_light: $("# traffic_light"), traffic_button: $("# traffic_button")}; function do_something () {/ / now you can reference the stored results and manipulate them var script = document.createElement ("script") $my.head.append (script); / / when you operate inside the function, you can continue to store the query in the global object. $my.cool_results = $("# some_ul li"); $my.other_results = $("# some_table td"); / / use the global function as a normal jquery object. $my.other_results.css ("border-color", "red"); $my.traffic_light.css ("border-color", "green");}

4. Master powerful chain operation

The above example can also be written like this:

Var $active_light = $("# traffic_light input.on"); $active_light.bind ("click", function () {… }) .css ("border", "3px dashed yellow") .css ("background-color", "orange") .fadein ("slow")

This allows us to write less code and make our js lighter.

5. Use subquery

JQuery allows us to use additional selector operations on a wrapped object. Because we are already saving a parent object in a variable, this greatly improves the operation on its child elements:

For example, we can use subqueries to grab lights on or off and cache them for subsequent operations.

Var $traffic_light = $("# traffic_light"), $active_light = $traffic_light.find ("input.on"), $inactive_lights = $traffic_light.find ("input.off")

Tip: you can declare multiple local variables at a time using comma-separated methods-saving bytes

6. Restrict direct DOM operations

The basic idea here is to create what you really want in memory, and then update the DOM. This is not an jQuery best practice, but effective JavaScript operations are required. Direct DOM operation is very slow.

For example, if you want to create a set of list elements dynamically, don't do this:

Var top_100_list = [...], / / suppose there are 100 unique strings $mylist = $("# mylist"); / / jQuery select to the element for (var item0, lumped topparts 100 percent list.lists; I mylib.traffic_light.init ()

Your global js library might look like this:

Var mylib = {article_page: {init: function () {/ / Article-specific jQuery function. }, traffic_light: {init: function () {/ / Traffic light-specific jQuery function. }}}

9. Postpone to $(window) .load

Jquery has a tempting thing for developers to hang anything under $(document) .ready. You will find this in most cases.

Although $(document). Rady is really useful, it can be executed when the page is rendered before other elements have been downloaded. If you find that your page is loaded all the time, it is most likely caused by the $(document) .ready function.

You can reduce cpu usage during page loading by binding the jquery function to the $(window). Load event. It will be executed after all html (including) has been downloaded.

$(window) .load (function () {/ /) jQuery function initialized after the page is fully loaded. });

Redundant functions such as drag and drop, visual effects and animation, preloading hidden images, and so on. All are suitable for this kind of technology.

10. Compressed js

Recommend a js online compressed address: http://dean.edwards.name/packer/

11. Comprehensive knowledge of jquery library

If you know yourself and the enemy, you will win a hundred battles. Only with a deeper understanding of jQuery can we use it more flexibly. Here is a quick check manual for jQuery, which can be printed out and carried with you. It would be better if you have the ability to read through the jQuery source code.

After reading the above, have you mastered how to optimize the performance of jQuery? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.