一个只读属性为什么会把你的页面拖慢？我查了 Chrome 的一个性能坑

有时候性能问题不是来自大数据量、复杂动画，也不是内存泄漏，而是一个看起来很无辜的属性设置。

最近社区里有人发现：如果代码里频繁读取某个会触发 reflow 的只读属性，页面性能会明显恶化。表面上看是“只读”，但浏览器底层可能因此放弃某些优化路径。

为什么只读反而更慢

浏览器对普通属性有很多优化，比如缓存布局结果、跳过无效读取。但如果属性被标记为只读，JS 引擎和渲染引擎之间的某些快捷通道会被关闭，每次访问都可能重新计算。

这在长列表、高频滚动、动画循环里尤其明显。

排查思路

• 先确认问题是否来自频繁读取 DOM 属性
• 用 Chrome DevTools 的 Performance 面板看 Layout / Recalculate Style 占比
• 把读取逻辑改成按需缓存，或者改用更轻量的标志位

结论

性能优化里，真正的瓶颈往往不在“大动作”，而在“高频小动作”。只读属性这件事提醒我们：写代码时要考虑浏览器优化路径，而不是只考虑语义正确性。