1.环境准备#

1
// 1.若之前安装过需要更新的话
2
// mac若已安装 Homebrew，直接执行升级命令
3
brew update && brew upgrade git
4

5
// 2.若未安装 Homebrew 或需强制覆盖系统自带 Git：
6
// 1）安装 Homebrew (如未安装)
7
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
8

9
// 2）安装/更新 Git
10
brew install git
11

12
// 3）强制链接以覆盖系统默认路径 (关键步骤)
13
brew link git --overwrite
14

15
// 4）重载环境变量 (根据 Shell 类型选择，Zsh 为默认)
16
source ~/.zshrc
17

18
// 5）验证版本和路径
19
git --version // 验证版本
20
which git // 验证路径

1
git --version

1
// 1.‌执行安装脚本‌
2
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
3

4
// 2.加载环境变量‌
5
// 安装完成后，在当前终端执行以下命令使 nvm 立即生效：
6
export NVM_DIR="$HOME/.nvm"
7
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
8
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
9
// 注：官方脚本通常会自动将上述配置写入 ~/.zshrc，若重启终端后 nvm 命令失效，请检查 ~/.zshrc 末尾是否包含上述代码。
10

11
// 3.配置国内镜像（可选，加速 Node 安装）‌
12
// 在 ~/.zshrc 中添加以下环境变量，解决 nvm install 下载慢的问题：
13
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/
14

15
// 4.添加后执行 source ~/.zshrc 生效。
16
source ~/.zshrc
17

18
// 5.验证安装‌(运行后输出版本号即为安装成功)
19
nvm --version // 简写 nvm -v
20

21
// 其他常规操作：
22
// 安装最新 LTS 版本
23
nvm install --lts
24

25
// 切换版本
26
nvm use <版本号>
27

28
// 设置默认版本
29
nvm alias default <版本号>

1
npm install -g pnpm

2 Astro#

1
pnpm create astro@latest

2.2 初始化Astro项目#

• 工具安装完成后，会自动调用启动 Astro 项目创建向导。
• 指定项目目录（dir）：输入自定义项目名（比如my-blog）后回车确认。（默认是在当前命令行所在路径下创建项目文件夹，也可以指定具体路径）
• 选择模板（tmpl）：通过上下方向键选中 blog template（博客模板），回车确认。
• 安装依赖（deps）：确认自动安装项目依赖。
• 初始化 Git（git）：确认自动创建 Git 仓库，完成版本控制初始化。

2.3 启动Astro开发服务器测试#

这样基础的博客模板就生成好了，命令行进入到博客目录下，输入pnpm run dev命令启动 Astro 开发服务器:

根据运行提示，在浏览器输入 http://localhost:4321/ 访问博客

测试完成后，回到命令行Ctrl+C关闭服务器。

3 配置Astro博客主题#

这里直接使用的可Fork的主题库，可以新建个空文件夹。

3.2 Fork主题仓库Firefly#

首先Fork一下你选择的Astro博客主题仓库（这里我用的是Firefly）到自己的Github仓库：仓库名、描述可以自定义，只拷贝主分支。

然后再克隆到本地：

1
git clone 上图中你复制的地址

3.3 制定分支策略#

核心原则：不要直接在 master 分支做自定义修改，让 master 分支纯粹用于跟踪原博客主题仓库的更新，自定义修改放在独立的开发分支中。

1
// 1. 创建专属的开发分支（比如叫 dev），所有自定义修改都在这个分支做
2
git checkout -b dev
3

4
// 2. 把本地的 dev 分支推送到你的 Fork 仓库（后续提交都推到这个分支）
5
git push -u origin dev
6

7
// 3. 查看本地分支和远程分支的关联状态（关联后，后续可以直接 git push）
8
git branch -vv

1
// 安装项目依赖
2
pnpm install

1
pnpm dev

1
// 1. 确保当前在开发分支（每次操作前先确认，避免切错分支）
2
git branch // 查看本地所有分支，会显示当前所在本地分支（高亮）
3
git branch -a // 查看本地及远程所有分支，会显示当前所在本地分支（高亮）
4
git checkout dev // 若当前不在dev分支，执行当前命令会切换到本地dev分支
5

6
// 2. 查看修改内容（可选，但建议做，确认只提交需要的修改）
7
git status
8

9
// 3. 将修改的文件加入暂存区
10
git add .
11

12
// 4. 提交修改（备注最好要清晰，方便后续追溯）
13
git commit -m "修改主页布局"
14

15
// 5. 推送到你的Fork仓库（把本地修改同步到GitHub）
16
git push origin dev // 将本地dev同步到GitHub的dev分支 注意：此时远程master主分支与dev分支并未同步，dev分支才是你修改后的最新代码

5 Vercel 部署#

Astro部署方案有很多，具体参考官方文档：部署你的 Astro 站点 Docs

由于之前使用HEXO搭建博客的时候用的‌ GitHub，所以这里我就没再尝试使用‌GitHub Pages‌部署了。 我尝试使用Cloudflare Pages和‌Netlify‌部署，都没有成功。最终使用‌Netlify‌部署成功。

1
npm install -g netlify-cli

1
netlify --version

5.2 Netlify 关联项目#

登录 Netlify 官网，如果没有账号需要注册一下，可以直接关联GitHub登录。这里我是直接关联的GitHub登录。

在官网点击Add new project新建一个项目

选择引入/关联你的项目，我的项目在github上，所以我这里选择的GitHub

选择/搜索你的项目库并选择

填写你的项目名称（最终会成功访问链接中）

注意： 如果你的项目最新代码也在dev分支上，这里一定要将Build settings选择为dev分支。（这里默认打包的是master分支）

到页面最底部，点击 “Deploy 你的项目名称”按钮

跳转的页面最底下，已经开始自动打包部署了，点击进去可以看到详细

刚发布的项目，项目名称后面有个锁的图标，这代表当前这个项目虽然发布成功了，但它现在是个私有项目，别人可能访问不到你的项目，点击“visitor access settings”去设置

点击Edit visibility 去编辑

选择Public，点击 Save 保存设置

当这里的图标是这样的，说明项目部署成功了。点击进入当前项目，可以看到项目的详细设置

点击 Share ，弹框中复制链接，就可以访问你的博客地址了。

Object.defineProperty#

1. Object.defineProperty 无法低耗费的监听到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
2. Object.defineProperty 只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历。如果属性值是对象，还需要深度遍历。

Proxy#

1. Proxy 可以劫持整个对象， 并返回一个新的对象。
2. Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

1. JS Array的实现#

先看源码注释：

1
// The JSArray describes JavaScript Arrays
2
//  Such an array can be in one of two modes:
3
//    - fast, backing storage is a FixedArray and length <= elements.length();
4
//       Please note: push and pop can be used to grow and shrink the array.
5
//    - slow, backing storage is a HashTable with numbers as keys.
6
class JSArray: public JSObject {
7
  public:
8
  // [length]: The length property.
9
  DECL_ACCESSORS (length, Object)
10

11
  // Number of element slots to pre-allocate for an empty array.
12
  static const int kPreallocatedArrayElements = 4;
13
};

• 这里说明一下，如果不熟悉C/C++的，那把它成伪码就好了。

• 源码里面说了，JSArray有两种模式，一种是快速的，一种是慢速的，快速的用的是索引直接定位，慢速的使用用哈希查找，由于JSArray是继承于JSObject，所以它也是同样的处理方式，如下面的：

  1
  var ary = [1, 2, 3]
  2
  ary[2000] = 5

  • 增加一个2000的索引时，array就会被转成慢元素。

2. Push和扩容#

数组初始化大小为4：

1
// Number of element slots to pre-allocate for an empty array.
2
static const int kPreallocatedArrayElements = 4;

• 执行push的时候会在数组的末尾添加新的元素，而一旦空间不足时，将进行扩容。

• 在源码里面push是用汇编实现的，在C++里面嵌入的汇编。这个应该是考虑到push是一个最为常用的操作，所以用汇编实现提高执行速度。在汇编的上面封装了一层，用C++调的封装的汇编的函数，在编译组装的时候，将把这些C++代码转成汇编代码。

• 计算新容量的函数：

  1
  Node* CodeStubAssembler::CalculateNewElementsCapacity(Node* old_capacity, ParameterMode mode) {
  2
    Node* half_old_capacity = WordOrSmiShr(old_capacity, 1, mode);
  3
    Node* new_capacity = IntPtrOrSmiAdd(half_old_capacity, old_capacity, mode);
  4
    Node* padding = IntPtrOrSmiConstant(16, mode);
  5
    return IntPtrOrSmiAdd(new_capacity, padding, mode);
  6
  }

  • 如上代码新容量等于 ：

    1
    new_capacity = old_capacity / 2 + old_capacity + 16

    • 即老的容量的1.5倍加上16。初始化为4个，当push第5个的时候，容量将会变成：

    1
    new_capacity = 4 / 2 + 4 + 16 = 22

    • 接着申请一块这么大的内存，把老的数据拷过去：

      1
      Node* CodeStubAssembler::GrowElementsCapacity(Node* object, Node* elements, Node* capacity, Node* new_capacity) {
      2
        // Allocate the new backing store.
      3
        Node* new_elements = AllocateFixedArray(new_capacity, mode);
      4
      
      5
        // Copy the elements from the old elements store to the new.
      6
        CopyFixedArrayElements(elements, new_elements, capacity, new_capacity);
      7
        return new_elements;
      8
      }

      • 由于复制是用的memcopy，把整一段内存空间拷贝过去，所以这个操作还是比较快的。

      • 再把新元素放到当前length的位置，再把length增加1：

        1
        StoreFixedArrayElement(elements, var_length.value());
        2
        Increment(var_length, 1, mode);

3. Pop和减容#

push是用汇编实现，而pop的逻辑是用C++写的。在执行pop的时候，第一步，获取到当前的length，用这个length - 1得到要删除的元素，然后调用setLength调整容量，最后返回删除的元素：

1
int new_length = length - 1;
2
int remove_index = remove_position == AT_START ? 0 : new_length;
3
Handle<Object> result = Subclass::GetImpl(isolate, *backing_store, remove_index);
4
Subclass::SetLengthImpl(isolate, receiver, new_length, backing_store);
5
return result;

• 我们重点看下这个减容的过程：

  1
  if (2 * length <= capacity) {
  2
    // If more than half the elements won't be used, trim the array.
  3
    isolate->heap()->RightTrimFixedArray(backing_store, capacity - length);
  4
  } else {
  5
    // Otherwise, fill the unused tail with holes.
  6
    BackingStore::cast(*backing_store)->FillWithHoles(length, old_length);
  7
  }

  • 如果容量大于等于length的2倍，则进行容量调整，否则用holes对象填充。第三行的rightTrim函数，会算出需要释放的空间大小，并做标记，并等待GC回收：

  1
  int bytes_to_trim = elements_to_trim * element_size;
  2
  // Calculate location of new array end.
  3
  Address old_end = object->address() + object->Size();
  4
  Address new_end = old_end - bytes_to_trim;
  5
  CreateFillerObjectAt(new_end, bytes_to_trim, ClearRecordedSlots::kYes);

  • 也就是说，当数组的元素个数小于容量的一半时，就会进行减少的操作，将容量调整为实际的大小。

4. shift和splice数组中间的操作#

push和pop都是在数组末尾操作，相对比较简单，而shfit、unshfit、splice是在数组的开始或者中间进行操纵。我们来看一下，如果是这种情况的又是如何调整数组元素的。

5. Join和Sort#

它们是用JS实现的，然后再用wasm打包成native code。不过，join的实现逻辑并不简单，因为array的元素本身具有多样化，可能为慢元素或者快元素，还可能带有循环引用，对于慢元素，需要先排下序：

1
var keys = GetSortedArrayKeys(array, %GetArrayKeys(array, length));

• 预处理完之后，最后创建一个字符串数组，用连接符连起来：

  1
  // Construct an array for the elements.
  2
  var elements = new InternalArray(length);
  3
  for (var i = 0; i < length; i++) {
  4
    elements[i] = ConvertToString(use_locale, array[i]);
  5
  }
  6
  
  7
  if (separator === '') {
  8
    return %StringBuilderConcat(elements, length, '');
  9
  } else {
  10
    return %StringBuilderJoin(elements, length, separator);
  11
  }

• 而sort函数是用的快速排序：

  1
  function ArraySort(comparefn) {
  2
    CHECK_OBJECT_COERCIBLE(this, "Array.prototype.sort");
  3
    %Log("js/array.js execute ArraySort");  //手动添加的log打印，确保执行的是这里
  4
  
  5
    var array = TO_OBJECT(this);
  6
    var length = TO_LENGTH(array.length);
  7
    return InnerArraySort(array, length, comparefn);
  8
  }

  • 当数组元素的个数不超过10个时，是用的插入排序：

    1
    function InnerArraySort(array, length, comparefn) {
    2
      // In-place QuickSort algorithm.
    3
      // For short (length <= 10) arrays, insertion sort is used for efficiency.
    4
      function QuickSort(a, from, to) {
    5
        var third_index = 0;
    6
        while (true) {
    7
          // Insertion sort is faster for short arrays.
    8
          if (to - from <= 10) {
    9
            InsertionSort(a, from, to);
    10
            return;
    11
          }
    12
          //other code ...
    13
        }
    14
      }
    15
    }

    展开收起

  • 快速排序算法里面有一个比较重要的地方是选择枢纽元素，最简单的是每次都是选取第一个元素，或者中间的元素，在源码里面是这样选择的：

    1
    if (to - from > 1000) {
    2
      third_index = GetThirdIndex(a, from, to);
    3
    } else {
    4
      third_index = from + ((to - from) >> 1);
    5
    }

    • 如果元素个数在1000以内，则使用它们的中间元素，否则要算一下， 这个算法比较有趣：

      1
      function GetThirdIndex(a, from, to) {
      2
        var t_array = new InternalArray();
      3
        // Use both 'from' and 'to' to determine the pivot candidates.
      4
        var increment = 200 + ((to - from) & 15);
      5
        var j = 0;
      6
        from += 1;
      7
        to -= 1;
      8
        for (var i = from; i < to; i += increment) {
      9
          t_array[j] = [i, a[i]];
      10
          j++;
      11
        }
      12
        t_array.sort(function(a, b) {
      13
          return comparefn(a[1], b[1]);
      14
        });
      15
        var third_index = t_array[t_array.length >> 1][0];
      16
        return third_index;
      17
      }

      展开收起
      • 先取一个递增间距200~215之间，再循环取出原元素里面落到这个间距的元素，放到一个新的数组里面（这个数组是C++里面的数组），然后排下序，取中间的元素。因为枢纽元素的刚好是所有元素的中位数时，排序的效果最好，而这里是取出少数元素的中位数，类似于抽样模拟，缺点是它得再借助另外的排序算法。
      • 最后再比较一下Array和线性链接的速度。

Array和线性链接的速度#

线性链接是一种非连续存储的数据结构，每个元素都有一个指针指向它的下一个元素，所以它删除元素的时候不需要移动其它元素，也不需要考虑扩容的事情，但是它的查找比较慢。我们实现一个简单的List和Array进行比较。

• List的每个节点用一个Node表示：

  1
  class Node{
  2
    constructor(value, next){
  3
        this.value = value;
  4
        this.next = next;
  5
    }
  6
  }

• 每个List都有一个头指针指向第一个元素，和一个length记录它的长度：

  1
  class List{
  2
    constructor(){
  3
        this.head = null;
  4
        this.tail = null;
  5
        this.length = 0;
  6
    }
  7
  }

• 然后实现它的push和unshift函数：

  1
  class List{
  2
    unshift(value){
  3
        return this.insert(0, value);
  4
    }
  5
    push(value){
  6
        if(this.head === null){
  7
            this.head = new Node(value, this.tail);
  8
            this.length++;
  9
        } else {
  10
            this.insert(this.length, value);
  11
        }
  12
        return this.length;
  13
    }
  14
  }

• 两个函数都会调一个通用的insert函数：

  1
  insert(index, value){
  2
    var insertPos = this.head;
  3
    //找到需要插入的位置的节点
  4
    for(var i = 0; i < index - 1; i++){
  5
        insertPos = insertPos.next;
  6
    }
  7
    var node = null;
  8
    if(index === 0){
  9
        node = new Node(value, this.head);
  10
        this.head = node;
  11
    } else {
  12
        node = new Node(value, insertPos.next);
  13
        insertPos.next = node;
  14
    }
  15
    this.length++;
  16
    return value;
  17
  }

  展开收起

• 有了这个List之后，就可以初始化一个list和array：

  1
  var list = new List();
  2
  var arr = [];
  3
  for(var i = 0; i < 100; i++){
  4
      list.push(i);
  5
      arr.push(i);
  6
  }

• 然后用下面的代码比较List和Array在数组起始位置插入元素的操作时间：

  1
  var count = 10000;
  2
  console.time("list unshfit");
  3
  for(var i = 0; i < count; i++){
  4
      list.unshift(i);
  5
  }
  6
  console.timeEnd("list unshfit");
  7
  
  8
  console.time("array unshfit");
  9
  for(var i = 0; i < count; i++){
  10
      arr.unshift(i);
  11
  }
  12
  console.timeEnd("array unshfit");

• 再比较从正中间位置插入元素的时间：

  1
  console.time("list insert middle with index");
  2
  for(var i = 0; i < count; i++){
  3
      insertPos = list.insert(list.length >> 1, i);
  4
  }
  5
  console.timeEnd("list insert middle with index");
  6
  
  7
  console.time("array insert middle");
  8
  for(var i = 0; i < count; i++){
  9
      arr.splice(arr.length >> 1, 0, i);
  10
  }
  11
  console.timeEnd("array insert middle");

  • 运行可以得到以下表格：

    	unshift	splice(n/2)
    Array	350ms	7.99ms
    List	8.23ms	106ms

    • 可以看到在队首插入元素，使用线性链接List的时间将会数量级的优于Array。如果是在中间位置插入的话，由于 List的查找花费了很多时间，导致总时间明显高于Array。但是如果在插入的时候，记住上一次的位置，那么List又会明显快于Array。如下换成记录插入的位置：

      1
      console.time("list insert middle with pos");
      2
      var insertPos = list.getNode(list.length >> 1);
      3
      for(var i = 0; i < count; i++){
      4
          insertPos = list.insertFromNode(insertPos, i);
      5
      }
      6
      console.timeEnd("list insert middle with pos");

      • 时间比较List又快于Array：

        	unshift	splice(n/2)	splice pos
        Array	350ms	7.99ms	8.07ms
        List	8.23ms	106ms	1.78ms

• 综上，Array的实现用了三种语言：汇编、C++和JS，最常用的如push用了汇编实现，比较常用的如pop/splice等用了C++，较为少用的如join/sort用了JS。

• Array为快元素即普通的数组时，增删元素操作需要不断的扩容、减容和调整元素的位置。特别是当不断地在起始位置插入元素时，和链表相比，这种时间效率还是比较低下的。如果使用的场景是要根据index删除元素，使用Array还是有优势，但是若能够很快定位到删除元素的位置，链表毫无疑问是更合适的。

• 【转载】原文地址：https://zhuanlan.zhihu.com/p/26388217?utm_source=weibo&utm_medium=social

1. V8的代码结构#

v8的源码位于src/v8/src/，代码层级相对比较简单，但是实现比较复杂，为了能看懂，需要找到一个切入点，通过打断点、加log等方式确定这个切入点是对的，如果这个点并不是关键的点，进行到某一步的时候就断了，那么由这个点出发尝试去找其它的点。不断验证，最后找到一个最关键的地方，由这个地方由浅入深地扩展到其它地方，最后形成一个体系。

2. JS Object类图#

V8里面所有的数据类型的根父类都是Object，Object派生HeapObject，提供存储基本功能，往下的JSReceiver用于原型查找，再往下的JSObject就是JS里面的Object，Array/Function/Date等继承于JSObject。左边的FixedArray是实际存储数据的地方。

3. 创建JS Object#

在创建一个JSObject之前，会先把读到的Object的文本属性序列化成constant_properties，如下的data：

1
var data = {
2
  name: "yin",
3
  age: 18,
4
  "-school-": "high school"
5
};

• 会被序列成：

1
../../v8/src/runtime/runtime-literals.cc 72 constant_properties: 0xdf9ed2aed19: [FixedArray]
2
– length: 6
3
  [0]: 0x1b5ec69833d1 <String[4]: name>
4
  [1]: 0xdf9ed2aec51 <String[3]: yin>
5
  [2]: 0xdf9ed2aec71 <String[3]: age>
6
  [3]: 18
7
  [4]: 0xdf9ed2aec91 <String[8]: -school->
8
  [5]: 0xdf9ed2aecb1 <String[11]: high school>

• 它是一个FixedArray，一共有6个元素，由于data总共是有3个属性，每个属性有一个key和一个value，所以Array就有6个。第一个元素是第一个key，第二个元素是第一个value，第三个元素是第二个key，第四个元素是第二个key，依次类推。Object提供了一个Print()的函数，把它用来打印对象的信息非常有帮助。上面的输出有两种类型的数据，一种是String类型，第二种是整型类型的。

• FixedArray是V8实现的一个类似于数组的类，它表示一段连续的内存，上面的FixedArray的length = 6，那么它占的内存大小将是：

  1
  length * kPointerSize

• 因为它存的都是对象的指针（或者直接是整型数据类型，如上面的18），在64位的操作系统上，一个指针为8个字节，它的大小将是48个字节。它记录了一个初始的内存开始地址，使用元素index乘以指针大小作为偏移，加上开始地址，就可以取到相应index的元素，这和数组是一样的道理。只是V8自己封装了一个，方便添加一些自定义的函数。

• FixedArray主要用于表示数据的存储位置，在它上面还有一个Map，这个Map用于表示数据的结构。这里的Map并不是哈希的意思，更接近于地图的意义，用来操作FixedArray表示的这段内存。V8根据constant_properties的length，去开辟相应大小空间的Map：

  1
  Handle<Map> map = ComputeObjectLiteralMap(context, constant_properties, &is_result_from_cache);

  • 把这个申请后的Map打印出来：

    1
    ../../v8/src/heap/heap.cc 3472 map is 0x21528af9cb39: [Map]
    2
    – type: JS_OBJECT_TYPE
    3
    – instance size: 48
    4
    – inobject properties: 3
    5
    – back pointer: 0x3e2ca8902311 <undefined>
    6
    – instance descriptors (own) #0: 0x3e2ca8902231 <FixedArray[0]>

    • 从第4行可以看到，它的大小确实和我们算的一样。并且它还有一个叫做descriptors表示它的数据结构。descriptor记录了每个key-value对，以及它们在FixedArray里面的index. 后续对properties的操作基本上通过descriptor进行。
    • 有了这个map的对象之后，用它来创建一个JSObect：

    1
    Handle<JSObject> boilerplate = isolate->factory()->NewJSObjectFromMap(map, pretenure_flag);

    • 重新开辟一段内存，把map的内容拷过去。

    • 由于map只是一段相应大小的内存空间，它的内容是空的，所以接下来要设置它的properties：

      1
      for (int index = 0; index < length; index += 2) {
      2
        Handle<Object> key(constant_properties->get(index + 0));
      3
        Handle<Object> value(constant_properties->get(index + 1));
      4
        Handle<String> name = Handle<String>::cast(key);
      5
        JSObject::SetOwnPropertyIgnoreAttributes(boilerplate, name, value, NONE);
      6
      }

      • 通过上面的代码，把properties设置到map的FixedArray里面，并且可以通过index用descriptors迅速地取出key-value。由于这个过程比较复杂，细节不展开讨论。
      • 在设置properties的同时，会初始化一个searchCache，这个cache支持哈希查找某个属性。

4. 字符串哈希cache查找#

在设置cache的时候，会先进行查找是否已存在相同的属性名，如果已经有了就把它的value值覆盖掉，否则把它添加到cache里面：

1
int DescriptorArray::SearchWithCache(Isolate* isolate, Name* name, Map* map) {
2
  DescriptorLookupCache* cache = isolate->descriptor_lookup_cache();
3
  //找到它的index
4
  int number = cache->Lookup(map, name);
5
  //如果没有的话
6
  if (number == DescriptorLookupCache::kAbsent) {
7
    //通过遍历找到它的index
8
    number = Search(name, number_of_own_descriptors);
9
    //更新cache
10
    cache->Update(map, name, number);
11
  }
12
  return number;
13
}

• 如上代码的注释，我们先来看一下这个Search函数是怎么进行的：

  1
  template <SearchMode search_mode, typename T>
  2
  int Search(T* array, Name* name, int valid_entries, int* out_insertion_index) {
  3
    // Fast case: do linear search for small arrays.
  4
    const int kMaxElementsForLinearSearch = 8;
  5
    if (valid_entries <= kMaxElementsForLinearSearch) {
  6
      return LinearSearch<search_mode>(array, name, valid_entries, out_insertion_index);
  7
    }
  8
  
  9
    // Slow case: perform binary search.
  10
    return BinarySearch<search_mode>(array, name, valid_entries, out_insertion_index);
  11
  }

• 如果属性少于等于8个时，则直接线性查找即依次遍历，否则进行二分查找，在线性查找里面判断是否相等，是用的内存地址比较：

  1
  for (int number = 0; number < valid_entries; number++) {
  2
    if (array->GetKey(number) == name) return number;
  3
  }

• 因为name都是用的上面第三点设置Map的时候传进来的name，因此初始化的时候相同的name都指向同一个对象。所以可以直接用内存地址进行比较，得到FixedArray的索引number。然后用key和number去update cache：

  1
  cache->Update(map, name, number);

• 重点在于这个update cache。这个cache的数据结构是这样的：

  1
    static const int kLength = 64;
  2
    struct Key {
  3
      Map* source;
  4
      Name* name;
  5
    };
  6
  
  7
    Key keys_[kLength];
  8
    int results_[kLength];

• 它有一个数组keys_的成员变量存放key，这个数组的大小是64，数组的索引用哈希算出来，不同的key有不同的哈希，这个哈希就是它在数组里面的索引。它还有一个results_，存放上面线性查找出来的number，这个number就是内存里面的偏移，有了这个偏移就可以很快地定位到它的内容，所以放到results里面.

• 关键在于这个哈希是怎么算的。来看一下update的函数：

  1
  void DescriptorLookupCache::Update(Map* source, Name* name, int result) {
  2
    int index = Hash(source, name);
  3
    Key& key = keys_[index];
  4
    key.source = source;
  5
    key.name = name;
  6
    results_[index] = result;
  7
  }

• 先计算哈希索引index，然后把数据存到results_和keys_这两个数组的index位置。这个Hash函数是这样的：

  1
  int DescriptorLookupCache::Hash(Object* source, Name* name) {
  2
    // Uses only lower 32 bits if pointers are larger.
  3
    uint32_t source_hash =
  4
        static_cast<uint32_t>(reinterpret_cast<uintptr_t>(source)) >>
  5
        kPointerSizeLog2;
  6
    uint32_t name_hash = name->hash_field();
  7
    return (source_hash ^ name_hash) % kLength;
  8
  }

• 先计算map和key的hash，map的hash即source_hash是用map的地址的低32位，为了统一不同指针大小的区别，而计算key的hash即name_hash，最核心的代码应该是以下几行：

  1
  uint32_t StringHasher::AddCharacterCore(uint32_t running_hash, uint16_t c) {
  2
    running_hash += c;
  3
    running_hash += (running_hash << 10);
  4
    running_hash ^= (running_hash >> 6);
  5
    return running_hash;
  6
  }

• 依次循环name的每个字符串做一些位运算，结果累计给running_hash.

• source_hash是用map的内存地址，因为这个地址是唯一的，而name_hash是用的字符串的内容，只要字符串一样，那么它的hash值就一定一样，这样保证了同一个object，它的同个key值的索引值就一定一样。source_hash和name_hash最后异或一下，模以kLength = 64得到它在数组里面的索引。

• 这里自然而然会有一个问题，通过这样的计算不能够保证不同的name计算出来的哈希值一定不一样，好的哈希算法只能让结果尽可能随机，但是无法做到一定不重复，所以这里也有同样的问题。

• 先来看一下，它是怎么查找的：

  1
  int DescriptorLookupCache::Lookup(Map* source, Name* name) {
  2
    int index = Hash(source, name);
  3
    Key& key = keys_[index];
  4
    if ((key.source == source) && (key.name == name)) return results_[index];
  5
    return kAbsent;
  6
  }

• 先用同样的哈希算法，算出同样的index，取出key里面的map和name，和存储的map和name进行比较，如果相同则说明找到了，否则的话返回不存在-1的标志。一旦不存在了又会执行上面的update cache，先调Search找到它的偏移index作为result，如果index存在重新update cache。所以上面的问题就可以得到解答了，重复的哈希索引覆盖了第一个，导致查找第一个的时候没找找到，所以又去重新update，把那个索引值的数组元素又改成了第一个的。因此，如果两个重复的元素如果循环轮流访问的话，就会造成不断地查找index，不断地更新搜索cache。但是这种情况还是比较少的。

• 如何保证传进来的具有相同字符串的name和原始的name是同一个对象，从而才能使它们的内存地址一样？一个办法是维护一个Name的数据池，据有相同字符串的name只能存在一个。

• 上面的那个data它的三个name的index在笔者电脑上实验计算结果为：

  1
  #name hash index = 62
  2
  #age hash index = 32
  3
  #-school- hash index = 51

• 有一个比较奇怪的地方是重复实验，它们的哈希值都是一样的。并且具有相同属性且顺序也相同的object，它们的map地址就是一样的。

• 如果一个元素的属性值超过64个呢？那也是同样的处理，后面设置的会覆盖前面设置的。学过哈希的都知道，当元素的个数大于容器容量的一半时，重复的概率将会大大增加。所以一个object的属性的比较优的最大大小为32。一旦超过32，在一个：

  1
  for(var key in obj){
  2
    obj[key] //do sth.
  3
  }

• for循环里面，这种查找的开销将会很大。但是考虑到属性个数并不多。

• 那为什么它要把长度设置成64呢，如果改大了，不就可以减少重复率？但是这样会造成更多的内存消耗，即使一个Object只有一个属性，它也会初始化一个这么大的数组，对于这种属性比较少的object来说就很浪费。所以取64，应该是一个比较适中的值。

• 同时另一方面，经常使用的那几个属性还是能够很快通过哈希计算定位到它的内容。并且这种场景还是很常见的，如获取数组元素的lengh.

• 这种cache查找只支持属性个数小于等于128的，如果属性个数大于128个，将不采用cache存储和查找的方式。而是直接使用一个hashtable

5. 字符串哈希表查找#

如下的判断：

1
const int kMapCacheSize = 128;
2

3
// We do not cache maps for too many properties or when running builtin code.
4
if (number_of_properties > kMapCacheSize) {
5
  *is_result_from_cache = false;
6
  Handle<Map> map = Map::Create(isolate(), number_of_properties);
7
  return map;
8
}

• 如果属性个数大于128时，将按照属性的个数消耗的空间创建和扩展map存储，不再创建cache。同时这个map就会被标记为dictionary_map，即哈希表。

• 往这个哈希表插入一个元素前，会先检查表的容量是否足够，不够进行扩容，在EnsureCapacity的函数里面：

  1
  int capacity = table->Capacity();
  2
  int nof = table->NumberOfElements() + n;
  3
  if (table->HasSufficientCapacityToAdd(n)) return table;
  4
  Handle<Derived> new_table = HashTable::New(nof * 2, USE_DEFAULT_MINIMUM_CAPACITY);
  5
  table->Rehash(new_table, key);

  • 第二行获取到当前表元素个数加上需要插入的元素的个数得到新表的总元素个数；第7行再乘以2，得到新表的容量，最后再rehash，重新计算每个元素的哈希值，更新哈希表

  • 插入一个元素的关键是计算它的哈希，这里计算哈希的方式和上面的一样，都是调的name->hash_field函数，不一样的是它不再是覆盖存储，因为上面已经进行扩容了，可以保证空间一定足够。如果哈希值冲突了，那么将一直找到下一个存放它的地方，如下面的FindInsertionEntry函数：

    1
    template<typename Derived, typename Shape, typename Key>
    2
    uint32_t HashTable<Derived, Shape, Key>::FindInsertionEntry(uint32_t hash) {
    3
      uint32_t capacity = Capacity();
    4
      uint32_t entry = FirstProbe(hash, capacity);
    5
      uint32_t count = 1;
    6
      // EnsureCapacity will guarantee the hash table is never full.
    7
      Isolate* isolate = GetIsolate();
    8
      while (true) {
    9
        Object* element = KeyAt(entry);
    10
        if (!IsKey(isolate, element)) break;
    11
        entry = NextProbe(entry, count++, capacity);
    12
      }
    13
      return entry;
    14
    }

  • 在上面代码第10行找到一个非key元素后，停止循环，返回这个位置。

  • 在所有属性插入完成之后，查找的过程类似于上面的插入，如下面FindEntry的函数：

    1
    // Find entry for key otherwise return kNotFound.
    2
    template <typename Derived, typename Shape>
    3
    int NameDictionaryBase<Derived, Shape>::FindEntry(Handle<Name> key) {
    4
      // EnsureCapacity will guarantee the hash table is never full.
    5
      uint32_t capacity = this->Capacity();
    6
      uint32_t entry = Derived::FirstProbe(key->Hash(), capacity);
    7
      uint32_t count = 1;
    8
      while (true) {
    9
        Object* element = this->KeyAt(entry);
    10
        if (element->IsUndefined(isolate)) break; // Empty entry.
    11
        if (*key == element) return entry;
    12
        entry = Derived::NextProbe(entry, count++, capacity);
    13
      }
    14
      return Derived::kNotFound;
    15
    }

    展开收起

    • 在while循环里，要么找到一个undefined的元素，返回无结果的标志，要么命中元素，返回FixedArray的索引index，然后通过这个数组index就可以很快地取出数据：

      1
      property_details_ = dictionary->DetailsAt(entry);

    • 当哈希值冲突时，如何找到下一个插入位置，在哈希算法里面也是一个很重要的部分，因为需要定位到下一个空的元素，才能进行插入，如果定位到的下一个元素又是非空的，又得继续找下一个。源码里面是这样进行的：

      1
        inline static uint32_t FirstProbe(uint32_t hash, uint32_t size) {
      2
          return hash & (size - 1);
      3
        }
      4
      
      5
        inline static uint32_t NextProbe(uint32_t last, uint32_t number, uint32_t size) {
      6
          return (last + number) & (size - 1);
      7
        }

    • 所以当属性个数不超过128个时，是用searchCache，大于128时，采用哈希表。源码里面查找的判断是这样的：

      1
      if (!map->is_dictionary_map()) {
      2
        DescriptorArray* descriptors = map->instance_descriptors();
      3
        int number = descriptors->SearchWithCache(isolate_, *name_, map);
      4
        //...
      5
      } else {
      6
        NameDictionary* dict = holder->property_dictionary();
      7
        int number = dict->FindEntry(name_);
      8
        //...
      9
      }

    • 如果是一个字典，则执行else里面的逻辑，否则执行if里面的逻辑按searchCache查找。

    • 这里自然而然会有一个问题，为什么在不大于128个属性的时候要专门搞一个searchCache呢，是因为searchCache比哈希表快么，快在哪里？我想这两者的区别在于searchCache不会冲突，每次都是直接定位，而hashTable如果冲突了需要不断地找下一个元素，增加了比较次数。当属性比较少，并且有几个属性经常被用到的时候，searchCache应该会有明显的优势。

• 上面已经介绍了两种字符串的查找方式，当属性是数字的时候有另外两种查找方式。

6. 数字索引哈希查找#

假设data变成：

1
var data = {
2
  name: "yin",
3
  age: 18,
4
  "-school-": "high school",
5
  1: "Monday",
6
  2: "Thuesday",
7
  "3": "Wednesday"
8
};

• 把生成的data Object打印出来是这样的：

  1
  ../../v8/src/runtime/runtime-literals.cc 105 boilerplate obj: 0x3930221af3a9: [JS_OBJECT_TYPE]
  2
  – map = 0x6712e19cc41 [FastProperties]
  3
  – prototype = 0x27d71d20f19
  4
  – elements = 0x2e1e1a56b579 <FixedArray[19]> [FAST_HOLEY_ELEMENTS]
  5
  – properties = 0x2c2a4d782241 <FixedArray[0]> {
  6
    #name: 0x3930221aec51 <String[3]: yin> (data field at offset 0)
  7
    #age: 18 (data field at offset 1)
  8
    #-school-: 0x3930221aecb1 <String[11]: high school> (data field at offset 2)
  9
  }
  10
  – elements = {
  11
    0: 0x2c2a4d782351 <the hole>
  12
    1: 0x3930221aecf9 <String[6]: Monday>
  13
    2: 0x3930221aed39 <String[8]: Thuesday>
  14
    3: 0x3930221aed79 <String[9]: Wednesday>
  15
    4-18: 0x2c2a4d782351 <the hole>
  16
  }

  展开收起

  • 那些key为数字的存放在elements的数据结构里面。上面的elements它是一个有序数组，它的key值直接作为它的index。如果data改成：

    1
    var data = {
    2
      1: "Monday",
    3
      2: "Thuesday",
    4
      3: "Wednesday",
    5
      7: "Sunday"
    6
    }

    • 那么elements是这样的：

      1
      – elements = {
      2
        0: 0x1e74f5702351 <the hole>
      3
        1: 0x1745ec52ec71 <String[6]: Monday>
      4
        2: 0x1745ec52ecb1 <String[8]: Thuesday>
      5
        3: 0x1745ec52ecf1 <String[9]: Wednesday>
      6
        4-6: 0x1e74f5702351 <the hole>
      7
        7: 0x1745ec52ed39 <String[6]: Sunday>
      8
        8-18: 0x1e74f5702351 <the hole>
      9
      }

    • 初始化大小仍然是19个元素，空的索引用hole元素填充。这种就跟数组一样，可直接根据索引定位到元素，代价是空间的消耗比较大，可以来看一下，当空间不足时，它是怎么扩容的：

      1
      if (index < capacity) {
      2
        *new_capacity = capacity;
      3
        return false;
      4
      }
      5
      *new_capacity = JSObject::NewElementsCapacity(index + 1);

      • 由于第一个属性是1: Monday，所以上面的index = 1，执行最后一行计算新容量的元素：

        1
        // Computes the new capacity when expanding the elements of a JSObject.
        2
        static uint32_t NewElementsCapacity(uint32_t old_capacity) {
        3
          // (old_capacity + 50%) + 16
        4
          return old_capacity + (old_capacity >> 1) + 16;
        5
        }

        • 可以看到，这是用老的空间的一半加上16，上面的计算结果为19，如果本来是2M大小，刚好不够再增加一个元素就成了3M，一个多余的元素就增加了1M的空间。它的好处是不用频繁地开避内存。

        • 这种用数组表示的属性在源码里面叫FastElements，而用哈希表的叫做SlowElements。什么时候会变成slowElements？当hole太多的时候，例如给data增加一个key为2000的属性：

          1
          data['2000'] = 'day';

          • data就会转成慢元素，因为3之后就是2000，hole太多就被转换了，如下面的ShouldConvertToSlowElements函数：

            1
            static bool ShouldConvertToSlowElements(JSObject* object, uint32_t capacity, uint32_t index, uint32_t* new_capacity) {
            2
              if (index < capacity) {
            3
                return false;
            4
              }
            5
              //JSObject::kMaxGap = 1024
            6
              if (index - capacity >= JSObject::kMaxGap) return true;
            7
              *new_capacity = JSObject::NewElementsCapacity(index + 1);
            8
            
            9
              // If the fast-case backing storage takes up roughly three times as
            10
              // much space (in machine words) as a dictionary backing storage
            11
              // would, the object should have slow elements.
            12
              int used_elements = object->GetFastElementsUsage();
            13
              int dictionary_size = SeededNumberDictionary::ComputeCapacity(used_elements) * SeededNumberDictionary::kEntrySize;
            14
              return 3 * static_cast<uint32_t>(dictionary_size) <= *new_capacity;
            15
            }

            展开收起

            • 如果当前的index比容量capacity大了1024，就转成慢元素，或者是如上面的代码注释，如果快元素占的空间为慢元素的3倍之多时，也会被转成慢元素。

            • 转成慢元素之后，它就和字符串的哈希表一样了，不一样的是，它计算哈希的方式不一样，字符串的需要一个个字符串循环计算计算hash，而数字的key，不需要循环，如下计算（第二个参数是随机化种子seed）：

              1
              inline uint32_t ComputeIntegerHash(uint32_t key, uint32_t seed) {
              2
                uint32_t hash = key;
              3
                hash = hash ^ seed;
              4
                hash = ~hash + (hash << 15);  // hash = (hash << 15) - hash - 1;
              5
                hash = hash ^ (hash >> 12);
              6
                hash = hash + (hash << 2);
              7
                hash = hash ^ (hash >> 4);
              8
                hash = hash * 2057;  // hash = (hash + (hash << 3)) + (hash << 11);
              9
                hash = hash ^ (hash >> 16);
              10
                return hash & 0x3fffffff;
              11
              }