JavaScript Performance

JavaScript Performance

Examine the critical rendering path, get to know some of V8's internal Features and learn how to detect and solve a memory leak

9fd17a38660f0c98089a65c0a7da65d1?s=128

Sebastian Springer

June 21, 2016
Tweet

Transcript

  1. JavaScript Performance Q.pictures / pixelio.de

  2. Sebastian • Sebastian Springer • aus München • arbeite bei

    MaibornWolff GmbH • https://github.com/sspringer82 • @basti_springer • JavaScript Entwickler
  3. IT-Beratung & Software Engineering

  4. Wie mache ich meine Applikation Margot Kessler / pixelio.de schneller

  5. Eigene Optimierung Tim Reckmann / pixelio.de

  6. Caching von Werten let arr = ['Peter', 'Paul', 'Mary'];
 for

    (let i = 0; i < arr.length; i++) {
 console.log(arr[i]);
 } // 1.734ms
 
 
 let arr = ['Peter', 'Paul', 'Mary'];
 for (let i = 0, j = arr.length; i < j; i++) {
 console.log(arr[i]);
 } // 1.699ms
  7. Optimierung der Engine Dieter Schütz / pixelio.de

  8. Engine Optimierung let arr = ['Peter', 'Paul', 'Mary'];
 for (let

    i = 0; i < arr.length; i++) {
 console.log(arr[i]);
 } // 1.734ms
 
 for (let i = 0; i < arr.length; i++) {
 console.log(arr[i]);
 } // 0.079ms Bei einem zweiten Durchlauf
  9. Optimierung Die Optimierung von JavaScript-Quellcode ist nicht euer Problem! Die

    meiste Arbeit nimmt euch hier die Engine ab. Die Optimierung des Quellcodes bringt relativ wenig und geht meistens auf Kosten der Lesbarkeit. Also: Das Big Picture im Auge behalten!
  10. Was zählt? Die Zeit bis der Nutzer die ersten Informationen

    sieht und mit der Seite interagieren kann.
  11. Critical Rendering Path Thorben Wengert / pixelio.de

  12. Critical Rendering Path Der Prozess zwischen dem Empfang der HTML-,

    CSS- und JavaScript-Dateien und der Darstellung der Information im Browser.
  13. None
  14. None
  15. Critical Rendering Path 1. Der Browser lädt die angeforderte HTML-Datei.

    2. Der Browser liest die HTML-Datei ein und sucht nach Bildern, CSS und JavaScript. 3. Die Bilder werden heruntergeladen. 4. Die CSS-Dateien werden heruntergeladen. 5. Die JavaScript-Dateien werden heruntergeladen.
  16. Download Karl-Heinz Laube / pixelio.de

  17. Download von Dateien Ein Browser hat nur eine beschränkte Anzahl

    von parallelen Verbindungen zu einem Server. Firefox: 6 Chrome: 6 Internet Explorer: 13
  18. Download - Lösung Möglichst wenige, möglichst kleine Dateien ausliefern. CSS:

    Präprozessoren + Minifier JS: Modulsystem + Minifier Images: Sprites
  19. Download

  20. Prefetching

  21. Prefetching Sorgt dafür, dass der Browser gewisse Seiten bereits vorlädt,

    um sie schneller laden zu können. Chrome und IE unterstützen auch Prerendering, bei dem die Seite bereits vorgerendert wird. <link rel="prefetch" href="users.html" />
  22. Blockaden lichtkunst.73 / pixelio.de

  23. Render Blocking CSS Jede CSS-Datei blockiert die Darstellung der Seite

    für kurze Zeit. Je mehr CSS verwendet wird, desto länger dauert die Blockade.
  24. Render Blocking CSS Kein @import verwenden - lieber alles in

    eine Datei. Weniger CSS im Critical Rendering Path verwenden, z.B. media-Attribut im style-Tag. Wenn sonst nichts hilft: Inline CSS.
  25. Render Blocking JavaScript Alles JavaScript, das nicht direkt zum initialen

    Pageload benötigt wird, kann nachgeladen werden. Z.B. über ein generiertes Script-Tag beim load-Event. oder lazy loading Funktionalität des Modulloaders (z.B. webpack)
  26. App Shell Architecture Minimales HTML, CSS und JavaScript als Grundlage

    für das User Interface. • lädt schnell • kann gecacht werden • zeigt dynamischen Inhalt an
  27. Single Page- Applikationen Tim Reckmann / pixelio.de

  28. Der Benutzer bewegt sich in einer Applikation. Die Applikation bleibt

    über längere Zeit im Browser geöffnet. Daten werden bei Bedarf nachgeladen. Es erfolgen keine Pageloads.
  29. Der State der Applikation wird im Speicher gehalten. Die Repräsentationen

    vieler Objekte liegen im Speicher. Der Speicherverbrauch steigt über die Laufzeit an.
  30. JavaScript Engines Rudolpho Duba / pixelio.de

  31. JavaScript Engines Der Wettbewerb zwischen den Browserherstellern hat einige hoch

    optimierte Engines hervorgebracht.
  32. JavaScript Engines • Google Chrome: V8 • Mozilla Firefox: SpiderMonkey

    • Microsoft Internet Explorer: Chakra • Apple Safari: Nitro
  33. Beispiel: V8 V8 is a JavaScript engine specifically designed for

    fast execution of large JavaScript applications.
  34. Hidden Classes Bernd Kasper / pixelio.de

  35. Hidden Classes Um den Zugriff auf Eigenschaften zu beschleunigen, wird

    nicht ein Verzeichnis mit allen Eigenschaften verwendet, sondern pro Objekt Hidden Classes erzeugt, die auf den korrekten Speicherpunkt verweisen.
  36. function Point(x, y) {
 this.x = x;
 this.y = y;


    }
 
 var p1 = new Point(2, 4);
  37. function Point(x, y) {
 this.x = x;
 this.y = y;


    }
 
 var p1 = new Point(2, 4); p1 Hidden Class C0
  38. function Point(x, y) {
 this.x = x;
 this.y = y;


    }
 
 var p1 = new Point(2, 4); p1 Hidden Class C0 x: offset 0 Hidden Class C0 Wird Eigenschaft x hinzugefügt, verwende C1.
  39. Hidden Class C1 x: offset 0 function Point(x, y) {


    this.x = x;
 this.y = y;
 }
 
 var p1 = new Point(2, 4); p1 Hidden Class C2 x: offset 0 y: offset 1 Hidden Class Wird Eigenschaft y hinzugefügt, verwende C2.
  40. Hidden Classes Weitere Objekte vom selben Typ verwenden die gleichen

    Hidden Classes und deren Übergänge.
  41. JIT Compiler

  42. JIT Compiler V8 kompiliert JavaScript bei der ersten Ausführung in

    Maschinencode. Die passenden Hidden Classes werden bestimmt und der Code entsprechend gepatcht. Auch alle zukünftigen Verwendungen des Objekts werden mit der Hidden Class versehen und bei Bedarf von der Engine korrigiert.
  43. JIT Compiler # ebx = the point object cmp [ebx,<hidden

    class offset>],<cached hidden class> jne <inline cache miss> mov eax,[ebx, <cached x offset>] p1.x
  44. Garbage Collection Moni Sertel / pixelio.de

  45. Garbage Collection V8 verschiebt das Memory Management möglichst in ungenutzte

    Idle Time des Prozessors, um den Impact auf die Darstellung zu minimieren. Der Garbage Collector prüft regelmäßig den belegten Speicher und löscht nicht mehr verwendete Informationen. Nicht mehr verwendet heißt: keine Referenz mehr auf ein Objekt.
  46. Garbage Collection neu zugewiesener Speicher langlebige Objekte Speicheraufteilung: Die meisten

    Objekte haben nur eine sehr kurze Lebensspanne. young generation old generation
  47. neu zugewiesener Speicher Garbage Collection Objekt1 Objekt2 Objekt3 Objekt1 Objekt2

    Objekt3 langlebige Objekte Objekt1 Sobald ein Speicherblock voll ist, werden die verwendeten Objekte verschoben, der Speicher dann gelöscht. Beim zweiten Verschieben wird das Objekt in den old Generation Space verschoben.
  48. Garbage Collection Je weniger Objekte verschoben werden müssen, desto schneller

    ist die young generation Garbage Collection.
  49. Garbage Collection Überschreitet der old generation space ein bestimmtes Limit,

    wird der Bereich mit einem mark-and-sweep Collector aufgeräumt. Aktive Objekte werden markiert und anschließend alle nicht markierten Objekte gelöscht. Ein kompletter Durchlauf kann 100 ms dauern. Die Applikation wird in dieser Zeit angehalten. V8 kann diesen Prozess auch inkrementell in 5 ms-Schritten durchführen.
  50. JavaScript Engines Also: Werden Strukturen mehrmals verwendet, greifen viele Optimierungen

    der Engine.
  51. Repaints & Reflows Tim Reckmann / pixelio.de

  52. Repaints & Reflows Repaint: Der Browser überprüft alle Elemente auf

    ihre Sichtbarkeit, Farbe, Abmessungen und andere visuelle Eigenschaften und aktualisiert die relevanten Teile des Bildschirms.
  53. Repaints & Reflows Reflow: Der Browser berechnet das Layout der

    Seite. Reflows für weitere Elemente können ausgelöst werden (Kinder, benachbarte Elemente, im DOM folgende Elemente). Danach wird ein Repaint ausgelöst.
  54. Auslöser für Reflows • Einfügen, Entfernen oder Aktualisieren eines DOM

    Elements • Verändern des Inhalts einer Seite • Verschieben eines Elements • Animationen • Abmessungen auslesen • CSS-Eigenschaften ändern • Klassennamen eines Elements ändern • Stylesheet hinzufügen oder entfernen • Fenstergröße ändern • Scrollen
  55. Vermeiden von Reflows • Folgen von einzelnen Styleänderungen vermeiden •

    Operationen über Klassennamen zusammenfassen • Operationen außerhalb des DOMs durchführen und danach einhängen • Styles in Variablen cachen • Für Animationen besser fixe Positionierung wählen
  56. Profiling Rendering: Layoutberechnungen Painting: Darstellung der Seite

  57. Memory Leaks detlef menzel / pixelio.de

  58. Memory Leaks Machen unsere Applikationen langsam, führen zu Abstürzen und

    hohen Latenzen. Ein Memory Leak tritt auf, wenn Speicher nicht mehr gebraucht wird, aber nicht zur Garbage Collection freigegeben wird.
  59. Memory Leaks Globale Variablen Vergessene Intervalle (clearInterval!) DOM-Knoten in Datenstrukturen

    Closures
  60. Memory Leaks var theThing = null;
 var replaceThing = function

    () {
 var originalThing = theThing;
 var unused = function () {
 if (originalThing)
 console.log("hi");
 };
 theThing = {
 longStr: new Array(1000000).join('*'),
 someMethod: function () {
 console.log(someMessage);
 }
 };
 };
 setInterval(replaceThing, 100); http://info.meteor.com/blog/an-interesting-kind-of-javascript-memory-leak
  61. Memory Leaks Memory läuft langsam voll

  62. Memory Leaks var theThing = null;
 var replaceThing = function

    () {
 var originalThing = theThing;
 var unused = function () {
 if (originalThing)
 console.log("hi");
 };
 theThing = {
 longStr: new Array(1000000).join('*'),
 someMethod: function () {
 console.log(someMessage);
 }
 }; originalThing = null;
 };
 setInterval(replaceThing, 100); http://info.meteor.com/blog/an-interesting-kind-of-javascript-memory-leak Deckel drauf!
  63. vs.

  64. Animationen Tim Reckmann / pixelio.de

  65. JavaScript Animationen Bei einer Animation wird nach einer bestimmten Zeit

    eine CSS- Eigenschaft eines Objekts verändert. Ist die gewählte Zeitspanne gering genug, entsteht eine mehr oder weniger flüssige Animation.
  66. function move(elem, to) {
 var left = 0;
 function frame()

    {
 left++;
 elem.style.left = left + 'px';
 if (left === to) {
 clearInterval(id)
 }
 }
 var id = setInterval(frame, 10);
 }
 
 document.getElementById('outer').onclick = function () {
 move(this.children[0], 500);
 }; <div id="outer" class="outer">
 <div id="inner" class="inner"></div>
 </div> HTML CSS
  67. Nachteile JavaScript wird über die CPU ausgeführt. Muss sich also

    die Ressourcen mit vielen anderen Programmen teilen. GC-Cycles können zu unschönen Effekten führen, da die Ausführung angehalten wird. Bei hoher CPU-Last sind die Animationen nicht mehr flüssig.
  68. CSS-Animationen

  69. CSS-Animationen CSS-Animationen werden durch die GPU berechnet und belasten die

    CPU nicht. CSS-Animationen erscheinen flüssiger als JavaScript- Animationen. Der Browser kann die Animationen optimieren (z.B. bei nicht sichtbaren Tabs).
  70. document.getElementById('outer').onclick = function () {
 this.children[0].className += ' move';
 };

    #inner {
 transition: left 5s linear;
 }
 .move {
 left: 500px;
 } <div id="outer" class="outer">
 <div id="inner" class="inner"></div>
 </div> HTML CSS JS
  71. CSS-Animationen Wenn Transitionen nicht reichen, kann man über Animationen mit

    @keyframes noch wesentlich mehr herausholen. Es gibt auch Generatoren wie z.B. http://cssanimate.com/
  72. Fragen? Rainer Sturm / pixelio.de

  73. KONTAKT Sebastian Springer sebastian-springer@maibornwolff.de MaibornWolff GmbH Theresienhöhe 13 80339 München

    @basti_springer https://github.com/sspringer82