前言感觉自己在前端行业已经快两年了。最近两三年（大四的时候也接触过），天天和JavaScript语言打交道。我从大学开始学习JavaScript语法和JQuery库，然后为了找工作学习了Vue2，但是我找到了一家使用React的公司，我通常学习最新的Vue3。以上一系列过程都是在和JavaScript打交道。所谓deal，就是在使用过程中，用基础语法不断发展，然后就没有了……也许吧，不考虑提升自己的实力水平，这样就好了，完成是目标。不过大部分人应该还是想提升自己的实力（包括我）。因此，用JavaScript编程不仅需要掌握基本的语法，还需要了解其中的一些原理。因为知道真相，才能获得真知的自由。在准备面试的时候，总会看到一些浏览器内核、JavaScript引擎等关键词。那么这两个到底是干什么用的呢？它在其中起到了怎样的作用？跟随前端大神Coderwhy先生的脚步，了解真相，记录这篇文章。（本文基本是纯理论，但如果你理解了，你会受益匪浅）认识JavaScriptJavaScript是一种编程语法，简单来说，它是一种高级编程语言。为什么它被称为高级编程语言？然后是高级编程语法，然后是低级编程语法。机器语言（低级）：所谓的机器指令（二进制代码01010011111000）高级语法：C、C++、Java、JavaScript等。对于计算机来说，根本不懂所谓的高级语言，他们无法理解他们写的东西。所谓高级语言，要被计算机理解，需要转换成机器指令。因此，JS代码会被转换成机器语言，被计算机的CPU识别。差不多就是这样。这个解析过程就是JS引擎，下面会详细说明。你有没有深入思考过浏览器是如何工作的：JavaScript代码是如何在浏览器中执行的？例如：在浏览器中输入http://www.baidu.com，有什么作用？步骤分析：输入http://www.baidu.com，会被浏览器解析成一个ip地址（假设：111:222:333:444），根据这个ip地址，找到一个服务器，并服务器会返回一个index.html文件进行解析。（注意：这里不是返回所有的静态资源，在框架时代，应该就是所谓的分包操作，打包成多个chunk.js，用到的时候再加载）。在解析index.html的过程中，如果遇到link标签，就会去服务器端下载对应的css文件；如果遇到script标签，它会回到服务器下载相应的js文件。在上面的过程中，获取并解析了index.html文件。谁解析的？答案是：浏览器内核知道浏览器内核。在准备面试题的时候，你或多或少都会了解浏览器内核。不同的浏览器有不同的内核组成。几种常见的内核：Gecko：早期被Netscape和MozillaFirefox浏览器使用。Trident：微软开发，IE4~IE11浏览器使用，但Edge浏览器已经转向Blink。Webkit：Apple基于KHTML开发，开源，用于Safari，之前也被GoogleChrome使用。Blink：是Webkit的一个分支，由Google开发，目前用于Chrome、Edge、Opera等。其实浏览器的核心是指浏览器的排版引擎排版引擎：也称为浏览器引擎、页面渲染引擎。从字面意思看：浏览器内核处理页面布局。浏览器渲染流程根据上图可以得到如下信息：HTML通过HTMLParserDOMTree生成解析，Style通过CSSParser解析生成StyleRules。结合DOMTree和StyleRules生成渲染树（RenderTree）来执行布局过程，以确定每个节点在屏幕上的确切坐标。RenderTreeDrawing（绘画），然后显示在屏幕上。注意：以上步骤没有严格的顺序执行。浏览器引擎会尽快呈现内容。简单来说，就是在解析HTML的同时构建一棵渲染树，构建完一部分后，再渲染后续的元素。如果未加载样式，将以浏览器默认样式显示。正是因为浏览器引擎会尽快显示内容，所以会导致在加载之前显示样式的问题。这就是经常出现的FOCU（flashofunstyledcontent）或白屏问题。CSS加载不会阻塞DOM树的解析从上图可以看出，HTML解析和CSS解析是并行的。所以CSS加载不会阻塞DOM树的解析CSS加载会阻塞DOM树的渲染渲染树（RenderTree）是DOMTree和StyleRules的结合。因此，即使加载了DOMTree，也需要等CSS加载解析完成后才能生成渲染树。JS执行会阻塞DOM树的解析。从渲染图我们可以知道HTML被解析成了DOMTree。如果遇到JavaScript代码，将停止对HTML的解析，并将控制权交给JS引擎来执行JavaScript代码。JavaScript执行完成后，浏览器会从中断处继续解析和生成DOM。这就是为什么建议将script标签放在body标签底部的原因。特殊情况：如前所述，CSS加载不会阻塞DOM树的解析。但？如果在解析DOM的时候，加一个script标签，引入JavaScript代码（js无所不能，还可以修改DOM，还可以修改样式）。如果JavaScript代码需要修改样式，那么需要等待CSS加载完成后再操作CSS。所以在这种特殊情况下，css加载也会阻塞DOM解析。优化渲染过程使用内联JS和CSS，减少JS和CSS文件的下载。webpack等工具压缩JS和CSS文件以减小文件大小。使用异步或延迟。使用CDN。认识JavaScript引擎在上面的浏览器渲染过程中，在解析DOM的时候，会遇到JavaScript代码，那么控制权就会交给JS引擎去执行JavaScript代码。为什么需要JavaScript引擎？如前所述，JavaScript是一种高级编程语言。如果要被计算机CPU识别，需要转换成机器指令。JavaScript引擎就是这样做的，将JS代码转换为机器指令。通用JavaScript引擎SpiderMonkey：第一个JavaScript引擎，由BrendanEich（又名JavaScript的作者）创建。Chakra：由Microsoft为InternetExplorer开发。JavaScriptCore：Webkit中的JavaScript引擎，由Apple开发。V8：Google开发的一个强大的JavaScript引擎。浏览器内核与JavaScript引擎的关系这里我们以Webkit内核为例：Webkit实际上由两部分组成：WebCore：负责HTML的解析、布局、渲染等。JavaScriptCore：解析和执行JavaScript代码。和微信小程序架构很像。可以看出其中的关系：JavaScript引擎是浏览器核心的一部分。认识V8引擎（understand）定义V8引擎是谷歌用C++编写的开源高性能JavaScript引擎，用于Chrome和Node.js等。运行过程JS引擎是将JavaScript代码转换成机器指令并运行在计算机的CPU中。Parse模块将解析JavaScript源代码以生成AST树。AST树只是一个固定格式的对象。经过一系列的处理，就变成字节码（bytecode），最后变成机器指令。AST树应该不陌生。在现在的框架时代，react的jsx解析，vue的模板解析，或者ts解析，babel解析等操作都离不开AST树的生成进行转换。测试AST树结构的地址：https://astexplorer.netV8执行解析详解V8官网地址：https://v8.dev/blog/scannerJavaScript源码是如何解析（Parse）的？Blink将源码交给v8，Stream获取源码并进行编码转换。Scanner会进行词法分析，词法分析会将代码转化为token。constname='copyer'//解析成tokentokens=[{type:'VariableDeclaration',value:'const'},{type:'Identifier',value:'name'},{type:'Literal',value:'copyer'}]大致是这样的。然后将token转化为AST树，会经过两个步骤：Parser和PreParser。Parser直接将token转换为AST树。PreParser称为预解析。它处理了一些一开始不需要执行的代码，不需要转换成AST树。只需要在调用时解析即可。目的是优化性能。最后根据AST生成字节码，转化为机器指令。总的来说，以上这一系列步骤只需要一点印象就可以了。但是你需要了解一个步骤：Parse模块分析，这里会进行词法分析和句法分析。在开发过程中，变量的提升是在语法分析步骤中完成的。总结本文完全是纯理论，只是为了以后在JavaScript的方向上发展，能够有一个更好的理解。也许，对于我来说，今天学了之后，感觉自己一知半解（只有经常使用，熟悉了，才可能不会忘记）。但几天后，它可能会被遗忘。这篇文章是为了帮助我以后更好的回忆。以前知道，忘记了，再熟悉一下。虽然是纯理论，但不可否认的是，这些理论的重要性可以更好地理解我们发展中的一些现象和问题。同时也是菜鸟学习JavaScript的进阶方向。
