一、这道题是要问什么?
很明显啊,问图片懒加载的缺点,面试官最省心,面试者最讨厌的问题就是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>
三、那么缺点是啥来?
我们看他的核心逻辑就是判断当前图片或者图片父元素的位置,进行了大量的比较判断,而且浏览器左滑右滑就要实时判断,如果操作不当就会让用户感觉你的网站滑动起来都卡顿,造成很不好的用户体验。而且如果用户网速不够快,浏览器下滑的过程中看你兜底图的时间会比较长
我们可以把代码比较过程中的基值放大一些,意思就是当前屏幕再往下一些也可以当前加载,这样如果用户滑动的慢一些,就给更下面的图片模块充分的时间进行加载。