为何逐像素绘制基于x值的灰度渐变比固定单色绘制耗时更长？

耗时差异核心原因 #

两种场景的x值推导运算开销极低，差异完全来自fillStyle赋值及后续的Canvas渲染流程，具体原因如下：

• 绘制状态更新开销：当传入固定值255时，每次赋值给ctx.fillStyle的都是完全相同的rgb(255,255,255)字符串，Canvas上下文会检测到填充色状态没有变化，直接复用之前的解析结果和渲染状态，不需要额外处理。而传入动态x值时，每次的rgb()字符串都是新值，浏览器需要逐次解析字符串为RGBA数值，再更新上下文的绘制状态，36万次（600*600）循环下这部分开销会被大幅放大。
• 字符串拼接开销：固定值场景下的字符串拼接结果是固定常量，JS引擎会做常量缓存，不需要每次生成新的字符串对象。而x值动态变化的场景每次都要创建全新的字符串对象，高频的对象创建和后续垃圾回收也会拉高整体耗时。
• 绘制批处理优化失效：浏览器底层对Canvas绘制有默认的批处理优化，连续使用同一个填充色调用fillRect时，会把多个绘制指令合并后一次性提交给GPU执行，大幅减少CPU和GPU的通信次数。而每次变更fillStyle会打断批处理逻辑，每个fillRect都要单独提交状态和绘制指令，硬件通信的开销会成倍增长。

内容的提问来源于stack exchange，提问作者Chewie The Chorkie