← 返回目录

46. 宏任务(MacroTask)引入

第 44 / 147 卷

图 88-1
图 88-1

很容易得出,字节码是比机器码轻量得多的代码。那 V8 为什么要使用字节码,字节码到底是个什么东西?

字节码是介于AST 和机器码之间的一种代码,但是与特定类型的机器码无关,字节码需要通过解释器将其转换为机器码然后执行。

字节码仍然需要转换为机器码,但和原来不同的是,现在不用一次性将全部的字节码都转换成机器码,而是通过解释器来逐行执行字节码,省去了生成二进制文件的操作,这样就大大降低了内存的压力。

执行代码

在执行字节码的过程中,如果发现某一部分代码重复出现,那么 V8 将它记做热点代码(HotSpot),然后将这么代码编译成机器码保存起来,这个用来编译的工具就是V8的编译器(也叫做TurboFan) , 因此在

这样的机制下,代码执行的时间越久,那么执行效率会越来越高,因为有越来越多的字节码被标记为热点代码,遇到它们时直接执行相应的机器码,不用再次将转换为机器码。

其实当你听到有人说 JS 就是一门解释器语言的时候,其实这个说法是有问题的。因为字节码不仅配合了解释器,而且还和编译器打交道,所以 JS 并不是完全的解释型语言。而编译器和解释器的根本区别在于

前者会编译生成二进制文件但后者不会。

并且,这种字节码跟编译器和解释器结合的技术,我们称之为即时编译, 也就是我们经常听到的JIT。

这就是 V8 中执行一段JS代码的整个过程,梳理一下:

1)首先通过词法分析和语法分析生成 AST

2)将 AST 转换为字节码

3)由解释器逐行执行字节码,遇到热点代码启动编译器进行编译,生成对应的机器码, 以优化执行效率

46. 宏任务(MacroTask)引入

在 JS 中,大部分的任务都是在主线程上执行,常见的任务有:

1)渲染事件

2)用户交互事件

3)js脚本执行

4)网络请求、文件读写完成事件等等。

为了让这些事件有条不紊地进行,JS引擎需要对之执行的顺序做一定的安排,V8 其实采用的是一种队列的方式来存储这些任务,即先进来的先执行。模拟如下:

全站分卷索引 · 147 卷
  1. 1HTML
  2. 22. canvas 相关
  3. 36. 说说 title 和 alt 属性
  4. 42. 浮动布局的优点?有什么缺点?清除浮动有哪些方式?
  5. 53. 使用display:inline-block会产生什么问题?解决方法?
  6. 64. 布局题:div垂直居中,左右10px,高度始终为宽度一半
  7. 75. 盒模型
  8. 87. CSS如何进行圣杯布局
  9. 98. CSS如何实现双飞翼布局?
  10. 109. 什么是BFC?
  11. 1112. 应用场景
  12. 1213. 画一个对话框
  13. 1314. 画一个平行四边形
  14. 1415. 用一个div画五角星
  15. 15JavaScript
  16. 163. null是对象吗?为什么?
  17. 178. 如何创建并使用BigInt?
  18. 189. typeof 是否能正确判断类型?
  19. 1910. instanceof能否判断基本数据类型?
  20. 2012. Object.is和===的区别?
  21. 2115. == 和 ===有什么区别?
  22. 2217. 如何让if(a == 1 && a == 2)条件成立?
  23. 2320. 闭包有哪些表现形式?
  24. 2421. 如何解决下面的循环输出问题?
  25. 2522. 原型对象和构造函数有何关系?
  26. 2623. 能不能描述一下原型链?
  27. 2725. 函数的arguments为什么不是数组?如何转化成数组?
  28. 2826. forEach中return有效果吗?如何中断forEach循环?
  29. 2928. JS中flat---数组扁平化
  30. 3029. 什么是高阶函数
  31. 3131. 能不能实现数组map方法 ?
  32. 3232. 能不能实现数组reduce方法 ?
  33. 3333. 能不能实现数组 push、pop 方法 ?
  34. 3434. 能不能实现数组filter方法 ?
  35. 3536. 能不能实现数组sort方法?
  36. 3637. 能不能模拟实现一个new的效果?
  37. 3739. 能不能实现一个 call/apply 函数?
  38. 3840. 谈谈你对JS中this的理解
  39. 3941. JS中浅拷贝的手段有哪些?
  40. 4042. 能不能写一个完整的深拷贝?
  41. 4143. 数据是如何存储的?
  42. 4244. V8 引擎如何进行垃圾内存的回收?
  43. 4345. 描述一下 V8 执行一段JS代码的过程?
  44. 4446. 宏任务(MacroTask)引入
  45. 4547. 微任务(MicroTask)引入
  46. 4649. 理解EventLoop:nodejs
  47. 4750. nodejs 和 浏览器关于eventLoop的主要区别
  48. 4853. JS异步编程有哪些方案?为什么会出现这些方案?
  49. 4954. 能不能简单实现一下 node 中回调函数的机制?
  50. 5055. Promise 凭借什么消灭了回调地狱?
  51. 5156. 为什么Promise要引入微任务?
  52. 5258. 实现Promise的 resolve、reject 和 finally
  53. 5359. 现Promise的 all 和 race
  54. 5460. 谈谈你对生成器以及协程的理解
  55. 5561. 如何让 Generator 的异步代码按顺序执行完毕?
  56. 5662. 解释一下async/await的运行机制。
  57. 5763. forEach 中用 await 会产生什么问题?怎么解决这个问题?
  58. 5864. 关于JS中一些重要的api实现
  59. 5965. 事件流向
  60. 602. HTTP有哪些请求方法?
  61. 615. 如何理解 HTTP 状态码?
  62. 626. 简要概括一下 HTTP 的特点?HTTP 有哪些缺点?
  63. 637. 对 Accept 系列字段了解多少?
  64. 648. 对于定长和不定长的数据,HTTP 是怎么传输的?
  65. 659. HTTP 如何处理大文件的传输?
  66. 6610. HTTP 中如何处理表单数据的提交?
  67. 6711. HTTP1.1 如何解决 HTTP 的队头阻塞问题?
  68. 6812. 对 Cookie 了解多少?
  69. 6913. 如何理解 HTTP 代理?
  70. 7014. 如何理解 HTTP 缓存及缓存代理?
  71. 7117. 客户端的缓存控制
  72. 7219. 传统 RSA 握手
  73. 7320. RSA 和 ECDHE 握手过程的区别
  74. 7422. HTTP/2 有哪些改进?
  75. 7523. HTTP/2 中的二进制帧是如何设计的?
  76. 76TCP协议
  77. 771. 能不能说一说 TCP 和 UDP 的区别?
  78. 783. 为什么是三次而不是两次、四次?
  79. 794. 三次握手过程中可以携带数据么?
  80. 806. 说说 TCP 四次挥手的过程
  81. 817. 为什么是四次挥手而不是三次?
  82. 829. 说说半连接队列和 SYN Flood 攻击的关系
  83. 8310. 如何应对 SYN Flood 攻击?
  84. 8412. 说说 TCP 快速打开的原理(TFO)
  85. 8513. 能不能说说TCP报文中时间戳的作用?
  86. 8614. TCP 的超时重传时间是如何计算的?
  87. 8715. 能不能说一说 TCP 的流量控制?
  88. 8816. 能不能说说 TCP 的拥塞控制?
  89. 8917. 能不能说说 Nagle 算法和延迟确认?
  90. 9018. 如何理解 TCP 的 keep-alive?
  91. 911. 能不能说一说浏览器缓存?
  92. 922. 能不能说一说浏览器的本地存储?各自优劣如何?
  93. 933. 说一说从输入URL到页面呈现发生了什么?(网络)
  94. 944. 说一说从输入URL到页面呈现发生了什么?(解析算法)
  95. 955. 说一说从输入URL到页面呈现发生了什么?(渲染过程)
  96. 966. 谈谈你对重绘和回流的理解
  97. 977. 能不能说一说XSS攻击?
  98. 988. 能不能说一说CSRF攻击?
  99. 999. HTTPS为什么让数据传输更安全?
  100. 10010. 能不能实现事件的防抖和节流?
  101. 10111. 能不能实现图片懒加载?
  102. 102Vue
  103. 1032. mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
  104. 1045. 描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程?
  105. 1057. 虚拟 DOM 实现原理
  106. 10610. Vue 组件间通信有哪些方式?
  107. 10714. route 和 router 的区别是什么?
  108. 10816. Vue 的 nextTick 的原理是什么?
  109. 10919. vuex
  110. 1101. 简单的反转链表
  111. 1112. 区间反转
  112. 1123. 两个一组翻转链表
  113. 1134. K个一组翻转链表
  114. 1145. 如何检测链表形成环?
  115. 1156. 如何找到环的起点
  116. 1167. 合并两个有序链表
  117. 1178. 合并 K 个有序链表
  118. 1189. 判断回文链表
  119. 119栈和队列
  120. 1203. 普通的层次遍历
  121. 1214. 二叉树的锯齿形层次遍历
  122. 1225. 二叉树的右视图
  123. 1236. 完全平方数
  124. 1247. 单词接龙
  125. 1258. 优先队列
  126. 1269. 关于堆的说明
  127. 12711. 实现优先队列
  128. 12812. 前 K 个高频元素
  129. 12913. 合并 K 个排序链表
  130. 13014. 什么是双端队列?
  131. 13116. 栈实现队列
  132. 13217. 队列实现栈
  133. 133二叉树
  134. 1342. 中序遍历
  135. 1353. 后序遍历
  136. 1364. 最大深度
  137. 1375. 最小深度
  138. 1386. 对称二叉树
  139. 1397. 二叉树的最近公共祖先
  140. 1408. 二叉搜索树的最近公共祖先
  141. 1419. 二叉树的直径
  142. 14210. 二叉树的所有路径
  143. 14311. 二叉树的最大路径和
  144. 14412. 验证二叉搜索树
  145. 14513. 将有序数组转换为二叉搜索树
  146. 14614. 二叉树展开为链表
  147. 14715. 不同的二叉搜索树II