|
| 1 | +# 连载《Chrome V8 原理讲解》第一篇:V8环境搭建 |
| 2 | + |
| 3 | +# 为什么写这个主题 |
| 4 | +Chrome的重要地位不用赘述,V8不仅是chrome的核心组件,还是node.js等众多软件的核心组件,V8的重要程度亦不用多言。V8涉及的技术十分广泛,包括了操作系统、编译技术、计算机系统结构等多方面的知识,而网上的材料或零散或陈旧,给初学者造成了很大的困难,所以我准备写一系列文章,从基础入手,到V8内存分配、Isolate创建、handles概念、builtin、codegen、编译等每个方面进行详细讲解,力求做到概念层面的讲解、有理论依据,又要有代码层面的说明、有事实论证。 |
| 5 | +# 本节内容介绍 |
| 6 | +本文是这个系列的第一篇,主要讲解四部分内容:一、编译工具链、V8编译和调试;二、如何学习V8代码最容易;三、以JavaScript元素(Element)为例,开启V8源码的学习之旅,起到抛砖引玉的作用;四、元素原理讲解。 |
| 7 | +**本文所讲的操作过程要求你的网络能访问谷歌,还要求你的cmd命令行也能通过http(s)访问谷歌。** |
| 8 | + |
| 9 | +# 一、下载、编译、调试 |
| 10 | +## 1.系统环境要求 |
| 11 | +操作系统 win 10 64bit,VS2019社区版,git |
| 12 | +操作系统 Win 10 64bit,VS2019社区版,Git,windows 10 SDK至少是10.0.19041以上版,安装SDK时不推荐用VS installer安装,单独下载SDK安装包。原因是installer安装的SDK文件不全。 |
| 13 | +## 2.depot_tools工具 |
| 14 | +它是v8的编译工具链,下载代码,编译代码都需要用到它。 |
| 15 | +* 下载地址:https://storage.googleapis.com/chrome-infra/depot_tools.zip |
| 16 | +* 压缩depot_tools.zip,用鼠标右键压缩,注意:不要双击打开并从中拖拽出来 |
| 17 | +* 把depot_tools加入到环境变量PATH中;添加系统变量DEPOT_TOOLS_WIN_TOOLCHAIN=0 |
| 18 | +* 打开CMD终端(不是powershell,并且能http(s)访问谷歌),执行gclient。它做一些初始化工作,与v8代码无关,不作深入讲解,可自行查阅源码 |
| 19 | +* gclient执行完毕,用where python查看depot_tools中的python.bat的位置,确保python.bat在环境变量PATH中的位置在系统中原有(如果有)的python环境位置前面 |
| 20 | +## 3.下载代码 |
| 21 | +* git的初始化 |
| 22 | + ``` |
| 23 | + > git config --global user.name "Name" |
| 24 | + > git config --global user.email "[email protected]" |
| 25 | + > git config --global core.autocrlf false |
| 26 | + > git config --global core.filemode false |
| 27 | + > git config --global branch.autosetuprebase always |
| 28 | + ``` |
| 29 | +* 下载V8代码 |
| 30 | + ``` |
| 31 | + fetch v8 |
| 32 | + git pull origin master |
| 33 | + ``` |
| 34 | + 源码不太大,用debug模式编译后需要7G的硬盘空间,建议用固态硬盘,因为文件数量多,VS2019在扫描文件之间的引用关系时,固态很有优势。 |
| 35 | +* 生成GN工程文件 |
| 36 | + ``` |
| 37 | + > cd ~\v8\src #进入v8 src目录 |
| 38 | + > gn gen --ide=vs out\default --args="is_component_build = true is_debug = true v8_optimized_debug = false" |
| 39 | + ``` |
| 40 | + gn命令不是本文重点,可自行查阅。参数:is_debug = true 让v8可以被调试,v8_optimized_debug = false 去掉对调试v8有干扰的代码优化,这不会影响v8的正确性,只可能对性能有点影响,下文是我的编译配置文件args.gn。 |
| 41 | + ``` |
| 42 | + is_component_build = true |
| 43 | + is_debug = true |
| 44 | + v8_optimized_debug = false |
| 45 | + v8_use_snapshot = false |
| 46 | + ``` |
| 47 | +## 4.编译、调试 |
| 48 | +用VS2019编译V8 |
| 49 | +在src\out\default下,能看到all.sln,双击打开,如图-1。 |
| 50 | + |
| 51 | +在解决方案资源管理器中,能看到v8_hello_world这个方案,鼠标右击“设为启动项目”,再次鼠标右击“生成”,这样就开始编译了,在图1下方的输出窗口,能看到编译过程。编译时间长短要看机器性能:CPU和内存频率、硬盘读写速度。 |
| 52 | + |
| 53 | +上图是跟踪hello world的调用堆栈。 |
| 54 | +总结,环境搭建过程中可能会出现意想不到的问题,多半都和SDK版本、环境变量有关,详细查看出错信息往往会得到答案。 |
| 55 | + |
| 56 | +# 二、更容易入手的学习方法 |
| 57 | +学代码,肯定是可以调试,跟踪最容易,V8代码太大,要有一个合理的入口才好,v8的源码都在src目录下,如下图。 |
| 58 | + |
| 59 | +还有一个samples目录,这里就是我们开始学习的地方,图1中打开的文件正是hello-world.cc,这是一个hello world程序。V8是一个javascript虚拟机,这个hello word正是在这个V8运行的一个程序,包括了V8的创建、Isolate创建、handle创建,编译,输出hello world,再结束V8的全过程。学习V8的方式就是从跟踪hello-world.cc做起。 |
| 60 | +# 三 、元素(Element)初始化 |
| 61 | +  V8在启动全过程涉及很知识,本篇文章的作用为学习V8代码起个头,所以咱们聊聊相对简单的元素(Element)初始化。通过元素的初始化,学习如何跟踪V8代码,以及了角V8的代码风格。 |
| 62 | +  先来说什么是元素,Element是什么?先来看一个概念,{a:"foo",b:"bar"},这个对象有两个名字属性(name properties),"a"和"b",它们不能用数组下标索引,有下标索引属性的,通常被称为元素(Element),例如:["foo","bar"],0位置是"foo",1位置是"bar"。这在V8中的处理方式有很大的不同,先通过一张图说明一下javascipt对象在V8中的表现形式。 |
| 63 | + |
| 64 | +  从图可以看出,在V8中javaScript对象内部是分开做存储的,name property和元素分开存储的。本节主要讲解element,也就是图版中红色标记的部分。 |
| 65 | +  我直接给出跟踪方法,见下图。 |
| 66 | + |
| 67 | +  注意图中文件的位置,和断点,调试时就可以在这个位置停下来,这就是跟踪方法,单步进入分析即可。 |
| 68 | +# 四、元素(ELement)原理及重要数据结构 |
| 69 | +## 1.主要代码和数据结构 |
| 70 | +  Element中的大量方法,例如pop或者slice方法等,大多都是用来对一段连续的地址空间进行操作的。ElementsAccessor是操作Element的基类,在Element上的每个操作都会对应到ElmentsAccessor。 |
| 71 | +``` |
| 72 | +void ElementsAccessor::InitializeOncePerProcess() { |
| 73 | + static ElementsAccessor* accessor_array[] = { |
| 74 | +#define ACCESSOR_ARRAY(Class, Kind, Store) new Class(), |
| 75 | + ELEMENTS_LIST(ACCESSOR_ARRAY)//这里初化的宏义 |
| 76 | +#undef ACCESSOR_ARRAY |
| 77 | + }; |
| 78 | +
|
| 79 | + STATIC_ASSERT((sizeof(accessor_array) / sizeof(*accessor_array)) == |
| 80 | + kElementsKindCount); |
| 81 | +
|
| 82 | + elements_accessors_ = accessor_array; |
| 83 | +} |
| 84 | +``` |
| 85 | +  代码中的ACCESSOR_ARRAY和ELEMENTS_LIST两个宏配合完成初始化,ELEMENTS_LIST中也能看到所有种类的Element,也就是Element kinds,如下图所示。 |
| 86 | + |
| 87 | +  以FastPackedSmiElemntsAccessor为例进行分析,这个类从名字可以出来它是连续存储的Smi类型,连续存储是指数据中没有空洞,例如:a =[1,2,3],这就是packed Smi,b = [1,,3],这就是Holey Smi。何为Smi?就是小整数,以32位CPU为例说明,最低的一位(bit)是表示类型的,如果是1,则是指针,是0表示是Smi。 |
| 88 | +  FastPackedSmiElementsAccessor中没有具体实现的功能, 我们直接看他的父类 FastSmiOrObjectElementsAccessor,这里有一些功能的实现,但目前看完这些功能,是没有办法在脑海中构建出一个Element结构来的,现在看还为时尚早,因为这里只有Element的初始化,没有讲它是如何使用的,比如:slice方法是如何实现的,这里并没有详细说明。这里主要说明了初始化,接着看FastElementsAccessor这个父类,这里定义了的功能实现比FastSmiOrObjectElementsAccessor中多,方法名中包含"Normailize"字样的方法非常重要,因为任何一个JavaScript中关于Element的操作方法(比如slice)的执行过程都与Normalize有关,Normalize是Element的操作方法到最终实现之间的必经之路。 |
| 89 | + |
| 90 | +  NormalizeImpl是Normalize方法的具体实现。再进入下一个父类 |
| 91 | + |
| 92 | +  最后给出类型的嵌套关系,如下图 |
| 93 | + |
| 94 | +  看完这类中的各种方法,感觉方法之间无法关联起,这是正常的,因为目前为止,我们还没有进入方法的调用过程。 |
| 95 | +## 2.从element.length看执行过程 |
| 96 | +  到目前为止,我们还只是看ELement的初始化过程,如果能让所有的成员动起来,可以提高我们的学习效率。借助debug来做个测试,如下图 |
| 97 | + |
| 98 | +  我们调试的是shell.cc,它的位置在samples\下。调试之前要把这个工程编译,看图中右侧的红色标记,可以把这个工程设置为启动项,然后生成,启动debug后看到这到下图。 |
| 99 | + |
| 100 | +  这时,我们在elements.cc中下断点,如下图。 |
| 101 | + |
| 102 | +  在这样图中,能看到断点,还有调用堆栈,从中能看到函数的调用过程,在shell窗口中执行如下指令 |
| 103 | +``` |
| 104 | +a=[1,2,3,4] |
| 105 | +a.length = 7 //这是特意改变数组长度,为了能触发断点 |
| 106 | +``` |
| 107 | +这时就能复原上图的堆栈了,你可以查看附近的相关代码。 |
| 108 | +## 3.数据结构Accessors |
| 109 | +  我们先来看一下这个结构的部分源代码。 |
| 110 | +``` |
| 111 | +// Accessors contains all predefined proxy accessors. |
| 112 | +class Accessors : public AllStatic { |
| 113 | + public: |
| 114 | +#define ACCESSOR_GETTER_DECLARATION(_, accessor_name, AccessorName, ...) \ |
| 115 | + static void AccessorName##Getter( \ |
| 116 | + v8::Local<v8::Name> name, \ |
| 117 | + const v8::PropertyCallbackInfo<v8::Value>& info); |
| 118 | + ACCESSOR_INFO_LIST_GENERATOR(ACCESSOR_GETTER_DECLARATION, /* not used */) |
| 119 | +#undef ACCESSOR_GETTER_DECLARATION |
| 120 | +
|
| 121 | +#define ACCESSOR_SETTER_DECLARATION(accessor_name) \ |
| 122 | + static void accessor_name( \ |
| 123 | + v8::Local<v8::Name> name, v8::Local<v8::Value> value, \ |
| 124 | + const v8::PropertyCallbackInfo<v8::Boolean>& info); |
| 125 | + ACCESSOR_SETTER_LIST(ACCESSOR_SETTER_DECLARATION) |
| 126 | +#undef ACCESSOR_SETTER_DECLARATION |
| 127 | +... |
| 128 | +省略很多代码... .... |
| 129 | +... |
| 130 | +``` |
| 131 | +  这个Accessors的作用是什么?通过上面的例子来说明:上面定义的a.length=5的执行过程是:需要先找到它的Accessors,然后再才能到具体的setlength,这正好和V8的ElementsAccessor说明是对应的,如下图。 |
| 132 | + |
| 133 | +好了,今天就到这里,下次见。 |
| 134 | +**微信:qq9123013 邮箱: [email protected] 欢迎批评指正 ** |
0 commit comments