浏览器的js引擎与渲染引擎

js引擎工作流程

1. 词法分析（Lexical Analysis）：
   • 将源代码字符串分解成词法单元（tokens），比如标识符、关键字、操作符等。
   • 词法分析器会忽略空格和注释，并生成一个由词法单元组成的流。
2. 语法分析（Syntax Analysis）：
   • 将词法单元转换为抽象语法树（Abstract Syntax Tree，AST）。
   • 语法分析器会根据语言的文法规则检查代码结构是否合法，比如括号是否匹配、语句是否完整等。
3. 执行上下文管理：
   • 创建执行上下文用于存储代码执行过程中的状态信息，包括变量环境、作用域链、this指向等。
   • 执行上下文会被压入执行上下文栈（Execution Context Stack），并在函数调用时发生推入和弹出操作。
4. 作用域分析（Scope Analysis）：
   • 确定变量的作用域和访问权限。
   • 创建作用域链，决定变量查找的顺序。
5. 变量声明和赋值：
   • 根据作用域链查找变量声明，如果不存在则进行变量声明（var、let、const）并为其分配内存空间。
   • 执行变量初始化和赋值操作，将值存储在对应的内存地址中。
6. 执行代码：
   • 逐行执行代码，按照语法树的结构处理不同类型的语句（表达式、条件语句、循环语句、函数调用等）。
   • 运行时会涉及变量赋值、运算操作、函数调用等。
7. 内存管理：
   • 分配内存空间给变量、对象等，使用垃圾回收机制来管理不再使用的内存。
   • JavaScript引擎会自动进行内存分配和释放，开发者无需手动管理内存。
8. 错误处理：
   • 捕获和处理代码中可能出现的错误，比如使用try-catch语句来捕获异常。
   • 在出现错误时，JavaScript引擎会停止当前执行的代码并跳转到错误处理逻辑。
9. 优化和编译：
   • 现代JavaScript引擎会进行优化，比如 JIT（Just-In-Time）编译、内联缓存等，以提高代码执行效率。
   • 引擎会根据实际代码情况进行动态优化，使得代码可以更快地执行。

渲染引擎工作流程

渲染引擎是浏览器中用于解析和显示网页内容的核心组件。下面是渲染引擎的工作流程：

1. HTML解析：
   • 渲染引擎首先会接收到从网络获取到的HTML文档。
   • HTML解析器会将HTML文档解析为DOM（文档对象模型）树，表示网页的结构。
2. CSS解析：
   • 渲染引擎会接收到CSS样式表文件。
   • CSS解析器会将CSS样式表解析为CSS规则树，表示网页的样式。
3. 构建渲染树（Render Tree）：
   • 渲染引擎将DOM树和CSS规则树结合起来，构建出渲染树。
   • 渲染树只包含需要显示的节点以及其样式信息，如display:none的节点不会包含在渲染树中。
4. 布局（Layout）：
   • 对渲染树进行布局计算，确定每个节点在屏幕上的确切位置和大小。
   • 计算布局时考虑盒模型、浮动、定位、文本方向等因素。
5. 绘制（Painting）：
   • 根据布局阶段得到的几何信息，将每个节点绘制成屏幕上的像素。
   • 绘制过程包括填充颜色、绘制边框、渲染文本等操作。
6. 合成（Compositing）：
   • 当所有元素被绘制后，浏览器会将它们合成到屏幕上。
   • 合成阶段会考虑各个元素的层叠关系、透明度等信息，最终将它们合成为最终的页面展示给用户。