浏览器的主要作用
浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示选择的网络资源。
浏览器的组成结构
用户界面（User Interface）
包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的请求页面外，其他显示的各个部分都属于用户界面
浏览器引擎（Browser engine）
在用户界面和渲染引擎之间传送指令。
渲染引擎（Rendering engine）
负责显示请求的内容，如果请求的内容是HTML，它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上。
网络（Networking）
用于网络调用，比如HTTP请求。其接口与平台无关，并为所有平台提供底层实现。
用户界面后端（UI Backend）
用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
JavaScript解释器（JavaScript Interpreter）
用于解析和执行JavaScript代码，如V8引擎。JS引擎线程负责解析JavaScript脚本，运行代码。
JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行。
数据存储（Data Persistence）
这是持久层。浏览器需要在硬盘上保存各种数据，例如Cookie。新的HTML规范（HTML5）定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
浏览器是多进程的
进程线程简单的理解：进程里面可以有多个线程，进程就是聊天工具，线程是单个会话
- 浏览器是多进程的
- 浏览器之所以能够运行，是因为系统给它的进程分配了资源（CPU、内存）
- 简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。
浏览器里面的进程
1.Browser进程： 浏览器的主要进程（负责协调、主控），只有一个。
作用有
- 负责浏览器界面显示，与用户交互。如前进，后退等。
- 负责各个页面的管理，创建和销毁其他进程
- 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
- 网络资源的管理，下载等
2.第三方插件进程： 每种类型的插件对应一个进程，仅当使用该插件时才创建
3.GPU进程： 最多一个，用于3D绘制等。
4.渲染进程（浏览器内核）（Renderer进程，内部是多线程的）
- 默认每个Tab页面一个进程，互补影响
- 主要作用为页面渲染，脚本执行，时间处理等
渲染进程是多线程的：
1.GUI 渲染线程
- 负责渲染那浏览器界面，解析HTML，CSS，构建DOM树和RendererObject树，布局和绘制等。
- 当界面需要重绘（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行
- 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即执行。
2.JS 引擎线程
- 也称为JS内核，负责处理Javascript脚本程序。
- JS引擎线程负责解析Javascript脚本，运行代码。
- JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行
- 同样注意，GUI渲染线程与JS引擎线程是互斥的。所以如果JS执行的时间过长，要放在body下面，否则会导致页面渲染加载阻塞。
3.事件触发线程
- 管理着事件队列
- 监听事件，符合条件时把回调函数放入事件队列中
4.定时触发器线程
- setInterval与setTimeout在此线程中计时完毕后，把回调函数放入事件队列中
- 浏览器定时计数器并不是由JavaScript引擎计数的，（因为JavaScript引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确），因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
- 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms
5.异步http请求线程
- 检测到XHR对象状态变化时，将回调函数放入事件队列中
- 将检测到状态变更时，如果设置有回调函数，异步线程就产生转态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。
渲染线程与JS引擎线程互斥
由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JS线程和UI现成同时运行），那么渲染线程前后获得的元素数据可能不一致。
因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JS引擎互斥的关系，当JS引擎执行时GUI线程会被挂起，GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
console.log('===>>>', document.getElementById('example')) // 获取不到这个元素对象，打印出来的是null
document.getElementById('example').style.color = 'red' // Hellow World的字体颜色不会变成红色
// 执行script标签内的脚本时，JS引擎执行，GUI的渲染会被挂起，获取不到对应的DOM对象，出现错误，阻塞整体项目进程。
</script>
</head>
<body>
<div id="example">
Hellow World!!!
</div>
</body>
</html>
JS阻塞页面加载
从上述的互斥关系，可以推导出，JS如果执行时间过长就会阻塞页面。
譬如，假设JS引擎正在进行巨量的计算，此时就算GUI有更新，也会被保存到队列中，等待JS引擎空闲后执行，然后，由于巨量计算，所以JS引擎很可能很久后才能空闲，自然会感觉到巨卡无比。
所以，要尽量避免JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
总结：
- 浏览器是多进程的，一个Tab是一个进程
- 渲染进程是多线程的，最主要的是Renderer线程与JS线程
- Javascript阻塞DOM解析
3890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
