:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

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/
Baner reklamujący artykuł

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.

JIT example

  • JavaScript code you wrote, is not the same code that is executed
  • JIT is optimize code before run

Micro-optimization

  • ... is the last thing is that you optimize

requestAnimationFrame (Support IE10+)

  • jQuery still uses timeout (for a backwards compatibility reasons)

Web workers (Support IE10+)

  • main-script.js (HTML5) → workers.js (Worker)
  • communicate through postMessage function

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 (without binary data!)

JavaScript

  • use Web Workers for long-running operations
  • replace setTimeout/setInterval by requestAnimationFrame

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

window.performance - try to study it!

Less layers in Timeline tab in DevTools are better.
On jquery.com has only one layer.

Add "will-change" rules to element which are use any transformation.

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.