Browser Rendering Optimization
Inspired from Udacity's Browser Rendering Optimization course
Part 1: Javascript
Agenda
- Understand Browser Rendering Process
- Identify sources of 'janky'
- Solve performance problem
- Demo
Understand Browser Rendering Process
http://taligarsiel.com/Projects/howbrowserswork1.htm
Webkit main flow when initialize page
Understand Browser Rendering Process
http://taligarsiel.com/Projects/howbrowserswork1.htm
One frame rendering process
Identify sources of 'janky'
Solve performance problem
- requestAnimationFrame()
- WebWorker
Demo
References
- http://taligarsiel.com/Projects/howbrowserswork1.htm
- https://www.udacity.com/course/browser-rendering-optimization