2020-12-11 内存图和JS世界

1. 操作系统常识

(1) 开机

• 操作系统在C盘
• 按下开机键将使主板通电，读取固件
• 固件是固定在主板上的存储设备，里面写死了开机程序
• 开机程序会讲文件里的操作系统加载到内存中运行

(2) 操作系统（Operating System）

• 加载操作系统内核
• 启动初始进程，PID编号为1
• 初始进程启动其他系统服务进程：文件、安全、网络
• 用户输入密码登录/ssh登录
• 登录后运行shell，用户可以与操作系统交互

(3) 运行Chrome

• 启动Chrome为主进程
• 不同的服务(Tab)开启不同子进程（辅助进程）
• 查看Chrome任务管理器：shift + esc

(4) 浏览器功能

• 发起请求
• 下载 + 解析 HTML
• 下载 + 解析 CSS
• 渲染界面：合并HTML和CSS
• 下载 + 解析 + 执行 JavaScript
• 功能模块（多线程并行 + 线程通信 -> DOM操作慢）：用户界面、渲染引擎、JS引擎、存储等

---

2. JS引擎

(1) JS引擎举例

• Chrome - V8引擎 C++编写
• 网景/Firefox - SpiderMonkey C++
• Safari - JavaScriptCore
• IE - Chakra(JScript9)
• Edge - Chakra(JavaScript)
• Node.js - V8引擎

(2) JS引擎功能

• 编译：JS代码 -> 字节码/机器码
• 优化：改写代码，提高效率
• 执行：执行对应的字节码/机器码
• 垃圾回收（析构）：回收JS用完的内存

(3) 执行JS代码

• JS代码在内存运行
• runtime env: 提供API（window/document/setTimeout）
• 一旦把JS放入页面，就开始执行JS

---

3. 内存图

内存瓜分.png

• OS和应用程序各自瓜分部分内存
• 应用程序如Chrome中Tab子进程中内存由渲染线程、用户界面、JS引擎瓜分
• 其中JS引擎内存主要由四个区域瓜分：代码区、变量名存储区、Stack（栈区->顺序存放）、Heap（堆区->随机存放）瓜分，后两者是数据存储区
• 基本数据类型存Stack区；对象（包括数组和函数）将地址存Stack区，内容存Heap区（随时修改对象，存Stack区低效）
• 浅复制（等号）复制地址，深复制（.copy）复制内容并分配新的地址

---

4. 早期JS

(1) JS提供内容

• window
• console
• document
• Object
• Array
• function

(2) 为什么把对象都挂window上？

A：可直接使用对象，方便，window自己存在地址#90
可以console.dir()打出对象的所有属性

window对象.png

(3) 关于window

• window 变量存放window 对象的地址，window对象存放在Heap区
• 同理 内存地址:数据，如console和console对象，Object和Object对象

---

5. 原型链（Prototype）

• 所有实例共享对象的共同属性，类似继承的关系
• 当对象调用函数时，先检查自己是否有该函数，再检查原型
  
  原型链内存示意图.png

(1) 原理

• 生成一个Obj（实例化）时会附带一个隐藏属性__proto__存储window.Object.prototype的地址，此时：

> var obj = {};
> obj.toString === window.Object.prototype.toString;
> true

• 生成一个Array（实例化）时会附带一个隐藏属性__proto__存储window.Array.prototype的地址，此时：

> var a = [1, 2, 3];
> obj.push=== window.Array.prototype.push;
> true

• 修改实例对象的prototype属性不会影响其他实例对象的prototype属性（两层reference），除非浅复制

(2) prototype和__proto__的区别与联系

• 两者存储相同的地址
• prototype是对象原型的属性，proto是对象实例的属性