01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)

1. JavaScript是一门高级编程语言

 

纵观编程语言的发展史,可以归纳为三个阶段:

机器语言:1000100111011000,一些机器指令;

汇编语言:mov ax,bx,一些汇编指令;

高级语言:C C++ Python JavaScript;

整体的发展趋势:人性化发展,在使用(编码)过程中越来越趋于人的思维。

例如: if 如果 else 否则 =赋值....

但是计算机本身不认识这些高级语言,所以我们在电脑上编写的代码最终还是转化为机器语言才能够执行,如何进行转化 不同的编程语言,有不同的编译器或解释器(也是由编程语言开发的软件)。

例如:

Python 解释器 CPython(由C语言开发)

JavaScript 编译器 V8引擎(由C++开发)

注意:一种编程语言对应的解释器可以有多种,以上介绍到的只是针对该编程语言常用的解释器

2. 浏览器的工作原理

01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)_第1张图片

解释:

在浏览器地址栏中输入url地址 例如 www.baidu.com 点击回车,总体来说分为以下几个过程:

  • DNS 解析:将域名解析成 IP 地址
  • TCP 连接:TCP 三次握手
  • 发送 HTTP 请求
  • 服务器处理请求并返回 HTTP 报文
  • 浏览器解析渲染页面
  • 断开连接:TCP 四次挥手

此次重点讲解的是浏览器是如何解析渲染页面的 ,先要从浏览器的内核说起:

我们经常会说:不同的浏览器有不同的内核组成
Gecko: 早期被Netscape和Mozilla Firefox浏览器浏览器使用;
Trident: 微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink;
Webkit: 苹果基于KHTML开发、开源的,用于Safari,Google Chrome之前也在使用;
Blink: 是Webkit的一个分支,Google开发,目前应用于Google Chrome、Edge、Opera等;
等等...
事实上,我们经常说的浏览器内核指的是浏览器的排版引擎:
p 排版引擎 (layout engine),也称为 浏览器引擎 (browser engine)、 页面渲染引擎 (rendering engine)
样版引擎
这里我们先以WebKit为例,WebKit事实上由两部分组成的:
WebCore: 负责HTML解析、布局、渲染等等相关的工作;
JavaScriptCore: 解析、执行JavaScript代码;
总结:
        我们之所以能够从浏览器中看到网页,原因是因为浏览器内核工作的结果,浏览器内核大致分为两部分,一个是负责解析html的 一个是负责解析并执行JavaScript代码的 ,当然还应该包括负责解析css的,不同的浏览器内核所使用到的这两部分是不同的(上文提及到一种编程语言可以有多种编译器);
        也就是说浏览器通过向服务发送请求,得到请求的网页(html文件),并对html文件中的内容进行解析,在解析过程中如果遇到link标签就再去请求css文件,如果遇到script标签就去请求js文件。具体的解析过程如图所示:
01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)_第2张图片

V8引擎的执行原理:

那么V8引擎是如何解析js代码在的呢(js代码不能直接交给cpu执行 需要转化成机器码)

01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)_第3张图片

1.js代码会经过V8引擎中Parse模块进行语法的解析 生成AST(抽象语法树)

js代码解析分为 词法分析 和语法分析 

词法分析:会对代码中的每个词进行切割 分析 最终生成tokens(对象数组) 例如:

每个单词都是具有不同的作用的,根据每个词的作用不同(type)在进行语法分析

语法分析:根据词法分析的结果生成AST树(以下是可以在线生成抽象语法树的网站)

 01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)_第4张图片

抽象语法树是一个很重要的概念,在很多地方都有引用

Bable:下一代js语法的编译器  作用:将ES6的代码转化成ES5 、把TS代码转化成js代码运行

vue template:

 01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)_第5张图片

 为什么要转化为抽象语法树?

        因为树结构是固定的,格式、关键字是固定的 不管是做转化还是做操作都是非常方便的

2.抽象语法树会经过Ignition模块生成字节码

 为什么不直接转化成机器码呢?

        因为当前的js代码运行在什么样的环境下面是不确定的,可能会运行在mac系统中的浏览器上面 也有可能运行在win 系统的浏览器中 还有可能运行在Linux系统浏览器中 不同的欢迎拥有不同的cpu,不同的cpu有不同的cpu架构 能够执行的机器指令是不一样的 而ignition就很难知道转化成什么样的机器指令 而转化成字节码 字节码是跨平台的在任何的平台上都可以运行 ,最后字节码还需要转化成汇编代码 汇编代码再去执行

下面的内容解释:

01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)_第6张图片

 字节码每次都会转化成汇编指令 再去执行会比较消耗性能,TurboFan 会由Ignation模块搜集一些函数的执行信息 对于执行频率比较高的函数标记成 hot (热函数:需要多次执行的函数) 再由 TurboFan模块转化成优化之后的机器指令 直接运行就可以了 但是这时就会出现一个问题 例如有一个函数被转化成机器指令之后 机器指令直接执行 两个数值相加就可以了,但是突然有一个地方出现了两个字符串相加 字符串相加是拼接 就不是两数相加了 所以之前的机器指令就不能够在运行了,这时候就会进行反向的优化 从机器指令又转化回了字节码 最后再执行

01-浏览器是如何解析JavaScript代码的(浏览器的工作原理)_第7张图片

由此我们可以得出结论在编码过程中 调用函数时 尽可能传入相同类型的参数,在v8引擎中是对我们的代码进行优化的

3.字节码会转化成汇编指令(机器指令)执行

总结:

 

你可能感兴趣的:(javascript)