Vue2响应式原理
响应式
数据响应式的目标:当响应式数据对象本身或属性发生变化时,会运行一些函数,比如 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__") && ...
Vue2响应式数据处理
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 ...
react-router核心原理
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。
这种策略的好处:
对于不同站点的页面,一个页面崩溃不会影响其他的页面
对 ...







