Modern FrontEnd Performance

Faster APIs

The regular stuff

Concatenation

Minification

Small Images

CSS Icons

Demo 

window.setInterval(() => {
        this.$scope.$apply(function(){
          this.currentTime = new Date();
        });
      }, 1000);

Understanding a frame

Lets Profile !

So javascript is the only bottleneck ?

Demo

 document.querySelector('.set-size').addEventListener('click', function(event) {
    // get all the paragraphs
    var ps = document.querySelectorAll('.lipsum-blocks p');
    var i = ps.length;
    var size;
     while (i--) {
        // looking at the sizer's offsetWidth on each loop - this is the slow bit
        ps[i].style.width = sizer.offsetWidth + 'px';
     }
    event.preventDefault();
  });

Demo - Painting Teams

Demo - Painting GDocs

Optimizing CSS

  1. Reduce Complexity of the CSS Selectors
  2. Reduce the number of elements on which style calculation must be calculated.
  3. Reduce paint areas through layer promotion

Style Invalidation in Blink

  1. Response: respond in under 100ms

  2. Animation: produce a frame in 10ms

  3. Idle: maximize idle time

  4. Load: deliver content under 1000ms

Performance Fundamentals

Are there more ?

  1. Service Workers
  2. Web Workers
  3. HTTP 2 

Real world case studies ?

  1. https://engineering.gosquared.com/optimising-60fps-everywhere-in-javascript
  2. http://blog.atom.io/2014/07/02/moving-atom-to-react.html

http://perf.rocks/articles/

Modern FrontEnd Performance

By Abhik Mitra

Made with Slides.com

Modern FrontEnd Performance

  • 917

More from Abhik Mitra