Performance-driven front-end development.ppt

Example 1 - 2 Raxtone Show composited layer borders: It can indicate the rendered elements which may be animating or have CSS transforms/ transitions applied to them that change the shape or positioning of the element. Example 1 - 3 Applying transform style Raxtone Example 1 - 4 Enable continuous page repainting This is a tool that helps you identify elements on the page which are costly. The page will continuously repaint, showing a counter of how much painting work is happening. Paint hurts on low-end devices Raxtone Example 1 - 5 Raxtone Scrolling Scrolling areas are used to let the user move text and/or images across the devices display. Raxtone Memory leak GC A memory leak is a gradual loss of available computer memory. It occurs when a program repeatedly fails to return memory it has obtained for temporary use. JavaScript web apps can often suffer from similar memory related issues that native applications do, such as leaks and bloat but they also have to deal with garbage collection pauses. In computer science, garbage collection (GC) is a form of automatic memory management. The garbage collector, or just collector, attempts to reclaim garbage, or memory occupied by objects that are no longer in use by the program. Problem: Is my page using too much memory? Is my page free of memory leaks? How frequently is my page forcinggarbage collection? Raxtone Key point - layout thrashing Outside of initial page load problems, “layout thrashing” is the most common performance problem in dynamic web applications. This is particularly true for Single Page Applications which build and destroy views on the fly. Raxtone Solution - Minimize reflow Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the way down into the children of the modified node. Minimize CSS rules, and remove unused CSS rules. If you make complex rendering changes such as animations, do so out of