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 KachuraMiejsce: 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
- composite layers
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
postMessagefunction
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/setIntervalbyrequestAnimationFrame
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, usetransform: 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 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.