内存图与JS世界

1. 浏览器

• 浏览器功能：发起请求，下载HTML，解析HTML，下载CSS，解析CSS，渲染界面，下载JS，解析JS，执行JS等

• 浏览器功能模块：用户界面，渲染引擎，JS引擎，存储等

• 渲染：把HTML、CSS解析出来并显示到屏幕上

• JS渲染需要跨线程通信，这也是DOM操作慢的原因

2. JS引擎

2.1 JS引擎的功能

• 编译：把JS代码翻译为机器能执行的字节码或机器码

• 优化：改写代码，使其更高效

• 执行：执行上面的字节码或机器码

• 垃圾：把JS用完的内存回收，方便以后再次使用

2.2 执行JS代码的准备工作

提供API：window/document/setTimeout

以上都不是JS自身具备的功能，我们称其为运行环境（runtime env）

3. 内存图

3.1 JS代码在内存中运行（以下红色区域）

红色区域分为Stack栈和Heap堆

• Stack区：每个数据顺序存放，非对象（数字、字符串、布尔值等）存储于此
• Heap区：每个数据随机存放，对象（数组、函数等）储存于此

3.2 window内存图

浏览器提供window，并且以下对象挂在window上，可以随意调用：

console，document，Object，Array，Function

注意：

window变量和window对象是两个东西，前者是一个存放window对象的地址的容器，后者是数据

4. 原型链

xxx.prototype存储了xxx对象的共同属性，这就是原型。原型可以让开发者无需重复声明共有属性，省代码省内存

每个对象都有一个隐藏属性(__proto__)指向原型

prototype和__proto__都存着原型的地址，但前者挂在函数上，后者挂在每个新生成的对象上。