
在web前端中,我们总是会听说不要阻塞主线程,我们要打断长任务的运行。做这些事情的意义到底在哪里?
如果我们看过很多关于web 性能优化的文章,我们会发现保持我们的javascript 应用程序变快的建议中往往都会提到如下的建议:
- 不要阻塞主线程
- 把长任务打断
我们在加载的页面的时候,基本上都会去考虑怎么减少javascript 代码的体积,这个能够提高页面打开的速度,但是更少的代码并不一定意味着用户的界面体验会更流畅。
要懂得优化js中任务的重要性。那么我们首先需要了解什么是任务,任务的角色,以及浏览器是怎么处理任务的。我们先来了解一下什么是任务?
什么是任务
浏览器执行的各个任务之间是相互独立的。例如页面渲染,解析html和css,运行我们编写的javascript代码,以及一些我们无法直接控制的事情都输入任务的范畴。但是浏览器中任务的主要来源是我们编写和部署的代码。

任务影响性能的方式很多,比如我们在打开网站时下载js代码,浏览器会把任务放在队列中,当解析编译javascript完成执行,再去排队执行任务。随后页面的任务会随着用户交互驱动的事件处理器,js动画以及分析收集的后台活动等js活动触发(web worker 等类似的api除外)。
什么是主线程
浏览器中大多数任务都发生在主线程中。主线程之所以被称为主线程的一个主要原因是:我们写的javascript代码几乎都在该线程上执行。
在同一时刻,主线程只能运行一个任务。当该任务的执行时间超过50ms的时候,那么这个任务就会被称之为长任务(long task)。当一个长任务正在运行的过程中,这个时候用户也在与页面进行交互,或者这个时候有个关键的渲染更新需要进行。这个时候,浏览器会延迟用户交互或者渲染。这个时候导致用户交互或渲染延迟,也是就页面发生卡顿。
阅读 “怎样去优化长任务” itemprop="discussionURL"发表评论