Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)

Embed Size (px)

Text of Профилирование и оптимизация jQuery–кода (Владимир...

  • 1. jQuery

2. ** builtwith.com 3. jQuery ; ; . 4. loop flipping;array-push-join ;loop unrolling;{: 1, : 1}[name]~~ (0.5 + n) 5. 6. : .: ; . 7. 8. : , ; .: ; ; . 9. 10. ? (, onsole.time); JS (Firebug, Web Inspector, YUI Profiler); timeline (Web Inspector). 11. :, ; ; . :onsole.time; . 12. onsole.time console.time(init); /* */ console.timeEnd(init); 13. JS: js . :console.profile;YUI profiler; . 14. console.profile: Firefox, Chrome, Safari, IE 8+; .: jQuery-; . 15. console.profile console.profile(init); /* */ console.profileEnd(init); 16. YUI Profiler: , ; jQuery; .developer.yahoo.com/yui/profiler 17. YUI Profiler: YAHOO.tool.Profiler.registerFunction(init, window); // init(); var report = YAHOO.tool.Profiler.getFunctionReport(init); YAHOO.tool.Profiler.unregisterFunction(init); 18. YUI Profiler: ; jQuery (, $.fn.*, $.*).: $(selector) $(html), $(element), $(function); , ; own time, total time. 19. jquery.profile.js: ; YUI Profiler.: ; $(selector), $(html), $(function) $(element).github.com/private-face/jquery.profile 20. jquery.profile.js: var profiler = new $.Profiler; profiler.start(); init(); profiler.stop(); profiler.topTime(); 21. jquery.profile.js: ;beta than nothing. 22. timeline: . :Chrome Web Inspector. 23. 24. $(div).click(function() { var div = $(this);// ...});$(div).each(function() { var div = $(this);// ...}); 25. : $(selector), $.fn.find, ..; . 26. 1. c- $(div.post a.vote-up) // $(.post .vote-up);// $(.vote-up);// 27. 2. $(div.post a.vote-up); // $(#content).find(.vote-up);// children, closest .. $(ul#list).find(li); // $(ul#list).children(li); // $(li).parents(div).first();// $(li).closest(div);// 28. 3. chaining $(div.post).mousemove(function() ...); $(div.post).find(a).click(function() ...); // var posts = $(div.post); posts.mousemove(function() ...); posts.find(a).click(function() ...); // $(div.post).mousemove(function() ...).find(a).click(function() ...).end().find(.invisible).hide(); // 29. 4. live. . $(a).live(click, function() {... // $(document).on(click, a, function() {... // bind on/delegate $(.vote).click(function() {... // $(#content).on(click, .vote, function() {... // 30. on/delegate: ; $.fn.is .: on/delegate; bind on/delegate. 31. : , ; keydown, scroll, resize ..: debounce throttle. benalman.com/projects/jquery-throttle-debounce-plugin/ 32. debounce$.debounce .:: 33. throttle$.throttle .:: 34. $(element): $(element).: jQuery each/map;quickEach. 35. // jQuery- map/each:var a = $([0]);$(a).each(function() { // a[0] = this;// $(this)// ...}); 36. : . var a = $([0]); $(a).each(function() {a[0] = this; a.click(function() {// alert(a.text()); }); }); 37. : , $(html), append,prepend, before, after .. 38. 1. // var soldiers = $.map(names, function(name) {return $(

+ name +

); }); // var bobaFett = $(

Boba

); var name = bobaFett.find(span); var soldiers = $.each(names, function(name) {name.text(name);return bobaFett.clone(); }); 39. 2. DOM // $.each(messages, function(_, text) {$(#history).append(

+ text +

); }); // var fragment = $(document.createDocumentFragment()); $.each(messages, function(_, text) {fragment.append(

+ text +

); }); $(#history).append(fragment); 40. Restyle, layout, paintRestyle: .Layout: .Paint: . 41. Restyle, layout, paint ; : offsetTop/Left/Width/Height scrollTop/Left/Width/HeightjQuery.fn.css clientTop/Left/Width/Height getComputedStyle(), currentStyle [IE] restyle, layout, paint . 42. $(div).click(function() {var e = $(this);e.css(color, e.css(backgroundColor));e.css(width, 100);e.css(font-size, 20);return false;}); 43. $(div).click(function() {var e = $(this);e.css(width, 100);e.css(color, e.css(backgroundColor));e.css(font-size, 20);return false;}); 44. .css display: none, ; css add/removeClass; CSS- ( restyle layout ); CSS . 45. : (, ).: . 46. : .: setTimeout. 47. , ; , , , ; JavaScript ; . 48. Evil Martiansprivate.face@gmail.comgithub.com/private-face@private_face