电子商务网站建设的背景百度浏览器网页版入口
一、事件循环
浏览器有哪些进程和线程
浏览器是一个多进程多线程的应用程序，当启动浏览器后，会默认启动多个进程
可以在浏览器任务管理器中查看所有进程
其中最主要的进程有：
-
浏览器进程
主要负责界面展示，用户交互，子进程管理，内部会启动多个线程处理不同任务
-
网络进程
负责加载网络资源，也会启动多个线程
-
渲染进程
渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML，CSS，JS代码
默认情况下，浏览器会为每个标签页开启一个新的渲染线程，以保证不同的标签页之间互不影响
渲染主线程是如何工作的
渲染主线程是最繁忙的，需要它处理的任务包括但不限于：
- 解析HTML
- 解析CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画60次
- 执行全局的js代码
- 执行事件处理函数
- 执行计时器的回调函数
- … …
渲染主线程如何调度
- 在最开始，渲染主线程会进入一个无限循环
- 每一次循环都会检查消息队列中是否有任务存在，如果有就取出第一个任务执行，执行完进入下一个循环。如果没有则进行休眠
- 其他所有线程（包括其它进程中的线程）可以随时向消息队列中添加任务。新任务会加在末尾，主线程如果休眠则会唤醒
整个过程被称作事件循环（或消息循环）
若干解释
何为异步
代码在执行过程中，会遇到一些无法立即执行的任务，如
- 计时完成后需要完成的任务
- 网络通讯完成后需要执行的任务
- 用户操作后需要执行的任务
如果让主线程等待，就会导致主线程长期处于阻塞状态，导致浏览器卡死
同步示意图：
异步示意图：
js为何阻碍渲染
js的执行和渲染在一个线程中执行
任务有优先级吗
没有优先级，在消息队列中先进先出
消息队列是有优先级的，可以有多个消息队列（延时队列，微队列，交互队列等）
- 每个任务都有一个任务类型，每个类型的任务必须在同一个队列，不同类型的任务可以分属于不同的队列，再一次事件循环中，浏览器可以根据实际情况从不同队列取任务
- 浏览器不许准备好一个微队列，微队列中的任务优先于其他任务执行
二、浏览器的渲染原理
渲染时间点
渲染流水线
1、解析html
将html解析dom树
将css解析css树，css对象模型
解析遇到CSS代码如何处理
为了提高效率，浏览器会启动一个预解析器率先下载和解析CSS
遇到js代码如何处理
渲染主线程遇到js必须暂停一切行为，等待下载执行完成后才能继续，预解析线程可以分担一点下载js的任务
2、样式计算
最终生成计算后的样式
3、布局
4、分层
5、绘制
6、分块
7、光栅化
8、画
