From Zero to Hero – Web Performance
0 likes701 views
The document discusses various aspects of optimizing web performance, particularly focusing on JavaScript and the rendering process within browsers. Key topics include the critical rendering path, the impact of caching and service workers, strategies to minimize render-blocking, and the performance advantages of using CSS animations over JavaScript animations. Additionally, it highlights issues like memory leaks and garbage collection while offering insights into how modern JavaScript engines enhance execution efficiency.
![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](https://image.slidesharecdn.com/web-performance-171026073533/85/From-Zero-to-Hero-Web-Performance-6-320.jpg)
![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](https://image.slidesharecdn.com/web-performance-171026073533/85/From-Zero-to-Hero-Web-Performance-8-320.jpg)
![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](https://image.slidesharecdn.com/web-performance-171026073533/85/From-Zero-to-Hero-Web-Performance-48-320.jpg)
![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](https://image.slidesharecdn.com/web-performance-171026073533/85/From-Zero-to-Hero-Web-Performance-69-320.jpg)
![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](https://image.slidesharecdn.com/web-performance-171026073533/85/From-Zero-to-Hero-Web-Performance-74-320.jpg)
From Zero to Hero – Web Performance
- 1. Web Performance Q.pictures / pixelio.de
- 3. Basti • Sebastian Springer • from Munich • work @ MaibornWolff • https://github.com/sspringer82 • @basti_springer • JavaScript Developer
- 4. How to speed up Margot Kessler / pixelio.de your application
- 5. Do your own optimizations Tim Reckmann / pixelio.de
- 6. 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
- 7. Optimisations of the engine Dieter Schütz / pixelio.de
- 8. 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
- 9. 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!
- 10. What matters? The time until your user sees the first information and is able to interact with your application.
- 11. Critical Rendering Path Thorben Wengert / pixelio.de
- 12. Critical Rendering Path Process between receiving HTML, CSS and JS files and rendering the information in the users browser.
- 15. Critical Rendering Path 1. Processing HTML -> DOM 2. Processing CSS -> CSSOM 3. Building the Render Tree 4. Rendering
- 18. 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/
- 19. Measuring
- 20. Download Karl-Heinz Laube / pixelio.de
- 21. Downloading files A browser only has a limited number of parallel connections to a server. Firefox: 6 Chrome: 6 Internet Explorer: 13
- 22. Download Deliver only a few small files CSS: Preprocessors + Minifier JS: Modulesystem + Minifier Images: Sprites
- 23. Download
- 24. Service Worker
- 25. 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 offline.
- 26. Service Worker
- 28. Render Blocking CSS Receiving CSS files is blocking the render process of a page. The more CSS is used, the longer the blocking takes.
- 29. Render Blocking CSS Do not use @import in your CSS - better pack everything in just one file. 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
- 30. 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
- 31. App Shell Architecture Minimal HTML, CSS and JavaScript as foundation for the User Interface. • loads fast • can be cached • shows dynamic content
- 32. Single Page Applications Tim Reckmann / pixelio.de
- 33. 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
- 34. Application state is stored in memory. Object representations are stored in memory. Memory consumption increases over time.
- 35. JavaScript Engines Rudolpho Duba / pixelio.de
- 36. JavaScript Engines The competition between browser manufacturers brought up some highly optimised engines.
- 37. JavaScript Engines • Google Chrome: V8 • Mozilla Firefox: SpiderMonkey • Microsoft Internet Explorer: Chakra • Apple Safari: Nitro
- 38. Example: V8 V8 is a JavaScript engine specifically designed for fast execution of large JavaScript applications.
- 39. Hidden Classes Bernd Kasper / pixelio.de
- 40. 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.
- 41. function Point(x, y) { this.x = x; this.y = y; } var p1 = new Point(2, 4);
- 42. function Point(x, y) { this.x = x; this.y = y; } var p1 = new Point(2, 4); p1 Hidden Class C0
- 43. 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.
- 44. 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
- 45. Hidden Classes Additional Object of the same type share the same hidden classes and their transitions.
- 46. JIT Compiler
- 47. JIT Compiler V8 compiles JavaScript code to machine code at first 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 there’s a mismatch the engine corrects it accordingly.
- 48. 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
- 49. Garbage Collection Moni Sertel / pixelio.de
- 50. 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.
- 51. Garbage Collection new assigned memory older objects Memory structure Most objects only have a short lifecycle young generation old generation
- 52. 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 it’s moved to old generation space.
- 53. Garbage Collection To speed up GC, you should try to move as few objects as possible.
- 54. 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.
- 55. JavaScript Engines A lot optimisations of a browser engine only work for structures which are used multiple times.
- 56. Repaints & Reflows Tim Reckmann / pixelio.de
- 57. Repaints & Reflows Repaint: Browser checks all elements for visibility, color, measurements and other visual properties.
- 58. Repaints & Reflows Reflow: The browser recalculates the layout of the page. A reflow might cause reflows for other elements (children, or siblings). After a reflow a repaint is triggered.
- 59. Trigger for reflows • 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
- 60. Omitting reflows • 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 fixed positions for animations
- 61. Profiling Rendering: Recalculate Layout Painting: Display the page
- 62. Memory Leaks detlef menzel / pixelio.de
- 63. 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.
- 64. Memory Leaks Global variables forgotten intervals DOM elements in JS variables Closures
- 65. 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
- 66. Memory Leaks Memory fills up
- 67. Animations Tim Reckmann / pixelio.de
- 68. JavaScript Animations If you’re doing animations with JavaScript, you periodically change certain CSS properties of an object. At 60 frames per second an animation is looking fluid.
- 69. 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
- 70. Disadvantages JavaScript is executed in the CPU and shares this resource with a lot of other processes. GC cycles can slow performance further down. If your system is under load, animations are not fluid anymore.
- 71. Alternative Web Animations API https://developer.mozilla.org/en-US/docs/Web/API/ Web_Animations_API/Using_the_Web_Animations_API Control your animations with JavaScript Is not supported by all browsers yet.
- 72. CSS animations
- 73. CSS animations CSS animations are calculated by the GPU and don’t create load on the CPU. CSS animations are more fluid than their JS counterpart. Your browser is able to optimise your CSS animations.
- 74. 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
- 75. CSS animations If transitions are not enough, you can control animations with @keyframes. There are a lot of generators online (e.g. http:// cssanimate.com)
- 76. Prefetching
- 77. Prefetching Your browser prefetches certain pages in order to load faster if a user is browsing to that page. All browsers except Safari support this attribute. Chrome (49), IE (not Edge) and Opera are supporting prerendering, where your browser prerenders the page to further speed up display of a page. <link rel="prefetch" href="users.html" />
- 78. How do others handle performance?
- 79. Performance @facebook A very good example of web performance tuning is the react library. The virtual DOM provides an in memory structure on which all the changes are performed. Afterwards all necessary operations are calculated and performed in an optimised operation to the actual DOM.
- 80. More performance @facebook To further improve performance, react introduces a full rewrite of the reconciliation algorithm with version 16. In this version there are different schedulers which determine when a change should be performed.
- 81. Questions? Rainer Sturm / pixelio.de
- 82. CONTACT Sebastian Springer sebastian.springer@maibornwolff.de MaibornWolff GmbH Theresienhöhe 13 80339 München @basti_springer https://github.com/sspringer82