[b]Use the newest version jQuery
Use the right selector
Understand the parent and children[/b]
[b]Don’t abuse jQuery
Use cache
Chaining
Event delegation[/b]
[b]DOM Event Model[/b]
[img]http://dl.iteye.com/upload/attachment/0075/2867/86075490-bff7-39e5-8482-559290e66e1c.jpg[/img]
[b]Diff between click(), delegate() and live()
Don’t change DOM frequently[/b]
每次用appendTo方式加上节点,都会改变dom的结构,浏览器需要重画html
这时可以用detach 等很多appendTo都执行好了,再add回DOM。
[b]Understand loops
Avoid construct new jQuery objects unless necessary[/b]
[b]Js performance compare site:[/b]
[url]http://jsperf.com/[/url]
[b]Jquery API study site:[/b]
[url]http://api.jquery.com/[/url]
Use the right selector
Understand the parent and children[/b]
$parent.find(‘.child’)
效率最高
$('#parent .child')
$('#parent .child')
效率差
[b]Don’t abuse jQuery
Use cache
Chaining
Event delegation[/b]
delegate() 代理子元素的动作, 效率高
$('#nav').delegate('a', 'click', function(e) {
e.preventDefault();
});
[b]DOM Event Model[/b]
1, Capture phase
2, target phase
3, bubble phase
[img]http://dl.iteye.com/upload/attachment/0075/2867/86075490-bff7-39e5-8482-559290e66e1c.jpg[/img]
[b]Diff between click(), delegate() and live()
Don’t change DOM frequently[/b]
每次用appendTo方式加上节点,都会改变dom的结构,浏览器需要重画html
这时可以用detach 等很多appendTo都执行好了,再add回DOM。
[b]Understand loops
Avoid construct new jQuery objects unless necessary[/b]
chrome控制台
console.log("aaa")
[b]Js performance compare site:[/b]
[url]http://jsperf.com/[/url]
[b]Jquery API study site:[/b]
[url]http://api.jquery.com/[/url]