WebKit based browser graphics internals for web developers

Event: FINHTML5 ( 2014 )Length: 87 mins
Talker:
HTML5

Web page performance and appearance matter for usability. There are plenty of interesting tips on how to create smoother, faster, better looking web applications. Why do these tips work? What happens inside a browser, why are the techniques working and what are the boundary conditions? This presentation sheds light on these useful graphics related techniques from the perspective of technical implementations in currently available browsers that are based on WebKit, a browser engine.

The presentation gives some technical history of current WebKit based browsers such as Safari, Android WebKit browser and Chrome.

In the presentation, we look into how WebKit draws web pages and how the HTML tags and CSS declarations make their way into pixels on screen. Building on this, the presentation explains why some operations on the page are fast and why some are slow.

Covered topics include:

  1. How CSS transformations are implemented, when do they break and why?
  2. Examples of tricky content for current mobile browsers: CSS fixed positions
  3. Why browser runtime architecture affects how JS should be authored

Speaker Info: Kimmo Kinnunen, NVIDIA, Senior Software engineer. Kimmo is a mobile browser developer. He has been involved in the WebKit based browsers and engines since the days of the initial WebCore tarball drops.

Video: FINHTML5 Talks - WebKit based browser graphics internals for web developers by Kimmo Kinnunen.

Web page performance and appearance matter for usability. There are plenty of interesting tips on how to create smoother, faster, better looking web applications. Why do these tips work? What happens inside a browser, why are the techniques working and what are the boundary conditions? This presentation sheds light on these useful graphics related techniques from the perspective of technical implementations in currently available browsers that are based on WebKit, a browser engine. The presentation gives some technical history of current WebKit based browsers such as Safari, Android WebKit browser and Chrome. In the presentation, we look into how WebKit draws web pages and how the HTML tags and CSS declarations make their way into pixels on screen. Building on this, the presentation explains why some operations on the page are fast and why some are slow. Covered topics include: How CSS transformations are implemented, when do they break and why? Examples of tricky content for current mobile browsers: CSS fixed positions Why browser runtime architecture affects how JS should be authored