需求

昨天接了个项目，维护别人开发好的后台管理系统。
业务场景：点击左侧菜单栏，右侧渲染对应路由页面并在头部有对应的tags标签，点击tag标签也相当于路由跳转到对应页面。

要求：

1. 点击菜单栏时，右侧面板顶部需要有与点击过的菜单一一对应的tab/tag标签，点击该标签也是跳转到对应路由，标签可关闭
2. 点击菜单栏时，将对应页面重新渲染，清空数据
3. 点击tag标签时，如果已经填写数据，那么tag来回切换时保留数据不清空

分析

这种需求其实比较常见，主要是为了操作方便。
但是如何去做？怎么去思考呢？

假设有a,b,c三个菜单，原先功能是点击a,b,c三个菜单，右侧面板会相应的渲染这三个菜单对应的组件/页面

思考要求1

针对要求1，较为简单，vue相关的ui库大多提供了tab/tag组件，这里我选用tag，毕竟用tab相当于把所有页面组件全放到tabs里面渲染，这样并不好。

这个项目比较坑的就是菜单栏是写死的，不是通过config.js配置的，这里浪费了很多时间，我需要把所有路由以及对应的菜单名称都维护到一个数组route里面，然后当我点击菜单时，根据菜单路由去route中找到对应的信息，然后放到tags数组里面，渲染tag标签。
同时，给tag加个click事件，点击进行路由跳转。

思考要求2

其实目前就是路由跳转重新渲染，暂时还不需要去考虑。

思考要求3

点击tag标签进行路由跳转，但是不能清空数据。
熟悉的vue的人肯定立马想到keep-alive组件。

<keep-alive>
  <router-view></router-view>
</keep-alive>

加上上面代码，试验下，信息确实保留了。

但是，问题也来了！
此时点击菜单栏，无法去重新刷新页面并清空数据了！

如何让点击菜单重新渲染页面和点击tag标签保留页面数据共存呢？

一开始，我想了一种方法：

<keep-alive v-if="isKeepAlive">
  <router-view></router-view>
</keep-alive>
<router-view v-if="!isKeepAlive"></router-view>

通过两个不同的router-view去渲染组件，点击tag标签跳转的走keep-alive，点击菜单跳转不走keep-alive。

经过试验，依然不行。当我点击a,b,c三个菜单，右侧有对应的三个tag标签后，我通过点击tag标签切换页面并分别在这三个页面上写点数据，然后点击a菜单去重新渲染并清空a页面，然后我点击tag标签切换到b页面，再点击tag标签切回a页面，发现之前数据依然存在！

这是为何呢？
其实我上面用了两个router-view维护了两种组件渲染方式。也就是说点击tag标签时，所有页面组件都是keep-alive的，点击菜单刷新时，所有页面都是正常渲染的，他们彼此间没法互相交互。

我的困扰点

其实，我困扰的点主要是如何去动态改变组件keep-alive状态，即a页面通过点击tag标签渲染的话，需要加入keep-alive，但是通过菜单渲染的话要取消keep-alive状态！

这样看有点destroy的意思，但是我不可能在几百个vue组件中去destroy！

解决过程

百思不得其解后，试着百度了下，偶然在segmentfault看到个评论：
使用keep-alive的include。

我立马去官方文档上查看该属性（以前从没用过）：https://cn.vuejs.org/v2/api/#keep-alive

当我看到可以通过v-bind去动态改变include时，心中顿时觉得有希望了，不过我需要在之前的route中继续维护组件名称属性——compontName，同时需要在每个路由对应的组件中把name加上，然后测试了下，果然好了！

附上代码：

// main.vue
<keep-alive :include="includes">
  <router-view class="fadeInRight animated"></router-view>
</keep-alive>

// mixins handleTags
import route from '@/config/route'
const handleTags = {
  data () {
    return {
      tags: [], // 缓存所有打开过的菜单页并用tag展示
      includes: [], // 缓存需要keep-alive的组件名，点击菜单刷新页面时从中移除
    }
  },
  mounted() {
    const path = this.currentPath
    const tags = this.tags
    !tags.length && this.addTag(path)
  },
  computed: {
    /**
     * @description 获取当前页面路由
     */
    currentPath () {
      return this.$route.path
    }
  },
  methods: {
    /**
    * @description 选择左侧菜单触发，用于渲染右侧头部tags标签以及去除相应页面的keep-alive
    */
    selectMenu ({index, indexPath}) {
      const i = this.findIndex(this.tags, index, 'path')
      if (index && index.indexOf('/') !== -1 && i === -1) {
        this.addTag(index)
      }
      this.spliceInclude(index)
    },
    /**
     * 
     * @param {*} arr
     * @param {*} path
     * @description 判断该路由是否已经存在 
     */
    findIndex (arr, value, property) {
      return arr.findIndex(item => {
        return property ? item[property] === value : item === value
      })
    },
    /**
     * 
     * @param {*} path
     * @description 添加标签 
     */
    addTag (path) {
      const tags = this.tags
      route.some(item => {
        item.path === path && tags.push(item)
      })
    },
    /**
     * @description 点击tag触发。将所有的tag标签对应的路由组件全部加入keep-alive
     */
    handleClickTag (tag) {
      let componentName
      const tags = this.tags
      tags.forEach(item => {
        componentName = this.getComponentName(item.path)
        !this.includes.includes(componentName) && this.includes.push(componentName)
      })
      this.$nextTick(() => {
        this.$router.push(tag.path)
      })
    },
    /**
     * 
     * @param {*} tag
     * @description 关闭tag触发。
     *              如果只剩一个不给删除；
     *              删除当前tag默认展示前一个tag对应的页面；
     *              如果前面没有tag了，默认展示当前第一个tag;
     *              同时从keep-alive中删除;
     */
    handleClose (tag) {
      const index = this.findIndex(this.tags, tag.path, 'path')
      this.tags.splice(index, 1)
      if (this.currentPath === tag.path) {
        const next = index - 1 >= 0 ? index - 1 : 0
        this.$router.push(this.tags[next].path)
      }
      this.spliceInclude(tag.path)
    },
    /**
     * @description 获取当前路由对应的组件名称
     */
    getComponentName (path) {
      // 获取在route配置中的位置
      const j = this.findIndex(route, path, 'path')
      if (j !== -1) {
        return route[j].componentName
      }
      return
    },
    /**
     * @description 从keep-alive状态的组件数组中删除
     */
    spliceInclude (path) {
      const componentName = this.getComponentName(path)
      const includes = this.includes
      const k =  this.findIndex(includes, componentName)
      k !== -1 && this.includes.splice(k, 1)
    }
  },
}
export default handleTags

// route.js
const route = [
  {
    name: 'a',
    path: '/a',
    componentName: 'a'
  },
  {
    name: 'b',
    path: '/b',
    componentName: 'b'
  },
  {
    name: 'c',
    path: '/c',
    componentName: 'c'
  },
]

背景

前段时间做了个单点登录，就是两个系统带上token来回跳。

本来已经OK了，结果昨天冬哥说测试环境上服务监督页的操作按钮都点不了，我看了下测试环境控制台，报错：Unexpected token <。

研究过程

一开始我以为是代码里面问题，本地启动测试，没问题，那就排除。

遂百度，百度了好几篇文章，都说要么是nginx配置问题，要么就是路由用的history模式并且生产环境的assetsPublicPath配置了 ./

nginx配置这个问题，冬哥在第一次部署时就发现并解决了。

再看webpack配置，果然assetsPublicPath改成了 ./，我记得是为了解决线上环境没有icon图标才这样改的。那么这里最好不要动。

再去看看router配置，果然用的是history模式。我没多想，把它注释掉提交给冬哥测试。结果，测试环境上没法登陆了，一直在两个系统之间来回跳。也就是之前的单点登录功能突然出问题了。这就真的很奇怪了。

我通过chrome浏览器使用slow 3G模式，放缓跳转时间，发现浏览器url栏是对的，但是，路由拦截器打印的却和url完全不同！！！

看图：

路由监听代码：

// 针对单点登录进行路由拦截
  router.beforeEach(async (to, from, next) => {
    console.log(to, from)
    // 拿到当前用户在浏览器中的信息，没有token且启用单点登录，则跳转到养老系统去登录拿token
    let userinfo = storage.get('userinfo') || {}
    // 这里有可能是养老系统登录后通过callback并携带token跳回来，需要拿到token避免下面再去重复跳养老
    const tokenIndex = to.fullPath.indexOf('token')
    if (tokenIndex !== -1) {
      const token = to.fullPath.substring(tokenIndex + 6)
      // 根据养老系统返回的token去查本系统用户信息和本系统对应的token
      // JSON.parse，不要直接赋值
      storage.set('userinfo', {token: token})
      const result = await getUserInfoByToken({
        params: {
          token: token
        }
      })
      storage.set('userinfo', result.payload)
      userinfo = storage.get('userinfo')
    }
    console.log(userinfo)
    // 启用单点登录但是没有token
    if (singleSignOn && !userinfo.token) {
      // 退出登录时清空token，跳到志愿者系统时告诉志愿者系统也要清空token
      const tokenError = storage.get('tokenError')
      storage.set('tokenError', false)
      window.location.href = tokenError ? `${singleSignUrl}?callback=${callbackUrl}&tokenError=true` : `${singleSignUrl}?callback=${callbackUrl}`
      return
    }
    // 启用单点，有token并且准备去login页，直接进home
    if (singleSignOn && userinfo.token && to.path.indexOf('login') !== -1) {
      next('/home')
      return
    }
    next()
  })

仔细观察上图，就会发现，明明浏览器url是home，但是控制台打印的确是/和/login，这怎么回事？？？

我真的懵逼了。之前在本地根本没有这样的问题啊！

由于昨天晚上要聚餐，我也没有什么思路，就出去聚餐了。

结果，晚上冬哥，这个有着10年后端开发经验的经理级别大哥，晚上愣是在家调试了2个多小时，一直到接近12点，当时我刚回家洗完澡。。。

本来他也要放弃了，但是，他看了我的提交代码，抱着试一试的心态，把我注释的history给改回来，结果，我日，OK了。

这居然就OK了！！！

然后他把url复制出来，比对一下，发现，注释掉history后，url变成了
http://localhost:8088/home?token=eyJhbGciOiJIUzI1NiIsInppcCI6IkRFRiJ9.eNocjMEKwjAQBf9lzw24yWZje_cmKIrnsmk2EEEtpgVB_Hejxze8mTfUNcIA58sROlirPseS2rbBco4xGcbAhrIkI2yjEaTsRNATUxPq9Ji13U-H_W6UdCv3BvU1w4Ce2dot9dxBkeUPPFvHP3BdSpMCJlXWqUWxN-Q2ZHpnnQneKWrOMacJPl8AAAD__w.OmL3aBhN-haWanxdPl0jicWvf3FwDgtc7EAusGqEIs0/#/

而使用history模式，url则是：
http://localhost:8088/#/home?token=eyJhbGciOiJIUzI1NiIsInppcCI6IkRFRiJ9.eNocjMEKwjAQBf9lzw24yWZje_cmKIrnsmk2EEEtpgVB_Hejxze8mTfUNcIA58sROlirPseS2rbBco4xGcbAhrIkI2yjEaTsRNATUxPq9Ji13U-H_W6UdCv3BvU1w4Ce2dot9dxBkeUPPFvHP3BdSpMCJlXWqUWxN-Q2ZHpnnQneKWrOMacJPl8AAAD__w.OmL3aBhN-haWanxdPl0jicWvf3FwDgtc7EAusGqEIs0

看到区别了吗？？？

不使用history模式，那么我在志愿者系统直接通过window.location.href跳转过来时，他会默认在我url最后加个 /#/，这样的话实际路由它会认为是/，然后重定向到/login，而康养系统的/login是要跳到志愿者系统的，所以，这样不停的来回跳转！！！

最终解决

1. 依然使用history模式，其他什么都不用动，那么单点登录没问题，但是某些页面操作按钮报错需要想办法解决。
2. 换成hash模式，并把跳转地址改成window.location.href='http://localhost:8088/#/home?token=你的token'

本来以为很简单，写在 dailyGain里面的，但是写着写着发现收获不少，遂在这里再开一个指向。

起因

  昨天项目中用到了下拉列表功能，我抄的iview的，功能没问题，就是这个过渡效果令我很奇怪，明明大部分代码都是抄的，怎么iview那么动感，我这里这么生硬。我注意到iview的Dropdown组件是通过v-show来控制的，根据vue官方文档单元素/组件的过渡说明，这里也没有问题啊。

  但是我还是留了心眼，v-show明明改变的是display属性，我记得css里面transition属性是不支持display的，怎么这里就有效果呢？

  我不放心的去MDN查了下，我的记忆是对的，transition的确不支持display属性。具体可见可动画属性列表

  那它到底用了什么*操作呢？谷歌浏览器控制台也没看出什么啊？记得以前用iview开发时就有这个困惑，这个困惑必须得解开，不然心里不踏实！

水。。。

  我双12一天都在研究transition组件代码，从刚开始一脸懵逼到渐渐找到门路，只是由于之前只看过vue核心双向绑定那块的代码，什么VNode之类的几乎没看，以前是真的菜，看不懂，今天强行看了一波，勉强看懂30%，实在不行只好去百度查vue源码解析相关，就在此时，我突然想起来很久很久以前，我，好像，曾经，给好几个，分析vue源码的库，点过star。。。
  这是病，明明点过很多star，却都不怎么看！当我找到那些库时，有两个极为牛逼，我自愧不如，其中一个就有transition组件等的讲解，看完我能明白7成吧。这时，我知道，我不该开这个issue的，自己都不完全懂就敢狂妄的写这个标题，实在班门弄斧！！！
以下是那两个极为牛逼的vue源码分析：

• http://hcysun.me/vue-design 来自前美团员工
• https://ustbhuangyi.github.io/vue-analysis 来自滴滴员工

  想看transition分析的可以看滴滴员工的那个链接，但是强烈建议全都从头看一遍，真的学到很多！

个人探索

这里的探索主要依赖于自己copy iview的Dropdow组件源码以及看完滴滴员工的vue源码分析所得。

主要看这里：https://ustbhuangyi.github.io/vue-analysis/extend/tansition.html#%E6%80%BB%E7%BB%93 ，最后一句话：
所以真正执行动画的是我们写的 CSS 或者是 JavaScript 钩子函数，而 Vue 的 只是帮我们很好地管理了这些 CSS 的添加/删除，以及钩子函数的执行时机。

也就是说，我以前非常错误的认为这些动态过渡效果是vue提供的，极度错误的，真丢脸啊，无地自容！！！

那么，iview这么炫酷的动态怎么做的呢？
其实靠的还是css动画以及scaleY和transform-origin属性！！！
iview dropdown动态效果部分css源码：https://github.com/iview/iview/blob/2.0/src/styles/animation/slide.less#L12

反省

我太菜了。。。

myPromise

2019-12-12修改

时隔一年多，回顾头来自己再写一次，巩固下，发现同样的this丢失问题依然困扰了我一会，基础还是不够牢固。

最重要的是，我发现先我以前模拟的Promise居然是错的！！！

我 then 方法内部用的居然是 同步操作。。。OMG，我一直没意识到，直到今天回顾才发现，卧槽，为何人家 then 里面用 setTimeout？？？

再结合经典面试题

new Promise(resolve => {
  console.log(1)
  resolve(2)
}).then(res => console.log(res))
console.log(3)

// 打印输出是 1 3 2

then 里面可不就是个微任务嘛。。。（但是setTimeout是宏任务，网上大多用它来实现Promise。但其实两者是有区别的！）
PS：js里面有宏任务和微任务之分，vue源码中的nextTick也涉及这方面知识。可以看Tasks, microtasks, queues and schedules（宏任务与微任务）了解。

宏任务：

• setTimeout
• setImmediate (IE特有，非标准)
• setInterval
• requestAnimationFrame

微任务：

• Promise.then
• MutationObserver

尼玛，真尴尬啊！！！

果断把以前的内容给删了，这么尴尬的事情怎么能留下来呢！

阅读

• MDN Promise
• ES6 Promise
• JavaScript Promise迷你书
• BAT前端经典面试问题：史上最最最详细的手写Promise教程
• Promises/A+

Executable Code and Execution Contexts

Lexical Environments（词法环境）

Lexical Environments是一种规范类型，用于根据ECMAScript代码的词法嵌套结构定义标识符与特定变量和函数的关联。一个词法环境由一个Environment Records和一个可能为空的外部词法环境的引用组成。通常，词法环境与ECMAScript代码的特定句法结构有关。例如函数申明，块语句，try语句中的catch等代码每次运算后会产生新的词法环境。

一条Environment Records记录在其关联词法环境作用域内创建的标识符绑定。它指向词法环境的EnvironmentRecord。

PS：便于理解，可以把词法环境间的嵌套看成 树结构。

外部环境引用用于模拟词法环境值的逻辑嵌套。内部词法环境的外部引用 是对一个逻辑上围绕内部词法环境的词法环境的引用（有点绕人）。外部词法环境也会有它自己的外部词法环境（就像树形结构一样，子父级关系）。一个词法环境可以作为多个内部词法环境的外部环境（类似有多个子级）。

全局环境 是一个没有外部词法环境的词法环境（看作树的根节点）。全局环境的外部环境引用是 null。全局环境的EnvironmentRecord可能预填充了标识符绑定，并包括一个关联的全局对象，该对象的属性提供了某些全局环境的标识符绑定。当ECMAScript代码执行时，可能会对全局对象增加额外的属性并且初始属性可能会被修改。

module 环境是一个包含了模块顶级申明绑定的词法环境。 它还包含模块显式引入的绑定。module 环境的外部环境是全局环境。

function环境是一个对应于ECMAScript函数对象调用的词法环境。函数环境可能建立一个新的 this绑定。函数环境还捕获支持 super 方法调用所需的状态。

Lexical Environments 和 Environment Record 的值是纯规范机制并且不需要与任何特定的ECMAScript实现对应。ECMAScript程序是无法直接获取或操作它们的值的。

Environment Records

规范中有两种主要的Environment Records值：declarative Environment Records 和 object Environment Records 。

声明性环境记录用于定义ECMAScript语言语法元素（例如FunctionDeclarations，VariableDeclarations和Catch）的效果，这些元素直接将标识符绑定与ECMAScript语言值相关联

对象环境记录用于定义ECMAScript元素（例如WithStatement）的效果，这些元素将标识符绑定与某些对象的属性相关联。

全局环境记录和函数环境记录专门用于脚本全局声明和函数内顶级声明。

出于规范目的，环境记录值是Record规范类型的值并且可以认为它存在于简单的面向对象的层次结构中，其中Environment Record是具有三个具体子类的抽象类，分别是declarative Environment Record, object Environment Record, 和 global Environment Record。

Function Environment Records 和 module Environment Records是declarative Environment Record子类。这些抽象类包含一些抽象的方法定义在下面表格中：

声明性环境记录（Declarative Environment Records）

每个声明性环境记录都与包含变量(var)，常量(const)，let，类(class)，模块(module)，导入(import)和函数声明(function)的ECMAScript程序作用域相关联。声明性环境记录绑定在其作用域内声明的标识符集。

SetMutableBinding ( N, V, S )方法，在某些很罕见的情况下没有存在的绑定，例如：

function f() { eval("var x; x = (delete x, 0);"); }

对象环境记录（Object Environment Records）

每个对象环境记录与其绑定对象相关联。对象环境记录绑定 直接与其绑定对象的属性名称 相对应的一组字符串标识符名称。不是以IdentifierName形式出现的字符串的属性键不包含在绑定标识符集中。自有以及继承的属性都会被包含在该集合内，无论它们的[[Enumerable]]属性设置。由于对象属性可以动态增加和删除，对象环境记录所绑定的标识符集可能会因添加或删除属性的任何操作的副作用而发生更改。由于这种副作用而创建的任何绑定都被视为可变绑定，即使相应属性的Writable属性的值为 false 也不例外。对象环境记录中不存在不可变绑定。

为 with 语句创建的对象环境记录可以提供它们的绑定对象作为一个隐式 this 值在函数调用中使用。该功能由与每个对象环境记录关联的withEnvironment布尔值控制。 默认情况下，对于任何对象环境记录，withEnvironment的值为false。

Global Environment Records

全局环境记录用于表示在共同领域中处理的所有ECMAScript脚本元素共享的最外部作用域。全局环境记录为内置全局变量，全局对象的属性以及脚本中发生的所有顶级声明（13.2.8、13.2.10）提供了绑定。

逻辑上来说，全局环境记录是单个记录，但是它被指定为封装对象环境记录和声明性环境记录的 复合记录。对象环境记录将关联领域记录的全局对象作为其基对象。此全局对象是全局环境记录的GetThisBinding方法返回的值。全局环境记录的对象环境记录包含所有内置全局变量的绑定（第18节）以及全局代码中包含的FunctionDeclaration，GeneratorDeclaration，AsyncFunctionDeclaration，AsyncGeneratorDeclaration或VariableStatement引入的所有绑定。全局代码中所有其他ECMAScript声明的绑定包含在全局环境记录的声明性环境记录部分中。

可以直接在全局对象上创建属性。因此，全局环境记录的对象环境记录组件可能包含由FunctionDeclaration，GeneratorDeclaration，AsyncFunctionDeclaration，AsyncGeneratorDeclaration或VariableStatement声明显式创建的绑定，以及隐式创建为全局对象属性的绑定。为了识别使用声明显式创建的绑定，全局环境记录使用其CreateGlobalVarBinding和CreateGlobalFunctionBinding具体方法维护绑定名称的列表。

全局环境记录有额外的字段列表：

Function Environment Records

Function 环境记录是一个声明性环境记录，用于表示函数的顶级作用域并且如果该函数不是一个箭头函数，则会提供一个 this 绑定。如果该函数不是箭头函数且有 super 引用，它的function环境记录还包含用于从function内部执行 super 方法调用的状态。

下面是函数环境记录额外的字段列表：

Module Environment Records

module 环境记录是一个声明性环境记录，用于表示ECMAScript Module的外部作用域。此外，对于通常可变以及不可变的绑定，module 环境记录也会提供不可变的导入绑定（提供对另一个环境记录中存在的目标绑定的间接访问的绑定）。

词法环境是不是平常理解的作用域？？？

不全是。说环境记录是作用域可能更准确。
词法环境更像是作用域链。

2020-07-27 补充

来自高级前端面试小程序js基础第9题

var a = 10;
(function() {
  console.log(a); // undefined
  a = 5;
  console.log(window.a); // 10
  var a = 20;
  console.log(a); // 20
})()

前面了解到浏览器有软件渲染和GPU硬件加速渲染以及软件绘图的合成化渲染等方式，其中硬件加速渲染算是比较重要的，不过我只是了解了它的一些优缺点，至于浏览器到底如何实现硬件加速机制的，我还不知道，所以，本篇继续跟着书中讲解来了解下硬件加速机制。

硬件加速机制其实就是指使用GPU的硬件能力来帮助渲染网页。

依然采用问题形式。

问题

前一篇提到过，在分层的网页结构中，GPU硬件加速渲染会提供相应的后端存储，而网页往往较为复杂，可能会分成很多层，会有很多 RenderLayer 对象，那么GPU是不是要给所有的RenderLayer 对象都进行后端存储？

那是理想情况，现实中不一定。

主要原因是实际中的硬件能力和资源有限。

考虑到资源节省等问题，硬件加速机制是如何去优化、去渲染网页呢？

主要是三件事：

• WebKit决定将哪些 RenderLayer 对象组合在一起，形成一个有后端存储的新层，这一新层不久后会用于之后的 合成，作者将其称为 合成层。每个新层都有一个或多个后端存储，这里的后端存储可能是 GPU的内存。对于一个 RenderLayer 对象，如果它没有后端存储的新层，那么就使用它父亲所使用的的 合成层。
• 将每个合成层包含的这些 RenderLayer 内容绘制在 合成层 的 后端存储 中，这里的绘制可以是软件绘制也可以是硬件绘制。
• 由 合成器 将多个合成层合成起来，形成网页的最终可视化结果，实际就是一张图片。合成器 是一种能够将多个合成层按照这些层的前后顺序、合成层的 3D 变形等设置而合成一个图像结果的设施。

那么哪些 RenderLayer 对象可以组合成 合成层 呢？

具有以下等特征：

• RenderLayer具有CSS 3D属性或者CSS透视效果
• RenderLayer包含的RenderObject节点表示的是使用硬件加速的视频解码技术的 HTML5 video 元素
• RenderLayer包含的RenderObject节点表示的是使用硬件加速的 Canvas 2D元素或者WebGL技术
• RenderLayer使用了CSS透明效果的动画或者CSS变换的动画
• RenderLayer使用了硬件加速的CSS Filters技术
• RenderLayer使用了裁剪(Clip)或者反射(Reflection)属性，并且它的后代中包括一个合成层
• RenderLayer有一个Z坐标比自己小的兄弟节点，且该节点是一个合成层

了解了以上的知识后，能说说硬件渲染的过程吗？

由于涉及到不少内部类和方法，考虑到项目一直在迭代，可能书上所讲的有所改变，所以这里提炼下大致过程，尽量不涉及具体类和方法名。

1.首先WebKit确定并计算合成层

• 检查 RenderLayer 对象是否为合成层，是的话为其创建 后端存储对象RenderLayerBacking
• 根据重新更新的合成层来更改合成层树，并修改后端存储对象的设置信息

2.其次，遍历和绘制每一个合成层，可能存在以下四种情况：

• 第一种情况：HTMLDocument节点， 需要一个用于2D图形的 图形上下文对象，同软件渲染非常类似，但递归过程不同。每个 RenderLayer 对象被绘制到 祖先链中最近的合成层。
• 第二种情况：使用 CSS 3D变形的合成层。
• 第三种情况：使用WebGL技术的 Canvas 元素所在的合成层，它的绘制由javascript操作完成，并且使用了 3D图形上下文。
• 第四种情况：类似使用了硬件加速的视频元素所在的合成层，该层的内容其实是由视频解码器来绘制，而后通过定时器或者其他通知机制来告诉WebKit该层内容发生改变.

3.最后渲染引擎将所有绘制完的合成层合成起来

前面介绍到webkit中会有3D和2D图形上下文，Chromium是不是也一样呢？内部调用栈是什么样的呢？

webkit中2D图形上下文对应Chromium的 Skia画布(canvas)，具体调用栈可以看图了解下即可。

结合以前介绍的进程灯知识，GPU硬件加速渲染是在哪个进程上执行的？是Renderer进程吗？

对于使用多进程模型的Blink内核的浏览器来说，不是的，GPU硬件加速渲染的操作会交由 GPU进程 负责。

多进程模型下是如何实现跨进程的硬件加速渲染的？

这个很复杂，依靠Renderer进程的主要类和GPU进程的主要类它们彼此内部的实现。涉及到太多类，不展开，建议结合项目代码去看。

总结就是，GPU进程处理一些命令后，会向Renderer进程报告自己当前状态，Renderer进程通过检查状态信息和自己期望结果来确定是否满足自己的条件。

值得注意的是：GPU进程最终绘制的结果不再像 软件渲染那样通过共享内存传递给Browser进程，而是直接将页面内容绘制在浏览器的标签窗口。

本篇第一个问题下的回答就提到过合成器，Chromium的合成器是如何实现的呢？

在架构设计上，采用了 表示和实现分离原则。
图例：

需要注意：Layer树工作的主线程，实际指的是渲染引擎工作的线程，不一定是Renderer进程的主线程。但是LayerImpl树工作的 实现部分的线程 既可以是主线程也可以是单独的线程。实现部分如果是一个单独的线程，那么可以称为 合成器线程，也叫线程化合成。

Chromium合成器的组成部分是什么样的？

• 事件处理部分。主要接收WebKit或者其他的用户事件，例如网页滚动、放大缩小等事件，这些事件会请求合成器重新绘制每一个合成层，然后合成器再合成这些层的绘制结果
• 合成层的表示和实现。主要定义各种类型的合成层，包括它们的位置、滚动位置、颜色等属性
• 合成层组成两种类型的树，以及它们之间的同步等机制
• 合成调度器(Scheduler)主要调度来自用户的请求，它包括一个状态用于调度当前队列中需要执行的请求，目的当然是协调合成层的绘制和合成、树的同步等操作。调度器是在合成器线程中的，因而不能访问主线程中的资源
• 合成器的输出结果。结果可以是一个GPU Surface或者一个CPU存储空间。
• 各种后端存储等资源
• 支持动画和3D变形这些功能所需要的基础设施

拓展介绍：绘制HTML元素和图片元素所生成的合成层，其后端存储会被瓦片化！

为什么会使用瓦片化的后端存储呢？

有以下三点好处：

1. DOM树中的html元素所在的层可能会比较大，因为网页高度很大，如果只是使用一个后端存储的话，那么需要一个很大的对象，但是实际的GPU硬件可能只支持非常有限的纹理大小
2. 在一个比较大的合成层中，可能只是其中一部分发生变化，根据之前的介绍，需要重新绘制整个层，这样必然产生额外的开销，使用瓦片化的后端存储，就只需要重绘一些存在更新的瓦片
3. 当层发生滚动时，一些瓦片可能不再需要，然后WebKit需要一些新的瓦片来绘制新的区域，这些大小相同的后端存储很容易重复利用，简洁漂亮

了解完合成器知识后，能简要说说合成过程吗？

主要有四个步骤，都是由调度器调度：

1. 创建输出结果的目标对象 Surface，也就是合成结果的存储空间
2. 开始一个新的帧，包括计算滚动和缩放大小、动画计算、重新计算网页的布局、绘制每个合成层等
3. 将Layer树中包含的这些变动同步到LayerImpl树中
4. 合成LayerImpl树中各个层并交换前后帧缓冲区，完成一帧的绘制和显示动作

可以看看图了解下

前面介绍过2D绘图也可以进行硬件加速，如何做到的呢？

首先什么是2D绘图的硬件加速？

2D绘图本身是使用 2D的图形上下文，一般使用软件方式来绘制它们，也就是 光栅化。

使用GPU来绘制2D图形的方法称为2D图形的硬件加速机制。

2D图形的硬件加速机制有两种应用场景：

1. 2D图形上下文——网页基本元素绘制(HTML基本标签)
2. canvas 2D

2D图形上下文是如何进行硬件加速的呢？

依靠 Skia图形库。当需要启动硬件加速时，只需要对 SkCanvas 对象进行的相应设置即可。

具体内部类和方法建议看书和代码。

Canvas 2D是如何进行硬件加速的呢？

比较复杂，涉及太多内部类，建议结合项目代码和书去看。
简单来说，在Chromium中，canvas 2D进行GPU硬件加速绘图时，会创建一个 SkDeferredCanvas 对象，该对象采用 延迟机制 来绘制2D图形。然后，该对象需要 SkGpuDevice 来将2D绘图操作转换为使用3D图形上下文来绘制。

WebGL是如何实现的？

同样设计太多内部类，建议看书。
粗略提下吧，Chromium中WebGL工作过程分成三个阶段：

1. 对象的初始化
2. 构建RenderLayer、WebLayer、CC::Layer等对象，在DOM树构建之后检查CSS样式变化时才会触发
3. 3D绘图

读《webkit技术内幕》了解浏览器内核系列

1. 读《webkit技术内幕》了解浏览器内核一
2. 读《webkit技术内幕》了解浏览器内核二——内部架构
3. 读《webkit技术内幕》了解浏览器内核三——资源与网络栈
4. 读《webkit技术内幕》了解浏览器内核四——HTML、DOM以及CSS相关
5. 读《webkit技术内幕》了解浏览器内核五——渲染基础
6. 读《webkit技术内幕》了解浏览器内核六——硬件加速机制
7. 读《webkit技术内幕》了解浏览器内核七——js引擎

Agents

主要是对规范翻译。

代理包括一组ECMAScript执行上下文，一个执行上下文栈，一个运行时执行上下文，一组命名任务队列，一个 代理记录 和一个执行线程。除执行线程外，代理的组成部分完全属于该代理。

代理程序的执行线程独立于其他代理程序，在代理程序的执行上下文上执行代理程序任务队列中的任务。除非共享线程中没有一个代理具有[[CanBlock]]属性为 true 的代理记录，否则执行线程可以被多个代理使用。

例如，某些Web浏览器跨浏览器窗口的多个不相关的选项卡共享一个执行线程。

当代理的执行线程执行代理任务队列中的任务时，该代理是这些任务中代码的 周围代理。这些代码使用周围的代理访问该代理内保存的规范级别执行对象：运行时执行上下文，执行上下文栈，命名的任务队列以及代理记录的字段。

下表列出代理记录的字段：

原子操作是指，对内存的一系列的读写操作必须保证不被打断来保证最终结果的正确性。可以去wiki上搜，不能翻墙的见百度

一旦代理群中的任何代理观察到[[Signifier]]，[[IsLockFree1]]和[[IsLockFree2]]的值，它们就无法更改。

[[IsLockFree1]]和[[IsLockFree2]]的值不一定由硬件确定，但也可能反映了ES实现选择，这些选择会随着时间的推移以及ECMAScript实现之间的变化而变化。

没有[[IsLockFree4]]属性：4字节原子操作始终是无锁的。

实际上，如果用任何类型的锁来实现原子操作，则该操作不是无锁的。无锁并不意味着无等待：完成无锁原子操作可能需要多少机器步骤没有上限。

大小为n的原子访问是无锁的，并不意味着有关大小为n的非原子访问的（感知）原子性，特别是，非原子访问仍可以作为几个单独的内存访问的序列来执行。详见ReadSharedMemory和WriteSharedMemory

代理是一种规范机制，不需要与ECMAScript实现的任何特定工件相对应。

Agent Clusters（代理集群）

代理程序集群是 通过对共享内存进行操作而通信的最大代理程序集。

不同代理中的程序可能通过未指定的方式共享内存。 至少，可以在集群中的代理之间共享SharedArrayBuffer对象的后备内存。

可能有一些代理可以通过消息传递进行通信，而这些消息不能共享内存。 它们永远不在同一个代理集群中。

每个代理都完全属于一个代理集群。

集群中的代理不必在某个特定时间点都处于活动状态。如果代理A创建了代理B，之后，A终止，B又创建代理C，如果A可以与B共享一些内存并且B也可以与C共享一些内存，则A，B，C三个代理程序在同一个集群中。

同一个集群内的所有代理程序在各自 代理记录 内必须具有 相同 的[[LittleEndian]]值。

注意：如果一个代理集群内不同的代理程序有不同的[[LittleEndian]]值，则很难将共享内存用于多字节数据。

集群内的所有代理在各自的 代理记录 中必须有 相同 的[[IsLockFree1]] 值；[[IsLockFree2]]属性和它类似。

集群内的所有代理在各自的 代理记录 中必须有 不同 的[[Signifier]]值。

在代理不知情或不合作的情况下，嵌入可能会使其无效（停止前进）或激活（继续前进）。如果嵌入这样做，则一定不能使集群中的某些代理处于活动状态，而集群中的其他代理会被无限期停用。

前述限制的目的是避免由于另一个代理已被停用而导致代理死锁或饥饿的情况。例如，如果一个HTML共享工作进程的生命周期独立于任何窗口中的文档，则允许它与此类独立文档的专用工作进程共享内存，并且文档及其专用工作线程将被停用，而专用工作线程持有一个锁（例如，文档将被推入其窗口的历史记录中），然后，共享工作进程尝试获取锁，然后将阻塞共享工作进程，直到再次激活专用工作进程（如果有的话）。与此同时，试图从其他窗口访问共享工作进程的其他工作进程将会失败。

这一限制的含义是，嵌入中不属于同一 挂起/唤醒 集合的代理之间将无法共享内存。

嵌入可以在没有任何代理的集群的其他代理事先知道或合作的情况下终止代理。如果某个代理不是通过其自身或集群中其他代理的编程动作而是通过集群外部的力量终止的，那么嵌入必须选择两种策略之一：

• 要么终止集群中的所有代理，
• 提供可靠的API，允许集群中的代理进行协调，以便至少还有一个集群成员能够检测到终止，终止数据包含足够的信息来标识已终止的代理。

此类终止的示例包括：操作系统或用户终止在不同进程中运行的代理；当每个代理程序资源记帐指示该代理程序失控时，嵌入本身将终止与其他代理程序一起在进程中运行的代理程序。

在集群中的任何代理对任何ECMAScript代码进行任何运算之前，将集群中所有代理的 代理记录 的[[CandidateExecution]]字段设置为初始候选执行。初始候选执行是一个空的候选执行，它的[[EventsRecords]]字段是一个List，对于每个代理，该列表包含一个 代理事件记录，该代理事件记录的[[AgentSignifier]]字段是该代理的标识符，并且其[[EventList]]和[[AgentSynchronizesWith]]字段为空列表。

代理群集中的所有代理在其代理记录[[CandidateExecution]]字段**享相同的候选执行。候选执行是一种被内存模型使用的规范机制。

前言

最近一段时间没怎么登github，公司内部走代理访问github打开特别慢，排版布局又很乱，据悉是公司内部防火墙的缘故。
晚上回来也迟，就没有打开电脑去看搜藏的博客。不过不要紧，毕竟也买了不少技术书，那就静下心来看看书吧。
PS：《你不知道的javascript》上中两卷买回来起码半年了，昨天才看完上卷，太懒了！！！得逼自己一把，不然怎么快速进步！！！
看书之前以为我都会，看完之后才发现我还不够！
尤其看完这两章，我对原型链以及js继承又有了全新的认识，这里特地把自己以前没有学习到的新知识记录下来，做个总结。
建议大家去看该系列书籍，github上有英文版：《你不知道的javascript》

get到的新点

1.属性设置和屏蔽

这里主要讲了当对象（例如myObj）与它的原型对象（例如obj）上都存在同名属性（例如foo）时，myObj.foo会屏蔽掉它原型对象上的同名foo属性（这里指obj.foo）。即当进行get操作时得到的是myObj.foo，这点大家都清楚。

但是！如果myObj中没有foo属性，而它的原型对象obj上有foo属性，那么当进行 myObj.foo= 赋值时，情况可能并不是我们想当然的那样，只在myObj中新增一个foo属性！

这里有个专业术语：屏蔽！
这里涉及到三种情况：

1. 如果在[[Prototype]]链上层存在名为foo的普通数据访问属性并且没有被标记为只读（writable: false），那就会直接在myObj中添加一个名为foo的新属性，它是屏蔽属性。（PS：原型链上有同名属性，但是可以修改的情况下）
   示例代码：

var obj = {
  foo: 1
}
var myObj = Object.create(obj)
myObj.foo // 1
myObj.foo = 2
obj.foo // 1

2. 如果在[[Prototype]]链上层存在foo，但是它被标记为只读（writable: false），那么无法修改已有属性或者在myObj上创建屏蔽属性。如果运行在严格模式下，代码会抛出错误。否则，这条赋值语句会被忽略。总之，不会发生屏蔽。
   示例代码：

var obj = {}
Object.defineProperty(obj, 'foo', {
  value: 1,
  writable: false,
  configurable: true,
  enumerable: true
})
var myObj = Object.create(obj)
myObj.foo // 1
myObj.foo = 2
myObj.foo // 1  这里还是1！

3. 如果在[[Prototype]]链上层存在foo并且它是一个setter，那就一定会调用这个setter。foo不会被添加到myObj，也不会重新定义这个setter。
   代码示例：

var obj = {}
Object.defineProperty(obj, 'foo', {
  configurable : true,
  enumerable : true,
  set: function() {
	this.value = 1
  },
  get: function () {
    return this.value
  }
})
var myObj = Object.create(obj)
myObj.foo = 2
myObj.foo // 1

如果希望在第二、三种情况下也能对myObj设置foo属性，那么请使用Object.defineProperty()，避免使用=

隐式屏蔽
摘抄自书上代码：

var anotherObject = {
  a: 2
}
var myObject = Object.create(anotherObject);
anotherObject.a // 2
myObject.a //2
anotherObject.hasOwnProperty('a') // true
myObject.hasOwnProperty('a') // false
myObject.a++ // 隐式屏蔽
anotherObject.a // 2
myObject.a // 3
myObject.hasOwnProperty('a') // true

上述代码关键点在myObject.a++这一步！myObject.a++相当于myObject.a = myObject.a + 1！！！myObject的原型对象anotherObject 上的a属性不是只读也没有固定死setter，所以这里相当于对myObject增加了一个a属性！！！

2.constructor属性

实例本身并没有constructor属性，constructor属性存在于它的原型对象上！！！
示例代码：

function Foo() {}
var f = new Foo()
f.constructor === Foo // true
Foo.prototype.constructor === Foo // true

之前学习原型链时知道了上述代码的关系，但是，其实这里我不是很懂。直到看了书我才知道，上述代码中f对象其实本身并没有constructor属性，它的原型对象Foo.prototype上才有，f.constructor本质上是去原型链上找到constructor属性即Foo.prototype.constructor！！！

这就是为什么当我们使用=操作符去进行原型继承时，需要对constructor重新赋值。
代码示例：

function A() {}
A.prototype.constructor // A
A.constructor // Function
function B() {}
B.constructor // Function
B.prototype.constructor // B
B.prototype // Function 这里是函数
B.prototype = new A() // A {} 这里是对象
B.prototype.constructor // A
B.constructor // Function
var c = new B() // B {}
c.__proto__ // A {} 这里就有问题了，c明明是由B构造的，却直接跳过了B找到了A
c.constructor === B.prototype.constructor // A 这里也有问题，不符合规范了
B.prototype.constructor = B // 强行赋值，改变指向

按照规范来说，B.prototype.constructor应该指向B自身，但是上述代码如果不手动改变指向，则会造成constructor属性指向错误！

3.面向委托的设计**

个人理解，面向委托的设计模式需要避免使用prototype以及constructor属性，主要通过this关键字来把控，配合Object.create()来实现。
典型的原型风格 与 面向委托两种不同设计模式实现对比：
类：

function Foo(who) {
  this.me = who
}
Foo.prototype.identify = function () {
  return "I am " + this.me
}
function Bar(who) {
  Foo.call(this, who)
}
Bar.prototype = Object.create(Foo.prototype)
Bar.prototype.speak = function () {
  alert("Hello, " + this.identify() + ".")
}
var b1 = new Bar("b1")
var b2 = new Bar("b2")
b1.speak()
b2.speak()

面向委托：

var Foo = {
  init: function (who) {
    this.me = who
  },
  identify: function () {
    return "I am " + this.me
  }
}
var Bar = Object.create(Foo)
Bar.speak = function () {
  alert("Hello, " + this.identify() + ".")
}
var b1 = Object.create(Bar)
b1.init("b1")
var b2 = Object.create(Bar)
b2.init("b2")
b1.speak()
b2.speak()

面向委托的写法看起来更简洁也更容易理解。而且，b1.constructor === Object; Foo.constructor === Object; Bar.constructor === Object！避免了原型继承模式下的constructor指向混乱的问题。

总结

面向委托的**是重点，以前从来都没接触过。但是需要不断实践才能真正深入了解。
接下来时间里继续看《你不知道的javascript》

ECMAScript Specification Types

本篇主要为了方便阅读规范

规范类型对应于在算法中用于描述ECMAScript语言结构和ECMAScript语言类型语义的元值。包含以下类型：

• Reference
• List 和 Record
• Completion
• Property Descriptor
• Lexical Environments
• Environment Records
• Data Blocks

规范类型值可用于描述ECMAScript表达式求值的中间结果，但此类值不能存储为对象的属性或ECMAScript语言变量的值。

List和Record规范类型

List类型用于解释那些使用 new 表达式、函数调用的 参数列 以及其它需要一个简单的有序值列表的算法。列表类型的值是包含单个值的列表元素的简单 有序序列。序列长度不固定。列表的元素可以使用从0开始索引随机访问。为了便于表示，可以使用 类似数组 的语法来访问列表元素。（应该都知道函数的arguments是个类数组对象吧，在规范类型里就是List类型，语言类型里是Object）

为了阅读规范需要，类似« 1, 2 »这种形式代表有两个元素的List值且每个值都会被初始化为特定的值。« »代表空的List。

Record类型用于描述本规范算法中的数据聚合。Record类型值由一个或多个命名字段组成。每个字段值要么是ECMAScript值，要么是由与Record类型关联的名称表示的抽象值。字段名总是用双括号括起来，例如[[Value]]。

 为了便于在本规范中进行注释，可以使用类似于对象字面量的语法来表示记录值。例如, { [[Field1]]: 42, [[Field2]]: false, [[Field3]]: empty }定义了一个具有三个字段的Record类型值，并且每个字段有个特定值。Record类型中字段名顺序并不重要。没有明确列出来的字段视为不存在。
 . 可能被用来表示指向一个Record值的某个字段。例如 R 是上一段中显示的record，R.[[Field2]]表示 R的[[Field2]]字段的缩写。
应用案例：属性描述符：{ [[Value]]: 42, [[Writable]]: false, [[Configurable]]: true }

PS：在控制台打印一个{}，点开__proto__属性，不出意外的话，会发现所有属性中都有一个[[Scopes]]属性。 当然，它依然是Object类型，不过却用了双括号来表示。

Set和Relation规范类型

Set类型用来解释内存模型使用的 无序 元素的集合。每个元素不会出现第二次。集合可以是并集、交集或相减的。（PS：注意与Set对象区分）

Relation类型用于解释Sets上的约束。Relation类型的值是其值域中的有序值对集。

例如，事件关联是一组有序的事件对。对于Relation R以及在它的值域中的两个值a和b：a R b是R的成员中有序对(a, b)缩写。
当一个Relation是满足这些条件的最小Relation时，它是关于某些条件的最小Relation。

Completion Record 规范类型

Completion类型其实是一种Record类型，用于解释值和控制流的运行时传播，例如执行非本地控制传输的语句（break、continue、return和throw）的行为。

// 一开始翻译时不大明白这些，继续看 winter的《重学前端 —— try里面放return，finally还会执行吗？》一章才算理解
// 看看下面代码
target:var test; // 不报错
// 这里的 target: 就对应 Completion Record 中的 `[[Target]]`

Completion Record 中的 [[Value]]：

包含以下内容：

• Await
  • Await Fulfilled Functions
  • Await Rejected Functions
• NormalCompletion
  • 返回{ [[Type]]: normal, [[Value]]: argument, [[Target]]: empty }
• ThrowCompletion
  • 返回{ [[Type]]: throw, [[Value]]: argument, [[Target]]: empty }
• UpdateEmpty ( completionRecord, value )
  • 如果 completionRecord.[[Type]] 是 return 或者 throw，那么completionRecord.[[Value]]不为空
  • 如果completionRecord.[[Value]]不为空，返回Completion(completionRecord)
  • 返回{ [[Type]]: completionRecord.[[Type]], [[Value]]: value, [[Target]]: completionRecord.[[Target]] }

abrupt completion：

所有 [[Type]] 不是 normal 的 completion 都属于 abrupt completion

Reference规范类型

注意：Reference类型用于解释一些操作的行为，例如delete，typeof，赋值运算符，super关键字以及其它的语言特征。例如：赋值的左操作数应产生一个引用。

一个引用可能是一个已解析的名称或属性绑定。一个Reference包含三部分：基础值部分、引用的名称和严格引用标志的布尔值。基础值可能是undefined，Object，Boolean，String，Symbol，Number或Environment Record。基础值如果是undefined，那么无法将引用解析为绑定（其实就是对象某个属性值为undefined，该属性不绑定任何引用）。引用名是一个string或者symbol值。

一个Super Reference表示使用super关键字名称绑定的引用。Super Reference有额外的thisValue，并且它的基础值不可能是Environment Record。

Property Descriptor规范类型

Property Descriptor类型用来解释对象属性的属性的操作和具体化。（可以结合getOwnPropertyDescriptor来看）。PropertyDescriptor类型值是 Record类型。

属性描述符值可以根据某些字段的存在或使用，进一步被分类为 数据属性描述符 和 访问器属性描述符 以及 通用属性描述符。

• 数据属性描述符： 包含名为 [[Value]]或[[Writable]] 的任何字段的描述符。
• 访问器属性描述符：包含名为 [[Get]]或[[Set]] 的任何字段的描述符。
• 通用属性描述符：一个属性描述符值，既不是数据属性描述符，也不是访问器属性描述符

任何属性描述符可能会有 [[Enumerable]] 和 [[Configurable]] 字段。属性描述符不能同时是数据描述符和访问器描述符，两者互斥！

Data Blocks

Data Blocks规范类型用于描述字节大小（8位）数字值的不同且可变的序列。一个Data Blocks值由固定数量的字节构成，且每个字节初始值为0。

在规范中，类数组的语法可用于访问Data Block值的各个字节。该表示法将Data Block值表示为从0开始的整数索引字节序列。

可以同时从多个代理引用的驻留在内存中的数据块称为 共享数据块(Shared Data Block)。共享数据块的标识（用于相等性测试共享数据块值）是无地址的：它不依赖于任何过程中块映射到的虚拟地址，而是依赖于该块所代表的内存中的位置集。仅当两个数据块所包含的位置集合相等时，它们才相等。 否则，它们不相等，并且它们包含的位置集的交集为空。

共享数据块的语义由内存模型使用共享数据块事件定义。下面的抽象操作引入共享数据块事件，并充当内存模型的求值语义和事件语义之间的接口。这些事件形成一个候选执行，内存模型在其上充当筛选器。有关完整的语义，请参考内存模型。

共享数据块事件由内存模型中定义的记录建模。

Jobs and Job Queues

Job 是抽象操作，当 当前没有其他ECMAScript计算正在进行时，它将启动ECMAScript计算。可以将 Job 抽象操作定义为接受任意一组任务参数。

只有当 没有运行时执行上下文 并且 执行上下文栈为空 时任务才会被启动执行。PendingJob 是对将来执行任务的请求。PendingJob 是一个内置的 Record，字段见下表：

一旦某个任务启动执行，该任务将会一直执行直到完成。在当前运行的任务完成前，其它任何任务都不会启动。 但是，当前正在运行的任务或外部事件可能会导致其他 PendingJob 排队，这些任务可能在当前正在运行的任务完成后的某个时间启动。

任务队列是PendingJob记录的先进先出队列。每个任务队列都有名字并且完整的可用任务队列集由ECMAScript实现定义。每个ECMAScript实现至少有下表中列出的 两种 任务队列：

通过在任务队列上使包含任务抽象操作名称和任何必要参数值的 PendingJob 记录入队，来请求将来执行任务。当没有运行时执行上下文和执行上下文栈为空时，ECMAScript的实现从任务队列中移除第一个 PendingJob 并且使用 PendingJob 包含的信息创建执行上下文并同时始执行关联的Job抽象操作。

来自单个任务队列的 PendingJob 记录始终以先进先出顺序启动。规范没有定义服务多个任务队列的顺序。 ECMAScript实现可以将任务队列的 PendingJob 记录的先进先出求值与一个或多个其他任务队列的 PendingJob 记录的求值交织在一起。一个实现必须定义当没有运行时执行上下文并且所有任务队列为空时会发生什么。

通常，ECMAScript实现将使用至少一个 PendingJob 预先初始化其任务队列，并且其中一个任务将是第一个要执行的任务。

如果当前任务完成并且所有任务队列为空，则实现可以选择释放所有资源并终止。或者，它可以选择等待某些特定于实现的代理或机制来排队新的 PendingJob 请求。

EnqueueJob ( queueName, job, arguments )

创建和管理任务以及任务队列的步骤：

1. Assert(断言)：Type(queueName)是 String 类型并且其值是被实现认可的任务队列的名字。
2. Assert(断言)：job是任务的名字。
3. Assert(断言)：arguments是一个具有与任务所需参数数量相同的元素数量的列表。
4. 让过程变量callerContext保存运行时执行上下文。
5. 让过程变量callerRealm成为callerContext的领域。
6. 让过程变量callerScriptOrModule成为callerContext的 ScriptOrModule。
7. 定义过程变量pedding，初始值为PendingJob { [[Job]]: job, [[Arguments]]: arguments, [[Realm]]: callerRealm, [[ScriptOrModule]]: callerScriptOrModule, [[HostDefined]]: undefined }.
8. 执行任何实现或主机环境定义的pedding处理。这可能包括修改[[HostDefined]]字段或pedding的任何其他字段。
9. 在由queueName命名的任务队列的后面添加pedding。
10. 返回NormalCompletion(empty).

RunJobs ()

任务队列的执行步骤：

1. 执行 InitializeHostDefinedRealm()
2. 以依赖于实现的方式，获取零个或多个ECMAScript脚本和/或ECMAScript模块的ECMAScript源文本（请参见第10节Source Code）和任何相关的主机定义值。对于每个这样的sourceText和hostDefined：
   • 如果sourceText是脚本源代码，那么
     • 执行EnqueueJob("ScriptJobs", ScriptEvaluationJob, « sourceText, hostDefined »).
   • 否则，
     • 断言：sourceText是模块源代码
     • 执行EnqueueJob("ScriptJobs", TopLevelModuleEvaluationJob, « sourceText, hostDefined »)
3. 重复执行下面操作，
   • 挂起运行时执行上下文并且把它从执行上下文栈中移除。
   • 断言：执行上下文栈现在是空的。
   • 定义过程变量nextQueue，让它成为以实现定义的方式选择的非空任务队列。如果所有的任务队列为空，那么结果由实现定义。
   • 定义过程变量nextPending，令其为nextQueue前面的 PendingJob 记录。从nextQueue移除该记录。
   • 定义过程变量newContext作为新的执行上下文。
   • 设置newContext的Function字段值为 null。
   • 设置newContext的Realm字段值为nextQueue.[[Realm]]。
   • 设置newContext的ScriptOrModule字段值为nextPending.[[ScriptOrModule]]。
   • 把newContext推入执行上下文栈中；这时newContext位于栈顶，成为当前的运行时执行上下文。
   • 使用nextPending执行任何实现或主机环境定义的任务初始化。
   • 定义过程变量result，使其成为 执行由nextPending.[[Job]]定义并使用了nextPending.[[Arguments]]作为参数的 抽象操作的 结果。
   • 如果result是一个abrupt completion(非normal类型的completion)，执行HostReportErrors(« result.[[Value]] »)。

注意

经典面试题：

console.log('start')
setTimeout(() => console.log('setTimeout'), 0)
new Promise(res => {
  console.log('new Promise')
  res()
}).then(val => console.log('Promise then'))
console.log('end')

// 合理的打印结果为（有的浏览器实现有问题）
start
new Promise
end
Promise then
setTimeout

这条题涉及到 宏任务 和 微任务 概念，可惜本文全篇都没有提到这两个术语，而且，整个规范都没有提到！！！
我就懵逼了，难不成不是规范，那么为何有那么多人统一叫这两个专业术语呢？？？
后来看知乎才知道，这两个术语出自 HTML Event Loops规范！！！

拓展阅读

1. 宏任务和微任务
2. Using microtasks in JavaScript with queueMicrotask()
3. ECMAScript 的 Job Queues 和 Event loop 有什么关系？(看flyingsoul的回答)
4. Event Loops
5. MDN —— 并发模型与事件循环

比较

• MDN

先看代码：

1 > 0 // true
NaN > 0 // false
NaN === NaN // false 
Infinity === Infinity // true
0n === 0 // false
0n == 0 // true
true > false // true
'A' > 'B' // false
'A' > 'a' // false
'a' > 'A' // true
null == undefined // true
null === undefined // false
{} < {} // false
{} > {} // false
{} == {} //false
{} === {} //fasle
Symbol() > 0 // 报错
Symbol() == Symbol() // false
Symbol() === Symbol() // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
new String('a') == new String('a') // false

上面的代码，我能说出所有的正确打印结果吗？如果能的话，我能说出所有的比较原理吗？

对不起，我都做不到。比如对象之间比较以及 Symbol 与 Number 的比较，我不敢说出结果，因为我没手动测试过，更对其原理一无所知，所以我遇到这些完全没底气！

其他的方法可以不看，主要是以下的与比较有直接关联的方法：

IsStringPrefix ( p, q )

判断字符串 p 是不是字符串 q 的前缀。

• p 和 q 都必须是字符串
• 如果 q 可以是 p 和其他字符串 r 的串联，返回 true，否则返回 false
• 注意：任何字符串都是其自身的前缀，r 可能是空字符串

SameValue ( x, y )

• 判断类型是不是一样，不是返回 fasle
• 判断 x 是不是 Number 或 BigInt，然后对 x 和 y 执行 sameValue (BigInt::sameValue ( x, y )，Number::sameValue ( x, y ))操作比较
• 不符合以上条件，直接返回调用 SameValueNonNumeric(x, y) 后的值

Object.is 采用该算法，与严格相等不同的是对NaN以及+0, -0的判断。它认为NaN是相等的，但同时认为+0和-0不等。严格相等使用equal算法！！！

SameValueZero ( x, y )

其实本质和 SameValue 区别不大，只是它只比较 +0 和 -0。

SameValueNonNumeric ( x, y )

最终会返回 true 或 false。

• 要求 x 和 y 不能是Number 或 BigInt
• 要求 x 和 y 类型一致
• 如果 x 是 undefined，返回 true
• 如果 x 是 null，返回 true
• 如果 x 是 String，
  • 如果 x 和 y 是完全相同的代码单元序列（在相应的索引处具有相同的长度和相同的代码单位），返回 true，否则返回 false
• 如果 x 是 Boolean，
  • 如果 x 和 y 都是 true 或者都是 false，则返回 true，否则返回 false
• 如果 x 是 Symbol，
  • 如果 x 和 y 是相同的 Symbol 值，返回 true，否则返回 false
• 如果 x 和 y 是相同的对象 值，返回 true，否则返回 false

抽象关系比较

比较 x < y（其中 x 和 y 是值）会产生 true，false 或 undefined（这表明至少一个操作数是 NaN）。除x和y外，该算法还使用名为 LeftFirst 的布尔标志作为参数。该标志用于控制对 x 和 y 执行具有潜在可见副作用的操作的顺序。LeftFirst 默认为 true。

• 如果 LeftFirst 为 true，
  • 定义过程变量 px，执行ToPrimitive(x, hint Number)（如果是 Object，默认先执行 valueOf()，不满足再执行 toString()）
  • 定义过程变量 py，执行ToPrimitive(y, hint Number)（如果是 Object，默认先执行 valueOf()，不满足再执行 toString()）
• 否则，
  • 注意：需要颠倒顺序以保持从左到右运算
  • 定义过程变量 py，执行ToPrimitive(y, hint Number)（如果是 Object，默认先执行 valueOf()，不满足再执行 toString()）
  • 定义过程变量 px，执行ToPrimitive(x, hint Number)（如果是 Object，默认先执行 valueOf()，不满足再执行 toString()）
• 如果 px 和 py 都是 String，
  • 执行IsStringPrefix(py, px)，如果结果为 true，则返回 fasle（px包含py）
  • 执行IsStringPrefix(px, py)，如果结果为 true，则返回 true（py包含px）
  • 如果 px 和 py 不具有 前缀（必须是前缀） 包含关系，则定义过程变量 k 为最小非负整数，以便 px 内索引 k 处的码点与 py 内索引 k 处的码点不同。（必须有一个 k，因为两个字符串都不是另一个的前缀）
  • 定义过程变量 m 为整数，该整数是 px 以内的索引 k 处的码点的数值
  • 定义过程变量 n 为整数，该整数是 py 以内的索引 k 处的码点的数值
  • 如果 m < n，返回 true，否则返回 false（这里主要比较的是字符串在Unicode码表中的码点数值）
• 否则，
  • 如果 px 是 BigInt，py 是 String，
    • 定义过程变量 ny，调用StringToBigInt(py)将结果赋值给 ny
    • 如果 ny 为 NaN，返回 undefined
    • 否则，返回 BigInt::lessThan(px, ny)结果
  • 如果 py 是 BigInt，px 是 String，
    • 定义过程变量 nx，调用StringToBigInt(px)将结果赋值给 ny
    • 如果 nx 为 NaN，返回 undefined
    • 否则，返回 BigInt::lessThan(nx, py)结果
  • 定义过程变量 nx，执行ToNumeric(px) 将结果赋值给 nx（px 和 py 此时已经都是primitive（原始，这里应该都是 数值）值了，顺序不重要）
  • 定义过程变量 ny，执行ToNumeric(py) 将结果赋值给 ny
  • 如果 nx 和 ny 类型一致，执行对应类型的 lessThan(nx, ny)（Number::lessThan (nx, py)，BigInt::lessThan(nx, py)）方法
  • 如果 nx 是 BigInt 类型并且 ny 是 Number 类型，或者两者类型对调
  • 如果 nx 或 ny 是 NaN，返回 undefined
  • 如果 nx 是 -Infinity 或ny 是 +Infinity，返回 true
  • 如果 nx 是 +Infinity 或ny 是 -Infinity，返回 false
  • 如果 nx 的数学值比 ny 的数学值小，返回 true，否则返回 false

字符串比较，先比较是不是前缀包含。何为前缀包含？例如abc 和 a 可以认为是前缀包含，但是 abc 和 b 则不是，因为它需要 a + b + c，b 不是 abc 的前缀。

字符串的比较，如果两字符串不具有包含关系，则 从两个字符串的第一个下标开始，比较同一下标对应的字符在Unicode码表中的码点数值大小。一旦某个下标所对应的字符分出了大小，则比较结束。

注意：Null，Undefiend 以及 Boolean 类型比较会在执行ToNumeric(px)时转换成数值。

抽象相等 ==

日常使用的 ==。

• 如果 x 和 y 的类型一致，则返回 x === y 的结果。（即类型一致，默认采用全等比较）
• 如果 x 是 null 同时 y 是 undefined，返回 true
• 如果 x 是 undefined 同时 y 是 null，返回 true
• 如果 x 是 Number 类型，y 是 String 类型，将 y 转为 Number 然后继续比较
• 如果 x 是 String 类型，y 是 Number 类型，将 x 转为 Number 然后继续比较
• 如果 x 是 BigInt 类型，y 是 String 类型，
  • 定义过程变量 n，执行StringToBigInt(y)将结果赋值给 n
  • 如果 n 是 NaN，返回 false
  • 否则，返回 x == n 的结果
• 如果 x 是 String 类型，y 是 BigInt 类型，返回 y == x 的结果（其实就是位置对调然后重复上一步）
• 如果 x 是 Boolean 类型，将 x 转为 Number 类型，然后比较转为 Number 类型后的值与 y 比较结果
• 如果 y 是 Boolean 类型，将 y 转为 Number 类型，然后比较转为 Number 类型后的值与 x 比较结果
• 如果 x 是 String，Number，BigInt，Symbol 类型，y 是 Object 类型，先将 y 转为原始类型，然后再比较（执行 ToPrimitive(y)）
• 如果 x 是 Object 类型，y 是 String，Number，BigInt，Symbol 类型，先将 x 转为原始类型，然后再比较（执行 ToPrimitive(x)）
• 如果 x 是 BigInt 类型，y 是 Number 类型，或者 x 是 Number 类型，y 是 BigInt 类型
  • 如果 x 或 y 有一个是 NaN，+Infinity，-Infinity，返回 false（事实上，BigInt 不支持这三个值）
  • 如果 x 的数学值和 y 的数学值相等，返回 true，否则返回 false
• 以上都不满足，返回 false

注意：String 与 Number 或 Boolean 与 Number 比较，最终都会转为 Number 类型进行比较！

严格相等 ===

就是日常使用的 === 全等。

• 先判断类型是不是一样，不同返回 false
• 判断 x 是不是 Number 或 BigInt，然后对 x 和 y 执行 equal (BigInt::equal ( x, y )，Number::equal ( x, y )操作比较
• 不符合以上条件，直接返回调用 SameValueNonNumeric(x, y) 后的值

注意，这里使用的是equal算法，而Object.is使用的是sameValue算法

回归开头代码

首先是字符串的比较，我知道了它会先判断是不是前缀，否则直接开始比较相同下标对应的字符在Unicode中的码点大小：

'A' > 'B' // false
'A' > 'a' // false
'a' > 'A' // true

接着是全等，这个其实不难，既要判断类型又要判断值是不是都一样：

0n === 0 // false
null === undefined // false
NaN === NaN // false 
Infinity === Infinity // true
{} === {} //fasle
Symbol() === Symbol() // false

容易困惑的在于NaN，Symbol：

1. 首先 NaN 属于 Number 类型，适用于Number::equal ( x, y )，不论谁是 NaN，都返回 false！！！
2. 其次是 Object，它最终比较的是地址内存值
3. 还有 Symbol，有点 Object 的意思。

接下来是普通 ==，它只要求值相等不强调类型：

0n == 0 // true
null == undefined // true
{} == {} //false
Symbol() == Symbol() // false

最后，则是其它的大小比较了：

true > false // true
NaN > 0 // false
{} < {} // false
{} > {} // false
Symbol() > 0 // 报错

1. Boolean 会被转为 Number 来比较
2. NaN > 0 会执行Number::lessThan (nx, py)，有NaN，根据规范应该返回undefined，不过浏览器把它实现成了 false！！！
3. Symbol() > 0 会尝试把 Symbol 转为 Number，可是根据类型转换规则，会报类型错误
4. {} < {} 和 {} > {} 都会尝试转为原始值在进行比较，可惜，它们最终都会转为 "[object Object]"，两个最终字符串相同，所以只能是 false！！！

额外补充Object.is

如果仔细看内容的话就知道为什么了。根本在于 Object.is 内部使用的是 ::sameValue ( x, y ) 算法，而严格相等使用的是 ::equal ( x, y ) 算法！

所以两者在 NaN 以及 +0，-0 的比较上不同

不想多写了，我的问题不在springboot配置，而是服务器上的tomcat版本问题，我服务器上装的是tomcat7，偶然看到某个评论说springboot需要tomcat8，抱着试试心态，重装tomcat8，然后，OK了。。。

Object 基础介绍

这里不涉及具体某个api，因为实在太多了。

• Object类型
• Object Objects
• MDN关于Object介绍（注意看左侧菜单有关于Object几乎所有方法的链接）

对象的字符串属性键名 整数索引 在 0 ~ 2⁵³ - 1间（源于string的长度限制）。

数组也是对象。但是数组的索引范围是 0 ~ 2³² - 1。因为数组长度内部用了 ToUint32 转换的，相关算法在规范中多处都有提到，例如 Array 的 [[DefineOwnProperty]](P, Desc)

属性有两种访问方式：get和set，分别对应取值和赋值。通过get和set可以访问对象自身属性和继承属性。

JavaScript 中的对象分类

来源于规范中定义的对象以及winter《重学前端》——JavaScript对象：你知道全部的对象分类吗？。

• host Objects（宿主对象）：由 JavaScript 宿主环境提供的对象，它们的行为完全由宿主环境决定。
• Built-in Objects（内置对象）：由 JavaScript 语言提供的对象。
  • Ordinary objects（普通对象）：最常见的对象形式，并具有默认的对象语义。（由{}语法、Object 构造器或者 class 关键字定义类创建的对象，它能够被原型继承。）
  • Intrinsic Objects（固有对象）：由标准规定，随着 JavaScript 运行时创建而自动创建的对象实例。
  • Native Objects（原生对象）：可以由用户通过 Array、RegExp 等内置构造器或者特殊语法创建的对象。PS：规范中并没有找到相应的分类，单纯的 Array 属于固有对象，但是其生成的数组对象被winter划分到这里。

PS：任何不是 Ordinary objects 的对象都是 exotic object （奇异/怪异对象）。

属性描述符

注意：js对象其实是key-value集合，每个key都有相应的属性描述符！根据属性描述符的不同可以分为 数据属性 和 访问器属性。

数据属性的属性描述符见下表：

js代码示例：

let obj = {};
Object.defineProperty(obj, 'a', {
  value: 'test',
  writable: true,
  enumerable: true,
  configurable: true
})

访问器属性的属性描述符见下表：

js代码示例：

let val;
Object.defineProperty(obj, 'b', {
  get () {
    console.log('get...');
    return val;
  },
  set (newVal) {
    val = newVal;
    console.log('set...');
  },
  enumerable: true,
  configurable: true
})
obj.b = 1; // set...
obj.b; // get...  // 1

对象的内部方法和内部插槽

ECMAScript中对象的实际语义是通过称为 内部方法 的算法指定的。ECMAScript引擎中的每个对象都与一组内部方法相关联，这些内部方法定义了其运行时行为。这些内部方法不是ECMAScript语言的一部分。由规范定义，仅出于说明目的。

内部插槽对应于与对象关联并由各种ECMAScript规范算法使用的 内部状态。内部插槽不是对象属性，也不会继承。根据特定的内部插槽规范，这种状态可以由任何 ECMAScript语言类型的值 或 特定的ECMAScript规范类型的值 组成。除非另有明确说明，否则内部插槽将作为创建对象过程的一部分进行分配，并且可能不会动态添加到对象中。除非另有说明，否则内部插槽的初始值为 undefined。规范中的各种算法都会创建具有内部插槽的对象。但是，ECMAScript语言没有提供将内部插槽与对象关联的直接方法。

在规范中，内部方法和内部插槽使用 [[内部方法名 或者 内部插槽名]] 表示（符合Record类型）。下表总结了规范使用的 基本内部方法，这些方法适用于由ECMAScript代码创建或操作的所有对象。每个对象都必须具有用于所有基本内部方法的算法。但是，对于这些方法，所有对象不一定都使用相同的算法。

下表总结了函数对象所支持的其他基本内部方法：

基本内部方法的不变量

定义：

• 内部方法被调用的对象就是其目标target。
• 如果目标对象的[[IsExtensible]]内部方法返回false或者其[[PreventExtensions]]返回true，则该对象是不可扩展的。
• 不存在的属性是指 不可扩展的对象自身没有该属性。
• 对SameValue的所有引用均根据SameValue算法的定义。

返回值：

任何内部方法的返回值必须是具有以下任一内容的完成记录：

• [[Type]] = normal, [[Target]] = empty, 并且 [[Value]] = normal类型返回的值, 或
• [[Type]] = throw, [[Target]] = empty, 并且 [[Value]] = 任何ECMAScript语言类型值。

注意：内部方法不会返回[[Type]]为continue, break, 或 return的completion。

2020-07-27 补充

var a = {n: 1};
var b = a; // 指向 {n: 1} 这个对象
a.x = a = {n: 2}; // 此时 a 指向 {n: 2} 这个对象
console.log(a.x); // undefined
console.log(b); // {n: 1, x: {n: 2}}
console.log(b.x); // {n: 2}

这里问题关键在于 a.x = a = {n: 2} 这一段，其实 a.x 此时应该是 {n: 1} 这个对象添加了个新属性 x，a = {n: 2} 则是将 a 变量指向新对象！然后 {n: 1} 这个对象的 x 属性指向 {n: 2} 这个对象。

严格判定JavaScript对象是否为数组

先看MDN：Array.isArray()

能准确区分数组和类数组对象！

接下来是翻译：

JavaScript中的类型校验问题

JavaScript的 typeof 操作符有着令人困惑的表现行为：typeof null === "object"，而 typeof null !== "null"。这个错误会让人震惊，但我们基本上已经习惯了。可能更重要的是，有一个故障安全的解决方法：简单直接的用 === (全等)比较，例如 v === null 来进行判断。

确定值是否为数组

typeof null === "object" 可能是最常见的类型校验错误，不过还存在其它的类型校验错误。一个不太普遍但同样令人困惑的问题是 如何确定对象是否为数组。你可能会有个简单的解决方案：

if (o instanceof Array) {
  // 太糟糕了
}

在某些情况下，上面代码运行完美。但是如果存在 多个全局变量 就会出现问题。

ECMAScript规范描述了当执行一串代码时调用的环境和机制。语言构造的语法和基本语义当然很重要，但是如果没有ECMAScript中的内置方法和对象编码，就不能很好工作。这些方法和对象被全局对象使用，这里就是奇怪事情的发生地。ECMAScript 3 环境隐式假定存在单个全局变量（或者，也许是每个独立部分都有自己的环境，彼此之间没有相互作用）并且没有解决多个全局变量的想法。

但是，多个全局变量是浏览器的基础；每个 window 对象是该页面包含或引用的脚本的全局对象。那么在不同 window 中的数组呢？

当两个页面都增加 Array.prototype 时，将两个 window 的数组作为同一 Array 构造函数的实例，共享相同 Array.prototype 的 变化风险 非常大（更不用说当一个页面为恶意页面时的安全问题！），因此每个窗口中的 Array 和 Array.prototype 必须不同。所以，仅当 o 是由该页面原始 Array 构造器创建的数组（或者使用该页面数组字面量创建），o instanceof Array 才会运行正确。

是否还有其他可以确定值是数组的方法？

• o.constructor === Array 是一种方法，但和 instanceof 有相同的问题。
• 另一个选择依赖于 “鸭子类型”**，当值看起来像数组，那么它就是数组。
• 沿着 constructor 检查，您可以检查其他数组方法（例如 push 或 concat），或者检查 length 属性，但是非数组对象也可以有这些同名属性。
• 使用Object.prototype.toString.call(o) === "[object Array]"，但是依赖于 Object.prototype.toString 和 Function.prototype.call 未被改变。

来到 Array.isArray

由于这些原因，ES5定义了 Array.isArray 方法来完全解决该问题。

Array.isArray(Array.prototype); // true

function test(fun, expect) { 
  if (fun() !== expect) alert("FAIL: " + fun); 
}

test(function() { 
  return Array.isArray([]); 
}, true);

test(function() { 
  return Array.isArray(new Array); 
}, true);

test(function() { 
  return Array.isArray(); 
}, false);

test(function() { 
  return Array.isArray({ constructor: Array }); 
}, false);

test(function() { 
  return Array.isArray(   
    { 
      push: Array.prototype.push, 
      concat: Array.prototype.concat 
    }
  ); 
}, false);

test(function() { 
  return Array.isArray(17); 
}, false);

Object.prototype.toString = function() { return "[object Array]"; };

test(function() { 
  return Array.isArray({}); 
}, false);

test(function() { 
  return Array.isArray({ __proto__: Array.prototype }); 
}, false);

test(function() { 
  return Array.isArray({ length: 0 }); 
}, false);

var w = window.open("about:blank");
w.onload = function()
{
  test(function() { 
    return Array.isArray(arguments); 
  }, false);
  test(function() { 
    return Array.isArray(new w.Array); 
  }, true);
};

规范

1. Array.isArray( arg )
2. IsArray(arg)

String 类型

• 规范：String 值
• 规范：String 字面量
• 规范：String Objects
• String 怪异对象
• MDN —— 数据结构：String
• MDN —— String
• 类型转换见：ToString
• 重学js —— 主要表达式二之模板字符串

String 类型是所有0个或多个16位无符号 整数 值组成且最大长度为 2⁵³ - 1 的有序序列集合。

String类型通常用于表示正在运行的ECMAScript程序中的文本数据，字符串中的每个元素被当作 UTF-16 码元值处理。每个元素被认为在序列中占据一个位置。这些位置用非负整数索引。第一个元素下标为 0（（即下标从0开始）），下一个元素下标为 1，依此类推。字符串长度是字符串中的元素数量。空字符串长度为0且不包含元素。

解释字符串值的操作将每个元素视为单个UTF-16码元。但是，ECMAScript不限制这些码元的值或它们之间的关系，因此，将字符串内容进一步解释为以 UTF-16 编码的 Unicode 码点序列的操作必须考虑格式错误的子序列。这样的操作会对数值范围在 0xD800 到 0xDBFF （由Unicode标准定义为 主要代理，或更正式地定义为高代理码元）范围内的每个码元都进行特殊处理，且每个数值在 0xDC00 到 0xDFFF （定义为 尾代理，或更正式的定义为 低代理码元）范围内的码元使用以下规则：

• 既不是 主要代理 又不是 尾代理 的码元被解释为具有相同值的码点
• 两个码元的序列，如果第一个码元 c1 是 主要代理 且第二个码元 c2 是 尾代理，会组成一个 代理对，被解释为码点，其值为 (c1 - 0xD800) × 0x400 + (c2 - 0xDC00) + 0x10000 （见 UTF16DecodeSurrogatePair）。
• 属于 主要代理 或 尾代理 但又不属于 代理对 的码元，被解释为具有相同值的码点

String.prototype.normalize 能显式规范字符串值。String.prototype.localeCompare 在内部对String值进行规范化，但是在其运算时没有其他操作隐式地规范字符串。

注意：这种设计的基本原理是使Strings的实现尽可能简单和高性能。如果ECMAScript源文本为规范化格式C，保证字符串文字也可以规范化，只要它们不包含任何Unicode转义序列。

在该规范中，"the string-concatenation of A, B, ..."（其中每个参数是一个字符串值，一个码元或码元序列）表示字符串值是每个参数的码元 顺序的串联形成码元序列。

String 值

字符串值是基本值，它是零个或多个16位无符号 整数 值的有限有序序列。

注意：序列上的每个 整数 值通常表示UTF-16文本的一个单个16位单元。但是，ECMAScript对值没有任何限制或要求，只不过它们必须是16位无符号整数。

String 字面量

注意：字符串字面量是以单引号或双引号括起来的0个或多个 Unicode 码点。Unicode 码点也可以由转义序列表示。除结尾引号码点，U+005C（反斜杠），U+000D（回车符） 以及 U+000A（换行符） 外，所有码点都能以字符串形式显示。任何码点都能以转义序列的形式出现。字符串字面量的计算结果为ECMAScript字符串值。生成这些字符串值时，Unicode 码点按照 UTF16Encoding 中的定义进行UTF-16编码。属于 基本多文种平面 的码点被编码为字符串的单个代码单元。除此之外所有其它码点会被编码为字符串的两个代码单元。

疑问

"整数值(integer)"是什么意思？

规范中有说明：在本说明书中使用 integer 时，除非另有说明，否则是指 Number value 且它的数学值(mathematical value)在 整数集 中；在本说明书中使用数学整数(mathematical integer)时，是指在 整数集 中的数学值(mathematical value)。方便速记，integert 可以用来指代Number value或mathematical value中任何一个，用 t 来代替。

16位无符号是什么意思？

这里16位应该指的是16位二进制数；可以近似认为是 UTF-16编码。
16位无符号整数代表不区分正负，那么其能表示Math.pow(2, 16)个数，即65536个，从0开始即：

// 二进制
00000000 00000000 ~ 11111111 1111111
// 对标十进制
0 ~ 65535

最大长度为何是Math.pow(2, 53) -1，依据是什么？

其实这个问题答案在于问题1 integer。 integer 不管指代Number value还是mathematical value，都有个要求：mathematical value在整数集上。

什么是整数集？
所有整数组成的集合。

这就涉及到ECMAScript的Number类型了。而Number类型可表示的最大安全值是9007199254740991 即 Math.pow(2, 53) - 1。所以整数集中最大长度就是Math.pow(2, 53) - 1。

ECMAScript要求string value中的每个值都必须是16位无符号整数，可是正常来说string里面既可以是数字也可以是英语字母、中文以及其他语言甚至特殊字符，这些东西都满足16位无符号整数这个要求吗？或者问题可以改为string到底是Unicode还是ASCII编码？

这个问题其实我一开始完全不懂编码，我都不知道unicode和ASCII编码有什么关系？而且当时看规范很吃力，没办法就去知乎问了下，链接：https://www.zhihu.com/question/350713984

先看winter的回答，他说的很对，其实我对字符集这些东西根本就不懂，理解起来也乱七八糟。。。

注意：string没有值，它是字符串，由一个个字符组成，字符有码点，码点才是16位无符号整数。

要继续往下面理解，就必须先懂字符码点相关知识，所以可以先看下面的链接：
#47

结论是采用 Unicode字符集（正如规范中多次提到那样）。ecma402 comparestrings

问题来源

  记得第一次用vue开发项目时，曾经遇到过父组件调接口改变data里面的某个属性值并通过props传递给子组件，但是子组件并没有实时刷新的问题，当时试了下用watch监听，就解决了。当时初学，vue不怎么懂，更别说源码了，最近项目中又出现过一次这种情况，这就很奇怪了，我必须要解决这个问题。

示例：https://blog.csdn.net/d295968572/article/details/80810349 PS：这是网上其他人的问题，大致与我一样。

思考及查看源码

  根据我提出的问题，可以意识到，这种情况props传过来没有及时更新，但是watch监听却能获取到数据，那么watch与props之间有什么区别呢？官方文档也说父组件动态改变props值，子组件是能获取到的，但是我这里为何不行呢？

  根据上面问题，我先去查看关于props以及watch的源码，其实以前有阅读过watch源码，知道它最终会走defineReactive方法进行观察。但令我没想到的是，props最终也走这个方法。。。

  关于这两个初始化，可以去state.js里面找initProps和initWatch方法。

  再回顾一下initWatch方法，它内部调用了createWatcher方法（PS：computed初始化也走这个方法了），盖凡凡最终返回vm.$watch(expOrFn, handler, options)，而$watch就在下面stateMixin方法内，stateMixin在 instance/index.js 中执行。$watch里面执行了const watcher = new Watcher(vm, expOrFn, cb, options)这段代码，其实就是实例化了一个Watcher，

  然后Watcher里面调用get方法，get方法中调用pushTarget，pushTarget在dep.js里，对Dep.target赋值，接着继续看Watcher里面的get方法，这里直接value = this.getter.call(vm, vm)，最后return value了。这里就很奇怪，这样看下来根本没有涉及到依赖监听机制啊，按道理不对啊。

  而且，我们只会对props以及在data里面初始化（或者通过this.$set设置）的属性进行watch，但是这里并没有判断被watch的属性是否存在this实例上，也没有判断被watch的属性是不是observe的，难不成我随便瞎写一个属性进行watch也行？

看示例：

如上图，即使被watch的属性并不存在，watch也能执行，只是undefined罢了！

这只是其中的一个小插曲，回到问题上来。

那么，如何实现依赖监听的呢？由于有之前阅读源码的基础，我记得最终watch也是要执行defineReactive的，他在哪里执行的呢？

答案是initData和initProps里面，其中initData里面铁定调用observe进行观察，Observer中又会生成新的Dep实例，并通过walk方法执行defineReactive。

defineReactive里面又生成新的Dep实例，到了这个方法大家没差别，说明props传递进来的值改变也会通知其他依赖的，那么为何watch和computed能拿到异步调用接口的数据而props不行呢？

他们间的区别在哪呢？我觉得应该是Watcher区别，watch和computed都实例化了Watcher，但是props没有，网上都说可能接口获取到数值时，组件mounted以经执行完了，所以子组件获取不到。咋一听有点道理，这句话说得其实是对的。

我觉得可能分两种情况（都跟异步获取数据有关）：
1.子组件在mounted里面拿到props传值并赋值改变，如果父组件通过接口获取，但是拿到数据时子组件mounted已经执行完了，这时候不会再走mounted进行赋值了，所以发现页面是没变化，这是一个时机问题
2.不在mounted里面赋值，但是，编辑进入时，从媒体那边拿到数据的接口有时候非常慢，那么一进入页面第一视觉可能展示的是默认页面，这时候会误认为有问题，但是当接口获取到数据后页面变为正常，所以这里最好做一个loading效果以免错认为bug

但是watch和props的区别在哪里呢？（也可以认为是computed和data区别）
watch和data以及props最大的区别应该是当数据响应式改变时，watch能拿到新旧值，只要发生变化就会触发并拿到新旧值，而data和props只能被动接受值改变，当需要值改变时触发其他方法时，computed以及watch更合适。
例如最近做的易直投，腾讯这条线计划分为：普通计划、微信朋友圈和微信公众号计划，微信朋友圈和普通计划进入单元页对应的区域定向数据源也不一样，都需要通过接口拿到，而编辑进入单元时，首先需要调接口获取计划类型，然后在根据计划类型去获取数据源，这时候我只能通过computed或者watch监听去判断该调哪个接口获取数据。这里就需要watch的回调了。

具体可以看相关源码：

其实源码里面注释也说了，当被watch的值改变时，会提供回调。。。。。。

前情

  我终于把 曾探大佬写的《JavaScript设计模式与开发实践》看完了！！！哈哈哈哈哈，但是，我只记得发布订阅模式。。。其他的完全不会，所以要实践啊。然后，前两天项目中又要加新需求，我又要写if了，很气，大佬冬哥说我要好好用用设计模式，比如这个业务代码中的if...else完全可以用 策略模式 来搞！

所以，今天尝试了下并把实践过程记录下。

理论

定义

策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

看到这个定义，我不大懂，只不过我对 相互替换 这个词很感兴趣。有没有感觉跟if...else 条件判断很像？if...else 不也是相互可以替换（取代）的嘛。

如何实现？

书上原话：
  一个基于策略模式的程序至少由 两部分 组成。第一个部分是一组策略类，策略类封装了具体的算法（通俗点讲就是我们的业务代码，也就是对应if条件下的业务代码）并负责具体的计算过程。第二个部分是环境类Context，Context接受客户的请求，随后把请求委托给某一个策略类（相当于有个中介在负责派发任务）。要做到这点，说明Context中要维持对某个策略对象的引用。

牢记这些理论，接下来我要用到我的项目中了。

项目实践

背景

一个后台管理系统，大多是列表和与之对应的表单详情页，很常见的。本来没什么，但是列表页有新增、编辑、删除和查看按钮。

其实编辑和查看看到的东西是一样的，进来时都要带id，只是查看进来时，表单详情页需要把保存按钮隐藏掉。其实不难，通过vue-router跳转时加个isCheck参数来确定就好了，同样的，所有表单新建都会在url上带个'create'标识。所以一开始进入form表单的url有以下三种：

// 新建url
http://localhost:8088/#/consultationForm/create
// 编辑url
http://localhost:8088/#/consultationForm/1163054521232949250
// 查看url
http://localhost:8088/#/consultationForm/1163054521232949250?isCheck=true

但是，这个页面有点特别，它里面有个模块选择框，正常这个框的可选项基本都是后台接口返回的，也可以前台配置，这不是重点。

重点是，这个系统还对应一个小程序，小程序中有特定几个模块的功能页面，客户的意思是给特定的几个模块再单独弄几个菜单进行维护。

其实对后台来接口说，不需要动，只要前台画好特定几个模块的列表页，然后请求参数上各个模块写死对应的moduleFlag就好了。至于表单提交页，依然用原先维护所有模块的表单页，只是跳进来需要把模块标识也带进来并禁用不给选。那么url又增加一种情况：

// 运动模块编辑
http://localhost:8088/#/consultationForm/1163054521232949250?moduleFlag=sports

但是我很烦，为啥？

因为，又需要加参数，加判断，内心草泥马奔腾而过，但是又不得不写，然后跟东哥发牢*。东哥说这是我代码还没脱离if...else的境界，然后又点醒我策略模式可以优化。但是那天晚上我赶着提交，没有静下心来思考如何用策略模式重写，附上老代码：

this.$route.params.id !== 'create' && this.initData()
this.isCheck = this.$route.query.isCheck
if (this.$route.query.moduleFlag) {
  this.moduleFlag = this.$route.query.moduleFlag
  this.editFroms[2].value = this.moduleFlag
}

咋一看，好像也没多少条件嘛，但是，万一将来又有什么新需求呢？总不能一直在mounted里面继续加判断吧？

这个最好想个办法优化下代码，不为别的，起码让代码看起来舒服点，维护方便点吧。

趁着今天有点时间，我好好研究了下。翻开《JavaScript设计模式与开发实践》有关策略模式章节，仔细看了看，然后照着修改代码：

created () {
  this.useStrategy('id', this.$route.params.id)
  this.useStrategy('isCheck', this.$route.query.isCheck)
  this.moduleFlag = this.editFroms[2].value = this.useStrategy('moduleFlag', this.$route.query.moduleFlag)
  this.getModuleList()
},
mrthods: {
  /**
    * @description 策略模式应用实践
    */
  strategy () {
    return  {
      'id': (id) => { id !== 'create' && this.initData() },
      'isCheck': (isCheck) => { return !!isCheck },
      'moduleFlag': (moduleFlag) => { return moduleFlag || '' }
    }
  },
  /**
    * @description 使用策略模式
    */
  useStrategy (prop, val) {
    const strategies = this.strategy()
    return strategies[prop](val)
  },
}

总结

能用是能用了，但是我也只是照着书上代码去写，学到了 形，但是策略模式的意境可能还是需要不断实践加理解才行。

策略模式还可以用在表单校验上，不过书上后面介绍的装饰器模式感觉用在校验上更好，等我实践后再说。
不过还是比职责链好，虽然我写代码时把职责链也忘了，不过如果if判断较多，用职责链模式会形成长长的链，这样不好。

策略模式也存在一定的不足，它需要知道应该启用哪种策略？

比如我小程序中有个业务场景，根据接口返回的updateTime和当前时间进行比对，不超过60分钟的显示多少分钟前，超过1小时但是未超过24小时的显示多少小时前，超过1天但未超过3天的显示多少天前，超过3天的显示updateTime。

这个业务很蛋疼吧。。。但是没办法，就这样要求的

那么我肯定只会传递updateTime进来，如果用策略模式，我并不知道该去调用哪种策略，我不得不拿时间进行比对才能确定策略，这样还不如直接if...else。

这种业务的话，职责链模式可能更合适。所以编写代码时，更需要动动脑子，仔细想想，不能拘泥于特定模式。

起因

记得一周前一朋友跟我说forEach没法跳出循环，我当时没怎么在意这个问题，但是留了个心眼，等有机会去研究下。然后昨晚快下班的时候，一同事跑过来问我如何跳出forEach，我立马想到了之前朋友所说的问题，可是因为下班了且时间比较晚，所以劝他先用普通for循环，等到今天早上我在研究下。当我初步尝试时就发现我这js基础还是问题很大啊！

场景

同事做的项目会涉及到大量数据，他需要把数据拿过来然后判断是不是都符合某个条件，如果都符合才能进行下一步操作，一旦出现不符合的数据就要终止整个循环，也不应该进行下面的操作了，所以在这种场景下，跳出循环显得十分必要，都发现有不符合的了下面也没有操作的需要啦，这样一定程度能优化页面加载。

为什么一开始用forEach呢？

因为写代码要*。哈哈哈哈哈~

如果是普通for循环，如何做呢？(我js基础遭受打击了)

1.想当然的用return啊，结果：呵呵！

for (let i = 0; i < 3; i++) {
  console.log(110);
  if (i === 1) {
   return
  }
}

这段代码，我想当然的认为：i === 1时遇到return跳出循环，只会打印两次110，但是当我在控制台按下回车时，啪啪啪打脸啊，脸都打肿了，我还不知道为啥！直接报:Illegal return statement
excuse me? why? why treat me like this???(尼克扬的黑人问号脸脑补下！)

出问题了，那只能去百度或谷歌了。。。

一开始搜索 如何跳出js的for循环？

然后在 https://blog.csdn.net/fxss5201/article/details/52980138 找到了答案！

return语句就是用于指定函数返回的值。return语句只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误！

竟然还有这种限制，为何我以前怎么没发觉，仔细看了下以前的代码，貌似，我的for都是写在函数内的，所以没报错。。。

当然，为了保险点，又去MDN看了下return，果不其然，MDN上抬头就是一句：return语句终止函数的执行，并返回一个指定的值给函数调用者。

更保险的可以看ECMAScript® 2015 Language Specification return。规范里面也说了返回语句使函数停止执行，并将值返回给调用方。

2.既然return不是为for服务的，那么该怎么去跳出for循环呢？

想必基础牢固的同学们立马就能说出break和continute这两兄弟。不过我这种基础不扎实的学渣只能去百度以及看MDN和规范了，直接在MDN上找for，可能MDN觉得这种东西太简单了，直接用了示例就告诉我们break能跳出循环。

这里顺便带上ECMA规范里的for。

MDN上关于break的说明：break 语句中止当前循环，switch语句或label 语句，并把程序控制流转到紧接着被中止语句后面的语句。break可不仅仅是跳出循环这么简单哦~

一样的，顺带附上规范里的break。

for (let j = 0; j < 3; j++) {
  console.log(112);
  if (j === 1) {
    break;
  }
}

3.我在搜索的过程中，发现网上经常同时拿break和continue举例，用法大家肯定都很熟悉。试一下就知道了。

for (let j = 0; j < 3; j++) {
  if (j === 1) {
    continue;
  }
  console.log(j);
}

continue会跳出符合条件的当次循环，但是会继续执行接下来不符合条件的循环，说的有点绕了，大家结合代码自行理解。附上MDN continue以及规范中的continue。

以上就是关于跳出普通for循环的知识了，那么，接下来我得去看看为什么不能跳出forEach？

为什么不能跳出forEach？

1.先用break和continue分别测试一波，看看问题是否成立。

arr.forEach(function(item){
  if (item === 2) {
    break;
  }
  console.log(item);
})
arr.forEach(function(item){
  console.log(110)
  if (item === 2) {
    continue;
  }
  console.log(item);
})

控制台均报语法错误！！！尤其continue提示没有包含在一个迭代语句中！！！

why???

去看看MDN上面的forEach，其中明确提到：

没有办法中止或者跳出 forEach 循环，除了抛出一个异常。如果你需要这样，使用forEach()方法是错误的，你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件，且需要返回一个布尔值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。

同时，去看看规范里的forEach。貌似没有说为什么。那么怎么办呢？

回顾continue报错提示，需要被包含在迭代语句内，难道forEach不是迭代语句吗？它作用不就是遍历吗？抱着这些问题，我在规范的目录里走马观花的查看，突然发现这个Iteration Statements，这个目录名不就是continue要求的迭代语句嘛。

我点了下去，大致看了下，果然没有forEach，而且map，filter等都没有。。。

我有尝试去看v8关于forEach的源码实现，可惜并没有找到。。。

不过这里可以提供一个仿map方法的_map，本质上是一样的，只是侧重点不同，有些实现不同。我们平常这样使用：arr.forEach(function(){})，我们都是在function(){}中去做我们需要的操作，但是，forEach本质上就是一个函数，而我们写的函数其实是传递给它调用的回调函数！！！

所以，当我在回调函数内写了return，即使符合条件也只是跳出回调函数而已，并没有跳出调用它的forEach！

不理解的话看个简单例子，比较直观：

function a(i) {
  console.log(i);
  if(i === 1) {
    return
  }
}
function b(arr) {
  for(var i = 0; i < arr.length; i++) {
    a(i)
  }
}
var arr = [1,2,3,4,5]
b(arr)

当i === 1时，并没有跳出函数b！

总结下

由这一个小问题挖掘出这么多小知识也是不错的，有利于夯实js基础。以后遇到类似的业务场景时，该用普通for就用普通for吧，不要老想着*操作。当然，如果一定要*一把，可以抛异常：

let arr = [1, 2, 3]
arr.forEach(function(item){
  console.log(110)
  if (item === 2) {
    throw Object.create({'error': '不符合'})
  }
  console.log(item);
})

Null 类型

• 规范：null 值
• 规范：Null 字面量
• MDN —— 数据结构：Null
• MDN —— null

null
typeof null // "object" 
Object.prototype.toString.call(null) // "[object Null]"
Boolean(null) // false
!!null // false
Number(null) // 0
+null // 0
~null // -1
~~null // 0

1. 以上代码，类型转换可以详见 重学js —— 类型转换
2. 按位非 ~ 运算详见 重学js —— 一元运算符（delete/void/typeof/+/-/~/!）

Undefined 类型

• 规范：undefined 值
• 规范：全局对象上的 undefined 属性
• MDN —— Undefined
• MDN —— undefined

MDN上有这么一句话：undefined是全局对象的一个属性。也就是说，在浏览器环境下，它是 window 对象的属性，更是是一个全局变量！！！。

这是真的嘛？看图说话：

结合规范可知，全局对象上的 undefined 属性不可遍历，不可配置，也不可写！！！（据说远古时期，undefined 是可以被赋值改变的，好在现在没有这个坑了）

Undefined 与 Null 区别？

1. 类型不同，都属于js基本数据类型
2. 转为 Number 时值不同
3. 转为 Boolean 时相同
4. 转为 String 时不同
5. 转为 Object 时都是空对象
6. undefined 还是全局对象的属性，不可配置修改以及遍历
7. void 运算时会返回 undefined
8. 使用 var, let 声明的变量，未赋值情况下，默认初始值为 undefined
9. 如果函数没有显式的返回值，那么执行函数后打印输出 undefined
10. 函数形参，如果没有接收到值，默认为 undefined

通过代码表现看异同：

// 比较，类型不同
null == undefined // true
null === undefined // false

// typeof操作符
typeof null // 'object'  js中所有对象原型链的终点是 null
typeof undefined // 'undefined'

// Object.prototype.toString方法 涉及到js内置对象
// 可以看 https://github.com/lizhongzhen11/lizz-blog/issues/1
Object.prototype.toString.call(null) // '[object Null]'
Object.prototype.toString.call(undefined) // '[object Undefined]' 

// + 转换，转为 `Number` 时值不同
+null // 0
+undefined // NaN  注意!!!

// ~~ 转换
// 见 https://github.com/lizhongzhen11/lizz-blog/issues/72
~~null // 0
~~undefined // 0  注意!!!

// void操作
// 见 https://github.com/lizhongzhen11/lizz-blog/issues/72
void null // undefined

// 注意，未定义或未声明的变量，既不是null也不是undefined
a // Uncaught ReferenceError: a is not defined

function test(a){
    console.log(a);    // undefined
    return a;
}
test(); // undefined

如上最后的代码，直接打印变量a报错，但是作为函数参数，没有传参进去，会默认打印 undefined，这是为何呢？

a // 报错

function test(b) {
  console.log(b) // undefined
}
test() // undefined

function test2() {
  console.log(c) // 报错
}
test2() // 报错

如上test中，形参b到底算不算局部变量？如果算，那为何它可以不用声明就有默认的undefined值，反观a和c却报错呢？

网上不少文章认为形参b属于test函数的局部变量，会在test函数内部顶层声明，所以会打印undefined。
翻译成代码大致是这样：

function fun(b){
  var b
  b = arguments[0]
  console.log(b)
}

可以看：

• javascript 中的函数中的参数与局部变量的问题？
• 在函数中的形参是自由变量吗？——justjavac的回答

我仔细研究了下函数创建过程，生成 函数对象 时会有个 [[FormalParameters]] 内置插槽来保存形参，包括 [[Call]] 的内部算法，并没有看到具体形参赋值情况。

Boolean 类型

• 规范：Boolean 值
• 规范：Boolean object
• 规范：Boolean 字面量
• 规范：Boolean Objects
• MDN —— 数据结构：Boolean
• MDN —— Boolean
• 有关类型转换请看 ToBoolean
• MDN —— Falsy

Boolean(Boolean) // true  Boolean其实是个构造函数，属于对象！
new Boolean() // Boolean {false}
Object.getPrototypeOf(Boolean) === Function.prototype // true

// Boolean.prototype对象是内置的 %BooleanPrototype% 对象，它不是Boolean对象实例
// Boolean.prototype.toString 以及 Boolean.prototype.valueOf 依赖于实例的传值
new Boolean().toString() // 'false'
new Boolean(true).toString() // 'true' 
+[] // 0
Boolean([]) // true; []属于Object，直接返回true

前言

跟着读《webkit技术内幕》了解浏览器内核一，我对各大主流浏览器有了大致了解，通过图例对渲染过程也有了初步认知，接下来，我会跟着书去认识下webkit架构和模块。

问题

webkit内部是什么样的？或者说内部架构是什么样的？

还是看图，有些时候图比文字直观：

注意：

虚线框表示该部分模块在不同浏览器使用的WebKit内核中的实现是不一样的，也就是它们不是普遍共享的。

根据图中列出的模块一一说明下：

• 最下面的“操作系统”——WebKit可以在不同的操作系统上工作。
• 在“操作系统”层之上的就是WebKit赖以工作的众多第三方库，这些库是WebKit运行的基础。
• 在它们二者之上就是WebKit项目了，图中把它细分为两层，每层包含很多模块，图中略去了其中一些次要模块。这些模块支撑了网页加载和渲染过程。
• WebCore部分包含了目前被各个浏览器所使用的WebKit共享部分，这些都是加载和渲染网页的基础部分。
• JavaScriptCore引擎是WebKit中默认的JavaScript引擎。
• WebKit Ports指的是WebKit中非共享部分。
• 嵌入式编程接口，提供给浏览器调用的。图中有左右两个部分分别是狭义WebKit接口和WebKit2接口。因为接口与具体的移植有关，所以有一个与浏览器相关的绑定层。
• ...

那么WebKit源代码结构是什么样的呢？

看：https://github.com/WebKit/webkit ，开源代码库

注意：由于WebKit项目依然在发展，所以和书中的介绍会有点区别。

现在知道了WebKit的结构，那些基于WebKit内核的浏览器的结构是什么样的？

以Chromium为例，看图了解：

一样的，根据图例来大致了解下每个模块功能：

• Content模块和Content API，它们是Chromium对渲染网页功能的抽象（这里是指用来渲染网页内容的模块。PS：注意和WebKit区别）。
• Content模块和Content API将下面的渲染机制、安全机制和插件机制等隐藏起来，提供一个接口层。
• Chromium浏览器和Content Shell是构建在Content API之上的两个“浏览器”，Chromium具有浏览器完整的功能，也就是我们编译出来能看到的浏览器式样。而Content Shell是使用Content API来包装的一层简单的“壳”，它也是一个简单的“浏览器”，用户可以使用Content模块来渲染和显示网页内容。

Content模块渲染网页内容，可是WebKit本身不就是渲染网页的吗，为什么Blink里面有两个渲染网页的模块？？？

即使没有Content模块，浏览器开发者也可以在WebKit的Chromium移植上渲染网页内容，但是却没有办法获得沙箱模型、跨进程的GPU硬件加速机制、众多的HTML5功能，因为这些都是在Content层里实现的。

在了解了基本架构和模块功能后，我们肯定很好奇浏览器是如何将这些模块连接起来并正常运行的？整个运行过程是一条直直的流水线吗（单线进行？）？是不是所有的功能都是循序渐进依次进行的（同步？）？
...

随着了解的更多，产生的问题也更多！

整个运行过程是单线的？

我提出这种问题时，其实是基于js单线程这个特点来引申的。对于没有计算机基础的人来说，学习这些可能连问题提的都切不到要点，所以我只能用联想到的往上套。

根据多年上网经历，以前在网吧上网，打开某个网页，由于某些原因导致该页面崩溃了，随之而来的可能是其他所有页面都崩溃甚至浏览器也崩掉了，这种经历真的很令人气愤。但是，这也说明了，远古时期，浏览器确实是单进程的！

而现在，很多现代浏览器支持多进程模型，是多进程的！！！

什么是进程？什么是线程？

上面我引入了进程和线程这两个术语，建议如果和我一样是转行且没有计算机基础的人，有时间的话看《深入理解计算机系统》，补下基础。

引用《深入理解计算机系统》：

进程是操作系统对一个正在运行的程序的一种抽象。在一个系统上可以同时运行多个进程，而每个进程都好像在独占地使用硬件。而并发运行，则是说一个进程的指令和另一个进程的指令是交错执行的。在大多数系统中，需要运行的进程数是多于可以运行它们的CPU个数的。无论在单核还是多核系统中，一个CPU看上去都像是在并发地执行多个进程，这是通过处理器在进程间切换来实现的，操作系统实现这种交错执行的机制称为上下文切换。

多进程模型有什么好处？

至少3点好处：

1. 避免因单个页面的不响应或者崩溃而影响整个浏览器的稳定性，特别是对用户界面的影响。
2. 当第三方插件崩溃时不会影响页面或者浏览器的稳定性，这是因为第三方插件也被使用单独的进程来运行。
3. 它方便了安全模型的实施，也就是说沙箱模型是基于多进程架构的。（WebKit2也引入了多进程）

多进程由哪些进程组成呢？

Chromium最常用的多进程模型图例：

根据图例，分别解释下：

• Browser进程：浏览器的主进程，负责浏览器界面的显示，各个界面的管理，是所有其他类型进程的祖先，负责它们的创建和销毁等工作，有且仅有一个。
• Renderer进程：网页的渲染进程，负责页面的渲染工作，Blink/WebKit的渲染工作主要在这个进程中完成，可能有多个，Renderer进程数量和用户打开的网页数量并不一致。
• NPAPI进程：为NPAPI类型的插件而创建的。
• GPU进程：最多只有一个。当且仅当GPU硬件加速打开时才会被创建。主要用于对3D图形加速调用的实现。
• Pepper插件进程：同NPAPI进程，不同的是为Pepper插件而创建的进程。
• 其他类型的进程

Chromium的进程模型有哪些特点？

1. Browser进程和页面渲染是分开的，这保证了页面的渲染导致的崩溃不会导致浏览器主界面的崩溃。
2. 每个网页是独立的进程，这保证了页面之间相互不影响。
3. 插件进程也是独立的，插件本身的问题不会影响浏览器主界面和网页。
4. GPU硬件加速也是独立的。

Browser进程和Renderer进程是如何利用WebKit渲染网页的？

看图说话：

通过上述若干问题，有了些大致了解。那么，进程内部又是什么情况呢？如何在支持进程间通信的同时又能支持高效渲染或者用户事件响应？

答案是 多线程模型！

什么是多线程模型？

每个进程内部，都有很多的线程。

Chromium为什么要用多线程？

主要目的就是为了保持用户界面的高响应度，保证UI线程（Browser进程中的主线程）不会被任何其他费时的操作阻碍从而影响了对用户操作的响应。
而在Renderer进程中，Chromium则不让其他操作阻止渲染线程的快速执行。

能不能举个例子来大概说明一下多线程是如何工作的？

以IO操作来举例，看图：

根据图示来理解：

1. Browser进程收到用户的请求，首先由UI线程处理，而且将相应的任务转给IO线程，它随即将任务传递给Renderer线程。
2. Renderer进程的IO线程经过简单解释后交给渲染线程。渲染线程接受请求，加载网页并渲染，这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染。最后Renderer进程将结果由IO线程传递给Browser进程。
3. 最后，Browser进程接收到结果并将结果绘制出来。

那么，Chromium中的线程间如何通信和同步呢？

这是多线程领域中一个非常难缠的问题，因为这会造成死锁或者资源的竞争冲突等问题。

Chromium设计了一套机制来处理它们，那就死绝大多数场景使用事件和一种Chromium新创建的任务传递机制，仅在非用不可的情况下才使用锁或者线程安全对象。

待续

本篇介绍了WebKit架构和模块，以及了解了Chromium的多进程、多线程模型。尤其在多线程这块，还可以深入，引出很多问题，不过，这前提是我们对浏览器内部其他机制也有一定了解才能去深入。

读《webkit技术内幕》了解浏览器内核系列

1. 读《webkit技术内幕》了解浏览器内核一
2. 读《webkit技术内幕》了解浏览器内核二——内部架构
3. 读《webkit技术内幕》了解浏览器内核三——资源与网络栈
4. 读《webkit技术内幕》了解浏览器内核四——HTML、DOM以及CSS相关
5. 读《webkit技术内幕》了解浏览器内核五——渲染基础
6. 读《webkit技术内幕》了解浏览器内核六——硬件加速机制
7. 读《webkit技术内幕》了解浏览器内核七——js引擎

字符编码科普

字符编码系列——撒网要见鱼（必看）

刨根究底字符编码系列（最好看完）

UTF-8 往事

知乎ASCII话题

知乎Unicode话题

知乎字符编码话题

在了解之前，需要先懂一点计算机基础知识：

• 计算机中最小数据单位是 bit (也叫 位)。

• bit是信息量单位。二进制的一位，就叫做 1 bit。也就是说 bit 的含义就是二进制数中的一个数位，即 0 或者 1。因此，bit只有两种状态：0 和 1。

• 一般来说，n比特的信息量可以表现出 2的n次方 种选择。

• 计算机其实只能识别二进制代码，即 0 和 1。但是，计算机最小存储单位是 字节。同时，1字节 = 8位。即1字节可表示的二进制数范围：00000000 ~ 11111111，2的8次方即256种选择，对应十进制 0 ~ 255。一个字节能表示的最大的整数就是255。

附上二进制与十进制和十六进制之间的对应关系：

ASCII

ASCII是一种标准的 单字节 字符编码方案，用于基于文本的数据，而其码位是 00000000 ~ 01111111，即2的7次方共 128 个字符，0 ~ 127。（最大范围取决于1）

后面介绍的字符集，有的会兼容ASCII，所谓的兼容，其实就是保持其“编号不变”。

这也就导致了在js string比较字符串大小时，很多人往往会认为是按照ASCII排序来比较的。其实只是因为js string采用的字符编码兼容了ASCII码，但本质上应该是Unicode字符集才对(ES6之前是UCS-2，不过UCS-2又是UTF-16的子集)。

UCS 通用字符集

ISO发布的，后来与统一码联盟一起合作，UCS-2和Unicode兼容。

它有UCS-2和UCS-4两种格式，分别是2字节和4字节。

范围：UCS-4只是在UCS-2前面加了0×0000。

虽然现在两个项目仍都存在，并独立地公布各自的标准，但统一码联盟和ISO/IEC都同意保持两者的通用字符集相互兼容，并共同调整未来的任何扩展。

Unicode

由统一码联盟设计发布。

Unicode的知名度要比UCS知名度大得多，已成了全球统一的通用字符集或编码方案的代名词。并且在实践中，Unicode也要比UCS应用得更为广泛得多。因此，Unicode字符编码方案已经成为了全球统一字符编码方案事实上的标准。

Unicode是一个标准，只规定了某个字符应该对应哪一个code，但是并没有规定这个字符应该用几位字节来存储。规定用几个字节存储字符的是Unicode的不同实现，譬如UTF-8，UTF-16等。

UTF-8是Unicode的一种实现方式，是一种变长编码，根据不同的Unicode字符,用 1到6个字节 编码，完全兼容ASCII。目前，UTF-8几乎一统天下。（一般用二进制）

UTF-16编码方式有两种，范围应该在 U+0000 ~ U+FFFF ，对应二进制 00000000 00000000 ~ 11111111 11111111， 即2的16次方种选择，对应 0 ~ 65535 内的字符用 两个字节 表示，超过的用4个字节。不完全兼容ASCII(毕竟UTF-16最低也是2字节，而ASCII则是单字节的)

UTF-16是完全对应于 UCS-2 的，算是UCS-2的父集。UTF-16也可以表示UCS-4的部分字符，所以UTF-16也采用4个字节来存储Unicode。

在表示一个 UTF-16 的字符时，通常会用 U+ 然后紧接着一组十六进制的数字来表示这一个字符。例如 U+0000.

基本多文种平面 BMP

目前，Unicode字符集将所有字符按照使用上的频繁度划分为17个平面(Plane)，每个平面上的编号空间有2^16=65536个码点。

基本多文种平面也叫第零平面(Plane 0)，是17个平面中的第一个。编码从 U+0000至U+FFFF 。基本涵盖了当今世界上正在使用中的常用字符，平常用到的Unicode字符，一般都是位于BMP平面上的。

BMP平面以外其他的增补平面SP(Supplementary Plane，也称为辅助平面)要么用来表示一些非常特殊的字符(比如不常用的象形文字、远古时期的文字等)，且多半只有专家在历史和科学领域里才会用到它们；要么被留作扩展之用。

GB2312

GB是”国标”两字的拼音首字,2312是标准序号。

GB2312编码是第一个汉字编码国家标准，由**国家标准总局1980年发布，1981年5月1日开始使用。

采用双字节编码。

GBK

是对GB2312编码的扩展，因此完全兼容GB2312-80标准。采用双字节编码方案，其编码范围：8140－FEFE，剔除xx7F码位，共23940个码位。

BIG5

BIG5编码又称大五码，是繁体中文字符集编码标准

GB18030-2005

采用单字节、双字节和四字节三种方式对字符编码。兼容GBK和GB2312字符集。完全兼容ASCII码与GBK码。

主要看开头链接

理论

给对象动态地增加职责的方式称为装饰者模式

业务中的应用

我认为最佳实践就是表单校验。

最一开始，我这样写表单校验：

// 伪代码
if (条件) {
  console.log('不符合条件。。。')
  return false
}
if (条件) {
  console.log('不符合条件。。。')
  return false
}
...
ajax() // 提交

后来随着业务写多了，慢慢有点代码审美了，这种将校验和保存提交请求写在一个函数内部，简直垃圾的一笔！！！

一旦校验增加、变动就要去改内部代码，而且明显违反了单一职责原则。

我渐渐的，会将校验和提交分成两个函数来写了：

// 伪代码
validate () {
  if (条件) {
    console.log('不符合条件。。。')
    return false
  }
  ...
  return true
}
submit () {
  if (!validate()) {
     return
  }
  ajax()
}

但是，碰到复杂表单/校验较多的表单，validate函数内部依然会有一大堆if...else代码，然后可能这个函数达到数十行，还是十分垃圾，这里面可以结合之前学到的策略模式进行优化。

以前我只做到这一步，然后就没啥更好的想法了。但是，看书发现，还可以继续使用装饰者模式进行优化。

// 伪代码
Function.prototype.before = function (beforeFn) {
  let self = this
  return function () {
    if (beforeFn.apply(this, arguments)) {
      return self.apply(this, arguments)
    }
    return 
  }
}
function validate () {
  if (条件) {
    console.log('不符合条件。。。')
    return false
  }
  ...
  return true
}
function submit () {
  ajax()
}
submit = submit.before(validate)

不污染原型的写法：

function before (func, beforeFunc) {
  return function () {
    if (beforeFunc.apply(this, arguments)) {
      retrurn func.apply(this, arguments)
    }
    return
  }
}
let res = before(submit, validate)
res()

理解散列表

散列表到底是什么？

其实以前或多或少接触过这个名词，但是抱歉，我真不知道它是什么？它干嘛用的？写这篇文章时，我还特地去百度百科上看了下：

散列表（Hash table，也叫哈希表），是根据关键码值(Key value)而直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表。

还是有点饶人吧，但是抓下重点：存放记录的数组叫做散列表。数组？也就是说散列表本质还是数组！并且，散列表就是哈希表！

可以简单地把散列表定义为：使用散列函数和数组创建了一种数据结构。

散列表有什么用？

在散列表上插入、删除和取用数据都非常快，但是对于查找操作来说却效率低下，比如查找一组数据中的最大值和最小值。查找的这些操作得求助其它数据结构，二叉查找树就是一个很好的选择。

案例介绍：https://cxyxiaowu.com/articles/2019/04/08/1554728305261.html#b3_solo_h3_6

如何去实现散列表结构？

从上可知，实现散列表结构首先得有个对应的散列函数。

同时，还需要考虑：散列表中的数组究竟应该有多大？这是编写散列函数时必须要考虑的。
对数组大小常见的限制是：数组长度应该是一个质数。

为什么数组长度应该是一个质数？

首先，散列函数的选择依赖于键值的数据类型。如果键是整型，最简单的散列函数就是以数组的长度对键取余。假设数组长度是10，而键值刚好都是10的倍数时，对键取余后会出现大量冲突，没有起到散列效果，不合理。

如何选择散列函数？

1. 如果像上文一样，键值是整型，直接用数组长度对键取余，这种方法被称为除留余数法。
2. 但是再很多应用中，键是字符串类型，选择散列函数相对较难。由于是初级入门版本，可以选择将字符串中每个字符的ASCII码值相加来实现散列函数。这样散列值就是ASCII码值的和除以数组长度的余数。

实现代码(来自书上)：

// 散列表
function HashTable () {
  this.table = new Array(137);
  this.simpleHash = simpleHash;
  this.showDistro = showDistro;
  this.put = put
}
// 散列函数
function simpleHash (data) {
  let total = 0;
  for (let i = 0; i < data.length; ++i) {
    total += data.charCodeAt(i);
  }
  return total % this.table.length;
}
// 插入方法
function put (data) {
  let pos = this.simpleHash(data); // 获取散列值
  this.table[pos] = data;
}
function showDistro () {
  let n = 0;
  for (let i = 0; i < this.table.length; i++) {
    if (this.table[i] !== undefined) {
      console.log(i + ': ' + this.table[i])
    }
  }
}
// 测试
let someNames = ['David', 'Jennifer', 'Donnie', 'Raymond', 'Cynthia', 'Mike', 'Clayton', 'Danny', 'Jonathan']
let hashTable = new HashTable()
for (let i = 0; i < someNames.length; i++) {
  hashTable.put(someNames[i])
}
hashTable.showDistro()

// 结果
35: Cynthia
45: Clayton
57: Donnie
77: David
95: Danny
116: Mike
132: Jennifer
134: Jonathan

存在的问题

上述代码示例中，数组中明明有9条数据，但是只打印出8条，这是为何呢？

改写下simpleHash函数：

function simpleHash (data) {
  let total = 0;
  for (let i = 0; i < data.length; ++i) {
    total += data.charCodeAt(i);
  }
  console.log('Hash value: ' + data + ' -> ' + total);
  return total % this.table.length;
}

然后再次运行得到如下结果：

Hash value: David -> 488
Hash value: Jennifer -> 817
Hash value: Donnie -> 605
Hash value: Raymond -> 730
Hash value: Cynthia -> 720
Hash value: Mike -> 390
Hash value: Clayton -> 730
Hash value: Danny -> 506
Hash value: Jonathan -> 819

从结果可知，Raymond 和 Clayton 两的散列值一样，这就形成了冲突(碰撞)，说明目前的散列函数并不完美，需要改善以避免碰撞。不过这章不讲，待下面更新。

2019-12-06 更新

说来惭愧，时隔半年，我居然给忘了，居然一时想不起来怎么写了。。。
不过这次愣是没有看任何文章，自己在本地慢慢猜想+代码实践勉强写出来了，代码和经历在：utils/on.js 里

啰嗦几句

  由于自己体质不强加上之前一直加班，结果查出了一种病，为了自己的未来，想想还是从南京撤了。不值得，一年也就挣那么点钱。。。5.2号回来的，在家玩了一个月的梦幻西游了，真好玩！
  接下来可能会去扬州市区找工作，目前只会开发，能找个不加班的就好，找不到的话也许在镇上厂里找个文职类工作了。自己有注册个小工作室，只是没有接单来源，考虑自身实力不够硬，尤其是后端数据库那块，如果自己一个人独立开发完整项目是不行的，目前了解到扬州基本上在招前后端都能写的，有点小凉。。。
  不管接下来干什么，技术这块还是不能随意丢弃的，买了很多书都没看呢，所以现在要求自己早上看书，下午才能玩游戏，哈哈。
  《JavaScript设计模式与开发实践》这本书还是很棒的，发布-订阅模式其实开发中经常遇到，不过大多都是人家封装好的，难得静下心来去研究研究，之前面试蚂蚁金服时就要求我手写，可惜菜啊，不会啊，今天早上把书上内容看完，然后自己凭着理解去写、实践，还是有点小收获的，满满的自豪感~~~

附上代码

var Subscribe = (function () {
  let subscriber = {}, // 缓存订阅者和它订阅的信息类型;
      listen, // 添加订阅者
      publish, // 发布数据
      remove // 移除订阅

  /**
   * @param {key} 订阅的信息类型
   * @param {fn} 订阅者的回调函数
   * @description 添加订阅者(订阅事件)
   */
  listen = function (key, fn) {
    if (!subscriber[key]) {
      subscriber[key] = []
    }
    subscriber[key].push(fn)
  }

  /**
   * @description 发布执行 
   */
  publish = function () {
    let key = Array.prototype.shift.call(arguments), // 得到订阅的信息类型
        fns = subscriber[key] // 对应的订阅回调函数
    // 没有对应的订阅事件
    if (!fns) {
      return false
    }
    // 对该订阅类型下的回调函数全部派发执行
    for (let i = 0, fn; fn = fns[i++];) {
      fn.apply(this, arguments)
    }
  }

  /**
   * @param {key} 订阅类型/标识
   * @param {fn} 需要移除的订阅回调函数
   * @description 删除订阅
   */
  remove = function (key, fn) {
    let fns = subscriber[key] // 对应的订阅回调函数集合
    if (!fns) {
      return false
    }
    // 没有指定要移除的订阅回调函数，则将对应类型下的回调函数全部移除
    if (!fn) {
      fns.length = 0
    } else {
    // 指定了需要移除的订阅回调函数
      for (let i = 0; i < fns.length; i++) {
        if (fns[i] === fn) {
          fns.splice(i, 1)
        }
      }  
    }
  }

  return {
    subscriber: subscriber,
    listen: listen,
    publish: publish,
    remove: remove
  }
})()

Subscribe.listen('a', function (data) {
  console.log('a: ' + data)
})

Subscribe.publish('a', 20000)

终于来到心心念念的js引擎篇了。
js引擎很复杂！很重要！

书中主要介绍的是JavaScriptCore引擎和V8引擎.

首先，怎么理解js是动态类型语言？

有动态就有静态。动态和静态语言的主要区别在于编译过程。

以java为例，java是静态类型语言，java声明一个类以及里面的变量是这样的：

public class Test {
  public int num;
}

也就是当java开发者在写一个类时，这个类里面所有的变量、方法等都已经确定好了类型，那么java编译时就不需要再去进行类型判断了。所以说java是静态类型语言。

而js则恰恰相反，js写的很爽，根本不需要去考虑所谓的类型声明，写的时候起飞，但是当真正项目运行时，不得不对各种类型转换小心再小心。js编译时，js引擎必须要对每行代码中的每个变量、方法去进行类型判断。(虽然目前有了TypeScript，不过这并不是规范，只是微软开发的超集，但是却让js开发书写的更加规范)

那么js的运行效率比之java如何呢？

仅仅根据动静态类型来分析，一般情况下js运行效率会比java低很多。
（各大引擎都会对js编译运行进行各种优化的）

为什么说js运行效率会比不过静态类型的java？

示例：

public int add(int a, int b) {
  return a + b
}

以这段代码为例，首先 int占4个字节，上述代码其实就是 a的内存地址+4个字节，这些是在生成本地代码时候就确定了。根据这些信息就能生成相应的汇编代码。

而传统的js解释器，所有这一切都是解释执行的，所以效率不会高到哪去。不管是解释器还是更为高效的 JIT(Just-In-Time) 技术，面临的难题都是类型问题。

上面提到了更为高效的JIT技术，它是什么？为何更高效？

首先，它不是一项新技术，其作用是解决解释性语言的性能问题，主要**是当解释器将源代码解释成内部表示的时候(java字节码就是一个典型例子)，JavaScript的执行环境不仅是解释这些内部表示，而且 将其中一些字节码（使用效率高的）转成本地代码（汇编代码），这样可以被CPU直接执行，而不是解释执行，从而极大地提高性能。

经过上面了解，回到本篇中心——js引擎

什么是js引擎呢？

简单来讲，能将js代码处理并执行的运行环境。
PS：要理解这一概念，需要了解一些编译原理的基础概念和现代语言需要的一些新编译技术。

js引擎解析js代码的步骤是什么呢？

早期：js源代码——抽象语法树（AST）——解释器解释执行
引入JIT后看图（不同的引擎选择的方法不同，所以总体来看很复杂）

从上图所知，js引擎应该包括哪些部分？

• 编译器：源代码——抽象语法树（某些引擎中还会将抽象语法树转成字节码）
• 解释器：主要接收字节码，解释执行这些字节码，同时依赖垃圾回收机制等
• JIT工具：字节码 / 抽象语法树——本地代码（汇编代码）
• 垃圾回收器和分析工具：垃圾回收和收集引擎中的信息，帮助改善引擎的性能和功效

js引擎和渲染引擎是什么关系？

从模块上看，它们彼此独立，负责不同的事情；
js引擎提供调用接口给渲染引擎，以便让渲染引擎使用js引擎来处理js代码并获取结果。
js引擎需要能够访问渲染引擎构建的DOM树，所以js引擎通常需要提供桥接的接口，而渲染引擎则根据桥接接口来提供让js访问DOM的能力。
看图

注意：两种引擎通过桥接接口来访问DOM结构，这对性能来说是一个重大的损失，因为每次js代码访问DOM都需要通过复杂和低效的桥接接口来完成（毕竟js是单线程的）

什么是V8引擎？

V8是一个开源的js引擎项目，github地址：https://github.com/v8/v8 。
一开始是由一些语言方面的专家设计出来的，后来被Google收购，目前是js引擎和众多相关技术的引领者。
目的就是为了 提高性能。

为了提高js执行效率，甚至采用直接将js编译成本地汇编代码的方式。

想了解v8的代码的，建议阅读include和src文件夹。

V8提供了哪些应用程序编程接口（API）呢？

主要在include/v8.h中。

• 各种基础类：对象引用类、基本数据类型类和js对象。都是基础的抽象类，具体实现在src/objects中
• Value：所有js数据和对象的基类
• V8数据的句柄类：以上数据类型的对象在V8中有不同的生命周期，需要是用句柄来描述它们的生命周期，以及垃圾回收器如何使用句柄来管理这些数据
• Isolate：V8引擎实例
• Context：执行上下文，包含内置的对象和方法
• Extension：扩展类
• Handle：句柄类，管理基础数据和对象，以便垃圾回收器操作
• Script：表示被编译过的js源代码，V8内部表示
• HandleScope：包含一组Handle的容器类
• FunctionTemplate：绑定C++函数到js。例如将js接口的C++实现绑定到js引擎中
• ObjectTemplate：绑定C++对象到js。典型应用Chromium中将DOM节点通过该模板包装成js对象

js引擎的工作原理是什么？

主要分为以下几个部分：

• 数据表示
• 工作过程
• 优化回滚
• 隐藏类和内嵌缓存
• 内存管理
• 快照

V8中怎么进行数据表示的？

分成两个部分：

• 数据的实际内容
• 数据的句柄。

V8需要进行垃圾回收，并需要移动这些数据内容，如果直接使用指针（引用）的话就会出现问题或者需要比较大的开销，使用句柄的话就不会存在这些问题，只需要将句柄中的指针修改即可，使用者使用的还是句柄，它本身没有发生变化。

一个Handle对象大小是4字节（32位系统）或8字节（64位系统），而在JavaScriptCore引擎中使用8个字节来表示数据的句柄。
看图

V8的工作过程是什么样的？

两个阶段：先编译后执行。

V8有个非常重要的特点就是 延迟**，很多js代码直到运行时被调用才会进行编译，这样会减少时间开销。

编译过程

看下V8引擎处理源代码到本地代码的过程图：

V8不同于JavaSrciptCore在于，V8并不将抽象语法树变成字节码或其他中间表示，而是通过JIT编译器的全代码生成器(full code generator)从抽象语法树直接生成本地代码。
这样做主要是因为减少抽象语法树到字节码的转换时间。

V8编译js生成本地代码主要使用了以下类：

• Script：表示js代码，既包含源代码，又包含编译后生成的本地代码，所以既是编译入口，又是运行入口
• Compiler：编译器类，辅助Script类来编译生成代码，它主要起一个协调者的作用，会调用解释器（Parser）来生成抽象语法树和全代码生成器，来为抽象语法树生成本地代码
• Parser：将源代码解释并构建成抽象语法树，使用AstNodeFactory类来创建它们，并使用Zone类来分配内存
• AstNode：抽象语法树节点类，是其他所有节点的基类
• AstVisitor：抽象语法树的访问者类，基于著名的设计模式Visitor来设计，主要用来遍历异构的抽象语法树
• FullCodeGenerator：AstVisitor类的子类，通过遍历抽象语法树来js生成本地可执行代码（不同平台不同实现）

根据上面类的描述，大致总结这样一个编译js代码的过程：
Script类调用Compiler类的Compiler函数为其生成本地代码。在该函数中，第一，它使用Parser类来生成抽象语法树；第二，使用FullCodeGenerator类遍历生成的抽象语法树从而生成本地代码。

根据前面的 延迟**，事实上，js中很多函数是没有被编译生成本地代码的。因为js代码编译之前需要构建一个运行环境，所以实际上在编译前，V8引擎会构建众多全局对象并加载一些内置的库，如math库等。

V8在生成本地代码后，为了性能考虑，通过数据分析器（Profiler）来采集一些信息，以帮助决策哪些本地代码需要优化，以生成效率更高的本地代码。同时，V8还有一种机制，也就是当发现优化后的代码性能其实并没有提高甚至还有所降低，那么V8能够退回到原来的代码。

执行过程

看下运行阶段的主要类：

• Script：同上
• Execution：辅助类，包含一些重要的函数，例如Call函数
• JSFunction：需要执行的js函数表示类
• Runtime：运行本地代码的辅助类。提供运行时各种各样的辅助函数，包括但不限于属性访问、类型转换、编译、算术、位操作、比较、正则表达式等。
• Heap：运行本地代码需要使用的内存堆
• MarkCompactCollector：垃圾回收机制的主要实现类
• SweeperThread：负责垃圾回收的线程

简单说下执行过程：
第一，延迟编译。
  也就是 CompileLazy 函数的调用，根据需要编译和生成这些本地代码的时候，实际上也是在使用编译阶段那些类和操作。在V8中，函数是一个基本单位。当某个js函数被调用时，属于该函数的本地代码就会生成。具体的工作方式是V8查找该函数是否已经生成本地代码，如果已经生成，直接调用。否则，V8会触发生成本地代码，目的是为了节约时间，减少去处理那些使用不到的代码的时间。

第二，运行时构建js对象，需要Runtime类来辅助，并需要从Heap类分配内存。

第三，获取对象属性，借助Runtime类中的辅助函数完成。

什么是优化回滚？

由于V8为了优化性能，引入了更为高效的 Crankshaft编译器。该编译器通常会做出比较乐观和大胆的预测，它会认为一些代码比较稳定，变量类型不会变化，所以能生成高效的本地代码。但是一旦某些变量类型改变了，就不得不使用一种机制来将它做的这些错误决定回滚到之前的一般情况，这个过程就是 优化回滚。
这个操作非常不好，尽量避免。

什么是隐藏类？

V8使用 类和偏移位置**，将本来需要通过字符串匹配来查找属性值的算法改进为使用类似C++编译器的偏移位置的机制来实现，这就是 隐藏类（Hidden Class）。
隐藏类将对象划分为不同的组，对于相同的组，也就是该组内对象拥有相同的属性名和属性值的情况，将这些属性名和对应的偏移位置保存在一个隐藏类中，组内所有对象共享该信息。同时，也可以识别属性不同的对象。

看代码和表格理解：

function ABC(x, y) {
  this.x = x;
  this.y = y;
}
var a = new ABC(1, 1);
var b = new ABC(2, 2);

代码又是如何使用这些隐藏类来高效访问对象属性的呢（内嵌缓存）？

如果变量类型在很多情况下不变的话，那么会引入 内嵌缓存，它可以避免方法和属性被存取的时候出现的因哈希表查找而带来的问题。该机制的基本**是将使用之前查找的结果缓存起来，也就是说V8可以将之前查找的隐藏类和偏移值保存下来。

V8如何进行内存管理的？

分为以下两点来了解：

1. 内存划分
2. 垃圾回收机制

内存划分主要依赖于 Zone类 以及 堆。

首先看Zone类，它主要管理一系列的小块内存。如果用户想使用一系列的小内存，并且这些小内存的生命周期类似，这时可以使用一个Zone对象，这些小内存都是从Zone对象中申请的。

Zone对象先自己申请一款内存，然后管理和分配一些小内存。当一块小内存被分配后，不能被Zone回收，只能一次性回收Zone分配的所有小块内存。
例如，在构建抽象语法树之后，生成本地代码，然后抽象语法树的内存在这之后被一次性全部回收，效率非常高。
缺点就是，如果一个过程需要很多内存，那么Zone就需要分配大量的内存，但是又不能释放，会导致系统出现需要过多的内存而引起内存不够的情况。

其次看堆。V8使用堆来管理js使用的数据、生成的代码、哈希表等，为了更方便的实现垃圾回收，同很多虚拟机一样，V8将堆分成三个部分：

1. 年轻分代：主要为新创建的对象分配内存，较容易回收。
2. 年老分代：根据年老的对象、指针、代码等数据使用的内存，较少回收
3. 为大对象保留的空间：为需要使用较多内存的大对象分配。每个页面只分配一个。

什么是快照？

快照机制就是将内置对象和函数加载后的内存保存并序列化。

JavaScriptCore与V8有多少不同？

其实不同点主要在编译阶段，之前讲过，它会生成中间字节码，然后才会生成本地代码，而V8不需要，因为这个特点，所以又引入了一些其他机制来优化。

暂告结束

拓展

JavaScript 为什么快——第一篇？（共三篇）

读《webkit技术内幕》了解浏览器内核系列

1. 读《webkit技术内幕》了解浏览器内核一
2. 读《webkit技术内幕》了解浏览器内核二——内部架构
3. 读《webkit技术内幕》了解浏览器内核三——资源与网络栈
4. 读《webkit技术内幕》了解浏览器内核四——HTML、DOM以及CSS相关
5. 读《webkit技术内幕》了解浏览器内核五——渲染基础
6. 读《webkit技术内幕》了解浏览器内核六——硬件加速机制
7. 读《webkit技术内幕》了解浏览器内核七——js引擎

起因

同事今早得到通知，需要对用户输入进行校验，不能输入一些特定的字符，其中包含\。同事在思考以及百度良久后，依然没找到解决方案，遂发到群里请大家一起帮忙，我处于好奇便试了下，发现里面还是有点内容的。

过程

chrome控制台直接输入测试

我一开始的测试用例：

/\\/.test('a\b') // false

是的，直接false，这我就很奇怪了，不是说单个\代表转义，需要两个\去匹配吗，怎么不行呢？

想不通，便去segmentfault上搜索，果然看到个答案：https://segmentfault.com/q/1010000005967122
按照链接所说，\不计入string的长度，我在浏览器中测试了下：

let str = 'a\c'
str.length // 2
str // 'ac'

？？？这好奇怪啊？？？我不理解，先是搜索了会，最终又去规范里面找了下，找到了解释：
http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.4.1 或者 http://www.ecma-international.org/ecma-262/6.0/#sec-regexp-constructor 中的note那段话：

如果模式是StringLiteral.，则在由RegExp处理String之前执行通常的转义序列替换。如果模式必须包含要由RegExp识别的转义序列，则必须在StringLiteral内转义任何反斜杠字符，以防止在形成StringLiteral的内容时删除它们。

上面那段话理解起来就是StringLiteral模式下，包含转义字符的先尝试转义再匹配正则，无法转义的会将转义字符删掉！！！

这下就理解了，以前还真不知道呢。

input输入测试 2018-12-18补充

我依然对这个问题抱有一点疑问，如果用户真的在input中输入了a\之类的，怎么匹配？？？
以前貌似也没在意过这个问题啊。
不死心的我写了个简单的测试：

<!doctype>
<html lang="en">
<head>  
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
  <title>input</title>
</head>
<body>  
<input type="text" id="input" oninput="listen(event)" onporpertychange="listen(event)">  
<script>    
let input = document.getElementById('input')    
let val    
function listen (e) {     
  console.log(e) 
  console.log(input.value) 
  val = input.value 
  console.log('val', val) 
  console.log('val type', typeof val) 
  console.log(val.length) 
  console.log(val.indexOf('\\'))    
  console.log(/\\/.test(val))    
}  
</script>
</body>
</html>

然后我在input中输入a\，天哪！！！没有任何错误且能正常匹配！！！
what？？？
怎么回事？？？

接下来几乎一天都耗在这个问题上了。。。
主要一直在查规范，奈何本人英语较挫，勉强看看。

先看：https://www.w3.org/TR/html5/sec-forms.html#the-input-element 这个链接，规范中关于input元素的内容。
在上面链接中我注意到value属性标注的是DOMString类型，以前也有看过，以为就是string所以没在意，这次得去查查了。
然后找到规范中关于DOMString的内容：https://heycam.github.io/webidl/#es-DOMString
最后又去MDN上找了下：https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString
就说了这么一段话：
DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String。

总结

我怀疑可能就是因为这个DOMString映射为String时，将用户输入的单个\给转义了，因为在我的测试中，/\\/.test()是能够匹配用户输入的 a\ 中的斜杠的，与直接在浏览器控制台写string字面量有所区别。
1.input输入时，/\\/.test()是能够匹配输入的单个''的；
2.直接在浏览器控制台输入string字符串时，以单个''结尾直接报错，这里应该是StringLiteral模式了，所以符合规范的定义。

啰嗦

  在家蹉跎一段时间，终于找到工作了，扬州真互联网荒漠，不过幸运的是居然在隔壁镇上找到java开发工作，虽然技术很老旧，我都不会的那种，好在同事之间互帮互助。就这样先在农村蛰伏，养好身体，当然，技术这里不能荒废，还是要学的。
  目前最大的问题就是学习效率极度低下。比如《es6入门》，前后看了不下5遍，常用的不看都能记住，不怎么用的比如generator还有async/await等较新的api总是忘记怎么玩，太菜了。不过每次看都有收获吧。
  《JavaScript设计模式与开发实践》这书也有整一个月没看了，今天拾起来继续攻读，收获颇丰，这个职责链模式真的让我这个代码质量极差的人耳目一新！

搬运工

  书上写的很棒了，我简要讲下，并搬运过来，主要警示我以后写业务代码的时候，多动点脑子，写出那种赏心悦目、维护性高的代码。
  职责链模式其实有点链式传递的意思，在js中，比如作用域链、原型链都有它的身影。简要概括就是：一个请求有多个对象来处理，这些对象是一条链，但具体由哪个对象来处理，根据条件判断来确定，如果不能处理会传递给该链中的下一个对象，直到有对象处理它为止。责任链模式将请求和处理分离开来，进行解耦。

考虑下面场景：电商平台做活动，比如付定金预购某商品得到优惠券，500元定金可以得到100优惠券，200元定金可以得到50元优惠券，优惠券直接当钱用，而不买优惠券就原价购买商品，原价购买商品受库存影响。这是个十足的业务需求，我很可能会写出类似书上的那种许多if...else的糟糕代码，然后被队友疯狂吐槽：

// orderType： 订单类型；1--花500买的优惠券；2--花200买的优惠券；3--原价购买
// stock：库存剩余数量，已买优惠券的不受此限制
if (orderType === 1) {
  console.log('付了500元定金，得到100优惠券')
}
if (orderType === 2) {
  console.log('付了200元定金，得到50优惠券')
}
if (orderType === 3 && stock > 0) {
  console.log('原价购买')
}

咋一看，好像3个if判断没问题，业务的确解决了，但是电商业务是经常变化的！我这里直接考虑的是用户下单付了定金的情况，如果像书上那样存在下单不付钱的情况呢？
我是不是要继续加判断？
如果优惠券是限量的，用户下单但没付款呢，我是不是还得加判断？
随着判断越来越多，这段代码将变得非常难看，甚至直接影响心情！
那我该怎么办？

利用职责链模式来重构代码！
第一版

var order500 = function(orderType, stock) {
  if (orderType === 1) {
    console.log('付了500元定金，得到100优惠券')
  } else {
    order200(orderType, stock)
  }
}

var order200 = function(orderType, stock) {
  if (orderType === 2) {
    console.log('付了200元定金，得到50优惠券')
  } else {
    orderNormal(orderType, stock)
  }
}

var orderNormal = function(orderType, stock) {
  if (stock > 0) {
    console.log('普通购买，无优惠券')
  } else {
    console.log('库存不足')
  }
}

第一版代码将每种情况封装成函数，根据业务区调用相应的函数即可，即使特定业务条件修改，也只需要修改函数内部判断，比之前一堆if连在一起好看得多。
不过，这种方法也存在缺陷，用书上的话讲，传递请求的代码被耦合在了业务函数中，违反了开放——封闭原则。如果以后增加300元预定或者去掉200元预定，也需要改动较多。那么这条职责链会变得非常不稳固！

如何改进？看看第二版：

var order500 = function(orderType, stock) {
  if (orderType === 1) {
    console.log('付了500元定金，得到100优惠券')
  } else {
    return 'nextSuccessor'
  }
}

var order200 = function(orderType, stock) {
  if (orderType === 2) {
    console.log('付了200元定金，得到50优惠券')
  } else {
    return 'nextSuccessor'
  }
}

var orderNormal = function(orderType, stock) {
  if (stock > 0) {
    console.log('普通购买，无优惠券')
  } else {
    console.log('库存不足')
  }
}

var Chain = function (fn) {
  this.fn = fn;
  this.successor = null;
}

Chain.prototype.setNextSuccessor = function (successor) {
  this.successor = successor
}

Chain.prototype.passRequest = function () {
  var ret = this.fn.apply(this, arguments);
  if (ret === 'nextSuccessor') {
    return this.successor && this.successor.passRequest.apply(this.successor, arguments)
  }
  return ret
}
// 分别包装成职责链节点
var chainOrder500 = new Chain(order500);
var chainOrder200 = new Chain(order200);
var chainOrderNormal = new Chain(orderNormal);
// 指定职责链顺序
chainOrder500.setNextSuccessor(chainOrder200);
chainOrder200.setNextSuccessor(chainOrderNormal);
// 传递请求
chainOrder500.passRequest(1, 500); // 付了500元定金，得到100优惠券
chainOrder500.passRequest(2, 500); // 付了200元定金，得到50优惠券
chainOrder500.passRequest(3, 500); // 普通购买，无优惠券
chainOrder500.passRequest(3, 0); // 库存不足

通过改进，我们可以自由灵活地增加、移除和修改链中的节点顺序，可维护性更高！

以上代码来自书中，我仅仅将其搬运过来，方便日常查找。

职责链模式也存在一定的弊端，首先不能保证请求一定会被链中节点处理，其次过长的职责链也会带来性能损耗。

回味

其实对于这个模式，我业务中还没有实践，所以只停留在理论上，不过它很适合已知参数但是未知参数值的if...else判断

前言

当前端开发一段时间后，接触到的知识越来越多，同时带来的疑问也会越来越多。

比如 事件循环，我看过不少相关文章，讲的有好有坏，但是都会提到 主线程 等名词，当时我就很好奇，这个主线程是什么？（我不是科班出身，对这个还真是一窍不通）

我还看到 js是单线程的 这类知识，那么是不是浏览器就只有一个主线程？

而网页一般除了js文件，肯定还有css和html文件，它们也是和js一样用主线程处理的嘛？
...

以上很多问题，在一年多前真的困扰着我。

浏览器对我而言就是一个黑盒，我只会用点皮毛，我对里面的运行机制很困惑（并不是求知欲，只是非科班出身的我感到惶恐不安，感到自己真的菜，一种焦虑吧），当时我不断去搜索相关知识，终于找到篇不错的博客，是一位阿里大佬写的，当时我看完真的是豁然开朗，虽然我不知道他讲的对不对，但是他的博客确实让我学到了东西，奉上他博客链接：

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

虽然我当时真的认认真真看完那篇博客，但还是有很多知识点我不懂，不熟。

也是在一年前，我偶然发现了这本《webkit技术内幕》，我立马淘宝下单买了，然后吃灰一年，今年回老家，时间较为充足，然后只用了一周将这本书大致翻了一遍，如果你问我记住什么，我会说很多没记住，不是书不好，只是个人学习能力问题。

所以，特地开issue，靠着上周翻书及所画的一些知识点，记录下来，方便自己对webkit内核运行机制理解。

这本书，是作者研究了webkit项目源码，以及结合浏览器实际表现所总结的，非常值得一看。书中涉及到很多源码的类名，这些不需要死记硬背，只需要大致了解进程之间如何通信，线程之间如何通信，是不是所有资源都在同一进程中执行等等问题。

接下来，我会以问题的方式来记录。

1. webkit是什么？

webkit是由美国苹果公司开源的项目，它是Safari浏览器的内核！

2. 浏览器内核又是什么？

在浏览器中，有一个最重要的模块，它主要的作用是将页面转变成可视化（准确讲还要加上可听化）的图像结果，这就是浏览器内核。通常，它也被称为渲染引擎。

3. 我们或许听过谷歌浏览器/nodejs的v8引擎，它是渲染引擎嘛？它和webkit是什么关系？

v8不是渲染引擎，v8是js引擎，它是用来编译和执行s代码的！！！

4. 是不是所有浏览器的渲染引擎都用webkit内核？js引擎都用v8引擎？

不是。

4.1 Safari浏览器

webkit内核一开始是苹果公司Safari浏览器在用。
相应的js引擎是JavaScriptCore。

4.2 谷歌旗下的浏览器

js引擎是v8。

google以webkit为基础，创建了一个新项目：Chromium，该项目的目标是创建一个快速的、支持众多操作系统的浏览器。

google又在Chromium基础上，开发了Chrome浏览器。

后来，谷歌又在webkit基础上进行改版，创建了Blink内核，目前Chrome和Chromium用的都是Blink内核

注意：Chrome和Chromium都是浏览器，Chromium可以看作是Chrome的先行版(开源试验场)，Chromium会尝试很多创新并且大胆的技术，当这些技术稳定之后，Chrome才会把它们集成进来。

4.3 微软旗下的浏览器

js引擎是Jscript和Chakra(IE9及以上)

window装机必备的IE浏览器用的是微软自研的Trident内核。不过，微软已经停止对IE的迭代更新了，开发了新的浏览器 Edge，使用的也是新研发的 EdgeHTML内核，不过，微软也宣布将会换成Chromium/Blink内核

4.4 firefox浏览器

火狐使用的是自研的Gecko内核和SpiderMonkey js引擎。

4.5 国内的浏览器

由于历史原因，国内很多浏览器一开始用的是IE Trident内核，后来，很多浏览器又开始集成其他类似webkit等内核，也就是双核浏览器。

5. 内核内部是什么样的？它包含哪些内容？

看图列：

虚线框住的是渲染引擎提供的功能

6. Blink内核和webkit内核有什么区别吗？

区别还是不少的，Google希望未来在Blink中加入很多新技术，列出书中提到的：

1. 实现跨进程的iframe。为iframe创建一个单独的沙箱进程。
2. 重新整理和修改WebKit关于网络方面的架构和接口。
3. 更为胆大更为激进的想法就是将DOM树引入JavaScript引擎中。
4. 针对各种技术的性能优化，包括但是不限于图形、JavaScript引擎、内存使用、编译的二进制文件大小等。

7.webkit如何渲染网页？

7.1 加载和渲染

按照一些文档分析，包含两个过程：

1. 网页加载过程，就是从URL到构建DOM树；
2. 网页渲染过程，从DOM树到生成可视化图像。

这两个过程会交叉，很难给与明确的区分，所以统称为网页的渲染过程。

7.2 webkit渲染过程

较为完整的图例：

书中给出的图例

具体过程如下：

1. 用户输入URL，webkit调用其资源加载器加载该URL对应的网页；
2. 加载器依赖网络模块建立连接，发送请求并接收答复；
3. webkit接收到各种网页或者资源的数据，其中某些资源可能是同步或异步获取的；
4. 网页被交给HTML解释器转变成一系列的词语（Token）;
5. 解释器根据词语构建节点（Node）,形成DOM树；
6. 如果节点是js代码，调用js引擎解释并执行；
7. js代码可能会修改DOM树结构
8. 如果节点依赖其他资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；如果是js资源URL（没有标记异步方式），则需要停止当前DOM树的创建，直到js的资源加载并被js引擎执行后才继续DOM树的创建。

7.3 了解渲染过程后，你知道DOMContentLoaded和onload有区别吗？

有区别！

看渲染过程以及从变量名就该知道，DOMContentLoaded发生在DOM树构建成功后，请注意，DOM树此时并没有和style结合生成Render树，而onload官方说明是网页所有资源加载完成后才会触发，而网页上会有很多资源是异步加载的，异步加载的资源不会阻碍DOM树的构建，所以onload一般在DOMContentLoaded后面执行。

DOMContentLoad和onload触发时间图例：

7.4 从渲染过程图可知，DOM树会和Style树结合成Render树，然后才会绘制最终展示，那么它们如何结合的呢？

简单点讲分为下面步骤：

1. CSS文件被CSS解释器解释成内部表示结构；
2. CSS解释器工作完之后，在DOM树上附加解释后的样式信息，这就是RenderObject树；
3. RenderObject节点在创建的同时，webkit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。

这里附上书中的图例：

RenderObject树的建立并不表示DOM树会被销毁，事实上，上述图中的四个内部表示结构一直存在，直到网页被销毁，因为它们对于网页的渲染起了非常大的作用。

读《webkit技术内幕》了解浏览器内核系列

1. 读《webkit技术内幕》了解浏览器内核一
2. 读《webkit技术内幕》了解浏览器内核二——内部架构
3. 读《webkit技术内幕》了解浏览器内核三——资源与网络栈
4. 读《webkit技术内幕》了解浏览器内核四——HTML、DOM以及CSS相关
5. 读《webkit技术内幕》了解浏览器内核五——渲染基础
6. 读《webkit技术内幕》了解浏览器内核六——硬件加速机制
7. 读《webkit技术内幕》了解浏览器内核七——js引擎

起因

最近项目不忙，就自己继续跟着那位滴滴前辈的vue源码分析去看vue源码，不得不说，滴滴前辈真的厉害！今天看到https://ustbhuangyi.github.io/vue-analysis/reactive/reactive-object.html#proxy 这里时，没有第一时间理解，然后自己在控制台尝试去输出才恍然大悟，自己还是菜。。。

利用Object.defineProperty去实现数据代理

这里对应vue源码里的 instance/state.js 中的proxy函数，根据滴滴前辈的分析，这里通过调用proxy函数把每一个值 vm._data.xxx 都代理到 vm.xxx 上；

我一开始看了下代码，根据我的理解，读写vm.xxx时的确是读写vm._data.xxx，但是读写vm._data.xxx的同时也会代理到vm.xxx上我就不理解了，既然光看代码不理解，咱就动手吧。

在chrome控制台测试：

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: function () {},
  set: function () {}
}

function proxy (target, sourceKey, key) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

let obj = {
  a: {
    a1: 1
  }
}
proxy(obj, 'a', 'a1')
obj // {a: {a1: 1}, a1: 1}
obj.a.a1 = 2
obj // {a: {a1: 2}, a1: 2}