记如何确认已经在浏览器上渲染

15 阅读1分钟
 const observer = new MutationObserver(() => {
    const addedNodesCount = Array.from(container.childNodes).filter(
      node => node.className === 'node',
    ).length;
    if (addedNodesCount === nodes.length) {
      waitForLayout(
        () => {
          renderEdges();
        },
        () => {
          const firstNode = container.childNodes[0];
          return firstNode && firstNode.offsetWidth > 0;
        },
      );
      observer.disconnect();
    }
  });
  observer.observe(container, { childList: true, attributes: true });
  
  
  
  function waitForLayout(callback, check) {
  if (check()) {
    callback();
  } else {
  
    requestAnimationFrame(() => {
      waitForLayout(callback, check);
    });
  }
}

主要是三个函数 , 第一个new MutationObserver 监听

第二个 递归判断浏览器是否已经渲染上了 , 通过check函数实现g

最后是requestAnimationFrame这个会在每次浏览器重绘之间进行监听