CSS实现文字粗黑描边的text-shadow高耗性能替代方案咨询

你原来使用49层全方向偏移text-shadow实现3px粗黑描边的方式性能开销极高，浏览器每帧需要为每个文本节点计算、渲染数十次阴影效果，在性能较弱的设备上出现滚动卡顿是正常现象。以下是几个可实现同等效果的更优方案：

方案1：CSS原生text-stroke属性（首选方案，性能最优） #

这是W3C标准的文本描边实现，仅需几行代码就能达到和你原有效果完全一致的粗黑外描边，渲染性能是多重text-shadow方案的数十倍，主流浏览器包括Atom编辑器内置的Chromium内核都完全支持：

/* 加webkit前缀兼容所有webkit内核环境 */
-webkit-text-stroke: 3px black;
text-stroke: 3px black;
/* 调整绘制顺序，先渲染描边再渲染文本填充，实现纯外描边效果，不会挤占文本本身显示区域 */
paint-order: stroke fill;
/* 文本本身的颜色，按需调整即可 */
color: white;

方案2：简化版text-shadow写法（仅用于需要兼容极老旧浏览器的场景） #

如果你的使用场景必须兼容不支持text-stroke的老旧浏览器，也不需要写49层阴影，仅需4-8层带模糊的无偏移阴影就能实现近似的粗描边效果，性能提升10倍以上：

/* 多层叠加小模糊半径的无偏移阴影，比全方向偏移的写法性能高很多，效果接近 */
text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black,
             0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;

对硬边效果要求越高，就把模糊半径调得越小，叠加层数适当增加即可，完全不需要写满全方向的偏移参数。

方案3：SVG文本实现（用于需要100%跨环境效果一致的场景） #

如果需要在所有环境下描边效果完全无差异，可以使用SVG实现文本，内置的描边属性渲染性能也远高于多重text-shadow：

<text x="0" y="50" stroke="black" stroke-width="6" paint-order="stroke" fill="white">
  你的文本内容
</text>

SVG的stroke-width默认是内外各占一半，设置为你需要的描边宽度的2倍即可得到3px的纯外描边效果。

内容的提问来源于stack exchange，提问作者bob dylan