1
HTML → DOM Tree
2
     ↓
3
CSS → CSSOM Tree
4
     ↓
5
DOM + CSSOM → Render Tree
6
     ↓
7
Layout (Reflow)
8
     ↓
9
Paint
10
     ↓
11
Composite

1
// 之前
2
<script src="a.js"></script>
3
<script src="b.js"></script>
4
<script src="c.js"></script>
5

6
// 之后
7
<script src="bundle.js"></script>

1
.icon {
2
  background-image: url(sprites.png);
3
  background-position: -20px -10px;
4
}

1
<link rel="preload" href="critical.css" as="style">
2
<link rel="prefetch" href="next-page.js" as="script">

1
// 图片懒加载
2
const img = document.createElement('img');
3
img.loading = 'lazy';
4
img.src = 'image.jpg';

1
// Webpack 配置
2
module.exports = {
3
  optimization: {
4
    minimize: true
5
  }
6
}

1
┌─────────────┐
2
│   用户      │
3
└──────┬──────┘
4
       │
5
       ↓
6
   CDN 节点（最近）
7
       │
8
       ↓
9
  源服务器

1
Cache-Control: max-age=31536000

1
ETag: "abc123"
2
Last-Modified: Wed, 08 Feb 2026 12:00:00 GMT

1
// 不好
2
element.style.width = '100px';
3
element.style.height = '100px';
4
element.style.background = 'red';
5

6
// 好
7
element.className = 'active';

1
/* 不好 */
2
.element {
3
  position: absolute;
4
  left: 100px;
5
}
6

7
/* 好 */
8
.element {
9
  transform: translateX(100px);
10
}

1
// 动态导入
2
import('./heavy-module.js').then(module => {
3
  module.doSomething();
4
});

1
function animate() {
2
  requestAnimationFrame(animate);
3
  // 动画逻辑
4
}

1
// 防抖
2
function debounce(func, wait) {
3
  let timeout;
4
  return function(...args) {
5
    clearTimeout(timeout);
6
    timeout = setTimeout(() => func.apply(this, args), wait);
7
  };
8
}
9

10
// 节流
11
function throttle(func, limit) {
12
  let inThrottle;
13
  return function(...args) {
14
    if (!inThrottle) {
15
      func.apply(this, args);
16
      inThrottle = true;
17
      setTimeout(() => inThrottle = false, limit);
18
    }
19
  };
20
}

1
https://www.webpagetest.org/