浏览器工作原理.md

浏览器工作原理

1.浏览器组成部分

浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎

1.. 浏览器引擎

用来查询及操作渲染引擎的接口

2. 渲染引擎

用来显示请求的内容

3. 网络

用来完成网络调用

4. js解释器

用来解释执行JS代码;

5. 数据存储

浏览器将所需数据保存在硬盘中

2.浏览器渲染原理

渲染引擎的作用:

将网页代码渲染为用户视觉可以感知的平面文档;

1.渲染引擎处理网页,分成四个阶段

1.解析代码

HTML代码解析为DOM,CSS代码解析为CSSOM

2.对象合成

将DOM和CSSOM合成一棵渲染树

3.布局

根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。布局流程的输出是一个“盒模型”，

4.绘制

将渲染树绘制到屏幕;

2.重流和重绘

渲染树转换为网页布局,称为“布局流”(flow); 布局显示到页面的这个过程,称为“绘制”(paint),它们都具有阻塞效应,会耗费很多时间和计算资源;

网页生成的时候，至少会渲染一次。在用户访问的过程中，还会不断重新渲染。重新渲染会重复回流重绘或者只有重绘。当只改变渲染树中元素的样式，不改变布局时(例如改变color,background-color,outline等属性时)，只会引发重绘，当改变了渲染树的元素的布局时（改变元素尺寸，内容，添加dom元素等）会引发回流和重绘.

3.JavaScript引擎

1.JavaScript引擎运行js代码的过程

1.浏览器一边下载HTML网页,一边开始解析;解析过程中,发现<script>标签会暂停解析,网页渲染的控制权转交给JavaScript引擎;

2.如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行;
加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染;

3.执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页;

2.js引擎的特点

js引擎是基于事件驱动的,采用的是单线程运行机制;

JS可以操作DOM元素,从而影响到GUI的渲染结果,因此JS引擎线程和GUI渲染线程是互斥的; JS引擎处于运行状态时,GUI渲染线程将处于冻结状态;

3.javascript的单线程

javascript引擎负责解释和执行javascript代码的线程只有一个,称为主线程;
js还有其他的线程称为工作线程;

1.主线程和工作进程

1.主线程上只执行同步任务;

2.工作进程

处理 ajax 的线程,dom事件线程,定时器线程,读写文件的线程,这些被称为工作进程;

工作线程执行异步操作

4.JavaScrpt 的异步编程

js引擎只执行同步任务,异步任务会由工作线程来执行;

1.异步过程

当需要进行异步操作(定时器、ajax请求、dom事件注册等),主线程会发一个异步任务的请求,相应的工作线程接受请求;
当工作线程完成工作之后,通知主线程; 主线程接收到通知之后,会执行一定的操作(回调函数);

2.事件循环

主线程和工作线程之间的通知机制,叫做事件循环;

调用栈

主线程执行时生成调用栈;

任务队列

工作线程完成任务后,会把消息推到一个任务队列,消息就是注册时的回调函数;

当调用栈为空时, 主线程会从任务队列里取一条消息并放入当前的调用栈当中执行,主线程会一直重复这个动作直到消息队列为空, 这个过程就叫做事件循环;

5.渲染线程和js线程的互斥

渲染线程和js线程是互斥的,在js引擎执行时,渲染线程会被挂起;

概括如下：

js引擎为单线程运行机制，解释执行js代码的为主线程，处理异步任务的为工作线程，

工作线程完成任务后，将消息（即回调函数）放入任务队列, 当主线程的调用栈为空（即同步任务执行完毕）就会从任务队列读取消息放入调用栈执行，一直重复该动作直至消息队列为空，形成事件循环。