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
15. Layout(Optimization)
Load
Content
Parse
HTML
Compute
Style
Construct
Frames
Layout
Paint
● Every time layout 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 repaint in 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
● 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)
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
21. References
● How browsers work 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.