Loading

JS概念

浏览器的渲染流程

  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版权协议，转载请附上原文出处链接及本声明。

原文链接：🅰️https://blog.csdn.net/qq_42269433/article/details/81133772

 

导致回流&重绘的情况

 

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

 

 

 

 

 

 

解决方案 Virtual DOM(虚拟DOM)

通过JS对象的方式模拟DOM节点通过js中的Object对象来模拟DOM中的节点
通过算法(DOM Diff)减少DOM操作的次数, 减少回流。
VNodes 是一个js对象,用算法的方式 计算要更新的节点/元素。

 

 

JS 事件队列(消息队列)

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

 

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

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

原文链接🅰️https://www.ruanyifeng.com/blog/2014/10/event-loop.html

 

 

 

 

Event Loop(事件循环)

 

浏览器中的Event Loop

 

- Stack的三种含义🅰️https://www.ruanyifeng.com/blog/2013/11/stack.html

 

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内部使用。

 

 

原文链接 🅰️https://zhuanlan.zhihu.com/p/41543963

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2021-10-10 15:00  guxuanyan  阅读(60)  评论(0)    收藏  举报