jQuery Performance Rules

jQuery Performance Rules I hear...I forget I see...and I remember I do...and I understand - Ancient Chinese Proverb

No best practices Browser has to do more work Impacts performance – CPU utilization

1. Always Descend From an #id ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Selecting the button like this is slower: var traffic_button = $('#content .button'); Instead, select the button directly: var traffic_button = $('#traffic_button'); When selecting multiple elements, always descend from the closest parent ID. var traffic_lights = $('#traffic_light input');

2. Use Tags Before Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Always prefix a class with a tag name (and remember to descend from an ID): var active_light = $('#traffic_light input.on');

3. Cache jQuery Objects ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

4. Harness the Power of Chaining ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

5. Use Sub-queries ,[object Object],[object Object],[object Object],[object Object],[object Object]

6. Limit Direct DOM Manipulation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

7. Leverage Event Delegation (a.k.a. Bubbling) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

8. Eliminate Query Waste ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

9. Defer to $(window).load ,[object Object],[object Object],[object Object],[object Object]

Recap ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Performance Rules

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie jQuery Performance Rules

Ähnlich wie jQuery Performance Rules (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

jQuery Performance Rules