一、浏览器架构概述
1.png
主要有七大部分组成：
- User Interface 用户界面：提供用户与浏览器交互
- Browser Engine 浏览器引擎：控制渲染引擎与JS解释器
- Rendering Engine 渲染引擎：负责页面渲染
- JavaScript Interpreter JS解释器：执行JS代码，输出结果给渲染引擎
- Networking 网络工作组：处理网络请求
- UI Backend UI后端：绘制窗口小部件
- Data Storage 数据存储：管理用户数据
通常我们关注于“Rendering Engine，渲染引擎”，其是性能优化的关键。
二、浏览器的渲染原理概述
也就是，上面的“渲染引擎”工作原理：
2.png
- 1、同步解析HTML文件 和 解析CSS文件，生成DOM树 和 CSS样式树。
- 2、将Dom-Tree和CSS-Tree关联合并生成Render-Tree渲染树。
- 3、计算render布局Layout， 负责计算各个元素的尺寸、位置等。
- 4、绘制⻚面，计算每个像素的信息
- 5、将各个图层进行合成，显示在屏幕上。
注意：渲染完成后就是触发load事件, 执行js脚本。
- 当DOM加载完成, 会触发
DOMCOntentLoaded事件，不包括样式表 图片等. - 当⻚面上的所有的DOM、 样式、 脚本、图片都加载完成时, 会触发load事件
三、浏览器的多进程架构概述
浏览器被设计成多进程，一般有以下几个进度：
- Browser进程：主进程，有且只有一个。
负责协调和控制浏览器，其详细工作有页面显示、用户交互、页面生命周期管理、网络管理、子进程管理等。 - Render进程：渲染进程，是浏览器内核进程，一般一个页面一个进程。
负责页面渲染、执行脚本、事件处理。 - 插件进程
- GPU进程
3.1、浏览器内核进程，即渲染进程的线程架构
- GUI线程：解析HTML、CSS、页面布局和绘制等
- JS引擎线程：JS内核，负责JS脚本执行。
- 事件线程:负责事件循环控制。
- 定时器线程：定时器相关，setTimeout 和 setInterval 所在线程。
- HTTP请求线程：负责http请求相关。
3.2、JS引擎：单线程，如何实现异步机制？
本质：JS引擎利用 「事件驱动EventLoop」 实现异步机制，类似iOS的RunLoop。
-
1、如何使用单线程机制对同步、异步函数，以及鼠标的单击事件、浏览器触发事件、Timer定时器事件（setTimeout函数）、Interval间隔执行事件（setInterval函数）的执行顺序
image.png
-
2、众所周知，JS是单线程的，但是对于浏览器来说「JS的执行」只不过是在浏览器众多现成中的一条线程，我们称之为「JS引擎线程」。而浏览器的其他线程则是通过「JS引擎线程」在执行到某个特定的功能之后指定给浏览器的对应线程。
下图是「JS引擎线程」的执行顺序：
image.png
-
3、注意在HTML5规范中规定定时器的定时时间不能小于4ms，如果是小于4ms，则默认为4ms。
Javascript引擎的单线程机制和setTimeout执行原理阐述
网友评论