js dom渲染和时间循环_化繁为简，简括浏览器渲染机制

(给前端大全加星标，提升前端技能)

作者：IQ前端 公号 / LazyCarry

前言

前端仔每天都跟浏览器打交道，那么浏览器到底是怎样渲染的呢？

我们都知道，JS是单线程的，也就是只有前一个任务执行完成，才会执行下一个任务。如果前一个任务耗时很长，那么下一个任务就只能干等着。显然，这样是非常浪费资源的。那么就要解决这个问题啦，先来了解一下「Event Loop」事件循环。

Event Loop

我们先来看一下HTML标准的解释：为了协调事件event，用户交互user interaction，脚本script，渲染rendering，网络networking等，用户代理user agent必须使用事件循环「Event Loop」。

「event-loop」是解决JS单线程运行阻塞的一种机制，在JS的异步运行机制中，我们需要知道：

• 所有的「同步任务」都在主线程进行
• 「异步任务」进入任务队列，任务队列会通知主线程，哪个异步任务可以执行，这个异步任务就会进入主线程。异步任务必须指定回调函数，当主线程开始执行异步任务，其实就是在执行对应的回调函数。
• 如果主线程的所有同步任务都执行完，系统就会去读取「任务队列」上的异步任务，如果有可以执行的，就会结束等待状态，进入主线程，开始执行。
• 主线程不断的执行第3步

这就是JS的运行机制，也称为「Event Loop」事件循环。

异步任务分类

「宏任务」macrotasks：script(整体代码)、setTimeout、setInterval、setImmed