二、懒加载（延迟加载）

在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。适用于图片较多，页面列表较长（长列表）的场景中。

2.1 懒加载的特点

• 减少无用资源的加载：可减少服务器的压力和流量，减小浏览器的负担。
• 提升用户体验：使用延迟加载可以大大提高用户体验。
• 减少对其他资源文件的加载影响：加载过多图片会影响其他资源文件的加载，从而影响网站应用的正常使用。

2.2 懒加载的实现原理

当图片出现在可视区域时，获取图片的真实路径并赋值给图片即可。

let imgs = document.querySelectorAll("img");

function lazyLoad() {
  // 浏览器滚动过的距离
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // 浏览器可视区的高度
  let winHeight = window.innerHeight;
  for (let i = 0; i < imgs.length; i++) {
    if (imgs[i].offsetTop < scrollTop + winHeight) {
      imgs[i].src = imgs[i].getAttribute("data-src");
    }
  }
}

window.onscroll = lazyLoad();

2.3 懒加载与预加载的区别

这两种方式都是提高网页性能的方式，两者主要区别是一个提前加载，一个延迟加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

• 预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。这样可以减少用户的等待时间，提升用户的体验。比较常用的实现方式是：使用 js 中的 image 对象，通过为 image 对象来设置 src 属性，从而实现图片的预加载。

三、回流（重排）与重绘

重排：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为重排。

重绘：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。

3.1 浏览器渲染原理

1. DOM 树和 CSSOM 树：解析获取到的 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树
2. Render 树：将 DOM 树和 CSSOM 树进行组合，生成渲染树（render树）
3. 重排：根据生成的渲染树，进行重排（Layout），得到节点的几何信息（位置，大小）
4. 重绘：根据渲染树以及重排得到的几何信息，得到节点的绝对像素（像素，背景色，外观等），进行重绘（Painting）。
5. Display：将像素发送给显卡，展示在页面上。

3.2 重排和重绘触发的条件

重排触发的条件

1. 盒模型相关：width，height，margin，padding，border 等
2. 文字、字体相关：font，word-space，letter-space，whitespace，text-align，vertical-align 等
3. 排版相关：position，float，display

重绘触发的条件

1. color、background 相关属性：background-color、background-image 等
2. outline 相关属性：outline-color、outline-width、text-decoration 等
3. border-radius、visibility、box-shadow

3.3 避免重排和重绘的措施

1. 如果一个元素上有动画，那么给它加上 transform 属性，哪怕它一开始是默认值。
2. 尽量使用 CSS 动画。
3. 用 will-change 提示浏览器，它不会有任何副作用。

参考：鉴定一下网络热门面试题：什么是回流和重绘？，前端性能优化

四、节流与防抖

4.1 节流

概念

在同一个单位时间内某事件被触发多次，只有一次能生效。

比喻：农村干旱，村长采用开源节流的方式，规定每天早上 8 点到 9 点，才打开水库阀门。

场景

有些事件会频繁触发，如 keyup、scroll、resize、mousemove 等。我依然想让它频繁触发，只不过不要那么频繁就好。

代码实现

let flag = true; // 默认打开节流阀
function trottle() {
  if (flag) {
    flag = false; // 关闭节流阀
    // 做正常操作
    console.log("发送请求...");
    // 定时器结束时重置节流阀
    setTimeout(() => {
      flag = true;
    }, 1000);
  }
}

4.2 防抖

概念

在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

比如：按钮提交场景，当多次点击提交按钮时，只执行最后一次提交。

场景

有些事件会频繁触发，如 keyup、scroll、resize、mousemove 等。我不想让它如此频繁，只需要在最后一次事件做操作即可。

代码实现

在产生事件时，取消上一次定时器，开启新的定时器。

let timer = null;
function debounce() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log("发送请求...");
  }, 500);
}

4.3 防抖和节流的区别

• 防抖：一段时间内，只有最后一次产生效果。
• 节流：一段时间内，可能会产生多次效果，只不过每一次之间的频率降低了。
• 共同点：都是为了降低频率

参考：JS 节流和防抖