Web Optimization Concepts - The one and only guide you need (In progress)

"How to fully optimize web performance? You'll understand after reading this article"

Table Of Contents

1. What is and how to use CDN

• 1.1 What is CDN exactly?

• 1.2 What's the benefits of CDN

2. Why do we need Lazy Load
3. Reflow and Repaint

Other Contents

HTML - The one and only guide you need (in progress)
React Concepts Part.1 - The one and only guide you need
React Concepts Part.2 - The one and only guide you need
CSS Concepts - The one and only guide you need
Computer Network Concepts - The one and only guide you need
Browser Concepts - The one and only guide you need

1. What is CDN and how to apply CDN

1.1 What is CDN exactly?

CDN (Content Delivery Network) refers to a computer network system connected to each other through the closest server. So that content such as music, pictures, videos, applications and other static resources can be send to users more reliable and efficiently. CDN provides high-performance, scalability and low-cost network content to users.

1.2 What's the benefits of CDN

In terms of performance, the role of introducing CDN is to:

• Users receive content from the nearest server, with lower latency , faster content loading speed.

• Part of the resource request is allocated to the CDN, reducing the load on the server

In terms of network security, CDN helps defend against DDoS, MITM and other network attacks.

2. Why do we need Lazy Load

Lazy loading is also called on-demand loading. It refers to the lazy loading of image data in long page website.

In a relatively long web page, if many pictures all loaded at the same time but the user can only see the part of the picture in the viewport, it wastes a lot of performance.

The above problems can be solved. Before scrolling the screen, pictures outside the visualization area will not be loaded, it will only be loaded when it shows up in the viewport. This makes the page load faster and reduces the load on the server.

How do we achieve lazy load

In HTML5, image tag has an attribute call data-src to temporarily store resource path as we would not want it to be load immediately. After that we will keep monitoring the relative postion between the image and viewport. Once it appears in the viewport, we will switch the data in data-src to src.

There are two ways to monitoring the relative postion between the image and viewport.

1. Calculate the height manually

• window.innerHeight
  The read-only innerHeight property of the Window interface returns the interior height of the window in pixels.

• document.body.scrollTop
  The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

• imgs.offsetTop
  The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.

if img.offsetTop < window.innerHeight + document.body.scrollTop, it indicates that the image has entered viewport

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lazyLoad(){
        var scrollTop = document.body.scrollTop;
        var winHeight= window.innerHeight;
        for(var i=0;i < imgs.length;i++){
            if(imgs[i].offsetTop < scrollTop + winHeight ){
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
  window.onscroll = lazyLoad();
</script>

2. Intersection Observer API

Read more about implementation about Intersection Observer API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur:

A target element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API.
The first time the observer is initially asked to watch a target element.

3. Reflow and Repaint

read more about it here

- Repaint
As the name suggests repaint is nothing but the repainting element on the screen as the skin of element change which affects the visibility of an element but do not affects layout.

Example.

1. Changing visibility of an element.

2. Changing an outline of the element.

3. Changing background.

Would trigger a repaint.
According to Opera, the repaint is an expensive operation as it forces the browser to verify/check the visibility of all other dom nodes.

- Reflow
Reflow means re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it.

Repaints and reflows can be expensive, they can hurt the user experience, and make the UI appear sluggish

How to reduce reflow and repaint?

• When manipulating the DOM, try to operate on lower-level DOM nodes

• Use absolute or fixed to keep elements out of the document flow so that their changes will not affect other elements

• To avoid frequent manipulation of the DOM, you can create a documentFragment, apply all DOM operations on it, and finally update it to the document. Why not use React?

How to optimize Animation?

Same as above mentioned. Use absolute or fixed to keep elements out of the document flow so that their changes will not affect other elements.