编译系统的硬件原理

Ⅰ 编译原理

编译原理是计算机科学中的一慎昌门重要课程，主要研究如段配何将高级程序语言转化为机器语言宽燃扒的过程。它涉及到多个领域，如语言学、数学、计算机硬件和操作系统等。编译器是实现这一过程的关键工具，它可以将程序源代码转化为可执行的机器代码。

Ⅱ 编译原理

C语言编译过程详解
C语言的编译链接过程是要把我们编写的一个C程序(源代码)转换成可以在硬件上运行的程序(可执行代码)，需要进行编译和链接。编译就是把文本形式源代码翻译为机器语言形式的目标文件的过程。链接是把目标文件、操作系统的启动代码和用到的库文件进行组织形成最终生成可执行代码的过程。过程图解如下：

从图上可以看到，整个代码的编译过程分为编译和链接两个过程，编译对应图中的大括号括起的部分，其余则为链接过程。
一、编译过程
编译过程又可以分成两个阶段：编译和汇编。
1、编译
编译是读取源程序(字符流)，对之进行词法和语法的分析，将高级语言指令转换为功能等效的汇编代码，源文件的编译过程包含两个主要阶段：
第一个阶段是预处理阶段，在正式的编译阶段之前进行。预处理阶段将根据已放置在文件中的预处理指令来修改源文件的内容。如#include指令就是一个预处理指令，它把头文件的内容添加到.cpp文件中。这个在编译之前修改源文件的方式提供了很大的灵活性，以适应不同的计算机和操作系统环境的限制。一个环境需要的代码跟另一个环境所需的代码可能有所不同，因为可用的硬件或操作系统是不同的。在许多情况下，可以把用于不同环境的代码放在同一个文件中，再在预处理阶段修改代码，使之适应当前的环境。
主要是以下几方面的处理：
(1)宏定义指令，如 #define a b。
对于这种伪指令，预编译所要做的是将程序中的所有a用b替换，但作为字符串常量的 a则不被替换。还有 #undef，则将取消对某个宏的定义，使以后该串的出现不再被替换。
(2)条件编译指令，如#ifdef，#ifndef，#else，#elif，#endif等。
这些伪指令的引入使得程序员可以通过定义不同的宏来决定编译程序对哪些代码进行处理。预编译程序将根据有关的文件，将那些不必要的代码过滤掉
(3) 头文件包含指令，如#include "FileName"或者#include <FileName>等。
在头文件中一般用伪指令#define定义了大量的宏(最常见的是字符常量)，同时包含有各种外部符号的声明。采用头文件的目的主要是为了使某些定义可以供多个不同的C源程序使用。因为在需要用到这些定义的C源程序中，只需加上一条#include语句即可，而不必再在此文件中将这些定义重复一遍。预编译程序将把头文件中的定义统统都加入到它所产生的输出文件中，以供编译程序对之进行处理。包含到C源程序中的头文件可以是系统提供的，这些头文件一般被放在/usr/include目录下。在程序中#include它们要使用尖括号(<>)。另外开发人员也可以定义自己的头文件，这些文件一般与C源程序放在同一目录下，此时在#include中要用双引号("")。
(4)特殊符号，预编译程序可以识别一些特殊的符号。
例如在源程序中出现的LINE标识将被解释为当前行号(十进制数)，FILE则被解释为当前被编译的C源程序的名称。预编译程序对于在源程序中出现的这些串将用合适的值进行替换。
预编译程序所完成的基本上是对源程序的“替代”工作。经过此种替代，生成一个没有宏定义、没有条件编译指令、没有特殊符号的输出文件。这个文件的含义同没有经过预处理的源文件是相同的，但内容有所不同。下一步，此输出文件将作为编译程序的输出而被翻译成为机器指令。
第二个阶段编译、优化阶段。经过预编译得到的输出文件中，只有常量；如数字、字符串、变量的定义，以及C语言的关键字，如main,if,else,for,while,{,}, +,-,*,\等等。
编译程序所要作得工作就是通过词法分析和语法分析，在确认所有的指令都符合语法规则之后，将其翻译成等价的中间代码表示或汇编代码。
优化处理是编译系统中一项比较艰深的技术。它涉及到的问题不仅同编译技术本身有关，而且同机器的硬件环境也有很大的关系。优化一部分是对中间代码的优化。这种优化不依赖于具体的计算机。另一种优化则主要针对目标代码的生成而进行的。
对于前一种优化，主要的工作是删除公共表达式、循环优化(代码外提、强度削弱、变换循环控制条件、已知量的合并等)、复写传播，以及无用赋值的删除，等等。
后一种类型的优化同机器的硬件结构密切相关，最主要的是考虑是如何充分利用机器的各个硬件寄存器存放的有关变量的值，以减少对于内存的访问次数。另外，如何根据机器硬件执行指令的特点(如流水线、RISC、CISC、VLIW等)而对指令进行一些调整使目标代码比较短，执行的效率比较高，也是一个重要的研究课题。
2、汇编
汇编实际上指把汇编语言代码翻译成目标机器指令的过程。对于被翻译系统处理的每一个C语言源程序，都将最终经过这一处理而得到相应的目标文件。目标文件中所存放的也就是与源程序等效的目标的机器语言代码。目标文件由段组成。通常一个目标文件中至少有两个段：
代码段：该段中所包含的主要是程序的指令。该段一般是可读和可执行的，但一般却不可写。
数据段：主要存放程序中要用到的各种全局变量或静态的数据。一般数据段都是可读，可写，可执行的。
UNIX环境下主要有三种类型的目标文件：
(1)可重定位文件
其中包含有适合于其它目标文件链接来创建一个可执行的或者共享的目标文件的代码和数据。
(2)共享的目标文件
这种文件存放了适合于在两种上下文里链接的代码和数据。
第一种是链接程序可把它与其它可重定位文件及共享的目标文件一起处理来创建另一个 目标文件；
第二种是动态链接程序将它与另一个可执行文件及其它的共享目标文件结合到一起，创建一个进程映象。
(3)可执行文件
它包含了一个可以被操作系统创建一个进程来执行之的文件。汇编程序生成的实际上是第一种类型的目标文件。对于后两种还需要其他的一些处理方能得到，这个就是链接程序的工作了。
二、链接过程
由汇编程序生成的目标文件并不能立即就被执行，其中可能还有许多没有解决的问题。
例如，某个源文件中的函数可能引用了另一个源文件中定义的某个符号(如变量或者函数调用等)；在程序中可能调用了某个库文件中的函数，等等。所有的这些问题，都需要经链接程序的处理方能得以解决。
链接程序的主要工作就是将有关的目标文件彼此相连接，也即将在一个文件中引用的符号同该符号在另外一个文件中的定义连接起来，使得所有的这些目标文件成为一个能够被操作系统装入执行的统一整体。
根据开发人员指定的同库函数的链接方式的不同，链接处理可分为两种：
(1)静态链接
在这种链接方式下，函数的代码将从其所在地静态链接库中被拷贝到最终的可执行程序中。这样该程序在被执行时这些代码将被装入到该进程的虚拟地址空间中。静态链接库实际上是一个目标文件的集合，其中的每个文件含有库中的一个或者一组相关函数的代码。
(2) 动态链接
在此种方式下，函数的代码被放到称作是动态链接库或共享对象的某个目标文件中。链接程序此时所作的只是在最终的可执行程序中记录下共享对象的名字以及其它少量的登记信息。在此可执行文件被执行时，动态链接库的全部内容将被映射到运行时相应进程的虚地址空间。动态链接程序将根据可执行程序中记录的信息找到相应的函数代码。
对于可执行文件中的函数调用，可分别采用动态链接或静态链接的方法。使用动态链接能够使最终的可执行文件比较短小，并且当共享对象被多个进程使用时能节约一些内存，因为在内存中只需要保存一份此共享对象的代码。但并不是使用动态链接就一定比使用静态链接要优越。在某些情况下动态链接可能带来一些性能上损害。
我们在linux使用的gcc编译器便是把以上的几个过程进行捆绑，使用户只使用一次命令就把编译工作完成，这的确方便了编译工作，但对于初学者了解编译过程就很不利了，下图便是gcc代理的编译过程：

从上图可以看到：
预编译
将.c 文件转化成 .i文件
使用的gcc命令是：gcc –E
对应于预处理命令cpp
编译
将.c/.h文件转换成.s文件
使用的gcc命令是：gcc –S
对应于编译命令 cc –S
汇编
将.s 文件转化成 .o文件
使用的gcc 命令是：gcc –c
对应于汇编命令是 as
链接
将.o文件转化成可执行程序
使用的gcc 命令是： gcc
对应于链接命令是 ld
总结起来编译过程就上面的四个过程：预编译、编译、汇编、链接。了解这四个过程中所做的工作，对我们理解头文件、库等的工作过程是有帮助的，而且清楚的了解编译链接过程还对我们在编程时定位错误，以及编程时尽量调动编译器的检测错误会有很大的帮助的。

Ⅲ vue3中的编译器原理和优化策略

学习目标

编译器原理

vue3编译过程剖析

vue3编译优化策略

在初始化之前可能有编译的过程，最终的产物是个渲染函数，我们知道渲染函数返回的值是一个虚拟DOM(vnode),那么这个虚拟DOM在我们后续的更新过程中到底有什么作用呢？我们今天就来探讨一下。

编译器原理1.概念

广义上的编译原理：编译器是将源代码转化成机器码的软件；所以编译的过程则是将源代码转化成机器码的过程，也就是cpu可执行的二进制代码。例如使用高级语言java编写的程序需要编译成我们看不懂但计算机能看懂的的字节码。

如果了解过编译器的工作流程的同学应该知道，一个完整的编译器的工作流程会是这样：

首先，parse解析原始代码字符串，生成抽象语法树AST。

其次，transform转化抽象语法树，让它变成更贴近目标“DSL”的结构。

最后，codegen根据转化后的抽象语法树生成目标“DSL”的可执行代码。

2.vue中的编译

在vue里也有编译的过程，我们经常写的那个HTML模版，在真正工作的时候，并不是那个HTML模版，它实际上是一个渲染函数，在这个过程中就发生了转换，也就是编译，也就是那个字符串的模版最终会变成一个JS函数，叫render函数。所以在这个过程中我们就需要引入编译器的概念。在计算机中当一种东西从一种形态到另一种形态进行转换的时候，就需要编译。编译器：用来将模板字符串编译成为JavaScript渲染函数的代码

那么vue中的编译发生在什么时候呢？

这个时候我们就需要进一步了解vue包的不同版本的不同功能了。vue有携带编译器和不携带编译的包（对不同构建版本的解释）。

3.运行时编译

在使用携带编译器(compiler)的vue包的时候，vue编译的时刻是发生在挂载($mount)的时候。

4.运行时不编译

如果使用未携带编译器的vue包的时候，vue在运行时是不会进行编译的。那么它的编译又发生在什么时候呢？使用未携带编译器的vue包的时候，需要进行预编译，也就是基于构建工具使用，就是我们平时使用的vue-cli进行构建的项目，就是使用webpack调用vue-loader进行预编译，将所有vue文件，就是SFC，将里面的template模版部分转换成render函数。这样做的好处就是vue的包体积变小了，执行的时候速度更快了，因为不需要进行编译了。

vue编译器原理

简单来说就是：先将template模版转换成ast抽象语法树，ast再转换成渲染函数render。

那么什么是是ast抽象语法树呢？

1.ast抽象语法树

在template模版和render函数之间有一个中间产物叫做ast抽象语法树。它就是个js对象，它能够描述当前模版的结构信息，跟vnode很类似。注意，ast只是程序运行过程中编译产生的，它跟我们最终程序的运行是没有任何关系的。也就是当这个渲染函数生成之后，ast的生命周期就结束了，不再需要了，而那个虚拟DOM则伴随整个程序的生命周期。这个就是ast和虚拟DOM的本质区别。

2.为什么需要ast呢

在ast转换成render函数的过程中，需要进行特别的操作。第一次，将template转成的ast是个非常粗糙的js对象，是一次非常粗糙的转换，类似正则表达式的匹配，然后我们的template模版中还有很多表达式，指令，事件需要重新解析，经过这些具体的深加工的解析(transform)之后会得到一个终极ast，然后这个对这个终极ast进行generate，生成render函数

template=>ast=>transform=>ast=>render3.mini版vue编译器

下面我们来看一个mini版的vue编译器，具体代码已省略，具体代码我已经放在Github上了：mini-vue-compiler

functiontokenizer(input){...}functionparse(template){consttokens=tokenizer(template)...}functiontransform(ast){...}functiontraverse(ast,context){...}functiongenerate(ast){...}functioncompile(template){//1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){//returnh("h3",{},//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{{title}}</h3>`compile(tmpl)

大概有以上操作，其中parse函数就是发生在把template转换成ast的这过程，具体是通过一些正则表达式的匹配template中的字符串。比如将

xxx

转成ast对象，那么就是通过正则表达式匹配如果是

那么就设置一个开始标记，再往后面匹配到xxx内容，然后就设置一个子元素，最后匹配到

那么就设置一个结束标记，以此类推。parse解析之后得到的是一个粗糙的ast对象。经过parse解析得到一个粗糙的ast对象之后，就用transform进行深加工，最后要经过generate生成代码。

Vue3编译过程剖析

挂载的时候先把template编译成render函数，在创建实例之后，直接调用组件实例的render函数创建这个组件的真实DOM，然后继续向下做递归。

1.vue2.x和vue3.x的编译对比

Vue2.x中的Compile过程会是这样：

parse词法分析，编译模板生成原始粗糙的AST。

optimize优化原始AST，标记ASTElement为静态根节点或静态节点。

generate根据优化后的AST，生成可执行代码，例如_c、_l之类的。

在Vue3中，整体的Compile过程仍然是三个阶段，但是不同于Vue2.x的是，第二个阶段换成了正常编译器都会存在的阶段transform。

parse词法分析，编译模板生成原始粗糙的AST。

transform遍历AST,对每一个ASTelement进行转化，例如文本元素、指令元素、动态元素等等的转化

generate根据优化后的AST，生成可执行代码函数。

2.源码编译入口

我们先从一个入口来开始我们的源码阅读，packages/vue/index.ts。

//web平台特有编译函数functioncompileToFunction(template:string|HTMLElement,options?:CompilerOptions):RenderFunction{//省略...if(template[0]==='#'){//获取模版内容constel=document.querySelector(template)//省略...template=el?el.innerHTML:''}//编译const{code}=compile(template,extend({//省略...},options))constrender=(__GLOBAL__?newFunction(code)():newFunction('Vue',code)(runtimeDom))asRenderFunction//省略...return(compileCache[key]=render)}//注册编译函数registerRuntimeCompiler(compileToFunction)export{compileToFunctionascompile}

这个入口文件的代码比较简单，只有一个compileToFunction函数，但函数体内的内容却又比较关键，主要是经历以下步骤：

依赖注入编译函数至(compileToFunction)

runtime调用编译函数compileToFunction

调用compile函数

返回包含code的编译结果

将code作为参数传入Function的构造函数将生成的函数赋值给render变量

将render函数作为编译结果返回

3.template获取

app.mount()获取了templatepackages/runtime-dom/src/index.ts

4.编译template

compile将传?template编译为render函数，packages/runtime-core/src/component.ts

实际执?的是baseCompile，packages/compiler-core/src/compile.ts

第?步解析-parse：解析字符串template为抽象语法树ast

第?步转换-transform：解析属性、样式、指令等

第三步?成-generate：将ast转换为渲染函数

Vue3编译器优化策略

这是一个非常典型的用内存换时间的操作

1.静态节点提升<div><div>{{msg}}</div><p>coboy</p><p>coboy</p><p>coboy</p></div>

以上这个段template如果没有开启静态节点提升它编译后是这样的：

import{toDisplayStringas_toDisplayString,createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createBlock("div",null,[_createVNode("div",null,_toDisplayString(_ctx.msg),1/*TEXT*/),_createVNode("p",null,"coboy"),_createVNode("p",null,"coboy"),_createVNode("p",null,"coboy")]))}

如果开启了静态节点提升之后它编译后则是这样的：

import{toDisplayStringas_toDisplayString,createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"const_hoisted_1=/*#__PURE__*/_createVNode("p",null,"coboy",-1/*HOISTED*/)const_hoisted_2=/*#__PURE__*/_createVNode("p",null,"coboy",-1/*HOISTED*/)const_hoisted_3=/*#__PURE__*/_createVNode("p",null,"coboy",-1/*HOISTED*/)exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createBlock("div",null,[_createVNode("div",null,_toDisplayString(_ctx.msg),1/*TEXT*/),_hoisted_1,_hoisted_2,_hoisted_3]))}

我们可以看到template里存在大量的不会变的p标签，所以当这个组件重新渲染的时候，这些静态的不会变的标签就不应该再次创建了。所以vue3就把这些静态的不会变的标签的VNode放在了render函数作用域的外面，在下次render函数再次执行的时候，那些静态标签的VNode已经在内存里了，不需要重新创建了。相当于占用当前机器的内存，避免重复创建VNode，用内存来换时间。大家仔细斟酌一番静态提升的字眼，静态二字我们可以不看，但是提升二字，直抒本意地表达出它（静态节点）被提高了。

2.补丁标记和动态属性记录<div><div:title="title">coboy</div></div>

意思就是在编译的过程中，像人眼一样对模版进行扫描看哪些东西是动态的，然后提前把这些动态的东西提前保存起来，作个标记和记录，等下次更新的时候，只更新这些保存起来的动态的记录。比如上面模版的title是动态的，提前做个标记和记录，更新的时候就只更新title部分的内容。

import{createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createBlock("div",null,[_createVNode("div",{title:_ctx.title},"coboy",8/*PROPS*/,["title"])]))}<div><div:title="title">{{text}}</div></div>import{toDisplayStringas_toDisplayString,createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createBlock("div",null,[_createVNode("div",{title:_ctx.title},_toDisplayString(_ctx.text),9/*TEXT,PROPS*/,["title"])]))}

我们可以观察到在_createVNode函数的第四个参数是个9，后面是一个注释：/TEXT,PROPS/，这个是表示在当前的节点里面有两个东西是动态的，一个是内部的文本，一个是属性，然后具体是哪个属性，在第五个参数的数组里面则记录了下来["title"]，有个title的属性是动态的。

在将来进行patch更新的时候，就可以根据当前记录的信息，进行更新，缩减更新过程和操作，可以非常精确地只进行title和文本的更新。

如果div标签里是静态文本的话，_createVNode函数的第四个参数则变成了8，后面的注释变成了：/PROPS/，后面的第五个参数数据不变。

_createVNode函数的第四个参数的数字其实是一个二进制数字转成十进制的数字。

8的二进制是1000，9的二进制是1001，很容易可以看出二进制的每一位的数字都代表着特殊的含义。这些数字就是patchFlag，那么什么是patchFlag呢？

什么是patchFlag

patchFlag是complier时的transform阶段解析ASTElement打上的补丁标记。它会为runtime时的patchVNode提供依据，从而实现靶向更新VNode和静态提升的效果。

patchFlag被定义为一个数字枚举类型，它的每一个枚举值对应的标识意义是：

TEXT=1动态文本的元素

CLASS=2动态绑定class的元素

STYLE=4动态绑定style的元素

PROPS=8动态props的元素，且不含有class、style绑定

FULL_PROPS=16动态props和带有key值绑定的元素

HYDRATE_EVENTS=32事件监听的元素

STABLE_FRAGMENT=64子元素的订阅不会改变的Fragment元素

KEYED_FRAGMENT=128自己或子元素带有key值绑定的Fragment元素

UNKEYED_FRAGMENT=256没有key值绑定的Fragment元素

NEED_PATCH=512带有ref、指令的元素

DYNAMIC_SLOTS=1024动态slot的组件元素

HOISTED=-1静态的元素

BAIL=-2不是render函数生成的一些元素，例如renderSlot

整体上patchFlag的分为两大类：

当patchFlag的值大于0时，代表所对应的元素在patchVNode时或render时是可以被优化生成或更新的

当patchFlag的值小于0时，代表所对应的元素在patchVNode时，是需要被fulldiff，即进行递归遍历VNodetree的比较更新过程。

以上就是vue3的一个非常高效的优化策略叫补丁标记和动态属性记录。

3.缓存事件处理程序functiontokenizer(input){...}functionparse(template){consttokens=tokenizer(template)...}functiontransform(ast){...}functiontraverse(ast,context){...}functiongenerate(ast){...}functioncompile(template){//1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){//returnh("h3",{},//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{{title}}</h3>`compile(tmpl)0

将来框架会像react那样把@click="onClick"变成@click="()=>onClick()"，最后可能是这样的一个箭头函数。那就意味着每次onClick的函数都是一个全新的函数，那就会造成这个回调函数明明没有变，都会被认为变了，那就必须进行一系列的更新，那么如果能把这个回调函数缓存起来，更新的时候，就不要再创建了。

未进行缓存事件处理程序之前的编译

functiontokenizer(input){...}functionparse(template){consttokens=tokenizer(template)...}functiontransform(ast){...}functiontraverse(ast,context){...}functiongenerate(ast){...}functioncompile(template){//1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){//returnh("h3",{},//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{{title}}</h3>`compile(tmpl)1

进行缓存事件处理程序之后的编译

functiontokenizer(input){...}functionparse(template){consttokens=tokenizer(template)...}functiontransform(ast){...}functiontraverse(ast,context){...}functiongenerate(ast){...}functioncompile(template){//1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){//returnh("h3",{},//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{{title}}</h3>`compile(tmpl)24.块block

这是什么意思呢？根据尤雨溪本人的解析，他说，根据他的统计那个动态的部分最多只有三分之一，基本上都是静态部分，所以在编译的过程中，能不能发现那个比较小的动态部分，把它放到比较靠上