如果你寫過前端，一定懂這種痛：每次做加載骨架屏，都要對(duì)著設(shè)計(jì)稿手調(diào)一堆灰色方塊，改個(gè)圓角、對(duì)個(gè)間距，半天就過去了。更煩的是，真實(shí)內(nèi)容加載出來后，布局經(jīng)常還會(huì)跳一下。

開發(fā)者Sean Roberts也受夠了。他寫了一個(gè)叫shimmer-trace的React庫(kù)，思路很直接——讓代碼自己去看真實(shí)UI長(zhǎng)什么樣，然后自動(dòng)描邊生成骨架屏。

用法極簡(jiǎn)。把整個(gè)組件包進(jìn)標(biāo)簽，傳個(gè)loading狀態(tài)，完事。不需要手寫，不需要堆灰色div，庫(kù)會(huì)遍歷真實(shí)的DOM節(jié)點(diǎn)，量出每個(gè)文字塊和圖片的位置尺寸，生成形狀完全一致的骨架塊。

關(guān)鍵設(shè)計(jì)在四個(gè)地方。加載時(shí)，真實(shí)子元素用visibility: hidden藏起來——DOM還在，瀏覽器照樣算布局，按鈕該占多大還占多大，但什么都不畫出來。這樣骨架屏和真實(shí)UI像素級(jí)重合，累積布局偏移（CLS）直接歸零。

一個(gè)叫useTrace的hook用getBoundingClientRect遍歷容器，抓下每個(gè)葉子元素的位置和圓角，存成矩形列表。ResizeObserver盯著窗口變化，一resize就重新描一遍。

嵌套也處理了。多層不會(huì)各自畫覆蓋層，而是通過React Context往上報(bào)，最近的父級(jí)當(dāng)"主控"，匯總整棵樹的矩形數(shù)據(jù)，只畫一個(gè)覆蓋層、跑一道光波。

覆蓋層本身是個(gè)絕對(duì)定位的div，背景是移動(dòng)的漸變，再用CSS mask-image把收集到的矩形切成對(duì)應(yīng)的形狀。一道動(dòng)畫，多種形狀，完全同步。

和傳統(tǒng)庫(kù)的區(qū)別很明顯。市面上大部分方案給你灰色塊自己擺，十個(gè)卡片就十條獨(dú)立的光波，各跑各的，看起來又亂又廉價(jià)。shimmer-trace把全頁(yè)收進(jìn)一個(gè)覆蓋層，眼睛追著一條光走，觀感干凈得多。

安裝就一行：npm install shimmer-trace。Loading狀態(tài)切false時(shí)，光波消失，真實(shí)UI已經(jīng)在底下等著，尺寸位置一模一樣，沒有跳動(dòng)。