Skip to content

Commit ad6f1a9

Browse files
authored
Add files via upload
1 parent 64f0990 commit ad6f1a9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+5195
-0
lines changed

chap1-0829/P1.jpg

853 KB
Loading

chap1-0829/P2.png

45.5 KB
Loading

chap1-0829/README.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# 连载《Chrome V8 原理讲解》第一篇:V8环境搭建
2+
![avatar](../v8.png)
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+
![avatar](vs0.png)
51+
在解决方案资源管理器中,能看到v8_hello_world这个方案,鼠标右击“设为启动项目”,再次鼠标右击“生成”,这样就开始编译了,在图1下方的输出窗口,能看到编译过程。编译时间长短要看机器性能:CPU和内存频率、硬盘读写速度。
52+
![avatar](stack.png)
53+
上图是跟踪hello world的调用堆栈。
54+
总结,环境搭建过程中可能会出现意想不到的问题,多半都和SDK版本、环境变量有关,详细查看出错信息往往会得到答案。
55+
56+
# 二、更容易入手的学习方法
57+
学代码,肯定是可以调试,跟踪最容易,V8代码太大,要有一个合理的入口才好,v8的源码都在src目录下,如下图。
58+
![avatar](v8tree.jpg)
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+
![avatar](P1.jpg)
64+
  从图可以看出,在V8中javaScript对象内部是分开做存储的,name property和元素分开存储的。本节主要讲解element,也就是图版中红色标记的部分。
65+
  我直接给出跟踪方法,见下图。
66+
![avatar](P2.png)
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+
![avatar](VS1.png)
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+
![avatar](VS2.png)
90+
  NormalizeImpl是Normalize方法的具体实现。再进入下一个父类
91+
![avatar](VS3.png)
92+
  最后给出类型的嵌套关系,如下图
93+
![avatar](VS4.png)
94+
  看完这类中的各种方法,感觉方法之间无法关联起,这是正常的,因为目前为止,我们还没有进入方法的调用过程。
95+
## 2.从element.length看执行过程
96+
  到目前为止,我们还只是看ELement的初始化过程,如果能让所有的成员动起来,可以提高我们的学习效率。借助debug来做个测试,如下图
97+
![avatar](VS5.png)
98+
  我们调试的是shell.cc,它的位置在samples\下。调试之前要把这个工程编译,看图中右侧的红色标记,可以把这个工程设置为启动项,然后生成,启动debug后看到这到下图。
99+
![avatar](VS6.png)
100+
  这时,我们在elements.cc中下断点,如下图。
101+
![avatar](VS7.png)
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+
&emsp;&emsp;这个Accessors的作用是什么?通过上面的例子来说明:上面定义的a.length=5的执行过程是:需要先找到它的Accessors,然后再才能到具体的setlength,这正好和V8的ElementsAccessor说明是对应的,如下图。
132+
![avatar](VS8.png)
133+
好了,今天就到这里,下次见。
134+
**微信:qq9123013 邮箱:[email protected] 欢迎批评指正**

chap1-0829/VS1.png

113 KB
Loading

chap1-0829/VS2.png

136 KB
Loading

chap1-0829/VS3.png

123 KB
Loading

chap1-0829/VS4.png

8.94 KB
Loading

chap1-0829/VS5.png

217 KB
Loading

chap1-0829/VS6.png

15.4 KB
Loading

chap1-0829/VS7.png

205 KB
Loading

chap1-0829/VS8.png

3.68 KB
Loading

chap1-0829/stack.png

49.2 KB
Loading

chap1-0829/v8tree.jpg

98.2 KB
Loading

chap1-0829/v8tree.png

27.2 KB
Loading

chap1-0829/vs0.png

158 KB
Loading

0 commit comments

Comments
 (0)