Article Directory

1. A large number of image loading optimization solutions
Two, the picture is too large to load optimization plan

Too many or too large images loaded lead to slow page loading; too many images lead to too many requests to the server, too large images lead to too long each request, causing users to wait for a long time.

1. A large number of image loading optimization solutions

1. Separate image services and application services (think from the perspective of an architect)

For the server, pictures are always the most consuming system resources. If the picture service and the application service are placed on the same server, the application server will easily crash due to the high I/O load of the picture, so when there are a large number of pictures on the website When reading and writing operations, it is recommended to use a picture server.

Browsers have a limit on the number of concurrent requests for resources under the same domain name at the same time, generally between 2-6, and requests that exceed the limit will be blocked. Some mainstream browsers have HTTP 1.1 and HTTP 1.0 The maximum number of concurrent connections is shown in the figure

Insert picture description here

2. Picture compression scheme

We can use some third-party software to compress, the resolution will not change after compression, and the naked eye will not be distorted;
the pictures used in our project will basically be compressed and uploaded.

3. Image lazy loading

Lazy loading of images means that during the page rendering process, the images will not be loaded all at once, but will be loaded when needed. For example, when the scroll bar scrolls to a certain position, an event is triggered to load the image.
To optimize reflow, you can set placeholders first

Realization plan one

document.documentElement.clientHeight//获取屏幕可视区域的高度
document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
element.offsetTop//获取元素相对于文档顶部的高度

If: clientHeight+scroolTop>offsetTop, the picture enters the visible area, it is requested.

Borrow a picture: Original link
Insert picture description here

Code:

<script>
        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>

Implementation plan two

getBoundingClientRect()//获取元素的大小及位置

When we scroll down, the bound.top value will become smaller and smaller, that is, the distance between the picture and the top of the visible area will also become smaller and smaller, so when bound.top == clientHeight, it means that the soil patch It's about to enter the visual area, as long as we are scrolling, the picture will enter the visual area, so we need to request resources. In other words, when bound.top<=clientHeight, the picture is in the visible area.

Code:

var imgs = document.querySelectorAll('img');

        //用来判断bound.top<=clientHeight的函数，返回一个bool值
        function isIn(el) {
            var bound = el.getBoundingClientRect();
            var clientHeight = window.innerHeight;
            return bound.top <= clientHeight;
        } 
        //检查图片是否在可视区内，如果不在，则加载
        function check() {
            Array.from(imgs).forEach(function(el){
                if(isIn(el)){
                    loadImg(el);
                }
            })
        }
        function loadImg(el) {
            if(!el.src){
                var source = el.dataset.src;
                el.src = source;
            }
        }
        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            check();
        }

4. When there are many small pictures

You can use Sprite, font icons, base64, etc., which can effectively reduce the number of connections

5.http2 solves the connection limit

http2 has only one connection to a site. Each request is a stream, and each request is divided into multiple binary frames. Frames in different streams can be interleaved to achieve multiplexing. This solves the problem of connection limit

Two, the picture is too large to load optimization plan

Slow transmission and rendering

If it is a photo album or the like, it can be pre-loaded. When displaying the current picture, load its previous and next pictures
When loading, you can first load a thumbnail with a very high compression rate to improve user experience, click and then or after loading to view the clear image
Using progressive jpeg will improve user experience.
Reference article
Baseline JPEG