From code to pixels in a Blink

Let’s take a journey through the browser’s rendering pipeline. How the code that we write, HTML, CSS and JavaScript gets converted into pixels on the screen in a Blink of an eye. And how we can leverage that information to understand why industry best practices are the way they are and write performant applications. Since the internals of browsers engines varies between vendors, let’s focus on Google Chrome’s rendering engine, Blink. The key takeaways of the talk will be bird’s eye overview of Blink’s architecture, how Blink’s rendering pipeline works, how APIs like requestAnimationFrame(), requestIdleCallback() fit into the picture, how to decipher the complex Chrome dev tools performance flame graph, what kind of parallelism browsers allow us to work with and how to use all these information to create highly performant frontend applications.