内存图和JS世界

流莉呀
310 阅读3分钟

操作系统常识

一切都在内存里

1.png

  • 主板通电，读取固件，开机，操作系统加载到内存中运行

打开浏览器

chrome.exe

  • 双击Chrome图标，就会运行Chrome.exe

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

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

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

浏览器的功能

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

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

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

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

  • 注意：渲染页面：把HTML和CSS放在屏幕上叫做引擎。解析的意思是理解，读取它的意思。执行是让它产生效果。

  • 注意： 一个页面会开一个渲染线程和一个JS线程，JS是单线程的。若JS引擎想要修改渲染引擎，则需要跨线程通信。（DOM操作慢）

2.png

JS引擎

现在JS引擎暂时默认是V8引擎，其他不讨论

主要功能

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

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

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

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

执行JS代码

准备工作

  • 提供API：window / document / setTimeout

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

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

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

JS代码在哪里运行？

  • 内存

内存图

瓜分内存

3.png

红色区域

作用

  • 红色专门用来存放数据，我们目前只研究该区域

  • 红色区域并不存变量名，变量名在[不知道什么区]

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

  • 上图的区域并不完整，还有[调用栈]，[任务队列]等区域没有画

Stack和Heap

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

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

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

规律

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

  • 非对象都存在Stack区（数字，字符串，布尔都是非对象）

  • 对象都存在Heap区（数组，函数都是对象）

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

window浏览器

还要有什么

要有console

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

要有document

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

要有对象

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

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

要有数组（一种特殊的对象）

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

var a = [1,2,3] 等价于 var a = new Array(1,2,3)

要有函数（一种特殊的对象）

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

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

  • 注意：后者是正规写法，但是没有人用；前者是不正规写法，但是好用。

为什么都挂在window上

  • 因为方便，挂在window上的东西可以在任何地方直接用

window的内存图

4.png

5.png

  • 如何知道函数的数据结构？ 答：console.dir(window.Object)

  • 注意：如何第一个字母大写（Object，Array，Funtion），就有prototype属性

细节

6.png

原型链

8.png

7.png

9.png

  • 原型让你无需重复声明共有属性：省代码，省内存

  • 每个对象都有一个隐藏属性：指向原型（对象），这个隐藏属性叫做__ proto__。

  • prototype和__proto__区别是什么

  • 都存着原型的地址，只不过prototype挂在函数上，__ proto__挂在每个新生成的对象上。

10.png

avatar
文章
阅读
粉丝