High Design Meets High Performance - O′Reilly Media 高设计满足高性能——O′Reilly媒体.ppt

* * * * * * * * * * * * * * * * * * Limit the number ofevent handlers (1/2) Attaching an event handler to hundreds of elements is very costly Multiplying event handlers augments the potential for memory leaks Solution: Use event delegation, a technique that relies on event bubbling div id=container ul li id=li-1List Item 1/li li id=li-2List Item 2/li li id=li-3List Item 3/li li id=li-4List Item 4/li li id=li-5List Item 5/li ... /ul /div div#container ul li#li-x text node Limit the number ofevent handlers (2/2) YAHOO.util.Event.addListener(container, click, function (e) { var el = YAHOO.util.Event.getTarget(e); while (el.id !== container) { if (el.nodeName.toUpperCase() === LI) { // Do something here... break; } else { el = el.parentNode; } } }); Limiting reflows Reflows happen whenever the DOM tree is manipulated. Browsers have optimizations you may take advantage of to minimize reflow: Modifying an invisible element (display:none) does not trigger reflow Modifying an element “off-DOM” does not trigger reflow Batch style changes: Change the value of the style attribute using setAttribute (does not work on Internet Explorer) Example: Change the value of the cssText property of the style object. Example: More maintainable: Change the CSS class name of an element. Example: el.style.cssText = display:block;width:auto;height:100px;...; YAHOO.util.Dom.replaceClass(el, foo, bar); el.setAttribute(style, display:block;width:auto;height:100px;...); Miscellaneous tips... Consider using the onmousedown event instead of the onclick event Get a head start by making use of the small delay between the time a user presses the mouse button and the time he/she releases it. “Downshift your code”: throttle frequent and expensive actions See /blog/2007/07/09/downshift-your-code/ Part 5High PerformanceLayout and CSS Miscellaneous tips... Use CSS Sprites for Snappy Image Replace