浏览器工作原理和V8引擎

一、浏览器的工作原理

比如在浏览器中输入网址，然后dns进行解析，解析出的就是服务器的一个ip地址。服务器返回一个html文件，浏览器内核在解析html文件的过程中，遇到link标签和script标签引用的css文件和JavaScript文件就会去下载下来。

二、浏览器内核

我们经常会说：不同的浏览器有不同的内核组成：

Gecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；
Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
Webkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；
Blink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等；
等等…
2. 事实上，我们经常说的浏览器内核指的是浏览器的排版引擎：

排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎。
三、浏览器渲染过程

浏览器内核的 HTML Parse 将 HTML 转化为DOM树（DOM Tree），DOM 的 JavaScript 代码可以对DOM树（DOM Tree）进行操作（JavaScript代码是由JavaScript引擎执行的）。CSS Parse 将css转化为CSS规则（Style Rules）。然后 DOM树（DOM Tree）和CSS规则（Style Rules）通过附加（Attachment）生成渲染树（Render Tree），在布局引擎（Layout）具体操作下，进行绘制（Painting），浏览器就可以进行展示（Dispaly）。之所以需要布局引擎（Layout），是因为浏览器在不同状态下布局有所不同。

四、认识JavaScript引擎

为什么需要JavaScript引擎呢？

我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的；
事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行；
所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；
2. 比较常见的JavaScript引擎有哪些呢？

SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
Chakra：微软开发，用于IT浏览器；
JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；
等等…
3. JavaScript是一门高级编程语言：

机械语言————>汇编语言————>高级语言
五、浏览器内核和JS引擎的关系
这里我们先以WebKit为例，WebKit事实上由两部分组成的：

WebCore：负责HTML解析、布局、渲染等等相关的工作；
JavaScriptCore：解析、执行JavaScript代码；
另外一个强大的JavaScript引擎就是V8引擎。

六、V8引擎原理

我们来看一下官方对V8引擎的定义：

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

V8引擎架构

Parse模块会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识JavaScript代码
如果函数没有被调用，那么是不会被转换成AST的。PreParse（预解析），并不是一开始所有代码都需要执行，所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行；

Ignition是一个解释器，会将AST转换成ByteCode（字节码）
同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；如果函数只调用一次，Ignition会执行解释执行ByteCode；

TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码
如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是 number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码。

七、执行上下文

<script>var name = 'why'foo(123)function foo (num) {console.log(m)var m = 10var n = 20function bar () {console.log(name)}bar()}
</script>
复制代码

全局代码执行前的解析（红色框内）
全局代码执行和foo函数执行体执行前的解析（红色框内）
foo函数执行体执行（红色框内）
bar函数执行体执行前的解析
bar函数执行体执行

因为bar函数内无name属性，所以向上到父级作用域中找（看函数定义时的位置，其所在的上一层作用域为父级作用域，不时看调用位置）。如果在GO或之前找到，则输出name值，否则报出undefined。

bar函数执行体执行完后，则函数执行上下文(FEC)退出ECS执行上下文栈；foo函数执行体执行完后；函数执行上下文(FEC)一样退出ECS执行上下文栈。
基于早期ECMA的版本规范：
每一个执行上下文会被关联到一个变量对象（variable object，VO），在源代码中的变量和函数声明会被作为属性添加到VO中。对与函数来说，参数也会被添加到VO中。
在最新的ECMA的版本规范中，对于一些词汇进行了修改：
每一个执行上下文会被关联到一个变量环境（VariableEnvironment），在执行代码中的变量和函数声明会被作为环境记录（Environment Record）添加到变量环境中。对与函数来说，参数也会被环境记录添加到变量环境中。
八、作用域提升面试题
建议：要是像我一样这种基础薄弱的人来说，做题时还是建议画一下执行上下文来理解，这样更加加深印象和理解！！！

<script>var n = 100function foo () {n = 100}foo()console.log(n)//100
</script>
复制代码

<script>function foo () {console.log(n)//undefinedvar n = 200console.log(n)//200}var n = 100foo()
</script>

复制代码

<script>var n = 100function foo1 () {console.log(n)//100}function foo2 () {var n = 200console.log(n)//200foo1()}foo2()console.log(n)//100
</script>
复制代码

<script>var n = 100function foo () {console.log(n)returnvar n = 100//undefined}foo()
</script>
复制代码

<script>function foo () {var a = b = 100// b=100(该赋值语句在该函数作用域到全局作用域之中找不到，则添加到全局作用域中)// var a=100}foo()console.log(a)//报错 a is not definedconsole.log(b)//100
</script>

最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激！

PHP学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com

浏览器工作原理和V8引擎相关推荐

浏览器执行原理、V8引擎
前言对一个前端而言,思考JS在浏览器中如何被执行非常重要.笔者是通过codewhy的课程进行学习的,首先感谢codewhy. 浏览器的功能浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您 ...
HTTPS 工作原理和 TCP 握手机制
1.HTTPS的工作原理 HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一次握手,在握手过程中将确立双方加密传输数据的密码信息.TLS/SSL协议不仅仅是一套加密传输的协议,更是 ...
html图片视频渲染原理,初识浏览器渲染原理和CSS动画
1.浏览器渲染原理浏览器到底是怎么将一个html文件渲染成生动的页面的?话不多说,直接看图以图中的过程,浏览器的渲染过程大致就是: 通过HTML解析将HTML文件解析为 DOM 树; 通过CSS解 ...
示波器的使用及其工作原理和multisim仿真软件的使用
一.示波器的工作原理示波器用来测量交流电或脉冲电流波的形状的仪器,由电子管放大器.扫描振荡器.阴极射线管等组成.除观测电流的波形外,还可以测定频率.电压强度等.凡可以变为电效应的周期性物理过程都可以 ...
etcd工作原理和CentOS 7部署指南
https://blog.csdn.net/kenkao/article/details/107149278
Kafka的工作原理和ZK在其中的作用详解
Kafka使用zk的分布式协调服务,将生产者,消费者,消息储存(broker,用于存储信息,消息读写等)结合在一起.同时借助zk,kafka能够将生产者,消费者和broker在内的所有组件在无状态的条 ...
技术期刊 · 吾令凤鸟飞腾兮 | 使用 esbuild 加速 webpack；网易云的熟人社交玩法；状态管理利器 XState；TypeScript 是如何工作的；深入浅出 V8 引擎
蒲公英 · JELLY技术期刊 Vol.44 生命不息,学习无止,这是很多人一以贯之的追求,虽然在很多领域中,知识是无法穷尽的,但每一点细小的改变都能让自己可以更进一步,就好像离骚中所述," ...
Chrome V8系列--浅析Chrome V8引擎中的垃圾回收机制和内存泄露优化策略
V8 实现了准确式 GC,GC 算法采用了分代式垃圾回收机制.因此,V8 将内存(堆)分为新生代和老生代两部分. 一.前言 V8的垃圾回收机制:JavaScript使用垃圾回收机制来自动管理内存.垃圾 ...
javascript的V8引擎的初步使用
这段时间在使用javascript,常常地想javascript是怎么样运行呢?又是怎么样从JS代码转换为机器码呢?在深入了解JS运行机制之前,先来运行一下V8引擎也是入门的前奏.由于不能访问chro ...

浏览器工作原理和V8引擎

浏览器工作原理和V8引擎相关推荐

最新文章

热门文章