0x1461A0

响应式 数据响应式的目标：当响应式数据对象本身或属性发生变化时，会运行一些函数，比如 render 函数。 Vue 响应式的实现上，具体依赖几个模块： Observer Dep Watcher Scheduler 该几个模块的实现都在 Vue2 源码的 ./src/core/observer 中。 Observer 让一个对象变成响应式数据只需要调用 observe 方法即可，当然了只有 object 类型的数据可以实现响应式 该方法的核心逻辑十分简单： 123456789101112function observe (value: any): Observer | void { if (!isObject(value)) { return } let ob: Observer | void if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__ } else ...

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，表明是一个脏数据，因为 va ...

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 ...

浏览器架构 没有关于如何构建 Web 浏览器的标准规范，一种浏览器的方法可能与另一种完全不同。 单进程 在 2007 年之前，市面上浏览器都是单进程的，单进程浏览器的所有功能模块都运行在同一个进程的不同线程里 单进程浏览器存在的问题： 不稳定：一个线程的意外崩溃会引起整个浏览器进程的崩溃 不流畅：所有页面的渲染、JavaScript 执行以及插件都运行在同一个线程中，这就意味着同一时刻只能有一个模块可以执行 不安全：插件可以使用 C/C++ 等代码编写，通过插件可以获取到操作系统的任意资源 多进程 2008 年 Chrome 发布时的进程架构： https://static001.geekbang.org/resource/image/cd/60/cdc9215e6c6377fc965b7fac8c3ec960.png 每个页面都运行在单独的渲染进程中的，同时页面里的插件也是运行在单独的插件进程之中，进程之间通过 IPC 机制进行通信 Chrome 最新的进程架构： 浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。 渲染进程：负责渲染页面，Blink ...

同构渲染 同构渲染是实现 SSR 的一种方式 同构的概念最早是angular2在beat版中提出来的(2016年)， 那时叫angular isomorphism，是一个类似于草案的策略， 是为了解决angular 1.x时代的SPA首屏慢及SEO问题而提出的 同构渲染加入一个中间层的概念，中间层从后端接过渲染的逻辑，首次渲染时使用 Node.js 生成 HTML，后续客户端交互包括当前页路由切换直接在客户端完成。一般来说同构渲染是介于前后端中的共有部分 同构的核心是客户端和服务端共用一套渲染代码， 服务端需要使用可以识别 javascript 的引擎 一套代码在服务器上运行一遍，得到完整的页面结构，到达浏览器又运行一遍，注册事件让页面可交互 入口 实现同构渲染需要在服务端运行组件代码生成 HTML 字符串，客户端运行组件代码对已有的 DOM 注册事件 服务端使用 renderToString 可以将组件树渲染成 HTML 字符串 客户端使用 hydrate 在服务器渲染的容器中对 HTML 的内容进行水合操作 因为客户端需要运行 JavaScript 进行注水，所以服务 ...

数字证书 无论是对称加密还是非对称加密，甚至是对称加密和非对称加密组合，都存在中间人攻击 这是因为无法保证接收到的秘钥是可信的，为了实现安全传输，服务器就需要能够证明自己的身份，使得公钥可信 所以就需要借助第三方权威机构 CA （数字证书认证机构），服务器需要向 CA 申请证书，只要证书是可信的，公钥就是可信的。 申请证书 在申请证书时，需要提供一些网站的基础信息以及最重要的服务器的公钥 CA 会将通过审核的信息使用 Hash 算法将这些数据生成信息摘要 接着将信息摘要通过 CA 机构自己的私钥进行加密生成数字签名 最后将数字证书和网站所提供的的信息组装成一个数字签名颁发给网站 验证证书 在客户端和服务器建立 HTTPS 连接的过程中，首先会向服务器请求数字证书进行验证。 会验证证书的有效期、证书是否被 CA 吊销、证书是否由合法 CA 机构颁发，当然重点就是验证证书的合法性。 验证证书的过程和加密 CA 生成证书的过程类似： 客户端利用证书中网站的信息（公钥 + 基础信息）计算出信息摘要 利用 CA 的公钥来解密证书中的数字签名，得到原始的信息摘要 通过判断这两个信息摘 ...

定长传输 发送 HTTP 消息时如果能够确定包体的全部长度，我们一般会使用 Content-Length 指明包体长度 Content-Length 使用 10 进制数，指明的是请求包体中的字节数 12345678910111213import { createServer } from 'net'const server = createServer((socket) => { socket.on('data', () => { socket.write('HTTP/1.1 200 OK\r\n') socket.write('Content-Length: 11\r\n') socket.write('\r\n') socket.write('hello world\r\n') socket.write('\r\n') })})serve ...