Chrome browser engine blink & V8

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":" background "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This article is the second in my front-end technology series on how browsers work . Browser engine （ Also known as layout engine or rendering engine ） Is an important part of the browser . The most important job of browser engine is to make HTML Resources in text and other pages are transformed into pages that interact with users ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Besides the browser engine , Layout engine and rendering engine are two other related concepts , Theoretically , The two engines can be implemented independently , But in reality , It is often rare to separate the two ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In addition to the layout and rendering engine , The browser engine also follows "},{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Content_Security_Policy","title":null},"content":[{"type":"text","text":" Document security policy （Content Security Policy）"}]},{"type":"text","text":" To ensure that sites are independent of each other ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Running JavaScript Code function , Basically, mainstream browsers use separate engines , At first JavaScript Language is only used in browsers , But now JavaScript It can be used almost anywhere , This needs to be JavaScript The engine can be used independently of the browser ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" And like "},{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Electron_(software_framework)","title":null},"content":[{"type":"text","text":"Electron framework"}]},{"type":"text","text":" Such a technology is integration Chromium Rendering engine and Nodejs The implementation of the ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" I want to put V8 As detailed as possible , There will be more coverage , Can be read over and over again :)."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":" Common browser engines "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The browser engine is Web A series of standards in platform technology （HTML、CSS、ECMAScript、WebGL、Web Storage wait ） The concrete realization of , Different browser engines follow the same standard , It also implements additional functions ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Gecko yes Mozilla The browser engine for , stay Firefox Use in ,"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#333333","name":"user"}}],"text":"SpiderMonkey yes Firefox Of JavaScript engine ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Apple by Safari The browser created Webkit engine ,Webkit The engine has built-in "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#333333","name":"user"}}],"text":"JavaScriptCore engine . although Apple Allow in IOS Other browsers can be used on the device instead Safari, But what is used is through App Store Distributed browsers must use Webkit engine . for example ,Opera Mini The browser IOS Use on equipment Webkit engine , And on other devices Blink engine ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Google First use Webkit As Chrome Browser engine , Later, with Webkit The engine created Blink engine , All based on Chromium Products derived from open source browsers use blink engine . And the famous V8 The engine is Chromium-based Browser's JavaScript engine ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Microsoft Defending your own EdgeHTML engine , As the old Trident An alternative to the engine . new Edge The browser is already in use Chromium Of Blink The engine is on , and EdgeHTML The engine is only in window 10 Upper "},{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Universal_Windows_Platform","title":null},"content":[{"type":"text","text":"Universal Windows Platform"}]},{"type":"text","text":" Is used in ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c2/c2d5a491c0b230edf39337130cd12f67.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" If the world is united for a long time, it must be divided , Long period of division , With Edge And joined in Blink Camps , Basically Webkit Kernel and Webkit The derivation of the kernel Blink Has dominated the browser market . So far , only Chrome Has a market share of 60% . Next , Let's talk about it Blink and V8 engine ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"Chromium & Blink"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Broadly speaking ,Blink All rendering work in the browser tab is realized , These include ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Realized Web Standards in the platform , for example HTML standard , Include DOM、CSS etc. ."}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Built in V8 The engine is used to run JavaScript."}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Get resources from the network stack "}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" structure DOM Trees "}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Computing styles and layouts "}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Built in "},{"type":"link","attrs":{"href":"https://chromium.googlesource.com/chromium/src/+/HEAD/cc/README.md","title":null},"content":[{"type":"text","text":"Chrome Compositor"}],"marks":[{"type":"underline"}]},{"type":"text","text":" And the ability to draw graphics "}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" With the help of "},{"type":"link","attrs":{"href":"https://chromium.googlesource.com/chromium/src/+/HEAD/content/public/README.md","title":null},"content":[{"type":"text","text":"Content public APIs"}],"marks":[{"type":"underline"}]},{"type":"text","text":",Blink Can be built into many things like Chromium,Android WebView and Opera In such an application ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" process / Thread Architecture "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" process "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Chromium Have a multi process architecture .Chromium There is a browser process and multiple rendering processes with sandbox capabilities .Blink Run in the rendering process ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" From a security point of view , It's very important to keep sites separate from each other , This is called the "},{"type":"text","marks":[{"type":"strong"}],"text":" Site isolation （Site Isolation）"},{"type":"text","text":". Theoretically speaking , A rendering process should be responsible for rendering at most one site . But actually , When a user opens many tabs , Rendering process and site 1 Yes 1 It takes up a lot of memory . So a rendering process can be more than one iframe Or shared by the tab , That is to say, more than one page iframe May be rendered by more than one rendering process , And on multiple pages iframe It can also be rendered by the same rendering process ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" therefore , stay iframe, There is no one-to-one relationship between the tab and the rendering process ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" because Blink Run in the sandbox in the rendering process , When Blink Need to access files or videos or access user information （cookie、password etc. ） Must communicate with the browser process . This communication between different processes is "},{"type":"link","attrs":{"href":"https://chromium.googlesource.com/chromium/src/+/master/mojo/README.md","title":null},"content":[{"type":"text","marks":[{"type":"underline"}],"text":"Mojo"}]},{"type":"text","text":" Realization . With Chromium Constantly evolving towards a service-oriented architecture ,Blink Can pass Mojo To reduce the dependence of the sender and receiver on the concrete implementation in the process of message delivery （ Services may be in multiple processes , It may also be in the same process , Message delivery is different ）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/24/240541c94b8227856e0c4062a8f9db7e.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Mojo"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Mojo It's a collection of Libraries , Used to provide an in-process or cross process communication scheme , It includes platform independent generic IPC programme 、 news IDL Formatting and binding libraries that can be integrated with different languages ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d9/d990029007862acd8e71392f766b48ee.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Message pipe"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One "},{"type":"text","marks":[{"type":"strong"}],"text":" News channel （Message pipe）"},{"type":"text","text":" Build two of them "},{"type":"text","marks":[{"type":"strong"}],"text":" Endpoint （endpoint）"},{"type":"text","text":" The passage between . Each endpoint has a queue for receiving messages , You can also send a message to another endpoint , And the message channel is bidirectional ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Mojom"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Mojom The file describes the type of message ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" With message channels and message types , An endpoint in a channel can be specified as "},{"type":"codeinline","content":[{"type":"text","text":"Remote"}],"marks":[{"type":"strong"}]},{"type":"text","text":", It can send Mojom The type of message defined in the file . The other endpoint can be specified as "},{"type":"codeinline","content":[{"type":"text","text":"Receiver"}],"marks":[{"type":"strong"}]},{"type":"text","text":", For receiving messages ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Threads "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Blink Contains a main thread , Multiple Worker Threads , There are other threads ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Almost all the important work runs on the main thread . Including running JavaScript（ except Workers）,DOM Generate ,CSS Style and layout calculation, etc , Therefore, the key to the optimization of interactive performance is mainly around the main thread ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Blink Would be Web workers,Service workers Create separate threads . Even though it's running JavaScript, But the main thread and worker The running environment of threads is not shared , Data needs to be delivered through messages ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Blink and V8 It's possible to create others for audio and video , Database and garbage collection （GC） And so on ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" For inter thread communication , Will use PostTask Provided api. Except for real performance reasons , Using shared memory for communication is not recommended , This is also Blink Do not use thread locks （MutexLocks） Why ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/89/89ab6c79bbfa58c540f5ebc72be974b5.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":"Page, Frame, Document, DOMWindow"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Concept "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One "},{"type":"text","marks":[{"type":"strong"}],"text":" page （Page）"},{"type":"text","text":" Represents a browser tab , A single rendering process may be responsible for rendering multiple pages ."}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One "},{"type":"text","marks":[{"type":"strong"}],"text":" box （Frame）"},{"type":"text","text":" Represents the main frame or a iframe, One "},{"type":"text","marks":[{"type":"strong"}],"text":" The page contains at least one box ."}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One "},{"type":"text","marks":[{"type":"strong"}],"text":"DOMWindow"},{"type":"text","text":" representative JavaScript Medium window object , Each box has only one "},{"type":"text","marks":[{"type":"strong"}],"text":"DOMWindow"},{"type":"text","text":"."}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One "},{"type":"text","marks":[{"type":"strong"}],"text":"Document"},{"type":"text","text":" representative JavaScript Medium window.document object , Each box has only one "},{"type":"text","marks":[{"type":"strong"}],"text":"Document."}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One "},{"type":"text","marks":[{"type":"strong"}],"text":"ExecutionContext"},{"type":"text","text":" Abstract A from the main thread Document, stay worker Abstract in thread WorkerGlobalScope."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Rendering Progress ： page = 1 ：N"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" page ： box = 1 ：M"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Frame : DOMWindow : Document ( or ExecutionContext) In any case it is 1 : 1 : 1 , But sometimes the citation relationship changes ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Cross process iframes（OOPIF）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Although site isolation makes pages more secure , But it adds complexity . Site isolation is dedicated to creating a rendering process for each site , example "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" Such as ,"},{"type":"link","attrs":{"href":"https://mail.example.com","title":null},"content":[{"type":"text","marks":[{"type":"underline"}],"text":"https://mail.example.com"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" and "},{"type":"link","attrs":{"href":"https://chat.example.com","title":null},"content":[{"type":"text","marks":[{"type":"underline"}],"text":"https://chat.example.com"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" Belong to the same site , and "},{"type":"link","attrs":{"href":"https://noodles.com","title":null},"content":[{"type":"text","marks":[{"type":"underline"}],"text":"https://noodles.com"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" and "},{"type":"link","attrs":{"href":"https://pumpkins.com","title":null},"content":[{"type":"text","text":"https://pumpkins.com"}],"marks":[{"type":"underline"}]},{"type":"text","text":" It doesn't belong to the same site . If there is a cross site iframe It may be hosted by multiple rendering processes ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" From the perspective of the main frame , The main frame is "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":"LocalFrame,iframe It is RemoteFrame. from iframe From the perspective of , The main frame is RemoteFrame, and iframe It is LocalFrame."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":"LocalFrame and RemoteFrame Communication is managed by the browser process ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Web IDL binding "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Web IDL (Web Interface definition language） Is for description Web How the standards defined in the platform are implemented by the browser interface definition language , The implementation of the interfaces defined in these standards through the browser ,Web Developers can use JavaScript Object to call these standard functions .Blink While implementing these standards , Also need to V8 Medium JavaScript Provide calls Blink Way , This is it. Web IDL Bindings. Through to Web IDL Implementation and Bindings The existence of , It's like in JavaScript Access to the first child node of a node in "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" The function of (node."},{"type":"text","text":"firstChild)"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":". At the same time of realizing the general standard , The browser also implements its own unique function definition , General standards are defined in "},{"type":"link","attrs":{"href":"https://heycam.github.io/webidl/","title":null},"content":[{"type":"text","text":"the Web IDL spec"}],"marks":[{"type":"underline"}]},{"type":"text","text":", and Blink Self definition is defined in "},{"type":"link","attrs":{"href":"https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/bindings/IDLExtendedAttributes.md","title":null},"content":[{"type":"text","text":"Blink-specific IDL extended attributes"}],"marks":[{"type":"underline"}]},{"type":"text","text":" in ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Usually in idl When the file is built ,"},{"type":"link","attrs":{"href":"https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/bindings/IDLCompiler.md","title":null},"content":[{"type":"text","marks":[{"type":"underline"}],"text":"the IDL compiler"}]},{"type":"text","text":" Will automatically generate for the specific implementation class Blink-V8 The binding of . When in JavaScript Call in node.firstChild when ,V8 Would call V8Node::firstChildAttributeGetterCallback() , And then call Node::firstChild() ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Rendering pipeline "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Rendering pipeline Defined from HTML The process from characters to displaying pixels on the screen ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/59/59f93c4bc67cf902dcaad2524f5d709f.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" You can read the previous article about this part ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"V8"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"V8 yes Google Open source , High performance JavaScript and WebAssembly engine , Use C++ Language implementation .V8 Engines are used in Chrome、Nodejs And other applications .V8 The engine can run independently , It can also run on any C++ In the program ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One V8 An example of is called Isolate, every last isolate All have independence GC Stack space of . That means a Isolate Medium JavaScript Object cannot directly access another Isolate Objects in the ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" stay Chrome in , Each rendering process has a V8 Isolate, All sites processed by the same rendering process JavaScript The code is in the same Isolate Run in . But for the Web worker, every last worker Have your own Isolate."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" stay Isolate in , There is one or more JavaScript Context （JavaScript content）.Chrome For each iframe Create a JavaScript Environmental Science . Besides , Every Chrome extension For one iframe All have their own JavaScript Environmental Science ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Blink Usually use ScriptState Object as JavaScript References to the environment ,blink::ScriptState And v8::Context with 1 : 1 The relationship between ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Execution pipeline "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JavaScript The running of the script needs to go through a series of processes ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a5/a5595e9e68069bbe5d22c63c9ab8b324.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" To run JavaScript Scripts can be... From the network or cache "},{"type":"text","marks":[{"type":"strong"}],"text":" load ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Through to JavaScript The analysis of script text can generate data used to describe the structured source code ,"},{"type":"text","marks":[{"type":"strong"}],"text":" Abstract syntax tree （AST）."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Next "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"Ignition Interpreter "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" Will AST Into smaller ones "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":" Bytecode "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":", Each line of instruction in bytecode represents the operation on the register , When bytecode is born AST Will be abandoned to save space , Subsequent execution and optimization are based on bytecode ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" When the interpreter executes bytecode ,"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"Object Shapes"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" Will try to cache the type of the object in the code to generate "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"Type Feedback"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":", When you access these objects, you try to get them from the cache , If it can't be found, find and update the cache dynamically ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"TurboFan"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" yes V8 Code optimization compiler in , It evaluates whether the function needs to be further optimized into machine code to improve performance , Functions that need to be optimized are compiled into "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"Optimized Code"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":"."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" But when the compiled function is found that the data type of the variable in the function is different from the previous cache type , You need to abandon the optimized code and go back to bytecode for reinterpretation and execution ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Let's look at each process one by one ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" load （Loading）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Loading is V8 obtain JavaScript The process of script text ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/33/33980d9f58ed08dcbca52989379c4b24.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"V8 Not responsible for downloading resources , So these resources may come from the Internet 、 cache , It may also come from Service worker."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"V8 You can download the file at the same time for the next analysis work ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"V8 Have the ability of script hot loading ："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Warm Load"},{"type":"text","text":"： When V8 When you run the same script again , It will cache the compiled results of the script in the hard disk ."}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Hot Load："},{"type":"text","text":" On the third visit ,V8 You can skip the analysis and compilation process and read the previously compiled results directly from the hard disk ."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" analysis （Parsing）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4f/4f9f1c010a79037cd568d8145b75bfd9.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The analysis is to JavaScript Script text is converted to "},{"type":"text","marks":[{"type":"strong"}],"text":" Abstract syntax tree （Abstract Syntax Tree） The process of ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Lexical analysis "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" Lexical analysis （lexical analysis）"},{"type":"text","text":" Is to convert a series of characters into "},{"type":"text","marks":[{"type":"strong"}],"text":" Mark （token）"},{"type":"text","text":" The process of . there "},{"type":"text","marks":[{"type":"strong"}],"text":" Mark "},{"type":"text","text":" Is the smallest unit of source code , The process of converting the input character stream into a tag is called "},{"type":"text","marks":[{"type":"strong"}],"text":" Tokenization （tokenization）"},{"type":"text","text":", In the process , The lexical analyzer also classifies these tags ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Common label categories are ："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" identifier （identifier）：x,color,UP"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" keyword （keyword）：if,var,return"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Separator （separator）：(,}, ;"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The operator （operator）：*,=,>"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Literal （literal）：\"Hello world\", true, 666"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" notes （comment）：// A single , /* Multiple lines */"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"Scanner"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The scanner is in the first stage of lexical analysis , It is usually implemented based on state machine , You can switch between recognizable tags . Each tag can represent a character or a sequence of multiple characters . A lot of times , You can infer the type of the tag from the first non empty character , And then process the following characters one by one , Until the occurrence of a character that does not belong to the type of markup character set （ The longest consistency principle ）."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" The scanner only deals with utf-16 Character set for , There is a character set conversion process before the scanner gets the character ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"Evaluator"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The evaluator is in the second stage of lexical analysis , Used to define some semantic words as "},{"type":"text","marks":[{"type":"strong"}],"text":" value （value）"},{"type":"text","text":", One "},{"type":"text","marks":[{"type":"strong"}],"text":" semantics （"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#202122","name":"user"}},{"type":"strong"}],"text":"lexeme"},{"type":"text","marks":[{"type":"strong"}],"text":"）"},{"type":"text","text":" It's a combination of tag type and value . Some tags have value , For example, identifier type tags , And some tags have no value , For example, separator type tags ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" for example , It's like this in the source code ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"net_worth_future = (assets – liabilities);"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The generated semantic tags may look like this ："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"IDENTIFIER net_worth_future\nEQUALS\nOPEN_PARENTHESIS\nIDENTIFIER assets\nMINUS\nIDENTIFIER liabilities\nCLOSE_PARENTHESIS\nSEMICOLON"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Syntax analysis "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" Syntax analysis （"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#202122","name":"user"}},{"type":"strong"}],"text":"syntactic analysis, Also called parsing"},{"type":"text","marks":[{"type":"strong"}],"text":"）"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#202122","name":"user"}}],"text":" It's based on some given "},{"type":"text","text":" Formal grammar "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#202122","name":"user"}}],"text":" By word sequence （ Such as English word sequence ） The process of analyzing and determining the grammatical structure of a structured input text ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" parsers "},{"type":"text","text":"（parser） The function of is to check grammar 、 And according to the input word sequence to generate a hierarchical data structure （ It's usually a syntax tree 、 Abstract grammar tree, etc ）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Abstract syntax tree and scope "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" Abstract syntax tree （Abstract Syntax Tree）"},{"type":"text","text":" Is an abstract representation of the structure of the source code . It represents the syntax structure of programming language in the form of tree , Each node in the tree represents a structure in the source code ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Here we take a piece of code as an example "}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"function sayHi () {\n var str = \"hello world\";\n return str;\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Turn it into AST The structure of the latter is like this "}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7e/7e62d86a0d4c4277bc91ad76a679f88d.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"FunctionLiteral"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" representative sayHi function ,Block For the body of a function ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" Sinister "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"VariableDeclaration"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" On behalf of the variable str Statement of ,"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}},{"type":"strong"}],"text":"Assignment"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}}],"text":" For assignment ,"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}},{"type":"strong"}],"text":"ReturnStatement"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}}],"text":" representative return sentence ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" there "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}},{"type":"strong"}],"text":"VariableProxy"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}}],"text":" Represents a reference to a variable , At this stage, we don't know which variable to refer to ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In this stage of analysis, in addition to generating AST, Also analyze the scope ."}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1a/1ac03cdfbd40f995afbd50da9ee3b5a8.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Through analysis , The global scope contains functions sayHi Statement of , and sayHi The scope of the function contains variables str Statement of . And two "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}},{"type":"strong"}],"text":"VariableProxy"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#323232","name":"user"}}],"text":" The referenced variables can also be determined ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#202122","name":"user"}}],"text":"V8 There are two kinds of analyzers ：Preparser and Full parser.Preparser Parsers can delay functions that don't need to be analyzed immediately to reduce the time required for code startup .Preparser It only deals with parsing and error checking without generating an abstract syntax tree ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"V8 At this stage, there are various optimization methods for scanning various types of markers , Interested students can continue reading "},{"type":"link","attrs":{"href":"https://v8.dev/blog/scanner","title":null},"content":[{"type":"text","text":"Blazingly fast parsing, part 1: optimizing the scanner"}]},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Here we recommend a website for analyzing abstract syntax trees ："},{"type":"link","attrs":{"href":"https://astexplorer.net/","title":null},"content":[{"type":"text","text":"AST Explorer"}]},{"type":"text","text":". In all kinds of lint Custom rule ,babel、webpack Plug in code analysis 、 It's helpful in the generated scenarios ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" explain （I"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":"nterpreting"},{"type":"text","text":"）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The explanation phase will AST Convert to bytecode （bytecode）. Thanks to the "},{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Just-in-time_compilation","title":null},"content":[{"type":"text","text":" Just in time compilation （just-in-time (JIT) compilation）"}]},{"type":"text","text":" technology , Include V8 Modern browsers inside JavaScript The engine combines "},{"type":"text","marks":[{"type":"strong"}],"text":" Precompile （AOT）"},{"type":"text","text":" High performance and interpretation flexibility ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" At first , The code is first quickly compiled by the compiler into machine code that has not been optimized , At the same time, the code that needs to be optimized is recompiled by a more advanced compiler . This improves the speed of operation , But it's also a waste of resources ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" One of the most significant problems is that the compiled machine code will take up a lot of memory , Even if some code may only be executed once . To solve these problems ,V8 The team came up with a new JavaScript Interpreter ,"},{"type":"link","attrs":{"href":"https://v8.dev/docs/ignition","title":null},"content":[{"type":"text","text":"Ignition"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":"."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" With the help of "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"Ignition"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":",V8 Can be AST First, it's converted to simpler bytecode , Compared with the previous machine code, its size is reduced to 50% to 25% Space ."}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/35/355cb34cfd38811ba0c6e19ab7e7025c.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" from "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}},{"type":"strong"}],"text":"Ignition"},{"type":"text","marks":[{"type":"color","attrs":{"color":"#000000","name":"user"}}],"text":" Generated "},{"type":"text","text":" Bytecodes are used as data sources by compilers and debugging tools for optimization , When bytecode is generated , The abstract syntax tree can be discarded to save memory . While generating bytecode , Also add some metadata to bytecode , Such as the location of the source code and the processing functions used to execute bytecode ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Next we use d8 Take a close look at bytecode, Here we'll take the following JavaScript Put it in the name of bytecode.js In the file of , And run d8 Debugging tools for ."}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"function sayHi () {\n var str = 'hello world'\n return str\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" You can get the following results "}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"# d8 --print-bytecode bytecode.js\n[generated bytecode for function: (0x300d082d25e5 )]\nParameter count 1\nRegister count 2\nFrame size 16\n 0x300d082d26ae @ 0 : 12 00 LdaConstant [0]\n 0x300d082d26b0 @ 2 : 26 fa Star r0\n 0x300d082d26b2 @ 4 : 27 fe f9 Mov , r1\n 0x300d082d26b5 @ 7 : 62 3e 01 fa 02 CallRuntime [DeclareGlobals], r0-r1\n 0x300d082d26ba @ 12 : 0d LdaUndefined \n 0x300d082d26bb @ 13 : ab Return \nConstant pool (size = 1)\n0x300d082d2681: [FixedArray] in OldSpace\n - map: 0x300d08042201