效能詞條 4-21

卡頓與掉幀Jank

也常叫做：掉幀、Jank、卡頓

你可能會這樣說

網站動畫在電腦上很順，到手機上卻一卡一卡，捲動也黏黏的；工程師朋友說這叫「掉幀」，跟每秒 60 張畫面有關。想弄懂原因和修法。

卡頓與掉幀指畫面更新不及時：螢幕理想上每秒重繪 60 次，某幾次沒趕上，畫面看起來就一頓一頓的。

常見原因是動畫占住了瀏覽器的主執行緒：它忙著重算版面、跑指令碼，就來不及畫下一格。

有一條黃金法則：動畫只改 transform 和 opacity，這兩項能交給顯示卡處理，幾乎不掉幀；改寬高或位置這類會引發重新排版的屬性，就很容易卡。

.card {transition: width .3s;transition: transform .3s;}

點各段比較：哪種寫法會讓手機掉幀？

圖 4-21　點選寫法：width 會卡，transform 順——就差在這裡。

中文就可以

動畫在手機上會卡，請幫我修順：
1. 找出所有會觸發重新排版的動畫，改用 transform 與 opacity 實作。
2. 捲動期間的視差改用輕量做法，手機版直接停用。
3. 動畫進行中避免同時載入大圖。
4. 修完說明改了哪些地方，方便我以後自己注意。