深入JavaScript高级语法-01-浏览器原理-v8引擎-js执行原理

最新推荐文章于 2022-07-26 14:58:28 发布

coderlb

最新推荐文章于 2022-07-26 14:58:28 发布

阅读量857

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/coderlb/article/details/124178596

版权

JavaScript V8引擎浏览器原理执行上下文 TypeScript

关键词由CSDN通过智能技术生成

浏览器原理-v8引擎-js执行原理

JavaScript的重要性

JavaScript是前端万丈高楼的根基
JavaScript在工作中至关重要
前端的未来依然是JavaScript

著名的Atwood定律

任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现

JavaScript应用越来越广泛

web开发
移动端开发
小程序端开发
桌面应用开发
后端开发

JavaScript让人迷惑的知识点

作用域
函数、闭包
面向对象
ES新特性
其他一系列知识

TypeScript会取代JavaScript吗？

个人觉得不会出现的

编程语言发展历史

机器语言
汇编语言
高级语言

JavaScript是一门高级的编程语言

浏览器的工作原理

域名解析
静态资源
遇到css/js文件，进行下载
解析资源
渲染页面

浏览器内核

Gecko
Trident
Webkit
Blink
Presto

浏览器内核是浏览器的排版引擎

又叫：

排版引擎
浏览器引擎
页面渲染引擎
样板引擎

JavaScript引擎

为什么需要JavaScript引擎？

高级的编程语言都是需要转成最终的机器指令来执行的
事实上我们编写的JavaScript无论你交给浏览器或者node执行，最后都是需要被CPU执行的
但是CPU只认识自己的指令集，实际上是机器语言，才能被cpu执行
所以我们需要JavaScript引擎帮助我们将JavaScript翻译成CPU指令来执行

常见的JavaScript引擎

SpiderMonkey
Chakra
JavaScriptCore
V8

浏览器内核和JavaScript引擎

以webkit内核为例

webkit有两部分组成

webCore
- 负责HTML解析、布局、渲染等等相关的工作
JavaScriptCore
- 解析、执行JavaScript代码

V8引擎的原理

V8使用c++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和nodejs等
它实现ECMAScript和WebAssembly，并在window 7 或更高版本，macOS10.12+和使用x64，IA-32，ARM或MIPS处理器的Linux系统上运行
V8可以独立运行，也可以嵌入到任何c++应用程序中

JavaScript引擎

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

main.js

const name = "why";
console.log(name);
function foo() {
  console.log("foo");
}
foo();

// 结果
why
foo

inner函数只会被V8引擎进行预解析，延迟解析

function outer() {
  console.log("outer");
  function inner() {
    console.log("inner");
  }
}
outer();

V8引擎处理分析

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./执行代码.js"></script>
  </body>
</html>

执行代码.js

var name = "why";
console.log(name);
console.log(num1);
var num1 = 20;
var num2 = 30;
var result = num1 + num2;
console.log(result);
/**
 * 1.代码被解析，V8引擎内部会帮助我们创建一个对象(globalObject -> go)
 * var globalObject = {
 *  String: "类",
 *  Date: "类",
 *  setTimeout: "函数",
 *  window: globalObject,
 *  name: undefined,
 *  num1: undefined,
 *  num2: undefined,
 *  result: undefined
 * };
 * 2.运行代码
 *  >2.1.v8为了执行代码，v8引擎内部会有一个执行上下文栈(Execution Context ECStack)(函数调用栈)
 *  2.2.因为我们执行的是全局代码，为了全局代码能够正常的执行，需要创建全局执行上下文(Global Context ECStack)(全局代码需要被执行才会创建)
 *    >2.2.1.生成一个VO(Variable Object)
 *      VO = var globalObject = {
 *        String: "类",
 *        Date: "类",
 *        setTimeout: "函数",
 *        window: globalObject,
 *        name: undefined,
 *        num1: undefined,
 *        num2: undefined,
 *        result: undefined
 *      };
 *    >2.2.1.开始执行代码
 *    var globalObject = {
 *      String: "类",
 *      Date: "类",
 *      setTimeout: "函数",
 *      window: globalObject,
 *      name: "why",
 *      num1: 20,
 *      num2: 30,
 *      result: 50
 *    };
 *    如果console.log(result) =>   打印50
 *    如果在var name = "why"之后console.log(name) 打印why
 *    如果在var name1 = "20;之前console.log(name1) 打印undefined
 */
// why
// undefined
// 50

V8引擎原理

V8引擎原理.png

浏览器内核和JavaScript引擎的关系

浏览器内核和JavaScript引擎的关系.png

浏览器渲染原理

浏览器渲染原理.png

coderlb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入JavaScript高级语法-01-浏览器原理-v8引擎-js执行原理

浏览器原理-v8引擎-js执行原理JavaScript的重要性JavaScript是前端万丈高楼的根基JavaScript在工作中至关重要前端的未来依然是JavaScript著名的Atwood定律任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现JavaScript应用越来越广泛web开发移动端开发小程序端开发桌面应用开发后端开发JavaScript让人迷惑的知识点作用域函数、闭包面向对象ES新特性其他一系列知识TypeS
复制链接

扫一扫