简单理解渲染引擎和事件循环机制

简单理解渲染引擎和事件循环机制

技术杂谈小彩虹2021-08-22 7:19:30220A+A-

浏览器既是搬运工,也是翻译官。

  • 将枯燥的网络资源(html css js)从服务器“搬”到本地
  • 将资源“翻译”成五彩的页面
  • 接受并反馈用户的交互

渲染引擎

翻译的工作,最主要是由,浏览器的渲染引擎做的。

翻译的过程如下:

  • 访问网址的时候,服务器一般会首先返回 html 文件
  • 渲染引擎,开始解析html文件,生成DOM树。在这过程中遇到其他资源(css img js),会发出新的请求
  • 识别并加载所有的 CSS 样式信息,生成CSSOM树,注意这里的样式会添加到DOM树的各个节点
  • DOM树和CSSOM树合并,将不可见的元素剔除,生成render 树(:after :before 伪元素会在此时被构建到 DOM 树中)
  • 计算页面中所有元素的相对位置、大小等信息,就有了盒模型
  • 开始把每一个页面图层转换为像素,并对所有的媒体文件进行解码,然后五彩的页面就显示出来了

总结下:DOM树 => CSSOM树 => render树 => 布局 => 绘制

重绘、重排、图层

页面不会一成不变的,JS 可以随意操作 DOM,从而会让渲染引擎再次翻译。

不同的操作,翻译成本不同,主要分为两种操作:

  • 重排(回流):操作引发了 DOM 几何尺寸的变化(修改元素的宽高或隐藏元素等)时,于是需要重新计算元素 的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再绘制出来。 对应的流程:可能更新DOM树 => 更新CSSOM树 => 更新render树 => 重新布局 => 重新绘制
  • 重绘:操作只修改了未影响元素几何属性的样式(比如修改了颜色或背景色)时,就会跳过计算、直接绘制。 对应的流程: 更新CSSOM树 => 更新render树 => 重新绘制

引发重排的操作:

  • 修改元素的几何属性
  • 改变 DOM 的结构,增减、移动等
  • 获取一些特定属性的值:offsetTop|Left|Width|Height、scrollTop|Left|Width|Height、 clientTop|Left|Width|Height,这些属性均通过即时计算得到,于是浏览器为了获取这些值,也会进行回流

重排的代价很昂贵,尽量减少重排的操作,频繁引发重排,会让页面卡顿滴~

事件循环机制 event-loop

以上还没提到 JS 文件的翻译,JS 是由 JS 引擎翻译的。

先提一些名词:

  • 宏任务(macro-task)队列:script(整体代码)、setTimeout、setInterval 等
  • 微任务(microtask) 队列:Promise 等
  • 函数调用栈

JS 引擎从开始执行 Script 脚本的时候,这本身就是一个宏任务,然后创建全局上下文,进栈

  • 如果遇到Promisethen代码,不会直接执行,会在此宏任务的内部,开启一个微任务队列,这个then任务就是排队的第一人
  • 如果遇到setTimeout/setInterval,不会直接执行,会另外开启一个宏任务,排在当前宏任务的后面,如果这个setTimeout里面再遇到then,也会在它的内部开启一个微任务队列
  • 如果当前的宏任务的同步代码执行完了,会依次执行当前宏任务内部的,微任务队列里的任务
  • 如果当前的宏任务的同步代码执行完了,微任务队列里的任务也执行完了,就会执行下一个宏任务
  • 函数调用栈,每次执行一个函数,就创建了函数上下文,进栈,执行完,出栈,没啥说的,之前说过了
function app() {
  // s-1
  setTimeout(() => {
    console.log("1-1");
    // p-1
    Promise.resolve().then(() => {
      console.log("2-1");
    });
  });
  console.log("1-2");
  // p-2
  Promise.resolve().then(() => {
    console.log("1-3");
    // s-2
    setTimeout(() => {
      console.log("3-1");
    });
  });
}
app();
// 1-2 1-3 1-1 2-1 3-1

画了个图,希望能帮助读者理解:

task1

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们