分类： 前端技术

在web前端中，我们总是会听说不要阻塞主线程，我们要打断长任务的运行。做这些事情的意义到底在哪里？

如果我们看过很多关于web 性能优化的文章，我们会发现保持我们的javascript 应用程序变快的建议中往往都会提到如下的建议：

• 不要阻塞主线程
• 把长任务打断

我们在加载的页面的时候，基本上都会去考虑怎么减少javascript 代码的体积，这个能够提高页面打开的速度，但是更少的代码并不一定意味着用户的界面体验会更流畅。

要懂得优化js中任务的重要性。那么我们首先需要了解什么是任务，任务的角色，以及浏览器是怎么处理任务的。我们先来了解一下什么是任务?

什么是任务

浏览器执行的各个任务之间是相互独立的。例如页面渲染，解析html和css,运行我们编写的javascript代码，以及一些我们无法直接控制的事情都输入任务的范畴。但是浏览器中任务的主要来源是我们编写和部署的代码。

任务影响性能的方式很多，比如我们在打开网站时下载js代码，浏览器会把任务放在队列中，当解析编译javascript完成执行，再去排队执行任务。随后页面的任务会随着用户交互驱动的事件处理器，js动画以及分析收集的后台活动等js活动触发（web worker 等类似的api除外）。

什么是主线程

浏览器中大多数任务都发生在主线程中。主线程之所以被称为主线程的一个主要原因是：我们写的javascript代码几乎都在该线程上执行。

在同一时刻，主线程只能运行一个任务。当该任务的执行时间超过50ms的时候，那么这个任务就会被称之为长任务（long task）。当一个长任务正在运行的过程中，这个时候用户也在与页面进行交互，或者这个时候有个关键的渲染更新需要进行。这个时候，浏览器会延迟用户交互或者渲染。这个时候导致用户交互或渲染延迟，也是就页面发生卡顿。