from zero to hero – web performance

Click here to load reader

Post on 21-Jan-2018

119 views

Category:

Software

3 download

Embed Size (px)

TRANSCRIPT

  1. 1. Web Performance Q.pictures / pixelio.de
  2. 2. Basti Sebastian Springer from Munich work @ MaibornWolff https://github.com/sspringer82 @basti_springer JavaScript Developer
  3. 3. How to speed up Margot Kessler / pixelio.de your application
  4. 4. Do your own optimizations Tim Reckmann / pixelio.de
  5. 5. Caching values const arr = ['Peter', 'Paul', 'Mary']; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } // 1.734ms const arr = ['Peter', 'Paul', 'Mary']; for (let i = 0, j = arr.length; i < j; i++) { console.log(arr[i]); } // 1.699ms
  6. 6. Optimisations of the engine Dieter Schtz / pixelio.de
  7. 7. Remember your optimisations? const 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 2nd run
  8. 8. Optimisation Optimising your JavaScript code is not your problem. Most of the work is done by the engine itself. You just have to know how your environment works. Optimising your code is pointless, as it only reduces readability. Keep the big picture in mind!
  9. 9. What matters? The time until your user sees the rst information and is able to interact with your application.
  10. 10. Critical Rendering Path Thorben Wengert / pixelio.de
  11. 11. Critical Rendering Path Process between receiving HTML, CSS and JS les and rendering the information in the users browser.
  12. 12. Critical Rendering Path 1. Processing HTML -> DOM 2. Processing CSS -> CSSOM 3. Building the Render Tree 4. Rendering
  13. 13. Processing HTML https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model https://creativecommons.org/licenses/by/3.0/
  14. 14. Processing CSS https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model https://creativecommons.org/licenses/by/3.0/
  15. 15. Building the Render Tree https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model https://creativecommons.org/licenses/by/3.0/
  16. 16. Measuring
  17. 17. Download Karl-Heinz Laube / pixelio.de
  18. 18. Downloading les A browser only has a limited number of parallel connections to a server. Firefox: 6 Chrome: 6 Internet Explorer: 13
  19. 19. Download Deliver only a few small les CSS: Preprocessors + Minier JS: Modulesystem + Minier Images: Sprites
  20. 20. Download
  21. 21. Service Worker
  22. 22. Service Worker Separate browser process that act as a proxy between browser and server. A service worker is able to intercept and answer a request to a server directly. Service workers are able to speed up applications and make them available ofine.
  23. 23. Service Worker
  24. 24. Blockades lichtkunst.73 / pixelio.de
  25. 25. Render Blocking CSS Receiving CSS les is blocking the render process of a page. The more CSS is used, the longer the blocking takes.
  26. 26. Render Blocking CSS Do not use @import in your CSS - better pack everything in just one le. Use as little CSS as possible in the Critical Rendering Path. The media attribute helps to reduce the processed CSS. Last resort solution: inline CSS
  27. 27. Render Blocking JavaScript All of the JavaScript that is not necessary for the initial page load can be loaded at a later time. Generating a script tag at the load event. or lazy loading with a module loader such as webpack
  28. 28. App Shell Architecture Minimal HTML, CSS and JavaScript as foundation for the User Interface. loads fast can be cached shows dynamic content
  29. 29. Single Page Applications Tim Reckmann / pixelio.de
  30. 30. The user is moving within the application. The application stays open in the browser over a long period of time. Data is loaded over the whole lifecycle of the application. There are no additional page loads
  31. 31. Application state is stored in memory. Object representations are stored in memory. Memory consumption increases over time.
  32. 32. JavaScript Engines Rudolpho Duba / pixelio.de
  33. 33. JavaScript Engines The competition between browser manufacturers brought up some highly optimised engines.
  34. 34. JavaScript Engines Google Chrome: V8 Mozilla Firefox: SpiderMonkey Microsoft Internet Explorer: Chakra Apple Safari: Nitro
  35. 35. Example: V8 V8 is a JavaScript engine specically designed for fast execution of large JavaScript applications.
  36. 36. Hidden Classes Bernd Kasper / pixelio.de
  37. 37. Hidden Classes For property access usually one big directory is used. To speed up property access hidden classes per object is used. The hidden class points to the location of a property in memory.
  38. 38. function Point(x, y) { this.x = x; this.y = y; } var p1 = new Point(2, 4);
  39. 39. function Point(x, y) { this.x = x; this.y = y; } var p1 = new Point(2, 4); p1 Hidden Class C0
  40. 40. 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 Property x added - use C1.
  41. 41. 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 Property y added - use C2
  42. 42. Hidden Classes Additional Object of the same type share the same hidden classes and their transitions.
  43. 43. JIT Compiler
  44. 44. JIT Compiler V8 compiles JavaScript code to machine code at rst run. The engine tries to guess the according hidden classes and patches the machine code. All future usages of the object are using the same hidden classes. If theres a mismatch the engine corrects it accordingly.
  45. 45. JIT Compiler # ebx = the point object cmp [ebx,], jne mov eax,[ebx, ] p1.x
  46. 46. Garbage Collection Moni Sertel / pixelio.de
  47. 47. Garbage Collection V8 does memory management when the processor is idle to reduce impact to the application. The Garbage Collector regularly checks used memory and frees unused memory. Unused means: No more references to the object in memory.
  48. 48. Garbage Collection new assigned memory older objects Memory structure Most objects only have a short lifecycle young generation old generation
  49. 49. new assigned memory Garbage Collection Object1 Object2 Object3 Object1 Object2 Object3 older objects Object1 As soon as one block is full, every used object is moved to another block. The old block is emptied afterwards. If an object is moved for the second time its moved to old generation space.
  50. 50. Garbage Collection To speed up GC, you should try to move as few objects as possible.
  51. 51. Garbage Collection Where the young generation space is cleaned up with a scavenge algorithm which is using a lot of memory, the old generation space is cleaned up with a mark-and-sweep collector. Active objects are marked, all unmarked objects are deleted. A complete run takes 100 ms. Your application is stopped for this time. V8 is able to do this process in increments which take 5ms each.
  52. 52. JavaScript Engines A lot optimisations of a browser engine only work for structures which are used multiple times.
  53. 53. Repaints & Reows Tim Reckmann / pixelio.de
  54. 54. Repaints & Reows Repaint: Browser checks all elements for visibility, color, measurements and other visual properties.
  55. 55. Repaints & Reows Reow: The browser recalculates the layout of the page. A reow might cause reows for other elements (children, or siblings). After a reow a repaint is triggered.
  56. 56. Trigger for reows Addition, removal or update of a DOM element Change of the content of a page Movement of an element Animations Reading measurements Change of CSS property Change of the class name of an element Addition or removal of a stylesheet Change of window size Scrolling
  57. 57. Omitting reows Omit series of single style changes Collect operations in CSS classes Detach elements, change them, attach them to the DOM Cache styles in JS variables Use xed positions for animations
  58. 58. Proling Rendering: Recalculate Layout Painting: Display the page
  59. 59. Memory Leaks detlef menzel / pixelio.de
  60. 60. Memory Leaks Memory leaks slow down an application, cause crashes and increase latency. A memory leak occurs, if memory is not used any more but not freed by the GC.
  61. 61. Memory Leaks Global variables forgotten intervals DOM elements in JS variables Closures
  62. 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); } }; }; setInterval(replaceThing, 100); http://info.meteor.com/blog/an-interesting-kind-of-javascript-memory-leak
  63. 63. Memory Leaks Memory lls up
  64. 64. Animations Tim Reckmann / pixelio.de
  65. 65. JavaScript Animations If youre doing animations with JavaScript, you periodically change certain CSS properties of an object. At 60 frames per second an animation is looking uid.
  66. 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); }; HTML CSS
  67. 67. Disadvantages JavaScript is executed in the CPU and shares this resource wi