Ubuntu 上提升 JavaScript 性能的系统化做法
一 前端加载与网络优化
- 资源打包与压缩：使用 Webpack/Rollup/Parcel 进行代码打包、摇树优化与压缩，减少体积与请求数。
- 传输与缓存：启用 Gzip/Brotli；设置强缓存（如 Cache-Control/Expires），对带哈希的静态资源设置长期缓存；使用 CDN 加速全球访问。
- 协议与连接：启用 HTTP/2（多路复用、头部压缩），开启 Keep-Alive 减少握手开销。
- 请求策略：合并/精简接口（如 GraphQL）、分页/按需加载；对不常变数据做 客户端缓存；并发请求用 Promise.all 控制并发度。
- 渲染与交互：脚本使用 async/defer，次要逻辑后置；减少 DOM 操作、批量变更用 DocumentFragment；动画优先 CSS3；图片用 WebP 并懒加载。
二 Node.js 后端与运行时优化
- 运行时与依赖：用 nvm 管理并升级到最新稳定版 Node.js；按需更换 npm 镜像源 提升安装速度；移除未使用依赖、选择更轻量库。
- 并发与多核：使用 cluster 模块 或 PM2 集群模式，充分利用多核 CPU。
- 异步与非阻塞：优先 Promise/async-await，避免 同步 I/O；处理大文件/大数据用 Streams 降低内存占用。
- 内存与 GC：通过 –max-old-space-size 调整堆上限；减少全局变量与闭包泄漏，复用对象与缓存计算结果。
- 数据库与缓存：为查询加 索引、使用 连接池、批量操作；引入 Redis/Memcached 做热点数据缓存。
- 反向代理与网络：前置 Nginx/Apache 做静态资源服务、压缩、缓存与负载均衡。
- 监控与剖析：用 node --inspect / --prof、clinic.js、PM2 监控与定位瓶颈；必要时调整 V8 与系统内核参数。
三 Apache 服务器配置优化（Ubuntu 常见场景）
- 启用压缩：加载 mod_deflate 并对 text/css、application/javascript 输出进行压缩。
- 强缓存：加载 mod_expires，为 CSS/JS 设置如 access plus 1 month 的缓存策略。
- 多路复用：启用 HTTP/2（mod_http2），提升并发加载效率。
- 长连接：开启 KeepAlive 并合理设置 MaxKeepAliveRequests/KeepAliveTimeout。
- 前端工程配合：使用打包工具进行合并与压缩，并将静态资源托管到 CDN。
四 代码级与渲染层优化
- 执行与渲染：用 Chrome DevTools Performance 定位长任务；减少 重绘/回流，批量修改 DOM，优先 CSS 动画；事件委托降低监听器数量。
- 任务拆分：将耗时计算放入 Web Workers，保持主线程流畅。
- 数据结构与算法：缓存数组长度、减少不必要循环与递归；选择更高效的数据结构与算法。
- 工程化：启用 代码分割 与 懒加载，减小首屏体积；按需加载第三方库。
五 快速检查清单与工具
- 构建与产物：启用 Terser/UglifyJS 压缩；产物文件名带 [contenthash]；按需 代码分割。
- 传输与协议：开启 Gzip/Brotli 与 HTTP/2；静态资源走 CDN 并设置长期缓存。
- 监控与诊断：前端用 Lighthouse/DevTools；Node 用 node --inspect / --prof、clinic.js、PM2；系统用 htop/glances 观察 CPU/内存/磁盘。
- 数据库与缓存：加 索引、用 连接池、引入 Redis 缓存；避免 N+1 查询与重复计算。
- 并发与多核：Node 使用 cluster/PM2；控制并发请求数，避免资源耗尽。