Performance at Front End

Do you think the modern web technologies bring more performance challenges than before?

What issues are relevant to "Frond End Performance"

UX Factors 

  • Loading Performance
  • Render Performance
  • Memory usage

Loading Performance 

- Critical Rendering Path

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>First Painting</title>
    <style>
     body {background-image: url('data:image/png;base64,BvdaSDKsddsa...')}  
    </style>
    <script>
      ...
    </script> 
    <link href="static/css/main.b804254e.css" rel="stylesheet">
    <script type="text/javascript" src="static/js/lib.js"></script>
</head>
<body>
    <ul>
        <li>First Painting Time</li>
        <li>Smooth Animation</li>
        <li>Memory Usage</li>
    </ul>
</body>
</html>

How to optimise following code for faster first painting? 

Browser Rendering Pipeline - First Half

Render Tree

What problems introduced by SPA

  • Bundle size
  • The HTML of views are built in browser

TIPS for CRP Optimisation

  • SSR
  • Minify bundled CSS and JS and compress them
  • Split bundle.js, vendor.js and etc
  • Split CSS from js bundle if you use import keyword to add CSS reference
  • Mark js references with async if they are not mandatary for initial loading
  • Mark CSS with preload if they are not mandatary for initial loading
  • Avoid CSS selectors, use BEM instead
  • Never transfer non-block resource into block resource

Rendering Performance

Fluent Animation and DOM Change

Browser Rendering Pipeline - Second Half

<script>
  const boxes = Array.from(document.getElementsByClassName('box'));
  const update = () => {
    boxes.forEach((box, i) => {
      box.style.width = (box.getBoundingClientRect().width + 1) + 'px';
    })
    setTimeout(update, 0);
  }
  update();
</script>

How to optimise following code?

<script>
  const container = document.getElementById('container');
  const update = () => {
    const fragment = document.createDocumentFragment();

    for (let i = 0; i < 100; i++) {
      const box = document.createElement('div');
      fragment.appendChild(box);
    }
    container.appendChild(fragment);
  }
  update();
</script>

Will fragment help with performance?Why?

Understand Task Queue in JS

const fn = () => fn();
const fn = () => setTimeout(fn);
const fn = () => Promise.resolve(fn);

How can you benefit from "requestAnimationFrame"? 

function displayHeightOnSelect() {
  box.classList.add('hightlight');
  container.innerHTML = box.offsetHeight;
}

Another Typical Issue

TIPS for Rendering Optimisation

 

  • Avoid CSS selectors, use BEM instead
  • Use CSS for animation if possible
  • Use CSS transform other than other ways for animation if possible
  • Simplify your DOM structure, avoid unnecessary div, span and etc.
  • Use requestAnimationFrame if you have to use JS to perform periodical DOM change
  • Reduce force reflow by caching state
  • Debounce your event handler (scroll, mousemove, touch)

Memory Leak in SPA

const metadata = {
  container: document.body,
  id: 'ad',
  createAt: new Date()
}

const someAsycOperation = () => Promise.resolve();

const cleanup = (id) => {/*do something*/}

const execute = (metadata) => {
  const { id, createAt } = metadata;
  someAsycOperation().then(() => {
    console.log(id, createAt);
    window[id] = {
      completeAt: new Date(),
      cleanup: () => {}
    };
  });
}

Explicit Leak Caused By Closure

Performance at Front End

By Alex Li

Made with Slides.com

Performance at Front End

  • 219

More from Alex Li