web前端面试题附答案014-图片懒加载有什么缺点吗？

一、这道题是要问什么？

        很明显啊，问图片懒加载的缺点，面试官最省心，面试者最讨厌的问题就是xxx的缺点说一下，问了你半天问题，你以为答得差不多了，面试官来一句那么xxx的缺点是什么，经常弄得你不要不要的。

        图片懒加载我们都知道，就是非当前屏幕的图片虽然已经获取了对应的图片路径，但不加载，只是默认加载兜底图，兜底图可以使一个一直转圈的loading，也可以是品牌logo，这个图片一定是非常小的，可以快速被渲染展示给用户。当用户左右滑动或者上下滑动的时候，由于图片元素暴露到了当前屏幕，也就是用户眼前的时候，将图片的服务器路径替换成默认兜底图。

        优点我们也知道，这样可以减轻浏览器并行加载图片的压力，同时给图片服务器也减轻请求的压力，一旦减少了浏览器阻塞，当前需要渲染的图片就会更快的显示给用户，这是增强用户体验的一种方式，这也是某个牛掰人物苦思出来的解决痛点的思路。

二、懒加载的核心代码是什么？

        核心代码就是用户滑动浏览器的时候，实时监测当前图片元素是否处于当前屏幕中

<script>
    // e 图片元素
    // t 获取图片元素当前的位置集合
    // o 同样，获取图片父级元素的当前位置结合
    var t = e.getBoundingClientRect();
            if (!e.parentNode)
                return !1;
            var o = e.parentNode.getBoundingClientRect(), 

                a = t.left >= 0 && 
                t.left < c && 
                t.top >= 0 && 
                t.top < d || 
                t.right > 0 && 
                t.right <= c && 
                t.bottom > 0 && 
                t.bottom <= d, 

                i = t.left >= o.left && 
                t.left < o.right && 
                t.top >= o.top && 
                t.top < o.bottom || 
                t.right > o.left && 
                t.right <= o.right && 
                t.bottom > o.top && 
                t.bottom <= o.bottom;

            return a && i
</script>

三、那么缺点是啥来？

        我们看他的核心逻辑就是判断当前图片或者图片父元素的位置，进行了大量的比较判断，而且浏览器左滑右滑就要实时判断，如果操作不当就会让用户感觉你的网站滑动起来都卡顿，造成很不好的用户体验。而且如果用户网速不够快，浏览器下滑的过程中看你兜底图的时间会比较长

        我们可以把代码比较过程中的基值放大一些，意思就是当前屏幕再往下一些也可以当前加载，这样如果用户滑动的慢一些，就给更下面的图片模块充分的时间进行加载。