1. JavaScript是一门高级的编程语言
纵观编程语言的发展史,可以归纳为三个阶段:
机器语言:1000100111011000,一些机器指令;
汇编语言:mov ax,bx,一些汇编指令;
高级语言:C C++ Python JavaScript;
整体的发展趋势:人性化发展,在使用(编码)过程中越来越趋于人的思维。
例如: if 如果 else 否则 =赋值....
但是计算机本身不认识这些高级语言,所以我们在电脑上编写的代码最终还是转化为机器语言才能够执行,如何进行转化 不同的编程语言,有不同的编译器或解释器(也是由编程语言开发的软件)。
例如:
Python 解释器 CPython(由C语言开发)
JavaScript 编译器 V8引擎(由C++开发)
注意:一种编程语言对应的解释器可以有多种,以上介绍到的只是针对该编程语言常用的解释器
2. 浏览器的工作原理
解释:
在浏览器地址栏中输入url地址 例如 www.baidu.com 点击回车,总体来说分为以下几个过程:
- DNS 解析:将域名解析成 IP 地址
- TCP 连接:TCP 三次握手
- 发送 HTTP 请求
- 服务器处理请求并返回 HTTP 报文
- 浏览器解析渲染页面
- 断开连接:TCP 四次挥手
此次重点讲解的是浏览器是如何解析渲染页面的 ,先要从浏览器的内核说起:
![](https://img-blog.csdnimg.cn/c7bc8dc057144ef9ba99bef37fab1176.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pSv5YWI55Sf,size_20,color_FFFFFF,t_70,g_se,x_16)
V8引擎的执行原理:
那么V8引擎是如何解析js代码在的呢(js代码不能直接交给cpu执行 需要转化成机器码)
1.js代码会经过V8引擎中Parse模块进行语法的解析 生成AST(抽象语法树)
js代码解析分为 词法分析 和语法分析
词法分析:会对代码中的每个词进行切割 分析 最终生成tokens(对象数组) 例如:
每个单词都是具有不同的作用的,根据每个词的作用不同(type)在进行语法分析
语法分析:根据词法分析的结果生成AST树(以下是可以在线生成抽象语法树的网站)
抽象语法树是一个很重要的概念,在很多地方都有引用
Bable:下一代js语法的编译器 作用:将ES6的代码转化成ES5 、把TS代码转化成js代码运行
vue template:
为什么要转化为抽象语法树?
因为树结构是固定的,格式、关键字是固定的 不管是做转化还是做操作都是非常方便的
2.抽象语法树会经过Ignition模块生成字节码
为什么不直接转化成机器码呢?
因为当前的js代码运行在什么样的环境下面是不确定的,可能会运行在mac系统中的浏览器上面 也有可能运行在win 系统的浏览器中 还有可能运行在Linux系统浏览器中 不同的欢迎拥有不同的cpu,不同的cpu有不同的cpu架构 能够执行的机器指令是不一样的 而ignition就很难知道转化成什么样的机器指令 而转化成字节码 字节码是跨平台的在任何的平台上都可以运行 ,最后字节码还需要转化成汇编代码 汇编代码再去执行
下面的内容解释:
字节码每次都会转化成汇编指令 再去执行会比较消耗性能,TurboFan 会由Ignation模块搜集一些函数的执行信息 对于执行频率比较高的函数标记成 hot (热函数:需要多次执行的函数) 再由 TurboFan模块转化成优化之后的机器指令 直接运行就可以了 但是这时就会出现一个问题 例如有一个函数被转化成机器指令之后 机器指令直接执行 两个数值相加就可以了,但是突然有一个地方出现了两个字符串相加 字符串相加是拼接 就不是两数相加了 所以之前的机器指令就不能够在运行了,这时候就会进行反向的优化 从机器指令又转化回了字节码 最后再执行
由此我们可以得出结论在编码过程中 调用函数时 尽可能传入相同类型的参数,在v8引擎中是对我们的代码进行优化的
3.字节码会转化成汇编指令(机器指令)执行
总结: