性能优化相关

1. 原生js实现图片懒加载

html代码

<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>

css代码

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

js代码

<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>

参考

2. fetch请求延时处理

let timeoutPromise = (timeout) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('请求超市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);
    })

3. axios实现请求拦截，响应拦截

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

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