// setTimeout：固定時間後執行，不管瀏覽器在不在渲染
setTimeout(() => updateDOM(), 16); // 希望模擬 60fps
// rAF：在瀏覽器下一次渲染前執行
requestAnimationFrame(() => updateDOM());

/* 這些屬性會觸發獨立合成層 */
transform: translate3d(0, 0, 0);
will-change: transform;
opacity: 0.5; /* 動畫中 */

<!-- SVG：宣告一個圓，瀏覽器負責渲染和事件 -->
<circle cx="100" cy="100" r="50" (click)="onClick()" />

// Canvas：命令式畫一個圓，事件全部自己處理
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

<svg width="400" height="300" viewBox="0 0 1000 750">
  <circle cx="500" cy="375" r="50" />
</svg>

/* 好：只觸發 Composite，跳過 Layout 和 Paint */
transform: translateX(100px);
opacity: 0.5;
/* 差：觸發 Layout → Paint → Composite，全部重來 */
left: 100px;
width: 200px;

// 壞：強制同步 layout（layout thrashing）
element.style.width = '100px';    // 寫
const h = element.offsetHeight;    // 讀 → 瀏覽器被迫立即 layout
element.style.height = h + 'px';   // 又寫
// 好：先批次讀，再批次寫
const h = element.offsetHeight;    // 讀
requestAnimationFrame(() => {
  element.style.width = '100px';   // 寫
  element.style.height = h + 'px'; // 寫
});

touch-action: pan-x pan-y; /* 瀏覽器管捲動，JS 管縮放 */

// 未放大：瀏覽器管捲動
element.style.touchAction = 'manipulation';
// 放大後：JS 管一切
element.style.touchAction = 'none';

tap.requireFailure(pinch);   // pinch 進行中不觸發 tap
pinch.recognizeWith(pan);    // pinch 和 pan 可同時辨識

.element {
  will-change: transform; /* 預建 GPU 合成層 */
}

/* 千萬不要這樣做 */
* { will-change: transform, opacity; }

// 動畫開始前加
element.style.willChange = 'transform';
// 動畫結束後移除
element.addEventListener('transitionend', () => {
  element.style.willChange = 'auto';
});

<div style="display: flex; gap: 10px;">
  <div>A</div>
  <div style="transform: scale(2);">B</div>
  <div>C</div>
</div>

// transform scale(2) 不會撐大父容器的捲動範圍，必須用 margin 手動補上
child.style.marginRight = `${width * (scale - 1)}px`;
child.style.marginBottom = `${height * (scale - 1)}px`;

<!-- 方法 1：改 viewBox — 向量重算，永遠清晰 -->
<svg viewBox="250 187 500 375">  <!-- 放大 2 倍，看中心區域 -->
<!-- 方法 2：SVG 內部 transform — 向量重算，清晰 -->
<g transform="scale(2) translate(-125, -93)">
  <circle cx="500" cy="375" r="50" />
</g>
<!-- 方法 3：CSS transform — 可能模糊 -->
<svg style="transform: scale(2);">

<!-- SVG transform：作用在 SVG 座標系內 -->
<g transform="translate(100, 50) scale(2) rotate(45)">
<!-- CSS transform：作用在 CSS 視覺層 -->
<g style="transform: translate(100px, 50px) scale(2) rotate(45deg);">

<!-- 預設：等比縮放，置中 -->
<svg viewBox="0 0 100 100" width="200" height="100"
     preserveAspectRatio="xMidYMid meet">
<!-- 填滿，可能裁切 -->
<svg viewBox="0 0 100 100" width="200" height="100"
     preserveAspectRatio="xMidYMid slice">
<!-- 不保持比例，拉伸填滿 -->
<svg viewBox="0 0 100 100" width="200" height="100"
     preserveAspectRatio="none">

// 世界座標 → 螢幕座標（繪製時用）
screenX = worldX * scale + offsetX;
screenY = worldY * scale + offsetY;
// 螢幕座標 → 世界座標（點擊偵測用）
worldX = (screenX - offsetX) / scale;
worldY = (screenY - offsetY) / scale;

function zoomAt(newScale, centerX, centerY) {
  const worldX = (centerX - offsetX) / scale;
  const worldY = (centerY - offsetY) / scale;
  offsetX = centerX - worldX * newScale;
  offsetY = centerY - worldY * newScale;
  scale = newScale;
}

onZoomChange(zoomed: boolean) {
  this.swiper.allowTouchMove = !zoomed;
}

element.addEventListener('touchmove', (e) => {
  if (isDragging) e.preventDefault();
}, { passive: false }); // 必須 non-passive 才能 preventDefault

tap.requireFailure(pinch);

touch-action: none; /* JS 全權處理 */

const itemHeight = 50;
const totalHeight = 10000 * 50;
const scrollTop = container.scrollTop;
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = startIndex + visibleCount;
// 只渲染 items[startIndex..endIndex]

<!-- 差：1000 個 <circle> 節點 -->
<circle cx="10" cy="10" r="2" />
<circle cx="20" cy="15" r="2" />
<!-- ... 998 more -->
<!-- 好：一個 <path> 搞定 -->
<path d="M10,10 m-2,0 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0
         M20,15 m-2,0 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" />

// 類似虛擬捲動的概念
const visibleShapes = shapes.filter(shape =>
  shape.x >= viewBox.x &&
  shape.x <= viewBox.x + viewBox.width &&
  shape.y >= viewBox.y &&
  shape.y <= viewBox.y + viewBox.height
);
// 只將 visibleShapes 加入 DOM

// SVG 版本的 zoomAt（對比 Canvas 的 ctx.scale + ctx.translate）
function zoomAt(svg: SVGSVGElement, newScale: number, centerX: number, centerY: number) {
  const vb = svg.viewBox.baseVal;
  const currentScale = svg.clientWidth / vb.width;
  // 螢幕座標 → 世界座標
  const worldX = vb.x + centerX / currentScale;
  const worldY = vb.y + centerY / currentScale;
  // 新的 viewBox 尺寸
  const newWidth = svg.clientWidth / newScale;
  const newHeight = svg.clientHeight / newScale;
  // 讓 worldX/worldY 仍然對應 centerX/centerY
  vb.x = worldX - centerX / newScale;
  vb.y = worldY - centerY / newScale;
  vb.width = newWidth;
  vb.height = newHeight;
}