Selector performance optimization suggestions

1.

This is

1	$ ('# Content'). hide ();

Or from

1	$ ('# Content p'). hide ();

2.

JQuery

1	VarreceiveNewsletter =ter ('# nslForm input. on ');

In the jQuery browser, it will traverse all

1	Varcontent = $ ('div # content ');//

Use

1	Vartraffic_light = $ ('# content # traffic_light ');//

3.

Cache the parent object for future use

1 2 3 4

Varheader = $ ('# header '); Varmenu = header. find ('. menu '); // Varmenu = $ ('. menu', header );

Let's look at an example.

4.

Self-version

1	VarlinkContacts = $ ('. contact-links div. side-wrapper ');

Do not use

1	VarlinkContacts = $ ('A. contact-links. side-wrapper ');

5.

. Find ()

1 2 3

Vardivs = $ ('. testdiv', '# pageBody'); // 2353 on Firebug 3.6 Vardivs = $ ('# pageBody'). find ('. testdiv'); // 2324 on Firebug 3.6-The best time Vardivs = $ ('# pageBody. testdiv'); // 2469 on Firebug 3.6

6.

Use

1 2 3 4

$ ('Li. menu-item'). click (function () {alert ('test click ');}) . Css ('display', 'block ') . Css ('color', 'red ') FadeTo (2, 0.7 );

7.

If you often use selector in code, then the extension

1 2 3 4 5 6

$. Extend ($. expr [':'], { Abovethefold: function (el ){ Return $ (el). offset (). top <$ (window). scrollTop () + $ (window). height (); } }); VarnonVisibleElements = $ ('div: abovethefold ');//

 

Ii. Optimization

8.

Cache frequently used elements:

1 2 3

Varheader = $ ('# header '); Vardivs = header. find ('div '); Varforms = header. find ('form ');

9.

Direct

1 2 3 4 5 6 7 8 9 10 11

Varmenu = '<ul id = "menu"> '; For (vari = 1; I <100; I ++ ){ Menu + = '<li>' + I + '</li> '; } Menu + = '</ul> '; $ ('# Head'). prepend (menu ); // $ ('# Head'). prepend (' <ul id = "menu"> </ul> '); For (vari = 1; I <100; I ++ ){ $ ('# Menu'). append ('<li>' + I + '</li> '); }

10.

Although

11.

For better performance, you should use direct functions such

12.

You often get

1 2 3

App. hiddenDivs = $ ('div. Den den '); // App. hiddenDivs. find ('span ');

13.

Don't forget to use

1 2 3

$ ('# Head'). data ('name', 'value '); // $ ('# Head'). data ('name ');

14.

Do not forget the simple and practical utility. What I like most is

15.

When

1	$ ('Html '). addClass ('js ');

Only when enabled

1 2	/* . JS # myDiv {display: none ;}

So when
Read more

 

Iii. Suggestions on optimizing event Performance

16.

Sometimes

17.

When you have many nodes in a container, you want to bind an event to all nodes,

1 2 3

$ ("Table"). delegate ("td", "hover", function (){ $ (This). toggleClass ("hover "); });

Read more

18.

If you want to compress

1 2 3 4 5 6 7 8

// $ (Document). ready (function (){ // }); // $ (Function (){ // });

 

Iv. Test

19. jQuery

Test Selenium, Funcunit, QUit, and QMock to test your code (especially plug-ins ). I want to discuss this topic in another topic because there are too many things to talk about.

20.

You often standardize your code to see which query is slow and then replace it. You can use jQuery to make the test easier:

1 2	// $. L ($ ('div '));
1 2	// $. Time ();
1 2 3 4	// $. Lt (); $ ('Div '); $. Lt ();
1 2	// $. Bm ("var divs = $ ('. testdiv', '# pageBody');"); // 2353 on Firebug 3.6

 

5. Other common

21.

The latest version is often the best. After changing the version, do not forget to test your code. Sometimes it is not completely backward compatible.

22.

New

23.

The best way to add styles to a few elements is to use

1 2	$ ('<Style type = "text/css"> div. class {color: red ;}</style> ') . AppendTo ('head ');

24.

Set

25.

When you have determined which files should be loaded, package them into a file. You can use some open-source tools to automatically compress your files, such as using Minify (JSCompressor, YUI Compressor, or Dean Edwards JS packer. My favorite is JSCompressor.

26.

Use

27.

When your application is officially launched

1 2	// <Script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"> </script>

28. (Lazy load content for speed and SEO benefits

Use