JS基础--内存图与JS世界

浏览器功能

浏览器的如何打开一个网页？

1.发起请求

2.下载HTML，解析HTML

3.下载CSS，解析CSS

4.渲染界面。把不同的内容结合起来，展示在屏幕上称作渲染；通常浏览器的渲染主要指的是HTML和CSS两种内容的结合。

5.下载JS，解析JS，执行JS

6.等…

浏览器的功能模块

功能模块：即具有不同功能的模块。
1.用户界面：浏览器界面不仅仅只有一个网页窗口，这些都与用户界面的功能。
2.渲染引擎：解析HTML、CSS并渲染到网页窗口的功能模块。
3.JS引擎：解析JS，执行JS的功能模块。不同浏览器因为用的JS引擎并不一样，所以使用效果也会有差别。
4.功能模块，一般处于不同的线程，线程是进程x还小一级的单位。一般来说线程后面没有更小的单位了。所以这也解释了一句话 “JS是单线程的” 。

5.在写JS的过程中，以往我们通常都使用DOM来修改页面元素，但是由于DOM涉及到线程通信，JS引擎通过线程通信来传递信息给渲染引擎再次渲染页面，比较耗费时间效率低。这就是 DOM操作慢 的原因。
JS引擎
各主流浏览器的JS引擎
1.Chrome使用V8引擎，C++编写。C++语言性能极强，这也是V8引擎极快的原因之一。
2.网景使用的是SpiderMonkey，C++编写，Firfox也仍在使用这个引擎。
3.Safari使用的是JavaScriptCore。
4.IE使用的JScript9，后更名为Chakra（查克拉）。
5.Edge期初使用的仍是Chakra，后改用V8引擎。这一决定也许会让Edge重新制霸市场。
6.Node.js使用的是V8引擎。
JS引擎的主要功能
1.编译：将JS代码翻译成机器可执行的字节码或机器码。
2.优化：JS引擎会自动修改代码，让JS代码更高效。因此，JS的优化方法看各JS引擎的优化思路才是最正确的学习方法。
3.执行：执行优化后的字节码或机器码。
4.垃圾回收：将使用过后的JS所占用的内存回收，节省资源，方便再次使用。

JS代码的执行

JS代码的运行环境 runtime env

在JS代码中，我们通常会使用到很多方法：window/document/setTimeout等，这些都不是JS自身具备的功能，而是浏览器为JS提前准备好的API。我们将类似的这些功能称作运行环境 runtime env。
  有了这些runtime env后，当JS一进入页面即开始执行JS。
  

JS的执行与内存

JS在哪里执行？

所有程序都是在内存中执行，当然JS也是在内存中执行。
内存中情况

从这个内存存储情况图中可以看出，在每一个标签页的线程中，除了浏览器提供的功能模块，还开辟了：代码区（JS代码）、不知道什么区（这个区用来存储JS代码声明的变量）、Stack区（栈）和Heap区（堆）。
  其实这个内存存储情况图并不完整，还有很多区域省略了，如：调用栈、任务队列等。
  每种浏览器的非配规则并不一样。但我们主要研究的都是Stack区（栈）和Heap区（堆）。
Stack&Heap
  上图红色的区域便是Stack区和Heap区。这两个区域都是用于存储数据的，但是并不存储变量名。
Stack&Heap的特点
  Stack区特点：所有数据都按顺序存放。所以Stack区的数据存储后比较难进行增删，因此Stack区存储的数据一般是具体的数据（可以用64位2进制表示清楚，如：Number，String，Boolean）或是一个指向Heap区的地址。
  Heap区的特点：所有数据随机存放。所以Heap区的数据比较适合增删改，适合存储对象类型的数据。
  

JS代码演示：Stack&Heap

声明变量

var a = 1
var b = a
var person = {name:'frank',child:{name:'jack'}}
var person1 = person

变量篡改

var person = {name:'frank'} 
var person2 = person  // person2和person是同一个地址，指向同一个Heap中的一个对象，person2修改了对象，自然导致person输出结果改变。
person2.name = 'ryan' 
console.log(person.name) // 'ryan'

JS的世界

JS的前置技能

1.最高级的对象window
2.console，挂载到window上
3.document，挂载到window上
4.对象Obeject，挂载到window上
5.数组Array，挂载到window上
6.函数Function，挂载到window上
7.因为window是JS世界中最高级的存在，所以所有挂载到window上的内容都能直接使用。如：直接console而不需要window.console。
Window在内存世界


变量与对象

• window变量和window对象并不是同一个东西
• window变量（不知道什么区）是一个容器，存放着window对象（Heap）的地址
• window对象是存储在Heap中的数据
• 变量只是一个代号，只不过这里使用window变量指向window对象。代码var x = window这样就能用- x变量来指向window对象，但是这种做法反人类。
• 同理：console与console对象，Object与Object对象也是两个东西。