Browser Rendering Optimization

Dzięki firmie CodiLime mogłem dziś uczestniczyć w spotkaniu poświęconym optymalizacji aplikacji uruchomionych w przeglądarce internetowej.

Oficjalny profil spotkanie dostępny na Meetup.com.

_Prelegent: Aliosha Kachura

Miejsce: MIMUW. Sala 4420

Liczba osób na sali: 23 developerów

Spotkanie było prowadzone w języku angielskim

Slajdy slides.com/alex-kachura/bro/_

Layout

• paint
  • composite layers
    • developer does not control them
  • gpu - put picture on the screen

App Lifecycles - RAIL / LAIR

	ms
Response	100
Animate (scrolling) - each frame of animation)	16 = 1s/60 frames
Idle - nonessential work	50ms
Load	1000ms

Typical frame

• JavaScript
• Style
• Layout (geometry)
• Effected element painted
• Composite together

You cannot optimize before measure it!

Timeline in DevTools - very useful (today: the Performance panel).

JIT example

• JavaScript code you wrote, is not the same code that is executed
• JIT optimizes code while it runs, based on profiling of hot code paths

Micro-optimization

• … is the last thing is that you optimize

requestAnimationFrame (Support IE10+)

• jQuery still uses timeout (for a backwards compatibility reasons; update: jQuery 3.0 from 2016 switched animations to requestAnimationFrame)

Limitations of Web Workers

• longer initial start and post messages
• every worker consumes some amount of memory
• no access to DOM, Window
• results from workers are copied with the structured clone algorithm (binary data like ArrayBuffer is copied too, or can be transferred without copying as a transferable object)

JavaScript

• use Web Workers for long-running operations
• replace setTimeout/setInterval by requestAnimationFrame (for visual updates only)

Styles

• reduce complexity of selectors
• use BEM (block element modifier) methodology
• reduce number of elements on which style calculation must be calculated

Layout

• flexbox
• don’t trigger the layout

Paint and Compositing

• CSS Triggers (by Paul Lewis) - csstriggers.com/
• don’t animate the width, use transform: scale(x); rule instead
• CSS property will-change: transform; (caniuse.com/#search=will-change)

window.performance - try to study it!

Less layers in Timeline tab (today: Performance panel) in DevTools are better.

On jquery.com has only one layer.

Add “will-change” only to elements that are about to be animated, and remove it when the animation ends. Every element with “will-change” gets its own layer, which costs GPU memory, so adding it everywhere makes rendering slower, not faster.

Podsumowanie

Całe spotkanie było poświęcone optymalizacji - jest to interesujący zabieg zrealizowany przez organizatorów. Takie tematyczne spotkania mają to do siebie, że wszelkie pytanie i wątpliwości dotyczą tylko jednego tematu.

Temat optymalizacji stron internetowych w dzisiejszych czasach jest tematem dosyć popularnym. Początkujący developerzy nie zwracają na to uwagi, ale w miarę rozwoju zaczynają rozumieć, istotną kwestię optymalizacji.

Po spotkaniu najaktywniejsi dostali upominki od CodiLime - sponsora dzisiejszego spotkania.

Cya! 👋