Efficiency-Boosting jquery

Summary

In this paper, some of the methods of improving the performance of jquery, the content of integrated from artzstudio,viralpatel,htmlgoodies and other sites, I hope to help you. Although these rules are simple, they can affect the efficiency of program execution and increase the burden on the browser if they are not followed.

1 preference for ID selectors and selectors beginning with IDs

// ID Selector Performance Best $ ("#myDiv")// start with ID, increase efficiency $ ("#myDiv. Red")

2 class selection before adding element selection to improve efficiency

// element (TAG) selector efficiency is second only to the ID selector, better than class selector $ ("#myList li.active")

3 Caching jquery Objects

// error, made two times select $ ("#myList li"). CSS (' border ', ' 3px '); $ ("#myList li"). CSS (' Color ', ' red '); // cache objects for increased efficiency var $li = $ ("#myList li") $li. css (' border ', ' 3px '); $li. css (' color ', ' red ');

4 Reduce the amount of code using chained commands

// chain command, reduce the amount of code ("#myList li"). CSS (' border ', ' 3px ')               . css (' color ', ' red ');

5 using Subqueries

// One-time global lookup plus two subqueries better than two global lookups var $list = $ ("#myList"); var $actives = $list. Find (' li.active '); var $in _actives = $list. Find (' li.in_active ');

6 Reduction of DOM Operations (DOM operation is slow)

// manipulate the DOM once instead of manipulating it 100 times var lis = "" for (var i=0, i<100; i+++ = ' <li> ' + i + ' </li> ';} $ (' #myList '). html (LIS);

7 when many nodes call the same function, the event delegate is used

// less efficient function (){}); // High Efficiency function  If ($ (e.target). NodeName = = = ' LI ') {}});

8 Place unimportant functions (such as drag-and-drop, effects, etc.) on the $ (window). Load execution

// do not put everything in $ (document). Ready in $ (window). Load (function//  After all the objects on the page have been loaded execution });

9 Longer string concatenation do not use concat (), to use Join ()

// join () is more efficient than concat () var list_items = [];  for (var i=0; i<=10; i++) {     = ' <li>item ' +i+ ' </li> ';} $ (' #myList '). HTML (List_items.join ("));

10 use a For loop, do not use the $.each loop

// JS Native method is more efficient var New Array ();  for (var i=0; i<10000; i++) {    = i;}

11 before using an element, check that it exists

// checks if an element with ID Mydiv exists if ($ ("#myDiv"). Length) {}

12 function always returns false

$ (' #myDiv '). Click (function  () {    returnfalse;});

13 using the HTML5 Data property

// <div id= "mydiv" data-value= "111" ></div>$ ("#myDiv"). Data ("value");

14 Use the latest version and CDN15 compress your JS code 16 keep the code tidy

Efficiency-boosting jquery (RPM)