我看到一个很有意思的教学，我觉得实在是太牛了。我迫不及待要跟大家分享一下了。
来，接下来我为大家讲解一下为什么JS会阻塞页面渲染
首先讲这个大家要有简单的事件循环的概念
后面的文章会简单的为大家介绍一下这些概念
我给大家上一段代码，然后为大家讲解一下JS为什么会阻塞页面渲染
大家可以试试下面这段代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><div class="box">我是帅哥!</div><button>点击修改名字</button>
</body>
<script>const box = document.querySelector(".box")const btn = document.querySelector("button")// 来一个处理时间的函数function delay(time) {let date = Date.now()// 现在的时间减去之前的时间while(Date.now() - date < time) {}}btn.onclick = ()=>{box.textContent = "确实很帅"delay(3000)}
</script>
</html>
我就不画图了，我给大家口述一下
事件循环大家应该知道吧。
1、JS运行在渲染主线程上面，我点击了按钮，交互线程就会工作，它就会把回调函数包装成任务，放入渲染主线程中。
2、渲染主线程中我执行了 box.textContent = “确实很帅”。但这时候页面不会发生任何改变，而且直接卡死。
3、执行这一步，它就会要绘制页面，会有一个绘制的任务，就会把这任务丢到事件队列当中。
4、这时候渲染主线程当中还有延迟函数。它就会阻塞渲染主线程。绘制任务就会被压在事件队列当中。
5、这时我们等待三秒后，在事件队列当中的绘制操作就会进入到渲染主线程当中执行。
所以它就会卡顿
感谢大家的阅读，大家一起努力进步！
![[分享] SQL在线编辑工具（好用）](http://pic.xiahunao.cn/[分享] SQL在线编辑工具（好用）)
