浏览器的渲染流程

1. 拿到响应返回的是一个HTML文件>

2. 拿到HTML文件 形成DOM tree>

3. 读取到link或style标签 将会解析css形成CSSOM >

4. 读取到有外部引入js或<script>标签，将会开始执行js中的代码,html文件的读取将会暂停;;等待js执行结束>

5. 结束后继续执行后续的html代码, 最后形成DOM树>

6. DOM树下的body下面的都称为可视化节点,拿到可视化节点和CSSOM表中的选择器进行对应（为布局做准备）形成Render tree>

7. 根据render树开始进行布局(为绘制做准备)>

8. 开始绘制>

——————————————————————————— 个人理解 ————————————————————————————

特殊词汇: 重绘 -> 重新绘制 &> 回流 ->

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
​
2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
​
注：回流必将引起重绘，而重绘不一定会引起回流。
​

————————————————————————————————————————————————————————————

版权声明：本文为CSDN博主「红烧金鱼草」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：🅰️JavaScript——浏览器的重绘与回流_Lotus的博客-CSDN博客_js重绘和回流

导致回流&重绘的情况

​
1. 使用JS 添加，删，修改,删除DOM节点会导致页面 回流&重绘
​
2. 使用JS 添加css样式会导致回流.
​
3. 修改元素的大小会导致回流(padding,margin,width,height)
​
4. 对元素的显示、隐藏会导致回流.(display:none;display:block)
​
5. 修改元素的颜色会导致重绘
......
......
......
......

JS 事件队列(消息队列)

IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。
​
"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。
​
所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。
​
"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈（JS主线程内的代码）一清空，"任务队列"上第一位的事件就自动进入主线程。
但是，由于存在后文提到的"定时器"功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

事件监听: 如果监听到一些事件 . 会把回调函数放到事件队列中!

定时器也在是在事件队列中，

原文链接🅰️JavaScript 运行机制详解：再谈Event Loop - 阮一峰的网络日志

Event Loop(事件循环)

浏览器中的Event Loop

- Stack的三种含义🅰️Stack的三种含义 - 阮一峰的网络日志

1, 主线程运行的时候会生成堆（heap）和栈（stack）；
2, js从上到下解析方法，将其中的同步任务按照执行顺序排列到执行栈中；
3, 当程序调用外部的API时，比如ajax、setTimeout等，会将此类异步任务挂起，继续执行执行栈中的任务，等异步任务返回结果后，再按照执行顺序排列到事件队列中；
4, 主线程先将执行栈中的同步任务清空，然后检查事件队列中是否有任务，如果有，就将第一个事件对应的回调推到执行栈中执行，若在执行过程中遇到异步任务，则继续将这个异步任务排列到事件队列中。
5, 主线程每次将执行栈清空后，就去事件队列中检查是否有任务，如果有，就每次取出一个推到执行栈中执行，这个过程是循环往复的... ...，这个过程被称为“Event Loop 事件循环”。

事件队列中的任务分为宏任务和微任务：

• 宏任务

  setTimeout，setInterval，setImmediate，I/O(磁盘读写或网络通信)，UI交互事件

• 微任务

  process.nextTick，Promise.then

• 优先执行微任务。 宏任务向执行栈 推送一个就去看看微任务中有没有需要执行的,如果有会先执行微任务, 如果没有继续执行宏任务中的代码

NodeJS中的Event Loop

Node是一个基于Chrome V8引擎的javascript运行环境，我们写的js代码会交给V8引擎进行处理；解析后代码调用的Node API，Node会交给libuv库处理，它将不同的任务分配给不同的线程，形成一个 Event Loop，以异步的方式将任务的执行结果返回给V8引擎，再将结果返回给用户。

因为Node环境下的差异性，我们可以理解为将浏览器中的宏任务更加细分为以下六个阶段。

• timers：这个阶段执行定时器队列中的回调如 setTimeout 和 setInterval；

• I/O callbacks：这个阶段执行一些系统操作的回调，比如TCP错误，但不包括close事件、定时器和setImmediate的回调；

• idle, prepare：只在node内部使用；

• poll：等待新的I/O事件，node在一些特殊情况下会阻塞在这里；

• check：setImmediate回调在这个阶段执行；

• close callbacks：只在node内部使用。

原文链接 🅰️Event Loop 这个循环你晓得么？(附GIF详解) - 知乎