Download as PDF, PPTX
![Javascript Optimization
Scoping
● Scope variables and functions properly. Avoid using the global
namespace (use var statement)
● Global variables are the deepest in the scope chain
● with and try,catch add a level to scope chain
● Closure also add to a level in scope chain
Activation object
this
Scope Chain
Execution Context
0
window
arguments
[]
variables
undefined
Scope
1
Global
document
(object)
window
(object)](https://image.slidesharecdn.com/performancebrowser-140205083040-phpapp01/85/Performance-browser-17-320.jpg)
More Related Content
Performance (browser)
- 1.
- 2. How browsers work? ●Rendering Engine (Webkit, Blink, Gecko) ● Javascript Engine (Nitro, V8, *monkey) ● Networking ● Persistence
- 3. Browser flow Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Fromhitting a URL to the usable web page
- 4. Loading Content Load Content Parse HTML Compute Style Construct Frames Layout ● HTTPRequest ● DNS lookup, Data fetching, Server side processing ● HTTP Response Paint
- 5. Parsing HTML Load Content Parse HTML Compute Style Construct Frames Layout Paint ● HTMLis a serialized tree ● Grammatical parsing based on doctype(DTD) or quirks ● Loading external files (JS, CSS, Images) ● Creates content tree ● Done on adding HTML http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-3.xhtml
- 6. Computing Style Load Content Parse HTML Compute Style Construct Frames Layout Paint ● CSSselector matching ● Computed Stylesheet ● CSS parser ● Computes style for each node ● Cascaded (Browser native style, external, inline) ● Done on adding Styles http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-8.xhtml
- 7. Construct Frames Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Createrender tree ● Elements in render tree are called frames or render objects ● Tree has only displaying elements ● Not one to one mapped to content tree http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-6.xhtml
- 8. Layout (Reflow) Load Content Parse HTML Compute Style Construct Frames Layout ● Layingout the elements using content tree, render tree, computed styles ● Where to position the element wrt to the other elements and how much space it will take ● Done when style or html changes lead to layout changes Paint
- 9. Paint (Repaint) Load Content Parse HTML Compute Style Construct Frames Layout ● Paintsthe layout on to the viewport using 2D rendering api ● Tells GPU how to render the document ● Modern browsers use compositing and hardware acceleration of GPU to provide faster paint cycles ● Done when layout, or styles changes and even on scroll. Paint
- 10. Optimizations The way wewrite code can be used to optimize each step the browser takes to build a webpage and render it to user
- 11. Loading Content (Optimization) Load Content Parse HTML Compute Style Construct Frames Layout ●Minify scripts and CSS, make sprite images ● GZIP data from server ● Serve static content from cookieless domains, use multiple domains for serving static content ● Reduce network round trips(Combine script,css, images), Redirects ● Utilise browser caching to the max Paint
- 12. Parse HTML (Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ●Resources are loaded as the HTML is parsed ● Scripts are blocking in older browsers. (no document. write) ● FOUC (Flash of unstyled content),no @import ● Use an optimized approach of having basic scripts to show some state in the top of the page and rest of the scripts (majority) at the bottom
- 13. Computing Style(Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Specificityof selectors ● Parsed from right for each node ● No inline styles ● Club dynamic style changes into one (using a className) http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-8.xhtml
- 14. Construct Frames (Optimization) Load Content Parse HTML Compute Style Construct Frames ●Frames are created only for visible items ● Visibility vs Display property Layout Paint
- 15. Layout(Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Every timelayout changes reflow is done. ● Can get really expensive because any change in any element can result in complete reflow of the page. ● Avoid as much DOM manipulation as possible ● Club all DOM insertion into a single object (DocumentFragment) and insert into dom once. ● DOM reflow happens even on querying layout properties
- 16. Paint(Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Minimise repaintin a page as much as possible ● Avoid changes while scrolling ● Try to use new CSS transform and animate rather than modifying the elements top/left properties (Avoid jquery animations as they cause both reflow and repaint) ● Don't over do optimization by trying to dispose of items outside the viewport (Maybe faster in older browsers but can make scrolling in most modern browsers slow)
- 17. Javascript Optimization Scoping ● Scopevariables and functions properly. Avoid using the global namespace (use var statement) ● Global variables are the deepest in the scope chain ● with and try,catch add a level to scope chain ● Closure also add to a level in scope chain Activation object this Scope Chain Execution Context 0 window arguments [] variables undefined Scope 1 Global document (object) window (object)
- 18. Javascript Optimization Data Access ●Local variables and literals fastest ● Global variables are the deepest in the scope chain ● Accessing properties of objects and elements of array is more expensive ● If a property is accessed in a loop more than once store it in a local variable Loops ● Avoid for each, for in, and other function based iterators as they access all properties of the array object not just the elements
- 19. Demo ● http://codepen.io/paulirish/pen/nkwKs vs http://codepen.io/paulirish/pen/LsxyF ● Repaintdemo : http://175.41.136.68:8090
- 20. Tools ● Chrome DevTools ● Pagespeed ● Yslow ● Fiddler
- 21. References ● How browserswork http://taligarsiel. com/Projects/howbrowserswork1.htm ● Speed up Your Javascript : http://youtu. be/mHtdZgou0qU ● Faster HTML and CSS: Layout Engine Internals for Web Developers be/a2_6bGNZ7bA http://youtu.