我的前端笔记之懒加载与节流

写在前

大家好，我又来霍霍大家了，切图仔报道。记一次面试被问到京东、淘宝是如果做前端性能优化的，在这我也不怕你们鄙视我了，我只是说了一些超低级的就是做雪碧图啊、压缩图片、压缩js、css ，引用外部文件。css 放head js 放/body ，减少DOM 操作啊之类的等等。

嗯，没错，我只看到了面试官那鄙视的眼神。。。。

废话不多说了，回来后查了点资料然后有懒加载和预加载，下面简要介绍一下：

1.what ?

懒加载俗称延迟加载、是指在一些长页面中延迟加载图片，当img出现在用户可视区域后才加载，是一种良好的页面性能优化方式，适用于一些大型电商网站比如上面说的那两个。

2.why ？

减少不必要的加载 第一眼不出现在用户面前的图片可以不让其加载，减少http请求次数
良好的用户体验 当你上京东购物，n张图片都需要加载，网速快的不说啥了，网速慢的等你加载完黄花菜都凉了

3.principle

第一步、先把页面图片的src置空，不让其发送请求，把真是图片地址放置在自定义属性中data-url="xxx.jpg";

第二步、当页面开始滚动需要监听scroll事件，在事件回调函数中，我们判断一下图片是否进入了可视区域，如果图片在可视区域，那么我们就把自定义的属性（data-url）赋值给图片的 src属性

懒加载的东西说完了，这里不得不提一嘴节流，因为面试官可能会问你一嘴那懒加载频繁触发 scroll 会不会加重浏览器的负担，造成页面的崩溃啊？

请你用节流堵住他的嘴。

4.throttle

其实节流就是节流嘛！节约流量（开玩笑哈），我只知道是在你定义的时间间隔之外才调用函数，这样就可以大大的限制用户操作页面频繁触发的scroll 了，大大的提高了浏览器的性能，不过你放心，微妙的时间，用户是不会发觉的。

5.上代码了

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 先调用，保证可视区域的图片显示

lazy();

function lazy() {

var imgS = Array.from($('img')); // 获取页面 img 元素数组

// console.log(imgS)

var imgL = $('img').length; // 获取页面 img 元素数量

// console.log(imgL)

var seeHeight = $(window).height(); // 获取页面可视区域高度

// console.log(seeHeight)

var scrollT = $(document).scrollTop(); // 获取页面滚出高度

// console.log(scrollT)

// 开始遍历这个数组

for (var i = 0; i < imgL; i++) {

// console.log($(imgS[i]).offset().top + " /")

// console.log(seeHeight + scrollT)

// 如果当前元素出现在可视区域后

if ($(imgS[i]).offset().top < seeHeight + scrollT) {

//如果当前自定义的 url 不为空

if ($(imgS[i]).attr("data-url") !== "undefined") {

// 把自定义属性地址赋值给 img.src

$(imgS[i]).attr("src", $(imgS[i]).attr("data-url"))

}

// 用户频繁操作 scroll 不免造成页面性能不佳此刻当然需要配合节流使页面性能更加优化

function throttle(fn, delay) { // 定义的参数函数和延迟时间

var begin = new Date();

return function () {

var curtimer = new Date();

var contxt = this,

args = arguments;

if (curtimer - begin > delay) { // 时间间隔 > 定义时间才执行

fn.apply(contxt, args);

begin = curtimer;

}

$(document).scroll(throttle(lazy, 100)); // 滚动时间在100ms 内只执行一次

</script>

</body>

</html>

接受你们的鄙视。

我的前端笔记之 懒加载 与 节流

写在前