循环展开是一种通过减少循环控制开销和增加指令级并行性来提升执行效率的优化技术；它将单次迭代重复执行n次的循环体复制展开为多组内联操作，从而降低分支预测失败率、减少跳转指令、提高CPU流水线利用率。
循环展开（Loop Unrolling）是一种手动或编译器辅助的优化技术，它通过减少循环控制开销（如条件判断、计数器更新）和增加指令级并行性，来提升 JavaScript 在引擎底层的执行效率。虽然现代 JS 引擎（如 V8）已内置自动循环展开能力，但理解其原理并合理应用，仍能在关键路径中带来可观收益。
什么是循环展开
循环展开的本质是把原本重复执行 n 次的单次迭代，合并为若干组“内联展开”的操作，从而降低分支预测失败率、减少跳转指令、提高 CPU 流水线利用率。例如：
原始 for 循环：
for (let i = 0; i sum += arr[i];}
展开为每次处理 4 个元素：
立即学习“Java免费学习笔记（深入）”；
for (let i = 0; i sum += arr[i];sum += arr[i + 1];
sum += arr[i + 2];
sum += arr[i + 3];
}
注意：需额外处理余数（len % 4），避免越界。
适用场景与前提条件
- 固定长度且可预知规模的数组：如 WebGL 缓冲区、音频采样帧、图像像素数组等；动态长度或频繁修改的集合不建议展开
- 循环体简单、无副作用：仅含算术运算、内存读取/写入，不含函数调用、DOM 操作、await 或 try-catch
- 目标环境明确支持现代 JIT：V8（Chrome/Node.js）、SpiderMonkey（Firefox）对展开后代码有更好内联与寄存器分配策略；旧引擎可能反而因代码膨胀降低性能
手动展开的关键实践
- 控制展开因子（Unroll Factor）：通常选 2、4、8；过大易触发指令缓存未命中，过小收益不明显；建议从 factor=4 开始基准测试
-
显式缓存数组长度与引用：避免每次访问 arr.length 或 arr[i] 触发属性查找，例如：
const len = arr.length | 0;
const a = arr; - 处理边界余数必须严谨：可用 while 剩余部分，或添加 if 判断，避免越界访问导致 TypeError 或静默错误
- 避免在热循环中混用 let/const 声明：改用 var 或提前声明变量，减少作用域链查找开销；展开体内尽量复用局部变量
与引擎 JIT 的协同关系
JavaScript 引擎不会对所有循环都展开，它依赖运行时反馈：
- JIT 监控到某段 for 循环被高频执行（成为“热点”），且循环次数稳定、结构规整，才可能触发自动展开
- 若循环内含 call、eval、with 或动态属性访问（如 obj[key]），JIT 会降级为解释执行，放弃优化包括展开
- 手动展开相当于向引擎“提示”该逻辑是关键路径，有助于稳定进入 TurboFan 优化管线，减少去优化（deoptimization）风险
