← 全部文章

博客性能优化与安全加固

📖 4 分钟 · 1526 字

前言

网站跑了一周多,功能基本齐全了。今天抽空做了一轮性能优化和安全加固,把能抠的细节都抠了一遍。


1. 性能优化

1.1 内容压缩

静态资源已经配置了 gzip 压缩,CSS 文件传输量从 20KB 压缩到 6KB 左右。Nginx 的 gzip 配置如下:

gzip on;
gzip_types text/css application/javascript text/plain;
gzip_min_length 256;
gzip_proxied any;

1.2 HTTP 缓存策略

CSS/JS/图片等静态文件已配置 30 天缓存 + immutable

Cache-Control: public, max-age=2592000, immutable

用户第二次访问时这些文件直接从本地缓存读取,不再请求服务器。

1.3 按需加载

之前已经做了的工作:

  • 首页只加载必要 CSS,hljs 高亮库只在前台文章页加载
  • fonts.css 从 3MB 压缩到 1.6KB(gzip),砍掉所有不需要的字符集
  • 字体文件加了 preload,提升加载优先级
  • 图片全部 loading="lazy" 懒加载

结果:首页首屏下载从 ~200KB 降到 ~14KB(减少 93%


2. 安全加固

2.1 安全响应头

所有页面返回以下安全头:

响应头 作用
X-Content-Type-Options: nosniff 防止 MIME 类型嗅探
X-Frame-Options: SAMEORIGIN 防止被别站 iframe 嵌入
X-XSS-Protection: 1; mode=block 反射型 XSS 防护
Referrer-Policy: strict-origin-when-cross-origin 控制来源泄露
Strict-Transport-Security 强制 HTTPS 访问

2.2 API 限流

全量 API 接口加上了限流保护:15 分钟内最多 200 次请求,超过返回错误,防止恶意刷接口。

2.3 后台登录防护

  • 暴力破解限制:连续 5 次密码错误锁定对应 IP 15 分钟
  • 管理员密码错误次数在 session 里额外计数
  • 登录成功/失败都记录操作日志

2.4 版本号隐藏

app.disable('x-powered-by') 隐藏 Express 版本号,避免暴露技术栈信息。


3. 用户体验

3.1 文章阅读体验

  • 文章页顶部的阅读进度条
  • 自动生成目录(侧边栏),带滚动高亮
  • 代码块一键复制按钮
  • 上下篇导航,键盘方向键翻页
  • 回到顶部按钮

3.2 全局功能

  • 回到顶部按钮(所有页面统一)
  • 移动端汉堡菜单,点击外部自动关闭
  • 暗/亮色主题切换,记住用户偏好
  • 404 页面美化引导
  • 文章打印优化

3.3 SEO 优化

  • robots.txt + sitemap.xml 自动生成
  • JSON-LD 结构化数据(文章/网站)
  • Open Graph 社交分享标签
  • RSS 订阅 Feed
  • Canonical URL 防重复收录

4. 当前状态

指标 数值
文章数量 20+ 篇
首页首屏 ~14KB
缓存命中率 高(30 天缓存)
安全评级 6 项安全头
健康检查 /health 正常
自动备份 每日 2 点,保留 7 份

5. 下一步

功能层面暂时够用,后续可能考虑:

  • 评论系统接入(Giscus 基于 GitHub Discussions)
  • 后台文章列表搜索/筛选
  • 移动端首屏渲染优化
  • 图片上传到云存储(目前用 URL 引用)

先这样,有 bug 再修,有需求再加。


2026-04-07