学习笔记：浏览器理论概述

一、浏览器架构概述

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执行原理阐述