Na5hnr4mwqgre8x31kcl
SkillsCast

Done in 0.0166666666 Seconds

10th July 2019 in London at Business Design Centre

There are 71 other SkillsCasts available from FullStack London 2019 - The Conference on JavaScript, Node & Internet of Things

Please log in to watch this conference skillscast.

Https s3.amazonaws.com prod.tracker2 resource 41088130 skillsmatter conference skillscast o9nohu

In order to ensure a smooth, jank-free experience on the web, we need to render a constant stream of 60 frames per second. This means that the browser has 16 milliseconds to execute our code and render the changes on the screen. Let’s find out how the rendering pipeline works and how JavaScript and CSS might affect the rendering performance.

In this talk, Alex is going to talk about the event loop and about the rendering pipeline. You will look at CSS rules from a different perspective and understand the concept of a CSS reflow / layout. You will also look into Browser APIs and their impact on performance. Throughout the talk, Alex will mention the benefits of modern frameworks, the advantage of using a virtual DOM based rendering library and you will learn how to use the Chrome Dev Tools to identify rendering bottlenecks and issues.

  • Why do you get laggy websites?
  • Event loop recap
  • The advantages of a vDOM implementation
  • How the rendering pipeline works
  • Which CSS rules trigger which stages from the rendering pipeline
  • The will-change property, how to us it
  • setTimeout vs requestAnimationFrame
  • offloading to webworkers

YOU MAY ALSO LIKE:

Thanks to our sponsors

Done in 0.0166666666 Seconds

Alex Moldovan

Alex is one of the founders of JSHeroes and an active voice in the JavaScript community. His mission is to help and inspire others to build an accessible, secure and faster web.

SkillsCast

Please log in to watch this conference skillscast.

Https s3.amazonaws.com prod.tracker2 resource 41088130 skillsmatter conference skillscast o9nohu

In order to ensure a smooth, jank-free experience on the web, we need to render a constant stream of 60 frames per second. This means that the browser has 16 milliseconds to execute our code and render the changes on the screen. Let’s find out how the rendering pipeline works and how JavaScript and CSS might affect the rendering performance.

In this talk, Alex is going to talk about the event loop and about the rendering pipeline. You will look at CSS rules from a different perspective and understand the concept of a CSS reflow / layout. You will also look into Browser APIs and their impact on performance. Throughout the talk, Alex will mention the benefits of modern frameworks, the advantage of using a virtual DOM based rendering library and you will learn how to use the Chrome Dev Tools to identify rendering bottlenecks and issues.

  • Why do you get laggy websites?
  • Event loop recap
  • The advantages of a vDOM implementation
  • How the rendering pipeline works
  • Which CSS rules trigger which stages from the rendering pipeline
  • The will-change property, how to us it
  • setTimeout vs requestAnimationFrame
  • offloading to webworkers

YOU MAY ALSO LIKE:

Thanks to our sponsors

About the Speaker

Done in 0.0166666666 Seconds

Alex Moldovan

Alex is one of the founders of JSHeroes and an active voice in the JavaScript community. His mission is to help and inspire others to build an accessible, secure and faster web.

Photos