js高级之js运行原理

2022-02-12  本文已影响0人  林不羁吖

1.浏览器渲染过程

1.1 下载文件【掌握】

当我们输入一个网址之后，dns服务器将网址中的域名解析为ip地址（服务器地址）之后，（这个过程就是通过网址找服务器地址）。

找到服务器地址后，通常会返回一个index.html网页，然后浏览器开始解析html网页，解析的过程会遇到加载css的标签-》从服务器下载css文件，遇到script标签-》下载对应的js文件，js相关的代码也会执行，比如写了一个函数，执行完后，就能在浏览器里运行这个函数。

1.2 执行文件

浏览器内核（排版引擎）帮助我们解析代码。

1.2.1.html css解析【掌握】

来看看浏览器的渲染过程

图片.png
1.浏览器内核帮助解析html文件，通过html parser将html文件转化成dom树，
在这个过程中可以编写了js代码来对dom进行操作，代码由js引擎执行。
2.样式文件由css parser进行解析生成样式规则style rules，然后和dom树合在一起形成渲染树
3.通过布局引擎对渲染树在进行一步操作形成最终的渲染树
4.最后进行绘制 -> 浏览器展示

1.2.2.js代码执行

1.2.2.1.为什么需要js引擎

1.2.2.2.浏览器内核和JS引擎的关系

浏览器内核分为两种：渲染引擎和js引擎。

最开始渲染引擎和js引擎并没有很严格的区分，后来js引擎越来越独立，内核则倾向于只指渲染引擎，内核的种类很多，常见的内核有四种：Trident / Gecko / Blink / Webkit

这里我们先以WebKit为例，WebKit事实上由两部分组成的：

1.1.2.3.v8引擎的原理【理解】

1.定义

v8引擎有一个库，TurboFan 。ignition收集函数执行信息，标注执行频率高的函数，通过TurboFan将这些函数转化为优化的机器码，之后再执行的时候就不需要经过复杂的转化过程了，直接执行机器指令，得到运行结果，可以提高性能。

有一个问题，比如说保存了高频率函数

function sum(num1,num2){
  return num1+num2
} 
sum(20,20) 
sum(30,30) 
sum('aa','bb').

当优化的机器码发现执行指令不同时（数值相加变成了字符串拼接），会进行一个操作deoptimzation，反优化到字节码后再转化成运行结果。
这样会消耗性能，所以在写代码的时候使用typescript，有一个类型的限制，效率会更高一些。

ps:预解析：解析会执行的函数和变量

2.js代码执行过程【掌握】

var name = "jim"
var num1 = 20
var num2 = 30 
var result = num1 + num2

2.0.选择代码运行环境

浏览器(包含v8引擎)：在html内加载js文件，
node环境终端(包含v8引擎/其他js引擎)：命令行-》node js文件

2.1.初始化全局对象

代码在运行之前需要被解析。
解析时（js源代码到ast抽象语法树的解析过程）

v8引擎会帮我们初始化全局对象GlobalObject-GO,包含环境（浏览器或者node）内的全局变量（settimeou函数t,String类...），Window属性（指向globalObject）和代码里面定义的变量（尚未赋值的name，num1...，因为还没有执行所以未赋值）

var globalObject = {
  String: "类",
  Date: "类",
  setTimeount: "函数",
  window: globalObject,
  name: undefined,
  num1: undefined,
  num2: undefined,
  result: undefined
}

2.2.执行上下文栈中运行代码

为了执行代码， v8引擎内部会有一个执行上下文栈(Execution Context Stack, ECStack)(函数调用栈)，（其实就是内存，代码要执行的话需要先从磁盘加载到内存里面去，在内存中将代码转化成对应的机器指令，最后在cpu中进行执行。）
ps:对内存会划分结构，分别是栈结构和堆结构。

代码要执行都需要放到执行上下文栈中，一般是放函数。

2.3.在执行上下文栈中执行全局代码

因为我们执行的是全局代码, 为了全局代码能够正常的执行, 需要创建 全局执行上下文(Global Execution Context)(全局代码需要被执行时才会被创建)，然后放进ECStack里。全局执行上下文中有一个VO变量对象，指向GO，然后开始执行代码。

2.4.执行代码，根据代码从上往下依次执行。

var name = "why"
//通过vo-》go找到name，值改成“why”

console.log(num1)
//作用域提升，打印undefined
var num1 = 20
//同上
var num2 = 30
//同上
var result = num1 + num2
//同上
console.log(result)
//在vo-》go查找result，然后打印出来
上一篇 下一篇

猜你喜欢

热点阅读