웹 최적화 개념 - 필요한 유일한 가이드(진행 중)

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.

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.

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