Co to znaczy szybko ?

Co to znaczy płynnie ?

===

Architektura

Context Switching

A co z mobile?

Skrypty

Reflow / Layout

... czyli las w przeglądarce ;)

Repaint

... czyli przenosimy las na ekran ;)

A co z GPU?

Bateria

• Nadmierne wykorzystanie WiFi / 3G / 4G
• Nadmierne wykorzystanie CPU i GPU

Google Chrome

Zdarzenia

Google Chrome

Profilowanie

Google Chrome

Pamięć

Google Chrome

Sieć

Google Chrome

Konsola

Google Chrome

Renderowanie

Firefox

IE 9 / 10

IE 11

Inne

Najważniejsze to dobrze poznać narzędzia deweloperskie z ulubionej przeglądarki

Navigation Timing API

Navigation Timing API

ySlow

PageSpeed

Google Speed Tracer

Google Chrome Web Performance Toolkit

Chrome Hidden Pages

• chrome://version/
• chrome://tracing
• chrome://histograms/DNS.ResolveSuccess
• ... i wiele, wiele innych
• chrome://flags

Windows Performance Toolkit

V8 profiler - D8

Narzędzia

• jsperf
• Browserscope
• d8, node --profiler

Dlaczego?

function benchmark() {
  function fn(a, b, c, d) {
    return a + b + c + d;
  }

  var start = new Date;
  for (var n = 0; n < 1e6; n++) {
    fn('a', 'b', 'c', 'd');
  }
  return (new Date - start);
}
            

Dlaczego?

function benchmark() {
  var start = new Date;
  for (var n = 0; n < 1e6; n++) {
    // Ponieważ znamy fn, rozwijamy ją w miejscu wywołania:
    a + b + c + d;
  }
  return (new Date - start);
}
            

Dlaczego?

function benchmark() {
  var start = new Date;
  for (var n = 0; n < 1e6; n++) {
    // Wynik nie jest nigdzie używany więc kompilator go usunie...
  }
  return (new Date - start);
}
            

Dlaczego?

function benchmark() {
  var start = new Date;

  // ... razem z pętlą for, która była teraz pusta ;).

  return (new Date - start);
}
            

JavaScript

Pamięć

DOM

Sieć