JS引擎

126 阅读3分钟

操作系统中的进程

浏览器中的进程

打开一个页面一般来说浏览器就会开启一个进程

每个页面中都需要渲染引擎JS引擎。他们就是一个网页中的两个线程

把进程比作一个公司,那么线程就是公司中的部门。

渲染引擎

用来渲染HTML和CSS的代码程序,HTML和CSS是不可分开的,虽然在HTML比CSS先诞生但是HTML在创建之初就是有默认样式的,得到HTML代码和CSS代码浏览器都会经过以下步骤:

  1. 下载HTML、CSS代码
  2. 解析HTML、CSS代码
  3. 执行HTML、CSS代码

在没有冲突的情况下是可以边解析边执行,这个过程就叫做渲染

JS引擎

JS相对于HTML、CSS是独立的一个线程,不外乎JS引擎的渲染也会经过:

  1. 下载js文本文件
  2. 解析js语法
  3. 执行js程序

这里就会出现一个问题,那么js没有渲染引擎它怎么可以改变HTML节点CSS样式呢?

这里就会牵扯到线程间的通讯问题,当js需要对页面进行渲染的时候就会去调用渲染引擎的接口跳过渲染引擎来对页面进行渲染,而不是js自己来做。

就此我们就可以了解到线程间是可以互相通讯的

而线程间的通讯就像一个部门与另一个部门进行通讯总是要比部门内部通讯慢。因此就可以初步了解JS操作DOM慢的原因。

JS引擎做了什么

  • 解析
  • 优化
  • 执行
  • 垃圾回收

主要讲讲JS引擎是如何执行的

执行

首先来看下面这段代码

var c = 'hi'
var a = 123
var b = {}

JS引擎会将 a和b放到一个浏览器中[的不知道什么存储区域],因为每个浏览器都不一样这里展示就这样叫它。

由于123和'hi'的长度事先是在内存中被分配好的(例如:数字最大长度占多数内存,字符串最大长度占多少内存),接着数字123和字符串'hi'会被放到stack栈中存储,在栈中所有的内存都是连续的。c和a对应的值就是'hi'和123

{}表示一个对象,对象是可以添加数据的所以在内存中就无法使用一个固定大小空间来存储,它会被放到Heap堆中存储。堆的内存是分散的,哪里空间足够就会在哪里开辟一片内存。b对应的就是该对象的内存中的地址。

{}也就是我们常说的引用类型,b中存放的仅仅是对象的内存地址。

let b= a;
b.name = 'xiaoming';
a.name //'xiaoming';

更改吧a的指向的内存地址赋值给b,这时候他们指向同一个内存,b尝试修改这片内存区域中的值。修改成功之后a再去看一样也是存在变化的。

垃圾回收

再看下面代码吧a和b从新赋值这样原来的那片内存就没有变量指向它了,那么它就会被JS引擎垃圾回收。

a = [];
b = {};