性能_安全_跨端

前端性能优化与安全总结

一、性能优化

1. 优化方向概览

• 空间优化 ：减少请求文件体积
  包括压缩文件、构建时优化等。
• 时间优化 ：提升请求、加载、渲染与执行效率
  涉及请求速度、加载优先级、渲染优化、代码运行效率、缓存策略等。
• 用户感知优化 ：提升用户体验
  如骨架屏、加载状态提示、错误降级等。

---

2. 技术细分

（1）网络层面

• 减少请求数量
  合并文件、使用精灵图（Sprite）。
• 减少请求体积
  压缩资源（Gzip/Brotli）、构建优化（Tree Shaking、代码分割）。
• 加快请求速度
  CDN 加速、DNS 预解析、预连接（preconnect）。

（2）加载层面（LCP 优化）

• 关键资源优先加载
• 预加载（preload、prefetch）
• 懒加载（图片、组件、路由）

（3）渲染层面

• 首屏渲染优化
  服务端渲染（SSR）、静态生成（SSG）。
• 视觉稳定性（CLS）
  避免布局抖动（预留尺寸、使用 aspect-ratio）。
• 动画流畅性
  使用合成层（transform、opacity），开启 will-change。

（4）运行时层面（INP 优化）

• JavaScript 执行优化
  避免长任务、使用 requestIdleCallback、异步加载非关键脚本。
• 内存管理
  虚拟列表、避免内存泄漏、及时释放引用。
• 事件处理优化
  节流（throttle）、防抖（debounce）、事件委托。

（5）缓存层面

• 静态资源缓存（强缓存、协商缓存）
• 数据缓存（Service Worker、内存缓存）
• 离线缓存（PWA、Cache API）

（6）用户感知优化

• 骨架屏（Skeleton Screen）
• 加载状态提示（加载动画、进度条）
• 错误降级策略（兜底图片、友好提示）

---

二、前端安全

1. XSS（跨站脚本攻击）防护

• 对用户输入进行转义/过滤
• 设置 CSP（内容安全策略）
• 使用 HttpOnly 和 Secure 属性保护 Cookie
• 避免内联脚本，确保资源来源可信

2. CSRF（跨站请求伪造）防护

• 服务端验证请求来源（Origin/Referer）
• 使用 CSRF Token
• 设置 SameSite Cookie 属性
• 关键操作进行二次验证

3. 点击劫持防护

• 设置响应头 X-Frame-Options: DENY/SAMEORIGIN
• 使用 CSP 的 frame-ancestors 指令

4. 第三方依赖安全

• 定期执行 npm audit 检查漏洞
• 锁定依赖版本（package-lock.json、yarn.lock）
• 遵循最小权限原则，避免过度授权

---

三、跨端与兼容性

1. CSS 适配方案

• 媒体查询（Media Queries）
• 相对单位布局（rem、vw/vh）
• 弹性布局（Flexbox）与网格布局（Grid）
• 响应式图片与字体

2. 资源降级与优化

• srcset 与 sizes 适配多分辨率
• <picture> 标签进行图片格式降级
• 使用 WebP 等现代图片格式
• 可视区域加载（懒加载）
• 使用 transform 与 will-change 提升动画性能

---

四、高性能计算与多线程

• 使用 Web Worker 运行后台任务
• 利用 WebGPU 进行高性能图形计算
• 通过 WebAssembly（WASM）执行高性能计算模块

---