优化博客页面性能可从多方面入手，以下是一些实用策略及示例代码：
1. 压缩与合并资源
- CSS/JS 压缩：减少文件体积，提高加载速度。
- 代码分割：按需加载非关键资源。
示例（使用 Gulp 压缩 CSS/JS）：
javascript
const gulp = require('gulp');
const cssnano = require('gulp-cssnano');
const uglify = require('gulp-uglify');
// 压缩 CSS
gulp.task('css', () => {
return gulp.src('src/css/*.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
});
// 压缩 JS
gulp.task('js', () => {
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
2. 图片优化
- 压缩图片：使用 WebP 格式（比 JPEG/PNG 小 20-30%）。
- 响应式图片：根据设备尺寸加载合适分辨率的图片。
HTML 示例：
html
预览
<img
src="image.webp"
srcset="image-sm.webp 500w, image-md.webp 1000w, image-lg.webp 2000w"
sizes="(max-width: 600px) 500px, 1000px"
alt="优化的图片"
>
自动化工具：使用 sharp 或 ImageMagick 批量压缩图片。
3. 懒加载（Lazy Loading）
- 图片懒加载：滚动到可视区域时再加载图片。
- 评论 / 侧边栏懒加载：非首屏内容延迟加载。
HTML 示例：
html
预览
<img src="placeholder.jpg" data-src="real-image.jpg" alt="懒加载图片" class="lazy-load">
<script>
const lazyImages = document.querySelectorAll('.lazy-load');
const lazyLoadObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
lazyLoadObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => lazyLoadObserver.observe(img));
</script>
4. 缓存策略
- 设置 HTTP 缓存头：静态资源（如 CSS、JS、图片）设置长期缓存。
- Service Worker：离线缓存关键资源。
Node.js 示例（设置缓存头）：
javascript
const express = require('express');
const app = express();
// 静态资源缓存 1 年
app.use('/static', express.static('public', {
maxAge: 31536000 // 1 年（秒）
}));
5. 减少 HTTP 请求
- 合并 CSS/JS 文件：减少请求次数。
- 使用 CSS Sprites：合并图标为单个图片。
- 内联关键 CSS：首屏渲染所需的 CSS 直接嵌入 HTML。
.
6. 优化字体加载
- 按需加载字体：只加载必要的字重和字符。
- 预加载关键字体：
html
预览
<link rel="preload" href="font.woff2" as="font" crossorigin>
7. 减少 DOM 操作与重排
- 批量 DOM 更新：避免频繁操作 DOM。
- 防抖 / 节流：限制事件触发频率（如滚动、窗口大小变化）。
JavaScript 示例（防抖）：
javascript
function debounce(func, delay) {
let timer;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => func.apply(context, args), delay);
};
}
// 使用防抖处理滚动事件
window.addEventListener('scroll', debounce(() => {
// 处理滚动逻辑
}, 200));
8. 优化 CSS 加载顺序
- 关键 CSS 内联：将首屏所需 CSS 直接嵌入 HTML。
- 异步加载非关键 CSS：
html
预览
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
9. 使用 CDN
- 静态资源 CDN：如 Cloudflare、Google Fonts CDN 等。
- 减少第三方脚本：谨慎使用广告、追踪工具，避免阻塞渲染。
10. 性能监控
- 使用 Lighthouse 或 WebPageTest：定期检测性能瓶颈。
- 自定义性能指标：
javascript
// 测量首次内容绘制 (FCP)
new PerformanceObserver((entryList) => {
const fcpEntry = entryList.getEntriesByName('first-contentful-paint')[0];
console.log('FCP:', fcpEntry.startTime);
}).observe({ type: 'paint', buffered: true });
示例优化成果
通过上述策略，博客页面性能可能提升：
- 加载时间：减少 40-60%
- FCP（首次内容绘制）：缩短至 1.5 秒以内
- 交互就绪时间：减少 50% 以上
建议使用工具（如 Lighthouse）生成性能报告，针对性优化关键指标（如 LCP、CLS、FID）。编辑分享
