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