HTML优化指南
语义化标签提升可读性...
HTML优化指南
语义化标签提升可读性...
width="400"
height="300"
>
```
**兼容性**：IE不支持，可通过Intersection Observer API实现降级方案：
```javascript
// 兼容旧浏览器的懒加载实现
document.addEventListener('DOMContentLoaded', () => {
const lazyImages = document.querySelectorAll('img.lazy');
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 从data-src加载图片
img.classList.remove('lazy');
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
}
});
```
#### 3.2.2 关键资源预加载（Preload）
**作用**：提前加载后续会用到的关键资源（如字体、CSS）
**使用场景**：字体文件、首屏CSS、关键JS
```html
>
```
**注意**：避免滥用preload，过度预加载会浪费带宽，建议仅用于**首屏必需资源**（加载优先级：preload > 普通link）。
#### 3.2.3 资源预连接（Preconnect）
**作用**：提前建立与第三方域名的连接（DNS解析、TCP握手、TLS协商），减少跨域资源加载延迟
**使用场景**：CDN资源、第三方字体/统计脚本
```html
```
### 3.3 图片与字体优化
#### 3.3.1 图片格式选择与压缩
**格式对比表**：
| 图片类型 | 适用场景 | 压缩工具推荐 | 浏览器支持 |
|----------------|-------------------------|-----------------------|---------------------|
| JPEG | 照片、复杂色彩图片 | TinyPNG、Squoosh | 所有浏览器 |
| PNG-8/PNG-24 | 图标、透明背景图片 | PNGGauntlet | 所有浏览器 |
| WebP | 替代JPEG/PNG（压缩率更高）| Squoosh、cwebp | Chrome、Firefox 65+ |
| AVIF | 下一代图片格式（超高压缩）| Squoosh、avifenc | Chrome 85+、Firefox 91+ |
**实现示例**：使用``标签提供降级方案
```html
```
#### 3.3.2 字体加载策略
**问题**：未优化的字体加载会导致**FOIT（不可见文本闪烁）** 或**FOUT（无样式文本闪烁）**
**解决方案**：使用`font-display`控制字体加载行为
```css
/* 推荐：短暂隐藏后降级显示系统字体 */
@font-face {
font-family: 'MainFont';
src: url('main-font.woff2') format('woff2'),
url('main-font.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap; /* 关键：字体加载期间显示系统字体，加载完成后替换 */
}
```
## 注意事项
### 4.1 兼容性处理
- **懒加载**：IE和旧版浏览器不支持`loading="lazy"`，需通过Intersection Observer API实现降级
- **WebP/AVIF**：使用``标签提供JPEG/PNG降级方案，避免图片加载失败
- **preload/prefetch**：IE完全不支持，Chrome/Firefox部分支持，需通过JS动态加载关键资源
### 4.2 性能测试指标
使用**Lighthouse**或**WebPageTest**检测以下指标：
- **First Contentful Paint（FCP）**：首次内容绘制（目标<1.8s）
- **Largest Contentful Paint（LCP）**：最大内容绘制（目标<2.5s）
- **Total Blocking Time（TBT）**：总阻塞时间（目标<300ms）
- **Cumulative Layout Shift（CLS）**：累积布局偏移（目标<0.1）
### 4.3 常见误区
- ❌ 过度使用preload：预加载非关键资源会浪费带宽，导致关键资源加载延迟
- ❌ 忽略图片尺寸：未指定width/height导致布局偏移（CLS升高）
- ❌ 内联大量CSS/JS：内联资源超过150KB会阻塞HTML解析
## 自测题
1. 以下哪种HTML结构对性能更友好？
A. 嵌套10层的div布局
B. 使用语义化标签的3层扁平结构
C. 全部使用span标签的无层级结构
*答案：B*
2. 图片懒加载的核心作用是？
A. 提升图片清晰度
B. 减少初始加载请求数
C. 强制图片按比例显示
*答案：B*
3. 如何避免字体加载导致的页面闪烁？
A. 使用`font-display: swap`
B. 内联所有字体文件
C. 使用`@import`引入字体
*答案：A*
4. 预加载（preload）和预连接（preconnect）的主要区别是？
A. preload会下载资源，preconnect仅建立连接
B. preconnect优先级高于preload
C. preload仅用于CSS，preconnect仅用于JS
*答案：A*
5. 以下哪种图片格式压缩率最高且兼容性较好？
A. JPEG
B. WebP
C. PNG-24
*答案：B*
## 总结
HTML优化与资源加载是前端性能优化的基础，核心在于**精简DOM结构**和**智能调度资源**。通过减少嵌套、语义化标签、懒加载、预加载等技术，可显著提升页面加载速度和用户体验。实际开发中需结合性能测试工具（如Lighthouse）持续监控优化效果，并根据目标用户的浏览器分布进行兼容性处理。 