(05).前端知识库之工程和性能优化篇

一、性能优化（核心重点）

1. 多维度优化策略

• HTML
  • 减少嵌套层级，避免使用过大的<div>容器
  • 合并重复标签（如多个<script>可合并为一个文件）
  • 使用语义化标签提升解析效率
• CSS
  • 避免使用!important强制覆盖样式
  • 将动画属性（transform, opacity）放在will-change中触发硬件加速
  • 利用CSS containment限制重排范围（如contain: strict）
• JavaScript
  • 避免在主线程执行耗时操作（如复杂计算、DOM操作），优先使用Web Worker
  • 减少事件绑定数量（事件委托替代逐个绑定）

2. 加载速度优化

• 资源压缩：开启Gzip/Deflate压缩文本资源，图片使用WebP格式
• 代码分割：动态import()实现按需加载，Webpack的SplitChunksPlugin分割公共模块
• 预加载策略：
  • preload: 提前加载关键资源（字体、首屏图片）
  • dns-prefetch: 预解析域名
• 首屏优化：
  • 渲染优先级：将关键内容（如导航栏）放在HTML最上方
  • 使用loading="lazy"延迟非首屏图片加载

3. 重绘与回流控制

• 回流触发场景：DOM结构调整（增删节点）、尺寸变化（width/height）、布局属性修改（margin）
• 重绘优化：
  • 批量修改样式：使用document.styleSheets或CSS变量
  • 避免强制同步布局：通过requestAnimationFrame分批处理
• 虚拟列表：仅渲染可视区域的元素（如长列表滚动场景）

4. 性能指标

• 核心指标：
  • LCP（首屏内容到达时间）：衡量用户感知的加载速度
  • FID（首次交互延迟）：点击事件的响应时间
  • CLS（累积布局偏移）：页面稳定性指标
• 工具：Chrome DevTools的Performance面板、Lighthouse、WebPageTest

5. HTTP请求优化

• 合并请求：
  • 雪碧图（Sprite Map）将小图标合并为单张图
  • Webpack代码分割减少JS文件数量
• 减少请求次数：
  • 使用CDN缓存静态资源
  • 开启浏览器缓存（设置Cache-Control: max-age=31536000）

6. 缓存策略

• 强缓存：通过Expires或Cache-Control: max-age直接命中缓存
• 协商缓存：利用Last-Modified或ETag验证资源是否更新
• 实践：静态资源设置长期缓存，API请求使用短期缓存+动态校验

7. 图片懒加载

• 实现原理：
  • 初始将图片src设为占位图，滚动到可视区域时替换为真实URL
  • 使用IntersectionObserver API高效检测可见性
• 优点：减少首屏加载体积，提升滚动流畅度

8. CDN加速

• 原理：通过分布式服务器节点就近响应用户请求
• 作用：
  • 减少网络延迟（尤其跨地域用户）
  • 负载均衡，提高资源可用性

9. 虚拟DOM

• 优点：
  • 批量更新DOM，减少直接操作次数（React/Vue核心机制）
  • 跨平台兼容性（如服务端渲染）
• 缺点：增加内存占用，复杂组件可能引发额外开销

---

二、工程化与工具链

1. 前端工程化

• 目标：提升开发效率、保证代码质量、实现可维护性
• 实施步骤：
  • 搭建脚手架（如Create React App、Vite）
  • 配置ESLint/Prettier规范代码
  • 引入单元测试（Jest/Mocha）和CI/CD流程

2. Webpack优化

• 代码分割：
  • 入口动态分割（code splitting）
  • 公共模块提取（CommonsChunkPlugin或SplitChunksPlugin）
• Tree Shaking：消除未使用的代码（需ES6模块语法支持）
• 优化插件：
  • TerserPlugin压缩JS代码
  • MiniCssExtractPlugin分离CSS文件

3. 微前端架构

• 设计模式：基于模块化思想，将应用拆分为独立子应用
• 实现方案：
  • 基于Web Components通信
  • 使用框架扩展（如qiankun、Module Federation）
• 优势：技术栈解耦、独立部署、按需加载

4. Git协作流程

• 常用命令：
  • git branch管理分支
  • git merge --squash合并提交历史
  • git rebase保持线性提交
• 流程规范：
  • Fork + Pull Request模式
  • 保护主分支（仅允许Merge来自特定分支的PR）

---

三、监控与安全

1. 监控体系

• 错误监控：
  • 全局捕获错误（window.onerror/unhandledrejection）
  • 日志上报工具（Sentry、ELK Stack）
• 性能监控：
  • 用户行为埋点（如页面停留时间）
  • 资源加载监控（通过Performance API收集resourceTiming）

2. 安全防御

• 常见攻击：
  • XSS：输入转义（如DOMPurify）、CSP策略限制脚本来源
  • CSRF：服务端验证Token（如JWT）
  • 点击劫持：使用X-Frame-Options禁止iframe嵌套
• 防御手段：
  • 数据校验（服务器端+客户端双重校验）
  • HTTPS加密传输

3. 跨域解决方案

• CORS：服务器设置响应头Access-Control-Allow-Origin
• JSONP：仅支持GET请求，安全性较低
• 代理服务器：通过Nginx反向代理绕过同源限制

---

四、设计模式

• 常见模式：
  • 观察者模式：实现组件间松耦合通信（如Vue的watch）
  • 工厂模式：动态创建对象（如React.createElement）
  • 单例模式：全局唯一实例（如Redux Store）
• 应用场景：状态管理、插件系统、UI组件复用

---

五、综合问题

1. 网页性能优化体系

• 分层优化：
  • 网络层：CDN、HTTP/2、资源预加载
  • 渲染层：减少重排重绘、虚拟列表
  • 架构层：代码分割、懒加载、服务端渲染（SSR）

2. 大文件上传

• 实现思路：
  • 分片上传：将文件切割为多个小块并行上传
  • 断点续传：记录已上传分片位置，失败后继续上传
  • 进度跟踪：通过XMLHttpRequest.upload.onprogress监听
• 工具库：蚂蚁金服的Upload组件、resumable.js

---

附录：构建工具对比

• Webpack：灵活但配置复杂，适合大型项目
• Vite：基于原生ESM的极速热更新，适合现代前端开发
• Rollup：专注于库打包，输出体积更小