HTMLElement.focus()异步特性致边界矩形获取异常，求替代sleep方案

• 浏览器事件循环的工作机制导致：focus() 是同步执行的方法，但触发 :focus-visible 伪类后引发的元素样式变更、位置偏移属于浏览器的渲染任务，这类任务会被放到宏任务队列，不会在当前同步代码执行阶段立即完成。
• 你在调用 focus() 后立刻获取 getBoundingClientRect() 时，浏览器还没来得及完成重绘，元素位置没实际变化，所以拿到的是旧的边界矩形数据。
• 加 sleep(100ms) 其实是给浏览器留出时间跑完渲染循环的重绘任务，等睡眠结束后元素已经位移完成，自然能拿到正确结果。

用浏览器原生的 requestAnimationFrame API 就能解决，它会在浏览器下一次重绘完成后执行回调，确保获取到元素最新的位置信息：

console.log(`Bounding Rectangle for ${tabbedElement}: `, tabbedElement.getBoundingClientRect());
tabbedElement.focus();

requestAnimationFrame(() => {
  let boundingRectTabbedElement = tabbedElement.getBoundingClientRect();
  console.log(`Bounding Rectangle for after tabbing: `, boundingRectTabbedElement);

  let xPath = getXPathForElement(tabbedElement);
  console.log(`Bounding Rectangle for after tabbing direct retrieval : `, getElementByXPath(xPath).getBoundingClientRect());
});

如果需要更精准监听位置变化，也可以用 MutationObserver 监听元素的位置相关属性，但 requestAnimationFrame 是更简洁直接的方案。

内容的提问来源于stack exchange，提问作者Michael Dzwinel