北京
如果你写过前端，一定懂这种痛：每次做加载骨架屏，都要对着设计稿手调一堆灰色方块，改个圆角、对个间距，半天就过去了。更烦的是，真实内容加载出来后，布局经常还会跳一下。
开发者Sean Roberts也受够了。他写了一个叫shimmer-trace的React库，思路很直接——让代码自己去看真实UI长什么样，然后自动描边生成骨架屏。
用法极简。把整个组件包进标签，传个loading状态，完事。不需要手写，不需要堆灰色div，库会遍历真实的DOM节点，量出每个文字块和图片的位置尺寸，生成形状完全一致的骨架块。
关键设计在四个地方。加载时，真实子元素用visibility: hidden藏起来——DOM还在，浏览器照样算布局，按钮该占多大还占多大，但什么都不画出来。这样骨架屏和真实UI像素级重合，累积布局偏移（CLS）直接归零。
一个叫useTrace的hook用getBoundingClientRect遍历容器，抓下每个叶子元素的位置和圆角，存成矩形列表。ResizeObserver盯着窗口变化，一resize就重新描一遍。
嵌套也处理了。多层不会各自画覆盖层，而是通过React Context往上报，最近的父级当"主控"，汇总整棵树的矩形数据，只画一个覆盖层、跑一道光波。
覆盖层本身是个绝对定位的div，背景是移动的渐变，再用CSS mask-image把收集到的矩形切成对应的形状。一道动画，多种形状，完全同步。
和传统库的区别很明显。市面上大部分方案给你灰色块自己摆，十个卡片就十条独立的光波，各跑各的，看起来又乱又廉价。shimmer-trace把全页收进一个覆盖层，眼睛追着一条光走，观感干净得多。
安装就一行：npm install shimmer-trace。Loading状态切false时，光波消失，真实UI已经在底下等着，尺寸位置一模一样，没有跳动。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
