JS 为何会阻碍渲染

阻碍渲染的组件

Live Editor

function BlockRender() {
  const [value, setValue] = React.useState(0);

  //死循环指定的时间
  const delay = (duration) => {
    const start = Date.now();
    while (Date.now() - start < duration) {}
  };

  return (
    <>
      <h2>{value}</h2>
      <button
        onClick={() => {
          //点击按钮之后会卡住 3 秒, 在继续渲染
          setValue((prev) => {
            return prev + 1;
          });
          delay(3000);
        }}
      >
        change
      </button>
    </>
  );
}

Result

首先交互线程会先监听用户点击的事件当用户点击了按钮会在消息队列的末尾添加一个任务给主线程执行。
执行点击事件之后会再次创建一个页面的绘制任务添加到消息队列末尾 , delay 函数死循环 3s 执行完成。才执行消息队列里面的渲染任务
所以会出现浏览器主线程 3s 的阻塞然后在会渲染页面

阻碍渲染的组件​

阻碍渲染的组件