浏览器工作原理-优快云博客

本文链接：https://blog.youkuaiyun.com/hadry123/article/details/124243191

浏览器从输入URL到渲染分为三部分

DNS解析URL的过程
浏览器发送请求与服务器交互过程
浏览器对接收到的html页面渲染过程

认识浏览器内核

Gecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；
Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
Webkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；
Blink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等

浏览器渲染过程

在这里插入图片描述

html文件通过HTML解析器解析生成DOM Tree(dom树)，DOM可以对DOM树进行操作,
css文件通过CSS解析器解析生成Style Rules（样式规则,CSS Object Model ），
根据DOM Tree和Style Rule 生成Render Tree（chome叫Layout Tree）
通过Layout布局引擎计算节点的位置形状和大小。输入Render tree（Layout Tree）输出盒子模型
Painting 输入Render tree（Layout Tree），输出Render tree绘制记录。主要是遍历Render tree以创建绘制记录。
Compositing 主线程遍历了布局树以创建图层树，主线程一旦创建了图层树并确定了绘制顺序，主线程便将该信息提交给合成线程
合成器线程将每个图层栅格化。光栅化后完成后，合成器线程创建合成框架，将框架发送到浏览器进程，浏览器进程将内容显示在屏幕上

HTML解析的时候遇到了JavaScript标签，会停止解析HTML，而去加载和执行JavaScript代码，Javascript引擎执行脚本完成后，HTML再继续解析，
JavaScript 脚本是依赖样式表的，会先等CSS文件加载并解析完成再执行，因此Javascript对元素的样式是最终生效的。
javascript 会阻塞HTML解析和页面渲染
css解析和HTML解析并行，不会阻塞HTML解析,但是会阻塞页面渲染（但是Javascript执行，会导致CSS的解析，增加HTML解析的时间）

渲染过程中的特殊情况

重排

指修改了元素的几何属性，如位置、尺寸、内容、结构等变化，引发元素几何位置变化，浏览器重新渲染部分或全部文档的过程叫做重排也叫做回流。
触发重排的情况

页面初始渲染
添加/删除可见DOM元素
改变元素位置
改变元素尺寸（宽、高、内外边距、边框等）
改变元素内容（文本或图片）
改变窗口尺寸

重绘
当页面元素样式的改变，不影响布局时，浏览器重新对元素进行更新的过程叫做重绘。
重排一定会触发重绘，而重绘不一定会回流

减少重排、重绘方法：

避免频繁读取会引发回流/重绘的属性，如果需要多次使用，就用一个变量缓存起来
多次dom操作合成一次批量操作，例如createDocumentFragment，vue框架虚拟DOM和diff算法
使用class操作样式，而不是频繁操作style

认识JavaScript引擎

为什么需要javasprit引擎
高级的汇编语言都是需要转成最终的机器指令来执行的，事实上我们编写的javaScript无论是交给浏览器还是Node，最后都是需要被cpu执行的，我们需要javaScript引擎帮助我们将javaScript代码翻译成cpu指令来执行
比较常见的javaScript引擎有

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

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

我们以webkit为例，webkit事实上有两部分组成：
webCore：负责HTML解析、布局、渲染等相关工作
javaScriptCore：解析执行javaScript代码
在这里插入图片描述

V8引擎

V8是用C++编写的Google开元高性能javaScript和WebAssembly引擎，他用于Chrome和Node.js 在这里插入图片描述

Parser模块会将javaScript代码转换成AST（抽象语法树）。在转换过程中有两个重要的阶段：词法分析（Lexical Analysis）和语法分析（Syntax Analysis）。这是因为解释器并不直接认识JavaScript代码；如果函数没有被调用，那么是不会被转换成AST的；
Ignition是一个解释器，会将AST转换成ByteCode（字节码），同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；如果函数只调用一次，Ignition会执行解释执行ByteCode；
TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码；如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码；

V8执行的细节JavaScript源码是如何被解析（Parse过程）

词法分析：也称为分词tokenize，是将字符串形式的代码转换为标记（token）序列的过程。
语法分析：也叫解释parse，语法分析是将词法分析产生的token按照某种给定的形式文法转换成AST的过程。

Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换；
Scanner会进行词法分析（lexical analysis），词法分析会将代码转换成tokens；
接下来tokens会被转换成AST树，经过Parser和PreParser：

Parser就是直接将tokens转成AST树架构；
PreParser称之为预解析，为什么需要预解析呢？
这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会
影响网页的运行效率；
ü 所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂
时需要的内容，而对函数的全量解析是在函数被调用时才会进行；
ü 比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析；

JavaScript的执行过程

假如我们一段代码，它在JavaScript中是如何被执行的呢？

初始化全局对象

js引擎会在执行代码之前，会在堆内存中创建一个全局对象：Global Object（GO）

该对象所有的作用域（scope）都可以访问；
里面会包含Date、Array、String、Number、setTimeout、setInterval等等；
其中还有一个window属性指向自己

执行上下文栈（调用栈）

js引擎内部有一个执行上下文栈（Execution Context Stack，简称ECS），它是用于执行代码的调用栈。

那么现在它要执行谁呢？执行的是全局的代码块：
全局的代码块为了执行会构建一个 Global Execution Context（GEC）；GEC会被放入到ECS中执行；
GEC被放入到ECS中里面包含两部分内容：
第一部分：在代码执行前，在parser转成AST的过程中，会将全局定义的变量、函数等加入到GlobalObject中，
但是并不会赋值；这个过程也称之为变量的作用域提升（hoisting）
第二部分：在代码执行中，对变量赋值，或者执行其他的函数；

遇到函数如何执行

在执行的过程中执行到一个函数时，就会根据函数体创建一个函数执行上下文（Functional Execution Context，
简称FEC），并且压入到EC Stack中
FEC中包含三部分内容：
第一部分：在解析函数成为AST树结构时，会创建一个Activation Object（AO）：
AO中包含形参、arguments、函数定义和指向函数对象、定义的变量；
第二部分：作用域链：由VO（在函数中就是AO对象）和父级VO组成，查找时会一层层查找；
第三部分：this绑定的值
在这里插入图片描述

变量环境和记录

其实我们上面的讲解都是基于早期ECMA的版本规范：
在这里插入图片描述在最新的ECMA的版本规范中，对于一些词汇进行了修改：

通过上面的变化我们可以知道，在最新的ECMA标准中，我们前面的变量对象VO已经有另外一个称呼了变量环境
VE。

参考文档
https://www.cnblogs.com/luoxiaoer/p/11751810.html
https://baijiahao.baidu.com/s?id=1704953759036216124&wfr=spider&for=pc
https://baijiahao.baidu.com/s?id=1717988478840481620&wfr=spider&for=pc