深入了解JavaScript阻塞渲染

　　目录

　　前言：

　　在中文社区，这么多年一直流传一个说法：线程负责执行，渲染线程负责渲染，这两者是互斥的，所以执行时会阻塞渲染。但随着使用的增多，逐渐开始怀疑以上说法。本文会以实际案例来解释为什么阻塞渲染。

　　到底几个线程

　　在讲解线程与线程互斥的文章中，通常会列出渲染进程包含的线程，比如：

　　但是，我们以百度的搜索页举例，打开面板开启录制：

　　上图录制结果中：

　　从这个角度看，浏览器实际的线程情况与那些线程相关的文章描述的并不相同。

　　主线程的任务

　　接下来，让我们进入。红线框内长短不一的灰色块，就是主线程中执行的任务。

　　注意看红框内的绿色块，代表（首次绘制）：

　　那么在首次绘制前都要执行什么任务呢？可以看到主要有3个（任务）：

　　第一个任务是请求数据：

　　Parse HTML

　　当请求回字节流后，开始第二个任务，将字节流解析为，这个任务的名字就是图中的蓝色块：

　　注意其中有些执行时长不一的，这些是解析树过程中遇到的代码。

　　从树中可以看到这些阻塞树生成的脚本：

　　他们的存在显著拉长了的用时。

　　Recaculate Style

　　解析完树（蓝色）后，下一个任务是紫色：

　　他负责将中的样式（外联、内联）输出为，有两个作用：

　　我们可以从控制台打印直观感受他的存在：

　　Layout

　　有了树与，接下来需要为视图中可见部分生成一棵树（比如部分就不需要在这棵树中显示）。

　　这个任务是紫色：

　　Update Layer Tree

　　用户看到的页面实际是由多层页面重叠后的结果，开发者可以用很多手段（比如）改变某部分的层级。

　　比如滚动条就会形成自己独立的层级：

　　既然是多层结构，那么就需要更新每层的信息，这个任务是紫色的：

　　Paint

　　我们可以发现，在之前，之后只剩下这一任务了：

　　从字面意义讲，这就是绘制么？并不是。

　　的任务是整理每一层页面的绘制信息，构成绘制列表，这些数据会交给合成线程负责后续绘制操作。

　　可以发现，具体的绘制操作是交由合成线程完成，他与所在线程（主线程）并不是互斥的。

　　JS为啥阻塞渲染

　　我们现在知道，执行与任务都发生在主线程。

　　渲染被阻塞的原因很明显：因为任务没有及时执行，即绘制列表没有及时提交给合成线程。

　　之所以没有及时执行，可能是因为执行时间过长，导致这一帧没有时间执行。

　　比如，我们打开B站，记录下主线程的任务。

　　可以看到，有个执行时长达到231.88ms，超过了一帧的时间，在此期间主线程就没时间执行了：

　　总结

　　之所以阻塞渲染，是因为执行与渲染相关任务都在争夺主线程有限的资源。当执行时间过长，渲染相关任务就没时间执行了。

　　到此这篇关于深入了解JavaScript阻塞渲染的文章就介绍到这了,更多相关JS阻塞渲染 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: