Dissecting Node.js – Understanding the most famous JS runtime to the bare bone

Transcript

1. Dissecting Node.js Understanding the most popular JS runtime... To the bone
2. whoami /khaosdoctor @_staticvoid lsantos.dev /khaosdoctor cloud advocate_ ludossan@microsoft.com
3. obarra.co trainingcenter.io
4. abcdevelopers.org
5. agenda_ - What is JavaScript - What is Node.js - Our little function - How JavaScript works - V8 and its sorceries - V8 compiling pipelines - Putting it all together
6. what is JavaScript?
7. JavaScript The language everyone loves to hate - Prototype-based - Dynamically-typed - Interpreted language - Created in 1995 as a scripting language for Netscape - Created by Brendan Eich - Conforms with ECMA262 (ECMAScript) - Defined/Maintained by TC39
8. what is Node.js?
9. Node.js The angel that brought JS to the world again - JavaScript server-side runtime - Created in 2009 by Ryan Dahl - Later sponsored by Joyent - Event loop - Non blocking I/O - Uses V8
11. elements of Node.js_
12. our little function_
14. fs is a C++ binding_
17. the real Node.js_
20. how JavaScript works?
21. the JS engine_
22. What is an engine? - Runs all JS code we write - Responsible for - parsing and interpreting - memory allocation - the call stack - garbage collection - code optimizations
23. There are many - V8 -> made by Google for Chrome and some Chromium-based browsers - Chakra -> made by Microsoft for Microsoft Edge - SpiderMonkey -> made by Netscape, now runs on Firefox - Rhino -> made by Mozilla, in Java - Nitro -> made by Apple for Safari - JerryScript, Espruino -> IoT - And many others...
24. Simplified diagram of an engine
25. JavaScript is single-threaded_
26. what means to be single-threaded? - We only have one call stack - We can only run one thing at a time
27. call stack?
28. call stack - Not part of JS - Provided by V8 - Data structure - Ordered as LIFO - Keeps track of function calls - Made of stack frames
30. Call Stack Step 0
31. Call Stack Step 1 printSquare(5)
32. Call Stack Step 2 printSquare(5) multiply(x, x)
33. Call Stack Step 2 printSquare(5)
34. Call Stack Step 3 printSquare(5) console.log(s)
35. Call Stack Step 4 printSquare(5)
36. Call Stack Step 5
37. stack overflow
38. Call Stack f() f() f() f() f() f() f() f() f()
39. the hosting environment_
40. hosting environment - Wherever place the code is running on - Provides external APIs - Handles async queues
41. the real diagram
42. event loop
43. callbacks
44. event loop - Handle async code - Puts queued callbacks onto the call stack - In Node, provided by libuv - Not part of V8 - Not part of JS
45. libuv
46. libuv more than an event loop - Open source - Created for node - Wrapper around libev - Provides - Event loop - TCP & UDP - DNS Resolution - FS Events - IPC and Child processes - Thread pool - More...
48. callback queues_
50. async callback function
51. Call Stack Ext. APIs CB queue
52. Call Stack Ext. APIs CB queue console.log('Starting')
53. Call Stack Ext. APIs CB queue console.log('Starting') Starting
54. Call Stack Ext. APIs CB queue
55. Call Stack Ext. APIs CB queue fs.readFile(fp, cb)
56. Call Stack Ext. APIs CB queue fs.readFile(fp, cb) file cb
57. Call Stack Ext. APIs CB queue file cb
58. Call Stack Ext. APIs CB queue file cb console.log('Ending')
59. Call Stack Ext. APIs CB queue console.log('Ending') Starting Ending cb
60. later does not mean "later"
61. Call Stack Ext. APIs CB queue cb
62. Call Stack Ext. APIs CB queue cb(err, data)
63. Call Stack Ext. APIs CB queue cb(err, data) console.log(data.toS())
64. Call Stack Ext. APIs CB queue Starting Ending The file contents cb(err, data) console.log(data.toS())
65. Call Stack Ext. APIs CB queue cb(err, data)
66. Call Stack Ext. APIs CB queue
67. microtasks and macrotasks_
68. microtask queue
69. microtasks - process.nextTick - Promises - Object.observe
70. macrotask queue
71. macrotasks - setTimeout - setInterval - setImmediate - any I/O operation
72. what would happen?
73. Call Stack Ext. APIs CB queue Job queue console.log('start')
74. Call Stack Ext. APIs CB queue Job queue console.log('start') start
75. Call Stack Ext. APIs CB queue Job queue
76. Call Stack Ext. APIs CB queue Job queue setTimeout('t1',0)
77. Call Stack Ext. APIs CB queue Job queue setTimeout('t1',0) timer cb1
78. Call Stack Ext. APIs CB queue Job queue timer cb1
79. Call Stack Ext. APIs CB queue Job queue setTimeout('t2',0) timer cb1
80. Call Stack Ext. APIs CB queue Job queue setTimeout('t2',0) timer cb1 timer cb2
81. Call Stack Ext. APIs CB queue Job queue timer cb1 timer cb2
82. Call Stack Ext. APIs CB queue Job queue timer cb2 .then(console.log) cb1
83. Call Stack Ext. APIs CB queue Job queue handle setTimeout('t3',0) cb1 cb2
84. Call Stack Ext. APIs CB queue Job queue timer cb3 handle setTimeout('t3',0) cb1 cb2
85. Call Stack Ext. APIs CB queue Job queue handle .then(fn) cb1 cb2 cb3
86. Call Stack Ext. APIs CB queue Job queue handle .then(fn) fn cb1 cb2 cb3
87. Call Stack Ext. APIs CB queue Job queue handle fn cb1 cb2 cb3
88. Call Stack Ext. APIs CB queue Job queue handle fn cb1 cb2 cb3
89. Call Stack Ext. APIs CB queue Job queue handle fn setTimeout('tp',0) cb1 cb2 cb3
90. Call Stack Ext. APIs CB queue Job queue timer cb4 handle fn setTimeout('tp',0) cb1 cb2 cb3
91. Call Stack Ext. APIs CB queue Job queue timer cb4 handle fn cb1 cb2 cb3
92. Call Stack Ext. APIs CB queue Job queue timer cb4 fn cb1 cb2 cb3
93. Call Stack Ext. APIs CB queue Job queue fn cb1 cb2 cb3 cb4
94. Call Stack Ext. APIs CB queue Job queue fn console.log('promise') cb1 cb2 cb3 cb4
95. Call Stack Ext. APIs CB queue Job queue fn console.log('promise') start promise cb1 cb2 cb3 cb4
96. Call Stack Ext. APIs CB queue Job queue fn cb1 cb2 cb3 cb4
97. Call Stack Ext. APIs CB queue Job queue cb1 cb2 cb3 cb4
98. Call Stack Ext. APIs CB queue Job queue cb2 cb3 cb4 cb1
99. Call Stack Ext. APIs CB queue Job queue cb2 cb3 cb4 cb1 console.log('timeout')
100. Call Stack Ext. APIs CB queue Job queue cb2 cb3 cb4 cb1 console.log('timeout') start promise timeout
101. Call Stack Ext. APIs CB queue Job queue cb2 cb3 cb4 cb1
102. Call Stack Ext. APIs CB queue Job queue cb2 cb3 cb4
103. Call Stack Ext. APIs CB queue Job queue cb3 cb4 cb2
104. Call Stack Ext. APIs CB queue Job queue cb3 cb4 cb2 console.log('timeout2')
105. Call Stack Ext. APIs CB queue Job queue cb3 cb4 cb2 console.log('timeout2') start promise timeout timeout2
106. Call Stack Ext. APIs CB queue Job queue cb3 cb4 cb2
107. Call Stack Ext. APIs CB queue Job queue cb3 cb4
108. Call Stack Ext. APIs CB queue Job queue cb4 cb3
109. Call Stack Ext. APIs CB queue Job queue cb4 cb3 console.log('timeout3')
110. Call Stack Ext. APIs CB queue Job queue cb4 cb3 console.log('timeout3') start promise timeout timeout2 timeout3
111. Call Stack Ext. APIs CB queue Job queue cb4 cb3
112. Call Stack Ext. APIs CB queue Job queue cb4
113. Call Stack Ext. APIs CB queue Job queue cb4
114. Call Stack Ext. APIs CB queue Job queue cb4 console.log('p timeout')
115. Call Stack Ext. APIs CB queue Job queue cb4 console.log('p timeout') start promise timeout timeout2 timeout3 promise timeout
116. Call Stack Ext. APIs CB queue Job queue cb4
117. Call Stack Ext. APIs CB queue Job queue
118. V8
119. V8 the golden compiler - Made by Google - open source high-performance - JS and WebAsm engine - Written in C++ - Implements ES fully - Can be standalone
120. abstract syntax tree_
121. AST of readFile (part)
122. hidden classes_
126. C2
127. property order matters_
128. V8 pipelines_
129. AoT vs JiT
130. old compiler pipeline_
131. Full-Codegen
132. FCG compiler fast, but not that good - First step of the pipeline - Simple and fast - Not-optimised, relatively slow - Handles type-feedback, finds hot functions - Takes the AST and generate generic native code
133. Crankshaft
134. Crankshaft compiler good, but not that fast - Takes type-feedback from FCG - Optimises code accordingly - Replaces not-opt code with optimised code using OSR - Does not implement all ES - Made of two components - Hydrogen - Lithium
135. new compiler pipeline_
136. new compiler pipeline
137. TurboFan
138. TurboFan Crankshaft, the right way - Started as a secondary compiler for ES6 - Designed to be a webasm compiler - Uses a sea of nodes - Receives bytecodes directly - Divided in layers - Frontend - Optimising Layer - Backend - Fixed deoptimisation cliffs
139. mixed old pipeline
140. current pipeline
141. Ignition
142. Ignition an interpreter to rule them all - JS Interpreter - Generates optimised bytecode - Created to reduce memory usage - Focused on low memory devices (cell phones) - NOT a parser - AST not source of truth anymore - Uses Turbofan's backend
143. ignition pipeline_
145. bytecodes
146. bytecodes are middle-class representations
147. node --print-bytecode --print-bytecode-filter=f index.js
148. putting it all together_
150. generated bytecode for readFileAsync
151. Goes through this pipeline
152. Call Stack Ext. APIs CB queue Job queue
153. Call Stack Ext. APIs CB queue Job queue path.resolve
154. Call Stack Ext. APIs CB queue Job queue
155. Call Stack Ext. APIs CB queue Job queue IIFE
156. Call Stack Ext. APIs CB queue Job queue IIFE readFileAsync
157. Call Stack Ext. APIs CB queue Job queue handle IIFE
158. Call Stack Ext. APIs CB queue Job queue handle
159. Call Stack Ext. APIs CB queue Job queue handle
160. Call Stack Ext. APIs CB queue Job queue handle readFile
161. Call Stack Ext. APIs CB queue Job queue handle file cb
162. Call Stack Ext. APIs CB queue Job queue cb
163. Call Stack Ext. APIs CB queue Job queue cb
164. Call Stack Ext. APIs CB queue Job queue cb resolve
165. Call Stack Ext. APIs CB queue Job queue cb resolve callback
166. Call Stack Ext. APIs CB queue Job queue cb resolve callback toString()
167. Call Stack Ext. APIs CB queue Job queue cb resolve callback
168. Call Stack Ext. APIs CB queue Job queue cb resolve
169. Call Stack Ext. APIs CB queue Job queue cb
170. Call Stack Ext. APIs CB queue Job queue cb console.log
171. Call Stack Ext. APIs CB queue Job queue cb
172. Call Stack Ext. APIs CB queue Job queue
173. references_ - All references are in this guide: bit.ly/node-under-the-hood
174. references_ - https://dev.to/khaosdoctor/node-js-under-the-hood-1-getting-to-know-our-tools-1465 - https://dev.to/khaosdoctor/node-js-under-the-hood-2-understanding-javascript-48cn - https://dev.to/khaosdoctor/node-js-under-the-hood-3-deep-dive-into-the-event-loop-135d - https://dev.to/khaosdoctor/node-js-under-the-hood-4-let-s-talk-about-v8-1eol - https://dev.to/khaosdoctor/node-js-under-the-hood-5-hidden-classes-variable-allocations-1244 - https://dev.to/khaosdoctor/node-js-under-the-hood-6-the-old-v8-34hm - https://dev.to/khaosdoctor/node-js-under-the-hood-7-the-new-v8-4gd6 - https://dev.to/khaosdoctor/node-js-under-the-hood-8-oh-the-bytecodes-1p6p - https://dev.to/khaosdoctor/node-js-under-the-hood-9-collecting-the-garbage-772
175. thank you :D /khaosdoctor @_staticvoid lsantos.dev /khaosdoctor