Tips and Tricks to improve JQuery efficiency
* Always use the latest version of jQuery core where possible.
* Use faster selector
- id selector, tag selector > class selector > pseudoclass selector, attribute selector
* Faster way to get child ele from a parent ele.
- $parent.find('.child')
* Don't use jQuery unless it's absolutely necessary
- javascript's original methods are faster.
* Do cache
- var parents = $('.parents'); // caching
{
// bad way
children = $('.parents').find('.child');
others = $('.parents').find('.others');
}
{
// better way, use cache
children = parents.find('.child');
others = parents.find('.others')
}
* Chaining
- e.g. var parents = $('.parents').doSomething().doSomethingElse();
- in this way, jQuery will cache the result of each step automatically,
so it's faster than non-chaining way.
* Use event delegation
- javascript allow events to bubble up the DOM tree to a parent element.
as "<table><tr></tr>...<tr></tr></table>", it's better to bind a single
event handler to <table> element than each <tr> element.
2 ways for delegation:
1) // .delegate() method
$("td").bind("click",function(){
$(this).toggleClass("click");
});
2) // .live() method
$("table").each(function(){
$("td",this).live("click", function(){
$(this).toggleClass("click");
});
});
Difference:
.delegate() fire when event bubble to the specific parent element.
.live() fire when event bubble to the root element.
so .delegate() is a little faster than .live()
* You'd better not to modify the DOM tree
- each DOM insertion is costly. so be careful to use append(),
insertBefore(), insertAfter()
if you want to insert several element items, you can put them together
and use a single append() method
- when you're doing heavy interaction with a node, you should use .detach() method first.
- if you're to attach data to a node, please use $.data(elem,key,value)
//bad
var ele = $('#elem');
ele.data(key, value);
//good, 10 times faster than above one
var ele = $('#elem');
$.data(ele, key, value);
* Understand loops
- unless absolutely necessary, avoid loops.
- javascript's for, while statement is faster than jQuery.each() method
* Avoid constructing new jQuery object unless necessary
- // slower
var $text = $('#text');
var $ts = $text.text();
// faster
var $text = $('#text');
var $ts = $.text($text);
// http://addyosmani.com/jqprovenperformance/
分享到:
相关推荐
Tips and Tricks to Improve CNN-based Chest X-ray Diagnosis A Survey.pdf
Tips and Tricks to Improve CNN-based Chest X-ray Diagnosis A Survey.zip
d3 tips and tricks version 4 (javascript d3.js, front-end )
After the tremendous success of Direct3D ShaderX: Vertex and Pixel Shader Tips and Tricks, I planned to do another book with an entirely new set of innovative ideas, techniques, and algorithms...
From taming the Ribbon bar to testing and tables, creating custom functions, and overcoming "impossible" charts, mixing nesting limits, and more, 101 Excel 2013 Tips, Tricks, & Timesavers will save ...
wxPython Grid Tips and Tricks
PDF Can be Pretty Darn Fancy: Tips and Tricks for the ODS PDF Destination ODS PDF输出的要领.pdf一个经典的SAS Macro 教程PPT1
This collection of MongoDB tips, tricks, and hacks helps you resolve issues with everything from application design and implementation to data safety and monitoring. You get specific guidance in ...
Visual Studio .NET Tips and Tricks.pdf
计算机图形学 着色器 顶点着色器 像素着色器 DirectX 3D
Some tips and tricks about Windows Ultimate.
Best practice and tips & tricks to write scientific papers in LaTeX, with figures generated in Python or Matlab.zip
Microsoft Visual C# IDE Tips and Tricks
Rational Functional Tester - Tips and Tricks
《深入学习mongodb》英文原版,无水印,非常值得学习。
Cheatsheets for each machine learning field, as well as another dedicated to tips and tricks to have in mind when training a model. Refreshers in related topics that highlight the key points of the ...
[Kristina_Chodorow]50 Tips and Tricks for MongoDB。MongoDB数据库设计实现优化安全技巧