哪有多奇怪

响应式 数据响应式的目标：当响应式数据对象本身或属性发生变化时，会运行一些函数，比如 render 函数。 Vue 响应式的实现上，具体依赖几个模块： Observer Dep Watcher Scheduler 该几个模块的实现都在 Vue2 源码的 ./src/core/observer 中。 Observer 一个数据在 Vue 中想变成响应式数据，只需要调用一个函数 observe 即可，该函数会将数组和对象变成响应式。 但是具体功能的实现依赖 Observer，Observer 是一个类，它和每一个被观察的对象相关联，每一个响应式数据都对应着一个 Observer 实例，可以通过 __ob__ 属性访问到该实例。 observe 的实现比较简单，对需要实现响应式的数据构造一个 Observer 实例即可： 123456789function observe(value: any): Observer | void { let ob: Observer | void; if (hasOwn(value, "__ob__") && ...

computed 实现原理 computed 依赖响应式数据，所以在实现的时候必然需要用到 Watcher，Vue2 会给实例对象创建一个 _computedWatchers 属性，跟该实例中 computed 对应的 Watcher 实例都会被保存在该数组中。 computed 的特点： 在没有使用到 computed 的时候，不会运行 computed 的 getter 在改变 computed 所依赖的响应式数据的时候，不会立即更新 computed 的值，一切都要等到使用 computed 的时候 由于 computed 的特点，处理 computed 的 Watcher 实例有些特殊，处理的非常巧妙。 它具有一个 lazy 属性，用于标识这是一个 lazy watcher，同时也会具有一个属性 dirty 标识数据是否是脏数据，watcher 的 value 属性表示该计算属性的值。 在实例化该 Watcher 时，传递的 options 是一个极其简单的配置 { lazy: true }，dirty 初始值等于 lazy，表明是一个脏数据，因为 v ...

history history 是一个用于提供类似浏览器 history 对象实现页面的无刷新跳转的库，该库是 react-router 的核心依赖。 history 库提供的功能： 三种 history：browserHistory、hashHistory、memoryHistory，提供相应的 create 函数并保持统一的 api 支持发布/订阅，当 URL 发生改变的时候，会发布订阅 提供跳转拦截、跳转确认和 basename 等功能 一个 history 对象所具有的属性： 12345678910111213const history = { length, action, location:, createHref, push, replace, go, goBack, goForward, block, listen} length：历史记录堆栈的长度，实现也非常简单就是 (globalHistory = window.history).length action：表示当前页面是 ...

创建 DOM 树 DOM（文档对象模型）是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 HTML 解析器将 HTML 文件解析为 DOM 树，DOM 树的根节点是 Document 对象。 DOM 与 HTML 之间几乎是一一对应的关系，但 DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修改，HTML 本质上就是字符串。 样式计算 样式计算阶段的目的是为了计算出 DOM 节点中每个元素的具体样式（计算样式） 需要完成的步骤： 把 CSS 转换为浏览器能够理解的结构，便于后序的查询和修改（可以称其为 CSSOM） 通过 document.styleSheets 可以得到页面上所有 link 和 style 所定义的样式表（styleSheets 类型） 将样式表中的属性值标准化，由于 CSS 中的写法多样，所以需要转换为统一的值。 使用 CSS 规则计算出 DOM 树中每个节点的具体样式，通过 DevTools 的 computed 部分可以看到具体信息 布局 有 DOM ...

多进程架构 浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。 渲染进程：负责渲染页面，Blink 和 V8 都运行在该进程的主线程上，渲染进程都是运行在沙箱模式下。 GPU 进程：负责和 CPU 通信，GPU 的使用初衷是为了实现 3D CSS 的效果，随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后 Chrome 在其多进程架构上也引入了 GPU 进程。 网络进程：主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，但现在成为一个单独的进程。 插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。 沙箱模式：沙箱模式就是让该进程对于操作系统的某些权限受到限制，例如读取文件。 Chrome 默认策略：每个标签对应一个渲染进程，但是相同站点的页面会分配同一个渲染进程。官方把这个默认策略叫 process-per-site-instance。 这种策略的好处： 对于不同站点的页面，一个页面崩溃不会影响其他的页面 对 ...