High Performance Javascript

原PPT链接：

http://www.slideshare.net/nzakas/high-performance-javascript-webdirections-usa-2010

NicholasC.Zakas《Javascript高级程序设计》的作者

 

摘要如下：

 

1. The browser UI thread isresponsible for both UI updates and Javascript execution.

　Only one can happen at a time.

2. Long-running Javascript = Unresponsive UI

    How long is too long? 

         100ms. Recommendation:50ms

    Long UI updates =Unresponsive UI

 

 

3. Ways to ensure Javascript doesn’t run away:

　　A. Timers

　　B. Web Worker

　　　　a. Asynchronous Javascript execution

　　　　b. Execution happens outside of UI thread

　　　　　　a) Not on the UI thread = no UI delays

　　　　d. Data-driven API

　　　　　　a) Data is serialized when sending data into or out of Worker

　　　　　　b) No access to DOM, BOM

　　　　　　c) Completely separate execution environment

 

 

4. Repaint and Reflow

 

A repaint occurs when a visual change doesn’t require recalculation of layout

Changes to visibility, colors (text / background), background image,etc

e.g. 

 

A reflow occurs when a visual change requires a change in layout

Initial page load, browser resize, DOM structure change, layout style change, layout information retrieved.

e.g. 

 

Repaints and reflows are queued up as Javascript executes and thenexecuted in order.

Limiting repaints / reflows improves overall performance.

 

Solutions:

A. Perform DOM manipulations off-document

　　a) Remove element from the document, make changes, insert back into document.　　

　　b) Set element’s display to “none”, make changes, set display back to default

　　c) Build up DOM changes on a DocumentFragment then applay all atonce.

 

　　DocumentFragment:

 

B. Group Style Changes

 

C. Avoid Accidental Reflow

　　a) Minimize access to layout information

　　　　offsetTop,offsetLeft, offsetWidth, offsetHeight

　　　　scrollTop, scrollLeft,scrollWidth, scrollHeight

　　　　clientTop, clientLeft, clientWidth, clientHeight

　　　　Most computed styles

　　b) If a value is used more than once, store in local variable