JS 运行

一切都运行在内存里

• 操作系统在 C 盘里

• 当你按下开机键，主板通电，开始读取固件

• 固件就是固定在主板上的存储设备，里面有开机程序

• 开机程序会将文件里的操作系统加载到内存中运行

• 首先加载操作系统的内核

• 然后启动初始化进程， 编号为 1， 每个进程都有编号

• 启动系统服务： 文件， 安全， 联网

• 等待用户登录： 输入密码登录/ssh 登录

• 登录后， 运行 shell， 用户就可以和操作系统对话了

• bash 是一种 shell, 图形化界面可以认为是一种 shell

打开浏览器

• 你双击 Chrome 图标，就会运行 chrome.exe 文件

• 开启 Chrome 进程，作为主进程

• 主进程会开启一些辅助进程，如网络服务，GPU 加速

• 你每新建一个网页，就有可能开启一个子进程

• 发起请求， 下载 HTML , 解析 HTML， 下载 CSS，解析 CSS, 渲染界面， 下载 JS， 解析 JS，执行 JS 等

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

• 上面功能模块一般处于不同的线程（比进程更小）

• 如果进程是车间，那么线程就是车间里的流水线

• JS 是单线程的，一个页面只能开一个渲染引擎和 JS 引擎

• 如果 JS 引擎需要去修改 HTML 或者 CSS，他不能直接修改，他要通过线程之间的通信通知渲染引擎 ，这个操作叫做跨线程通信。

• 由于跨线程通信肯定比线程内慢一点，所以这就是为什么 DOM 操作慢

JS 引擎

JS 引擎举例

• Chrome 用的是 V8 引擎，C++编写

• 网景用的是 SpiderMonkey, 后被 Firefox 使用，C++

• Safari 用的是 JavaScriptCore

• IE 用的是 Chakra(JScript9)

• Edge 用的是 Chakra(JavaScript)

• Node.js 用的是 V8 引擎

主要功能

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

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

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

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

执行 JS 代码

• 提供 API：window/document/setTimeout

• 上面这些东西都不是 JS 自身具备的功能

• 我们将这些功能称为运行环境 runtime env

• 一旦把 JS 放进页面，就开始执行 JS

• JS 代码在哪里运行？

• 答：内存

内存图

瓜分内存

• 红色区域专门用来存放数据

• 红色区域并不存变量，变量在绿色区域

• 每种浏览器的分配规则并不一样

• 上图的区域并不完整

• 红色区域分为 Stack 栈和 Heap 堆

• Stack 区特点：每个数据顺序存放

• Heap 区特点：每个数据随机存放

Stack 和 Heap 举例

• 数据分两种： 非对象和对象

• 非对象都存在 Stack

• 对象都存在 Heap

• =号总是会把右边的东西复制到左边（不存在什么传值和传址）

JS 世界

JS 开天辟地

• 于是就有了 console,并且挂到 window 上

• 于是就有了 document,并且挂到 window 上

• 于是就有了 Object， 并且挂到 window 上

• var person = {} 等价于 var person = new Object()

• 于是就有了 Array， 并且挂到 window 上

• var a =[1, 2 , 3]等价于 var a =new Array（1,2,3）

• 于是就有了 Function, 并且挂到 window 上

• function f(){}等价于 var f =new Function()

window 内存图

关于 window

• window 变量和 window 对象是两个东西

• window 变量是一个容器，存放 window 对象的地址

• window 对象是 Heap 里的一坨数据

• 不信的话，可以让 var x=window, 那么这个 x 就指向了 window 对象，window 变量可以去死了

• console 和 coosole 对象不是同一个东西

• Object 和 Object 函数对象不是同一个东西

• 前者是内存地址，后者是内存