内存图与JS世界

213 阅读3分钟

操作系统常识

一切都运行在内存里

  • 开机

    操作系统在C盘里(macOS在根目录下多个目录里)

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

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

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

  • 操作系统(以Linux为例)

    首先加载操作系统内核

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

    启动系统服务:文件、安全、联网

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

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

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

打开浏览器

  • chrome.exe

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

开启Chrome进程,作为主进程

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

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

  • 浏览器的功能

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

功能模块: 用户界面、渲染引擎、JS引擎、存储等

上面功能模块一般处于不同的线程(比进程更小)

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

把HTML和CSS结合起来显示到屏幕上这一过程称为渲染

JS引擎

  • JS引擎举例

Chrome用的是V8引擎,C++编写

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

Safari用的是JavaScriptCore

IE用的是Chakra(JScript9)

Edge用的是Chakra(JavaScript)

Node.js用的是V8引擎

  • 主要功能

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

优化: 改写代码,使其更高效

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

垃圾回收:把JS用完的内存回收,方便之后再次使用

一旦把JS放进页面,就开始执行JS,JS代码在内存中运行

内存图

红色区域

  • 作用

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

红色区域并不存变量名,变量名在不知什么区

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

上图的区域并不完整,还没画出调用栈、任务队列等区域

  • Stack 和 Heap

红色区域分为Stack栈和Heap堆

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

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

Stack 和 Heap举例

var a = 1 
var b = a
var person = {name:'fuck',child:{name:'jack'}}
var person2 = person
  • 规律

数据分两种: 非对象 和 对象

非对象都存在 Stack 对象都存在Heap

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

window用内存图画出来

原型链

var obj = {}
obj.toString()

为什么不报错?为什么可以运行

  • obj有个隐藏属性

  • 隐藏属性储存了Object.prototype对象的地址

  • obj.toString() 发现obj上没有toString就去隐藏属性对应的对象找于是就找到了Object.prototype.toSring

  • 一层可以篡改 两层不会

  • XXX.prototype存储了XXX对象的共同属性 这就是原型,原型让你无需重复声明共有属性 省代码,省内存。每个对象都有隐藏属性指向原型(对象)

  • prototype和_proto__的区别就是都存着原型的地址,只不过prototype挂在函数上, ___protto__挂在每个新生成的对象上