课程进度 73% · 第15/20章第15/20章 · 标签 1/2
— 1 —
性能优化目标与指标
- FCP（首次内容绘制）：页面首次有内容渲染。
- LCP（最大内容绘制）：主内容区域最大元素渲染。
- TTI（可交互时间）：页面可响应用户操作。
- CLS（累积布局偏移）：页面元素跳动情况。
javascript
1
// 使用Performance API获取FCP
2
new PerformanceObserver((entryList) => {
3
for (const entry of entryList.getEntries()) {
4
if (entry.name === 'first-contentful-paint') {
5
console.log('FCP:', entry.startTime);
6
}
7
}
8
}).observe({ type: 'paint', buffered: true });
资源加载优化
懒加载与预加载：
html
1
<!-- 图片懒加载（原生支持） -->
2
<img src="a.jpg" loading="lazy" />
3
<!-- IntersectionObserver实现图片懒加载 -->
4
<script>
5
const img = document.querySelector('img');
6
const io = new IntersectionObserver(entries => {
7
if (entries[0].isIntersecting) {
8
img.src = img.dataset.src;
9
io.disconnect();
10
}
11
});
12
io.observe(img);
13
</script>
14
<!-- 预加载资源 -->
15
<link rel="preload" href="main.js" as="script" />
压缩与CDN：
nginx
1
// Gzip压缩
2
// nginx.conf
3
gzip on;
4
gzip_types text/css application/javascript;
html
1
// CDN加速，自动选择最近节点
2
<img src="https://cdn.example.com/img.png" />
— 2 —
代码优化
- Tree Shaking移除未用代码。
- 按需加载（动态import）。
- 去冗余、合并小文件。
javascript
1
// Tree Shaking示例（只打包用到的函数）
2
// math.js
3
export function add(a, b) { return a + b; }
4
export function sub(a, b) { return a - b; }
5
// main.js
6
import { add } from './math'; // 只会打包add
7
// 按需加载
8
import('lodash').then(_ => _.chunk([1,2,3], 2));
渲染与交互优化
虚拟列表：
javascript
1
// 只渲染可视区域数据，提升大列表性能
2
function renderList(data, start, end) {
3
return data.slice(start, end).map(item => <li>{item}</li>);
4
}
5
// react-window等库可实现高性能虚拟滚动
节流与防抖：
javascript
1
// 节流：高频事件只在间隔内执行一次
2
function throttle(fn, delay) {
3
let last = 0;
4
return (...args) => {
5
const now = Date.now();
6
if (now - last > delay) {
7
last = now;
8
fn(...args);
9
}
10
};
11
}
12
window.addEventListener('scroll', throttle(() => {
13
// 滚动时执行
14
}, 200));
15
// 防抖：高频事件只在停止后执行一次
16
function debounce(fn, delay) {
17
let timer;
18
return (...args) => {
19
clearTimeout(timer);
20
timer = setTimeout(() => fn(...args), delay);
21
};
22
}
23
document.getElementById('search').oninput = debounce(e => {
24
// 输入停止后发请求
25
}, 300);
FCPLCP懒加载CDN节流防抖