快速参考
| 需求 | 参考文档 |
|---|---|
| HTML/CSS 问题 | html-css.md |
| JavaScript 模式 | javascript.md |
| React/Next.js/框架 | frameworks.md |
| 部署到生产环境 | deploy.md |
| 性能/SEO/无障碍 | performance.md |
关键规则
- DOCTYPE 很重要 — 缺少
<!DOCTYPE html>会触发怪异模式，导致布局不可预测地崩溃 - CSS 特异性胜过级联 —
.class会覆盖元素选择器，无论顺序如何 - 使用
===而不是==— 类型强制会使"0" == false为真 - 循环中的异步/等待 —
forEach不等待；使用for...of或Promise.all - CORS 是服务器端问题 — 没有客户端修复方法；在服务器上配置
Access-Control-Allow-Origin - 响应式 = viewport meta — 没有
<meta name="viewport">，移动设备会以桌面宽度渲染 - 表单没有
preventDefault— 页面会重新加载；在提交处理程序中调用e.preventDefault() - 图片需要尺寸 — 缺少
width/height会导致布局偏移（CLS 惩罚） - HTTPS 否则被阻止 — 混合内容（HTTPS 页面上的 HTTP 资源）会被浏览器阻止
- 环境变量泄漏 —
NEXT_PUBLIC_*会暴露给客户端；永远不要为密钥添加前缀
常见请求
"使其响应式" → 移动优先的 CSS，使用媒体查询；在 320px、768px、1024px 处测试
"部署到生产环境" → 查看 deploy.md 了解 Vercel/Netlify/VPS 模式
"修复 CORS 错误" → 服务器必须发送标头；如果无法控制服务器，则通过同源代理
"提高性能" → Lighthouse 审计；关注 LCP、CLS、FID；懒加载折叠下方的图片
"添加 SEO" → 每页的标题/描述、语义化 HTML、OG 标签、sitemap.xml
框架决策树
- 静态内容，快速构建 → Astro 或纯 HTML
- 使用 MDX 的博客/文档 → Astro 或 Next.js App Router
- 需要身份验证的交互式应用 → Next.js 或 Remix
- 完全控制 SSR/ISR → Next.js
- 简单的 SPA，无需 SEO → Vite + React/Vue