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