1. 选择合适的图片格式#

推荐： 普通网页图片优先考虑 WebP、AVIF，图标和简单矢量图形考虑 SVG。

2. 压缩图片体积#

• 使用图片压缩工具减少文件大小。
• 避免使用尺寸远大于实际显示区域的图片。
• 根据图片用途调整压缩质量。
• 使用响应式图片，为不同屏幕提供不同尺寸的资源。

例如：

1
<img
2
  src="image-800.webp"
3
  srcset="
4
    image-400.webp 400w,
5
    image-800.webp 800w,
6
    image-1200.webp 1200w
7
  "
8
  sizes="(max-width: 600px) 100vw, 800px"
9
  alt="示例图片"
10
/>

浏览器会结合显示尺寸、设备像素密度等因素选择合适的图片。

3. 其他图片优化手段#

• 懒加载：非首屏图片滚动到附近时再加载。
• 预加载：提前获取首屏关键图片。
• CDN：使用内容分发网络加速图片传输。
• 设置宽高：提前为图片预留空间，减少布局偏移。
• CSS 替代图片：简单渐变、阴影、边框等效果可以直接用 CSS 实现。

1
<img
2
  src="image.webp"
3
  width="800"
4
  height="450"
5
  alt="示例图片"
6
/>

1. 优先使用 transform 和 opacity#

不同 CSS 属性对渲染性能的影响不同。

例如：

1
.box {
2
  transition: transform 0.3s ease;
3
}
4

5
.box:hover {
6
  transform: translateX(100px);
7
}

相比不断修改 left，使用 transform 通常具有更好的动画性能。

2. 使用 requestAnimationFrame#

需要通过 JavaScript 实现动画时，可以使用 requestAnimationFrame()。

1
const box = document.querySelector('.box');
2

3
let x = 0;
4

5
function animate() {
6
  x += 1;
7

8
  box.style.transform = `translateX(${x}px)`;
9

10
  if (x < 300) {
11
    requestAnimationFrame(animate);
12
  }
13
}
14

15
requestAnimationFrame(animate);

其优势：

• 让动画更新与浏览器绘制节奏协调。
• 页面处于后台时，通常会暂停回调。
• 避免使用固定 setInterval 频率造成不必要的动画更新。

3. 其他动画优化#

• 避免同时执行大量复杂动画。
• 不要在动画循环中频繁交替读取、修改布局属性。
• 对复杂动画可适当使用 will-change，但不要滥用。
• 对持续动画优先考虑 CSS Animation 或 Web Animations API。
• 为需要减少动态效果的用户支持 prefers-reduced-motion。

1. 精简 CSS 文件#

• 删除未使用的样式。
• 合并重复声明。
• 使用生产环境 CSS 压缩。
• 避免引入大量实际用不到的 CSS 框架样式。
• 将非关键页面的样式按需加载。

2. 合理使用 CSS 选择器#

1
/* 不推荐：不必要的复杂嵌套 */
2
.container .content ul li a span {
3
  color: red;
4
}
5

6
/* 推荐：通过 class 定位 */
7
.menu-title {
8
  color: red;
9
}

优先使用语义清晰的 class，减少不必要的深层选择器。

不过，现代浏览器已经对 CSS 选择器进行了大量优化，选择器复杂度通常不是主要性能瓶颈，不必为性能而刻意避免后代选择器等正常写法。

3. 避免频繁触发布局计算#

例如：

1
// 不推荐：反复读取布局，再修改尺寸
2
elements.forEach((element) => {
3
  const width = element.offsetWidth;
4
  element.style.width = `${width + 10}px`;
5
});
6

7
// 推荐：集中读取，再集中修改
8
const widths = elements.map((element) => element.offsetWidth);
9

10
elements.forEach((element, index) => {
11
  element.style.width = `${widths[index] + 10}px`;
12
});

这种做法可以减少浏览器被迫同步计算布局的情况。

4. 其他 CSS 优化#

• 使用 CSS 变量统一管理重复的设计值。
• 对复杂、独立组件按需考虑 contain。
• 对较长的非首屏内容，可以考虑 content-visibility: auto。
• 动画尽量使用 transform 和 opacity。

1. 减少 DOM 节点数量#

过多的 DOM 节点会增加浏览器的样式计算、布局和内存开销。

优化方式：

• 避免无意义的多层标签嵌套。
• 对大量数据使用分页。
• 长列表可以使用虚拟列表。
• 不需要展示的内容尽量不提前生成大量 DOM。

2. 批量操作 DOM#

使用 DocumentFragment 可以先组织节点，再一次性插入页面。

1
const ul = document.querySelector('ul');
2

3
const fragment = document.createDocumentFragment();
4

5
for (let i = 0; i < 1000; i++) {
6
  const li = document.createElement('li');
7
  li.textContent = `第 ${i} 项`;
8

9
  fragment.appendChild(li);
10
}
11

12
ul.appendChild(fragment);

相比每创建一个元素就插入页面，这样可以减少对已连接 DOM 的重复操作。

3. 减少重复查询 DOM#

1
// 不推荐：反复查询相同元素
2
for (let i = 0; i < 100; i++) {
3
  document.querySelector('.box').textContent = i;
4
}
5

6
// 推荐：缓存 DOM 引用
7
const box = document.querySelector('.box');
8

9
for (let i = 0; i < 100; i++) {
10
  box.textContent = i;
11
}

如果不需要每次修改都立即展示结果，还可以只设置一次最终值，进一步减少 DOM 更新。

4. 其他 DOM 优化#

• 尽量复用已有节点。
• 避免频繁读取 offsetWidth、getBoundingClientRect() 等布局信息。
• 对大量数据使用分页或虚拟滚动。
• 使用 Vue 等框架时，合理使用 key、computed 等机制，避免不必要的组件更新。

1. 为什么使用事件代理？#

假设列表中有 1000 个按钮。

传统方式：

1
document.querySelectorAll('.btn').forEach((btn) => {
2
  btn.addEventListener('click', () => {
3
    console.log('按钮被点击');
4
  });
5
});

这种方式需要为每个按钮注册事件监听器。

使用事件代理：

1
<ul id="list">
2
  <li><button class="btn">按钮1</button></li>
3
  <li><button class="btn">按钮2</button></li>
4
  <li><button class="btn">按钮3</button></li>
5
</ul>
6

7
<script>
8
  const list = document.querySelector('#list');
9

10
  list.addEventListener('click', (event) => {
11
    const btn = event.target.closest('.btn');
12

13
    if (!btn || !list.contains(btn)) return;
14

15
    console.log('按钮被点击');
16
  });
17
</script>

无论列表中有多少个按钮，都只需要在父元素上注册一个事件监听器。

2. 事件代理的优点#

• 减少事件监听器数量。
• 方便统一管理事件。
• 动态创建的子元素也能响应事件。
• 特别适合列表、表格等具有大量相似子元素的场景。

注意：事件代理主要适用于能够冒泡的事件，并不是所有事件都适合委托。

1. 防抖 Debounce#

在连续触发事件时，只有停止触发一段时间后，才执行事件处理函数。

1
function debounce(fn, delay) {
2
  let timer = null;
3

4
  return function (...args) {
5
    clearTimeout(timer);
6

7
    timer = setTimeout(() => {
8
      fn.apply(this, args);
9
    }, delay);
10
  };
11
}
12

13
// 用户停止输入300ms后才执行
14
input.addEventListener(
15
  'input',
16
  debounce(() => {
17
    console.log('发送搜索请求');
18
  }, 300)
19
);

常见场景：搜索框输入、表单验证、输入联想等。

2. 节流 Throttle#

在连续触发事件时，限制函数的执行频率，让函数在指定时间间隔内最多执行一次。

1
function throttle(fn, delay) {
2
  let lastTime = 0;
3

4
  return function (...args) {
5
    const now = Date.now();
6

7
    if (now - lastTime >= delay) {
8
      lastTime = now;
9
      fn.apply(this, args);
10
    }
11
  };
12
}
13

14
// 最多每100ms执行一次
15
window.addEventListener(
16
  'scroll',
17
  throttle(() => {
18
    console.log(window.scrollY);
19
  }, 100),
20
  { passive: true }
21
);

常见场景：滚动监听、窗口大小变化、限制按钮连续操作等。

3. 防抖和节流的区别#

1. 原生懒加载（推荐）#

现代浏览器已经支持通过 loading 属性实现懒加载。

1
<!-- 非首屏图片 -->
2
<img
3
  src="image.webp"
4
  loading="lazy"
5
  width="800"
6
  height="450"
7
  alt="示例图片"
8
/>

2. JavaScript 实现懒加载#

如果需要自定义图片加载时机，可以使用 IntersectionObserver API。

1
<img data-src="image.webp" class="lazy-img" alt="示例图片" />
2
const images = document.querySelectorAll('.lazy-img');
3

4
const observer = new IntersectionObserver((entries) => {
5
  entries.forEach((entry) => {
6
    if (!entry.isIntersecting) return;
7

8
    const img = entry.target;
9

10
    img.src = img.dataset.src;
11

12
    observer.unobserve(img);
13
  });
14
}, {
15
  rootMargin: '200px'
16
});
17

18
images.forEach((img) => observer.observe(img));

这里的 rootMargin: '200px' 表示可以在图片进入可视区域前提前触发加载。

实际开发中，普通图片优先使用原生 loading="lazy"，只有存在特殊需求时再考虑 IntersectionObserver。

1. HTML 预加载（推荐用于关键图片）#

通过 <link rel="preload"> 提前加载图片。

1
<head>
2
  <link
3
    rel="preload"
4
    as="image"
5
    href="/images/banner.webp"
6
    fetchpriority="high"
7
  />
8
</head>
9

10
<body>
11
  <img
12
    src="/images/banner.webp"
13
    fetchpriority="high"
14
    alt="首页 Banner"
15
  />
16
</body>

适用场景：首屏 Banner、关键背景图片等，尤其是浏览器无法在初始 HTML 中直接发现的关键图片。

如果首屏图片已经通过 HTML 中的 <img> 很早被浏览器发现，通常可以直接设置 fetchpriority="high"，不一定需要额外预加载。

2. JavaScript 预加载#

使用 Image 对象提前请求图片资源。

1
function preloadImage(src) {
2
  const img = new Image();
3
  img.src = src;
4

5
  return img;
6
}
7

8
preloadImage('/images/banner-2.webp');

适用场景：轮播图下一张图片、即将打开的图片预览等。

3. 图片懒加载与预加载的区别#

预加载应合理控制数量，否则过多的预加载请求可能争抢网络带宽，反而影响关键资源。