SVG中fill-opacity比opacity性能更优的原因解析

• 渲染层与合成机制差异
  给<rect>设置opacity时，浏览器会为每个元素创建独立的合成层。像热力图这种包含大量矩形的场景，成百上千个独立合成层会急剧占用GPU内存，同时GPU要处理大量层的合成计算，直接导致性能暴跌。
  而fill-opacity仅针对元素的填充色做透明度处理，属于SVG元素绘制流程的基础环节，不会触发独立合成层创建，所有矩形都在同一层内完成绘制，GPU开销大幅降低。

• 像素计算范围不同
  opacity会作用于元素的全部区域——包括边框、阴影（如果存在）甚至子元素，浏览器需要对元素的所有像素执行透明度混合计算。而fill-opacity只处理填充区域的像素，计算范围更小，处理效率更高。

• 浏览器优化策略区别
  fill-opacity是SVG原生的填充属性，浏览器对这类属性有成熟的绘制优化路径；而opacity本质是CSS属性（虽可用于SVG），涉及层合成的复杂逻辑，在大量重复元素的场景下，浏览器很难做针对性优化。

内容的提问来源于stack exchange，提问作者Nghia Dang