- 避免使用 jQuery 計算 layout，太過消耗 CPU 效能。一次性動作尚可接受，如果是在需要不斷處理的地方 (如動畫裡) 千萬不要 (除非你要讓客戶電腦飛起來)。
- 改用 vanilla Javascript 可參考 http://youmightnotneedjquery.com/
- 盡量使用較新的
CSS property來達到所需效果，例如善用position: sticky，搭配 Javascript 計算top值來取代一直根據window.scrollY位置計算元素所需 Y 軸位置。記得確認所需支援瀏覽器對較新CSS property支援度。 - 需要動畫大量渲染時可使用
requestAnimationFrame取代setTimeOut，理由直接看影片：
- 動畫中如需計算位置，使用css
transformproperty，例如translateY取代position: absolute加上top等定位。原因如圖，因為就算 main thread 在忙，在 composition （右下角圓圈）時 transition 仍會持續進行：
document.querySelector(el).getBoundingClientRect()可取得元素相對 view port 的位置，對於元素捲到某個位置要做什麼事可以用來做位置判斷。
getBoundingClientRect()會導致 reflow 因此影響效能，如果是要計算元件是否出現或交疊等狀況，可考慮使用Intersection Observer API。
- 插入 html 可以使用
insetAdjacentHTML()，可以指名想要插入位置位置。
- 在 Javascript 裡如果要變化
class，盡量拉到最後做。先做計算或取dom數值等行為，class變動延到最後再做。這樣可以避免因為class變了，需要先計算layout才能回答dom位置或寬高等相關問題，導致效能受影響。
參考資料
- What forces layout / reflow: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
- CSS Triggers: https://csstriggers.com/
- Performance Analysis Reference https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference
- Measure Performance with the RAIL Model https://developers.google.com/web/fundamentals/performance/rail
- Scroll to the future
https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations
簡體版 https://www.zcfy.cc/article/scroll-to-the-future
