Performance optimization correlation

1. Native JS image lazy loading

The HTML code

<div>
        <img data-src="images/01.jpg" alt="" src="">
        <img data-src="images/02.jpg" alt="" src="">
        <img data-src="images/03.jpg" alt="" src="">
        <img data-src="images/04.jpg" alt="" src="">
        <img data-src="images/05.jpg" alt="" src="">
        <img data-src="images/01.jpg" alt="" src="">
        <img data-src="images/02.jpg" alt="" src="">
        <img data-src="images/03.jpg" alt="" src="">
        <img data-src="images/04.jpg" alt="" src="">
        <img data-src="images/05.jpg" alt="" src="">
    </div>
Copy the code

CSS code

<style>
        div {
            width: 500px;
            height: 500px;
        }
        
        body {
            height: 3000px;
        }
    </style>
Copy the code

Js code

<script>
        var imgs = document.querySelectorAll('img');
        const lazyload = function() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var winTop = window.innerHeight;
            for (var i = 0; i < imgs.length; i++) {
                if (imgs[i].offsetTop <= scrollTop + winTop) {
                    imgs[i].src = imgs[i].getAttribute('data-src'); }}}function throttle(callback, delay) {
            var timer = null;
            return function() {
                var context = this,
                    args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function() {
                    callback.call(context, args)
                }, delay)
            }
        }
        window.onscroll = throttle(lazyload, 200)
    </script>
Copy the code

reference

2. Fetch Delay processing

let timeoutPromise = (timeout) = > {
    return new Promise((resolve, reject) = > {
        setTimeout(() = > {
            resolve('Request supermarket 3S') }, timeout); })}let requestPromise = (url) = > {
    return fetch(url);
}
Promise.race([timeoutPromise(3000), requestPromise('https://www.baidu.com')])
    .then(res= > {
        console.log(res);
    })
    .catch(error= > {
        console.log(error);
    })
Copy the code

3. Axios implements request and response interception

axios.interceptors.request.use(function(config) {
            config.headers.mytoken = 'hello';
            return config;
        }, function(err) {
            console.log(err);
        })
Copy the code

axios.interceptors.response.use(function(res) {
            return res.data;
        }, function(err) {
            console.log(err);
        })
Copy the code