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

浏览器原理-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>Documenttitle>
  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>Documenttitle>
  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引擎原理

深入JavaScript高级语法-01-浏览器原理-v8引擎-js执行原理_第1张图片

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

深入JavaScript高级语法-01-浏览器原理-v8引擎-js执行原理_第2张图片

浏览器渲染原理

深入JavaScript高级语法-01-浏览器原理-v8引擎-js执行原理_第3张图片

你可能感兴趣的:(javascript)