浏览器工作原理

Posted samfung

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器工作原理相关的知识,希望对你有一定的参考价值。

先从进程、线程说起

形象一点比喻,比如一开一家饭店,那就是一个进程,饭店里只请一个员工干活那就是单线程,如果有多个员工干活那就是多线程。
通常来说,打开一个程序就是开了一个进程(也有些程序是多进程的),系统会给它开辟一块内存用于运行。
对于进程线程专业一点说辞:

  • 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
  • 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程)
  • 不同进程之间也可以通信,不过代价较大
  • 现在,一般通用的叫法:单线程与多线程,都是指在一个进程内的单和多。(所以核心还是得属于一个进程才行)

浏览器是多进程的

浏览器是多进程的。chrome中 更多工具 => 任务管理器 查看。
浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu、内存)
简单点理解,每打开一个Tab页,就相当于创建了一个独立的浏览器进程(并不绝对,譬如打开多个空白标签页后,会发现多个空白标签页被合并成了一个进程)。
浏览器都有哪些进程:

Browser进程

浏览器的主进程(负责协调、主控),只有一个。作用有

  • 负责浏览器界面显示,与用户交互。如前进,后退等
  • 负责各个页面的管理,创建和销毁其他进程
  • 将Renderer进程得到的内存中的Bitmap,绘制到用户界面上
  • 网络资源的管理,下载等

第三方插件进程

每种类型的插件对应一个进程,仅当使用该插件时才创建

GPU进程

最多一个,用于3D绘制等

浏览器渲染进程(浏览器内核)

(Renderer进程,内部是多线程的):默认每个Tab页面一个进程,互不影响。主要作用为

  • 页面渲染,脚本执行,事件处理等

浏览器多进程的好处

某个扩展插件或者标签页面出问题不至于影响到整个浏览器。

浏览器内核(渲染进程 - 重点)

对于前端来说,主要关注的是渲染进程,因为页面的渲染,JS的执行,事件的循环,都在这个进程内进行。
该进程内的一些主要线程:

1、GUI渲染线程

  • 负责渲染浏览器界面,解析html,CSS,构建DOM树和RenderObject树,布局和绘制等。
  • 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行
  • 注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。(所以说JS执行会阻塞HTML解析)

2、JS引擎线程

  • 也称为JS内核,负责处理javascript脚本程序。(例如V8引擎)
  • JS引擎线程负责解析Javascript脚本,运行代码。
  • JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序(JS单线程)
  • 同样注意,GUI渲染线程与JS引擎线程是互斥的,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。

3、事件触发线程

  • 归属于浏览器而不是JS引擎,用来控制事件循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助)
  • 当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中
  • 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理
  • 注意,由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)

4、定时触发器线程

  • 传说中的setInterval与setTimeout所在线程
  • 浏览器定时计数器并不是由JavaScript引擎计数的,(因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确)
  • 因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)
  • 注意,W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。

5、异步http请求线程

  • 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
  • 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由JavaScript引擎执行。

页面渲染

不同浏览器的渲染引擎

  • Firefox:Gecko
  • Safari:Webkit
  • Chrome:Blink(旧版本Webkit)
  • IE:Trident
  • Edge:EdgeHTML

正常网页加载流程是这样的

  1. 浏览器一边下载HTML网页,一边开始解析。也就是说,不等到下载完就开始解析。
  2. 解析过程中,浏览器发现 script 元素,就暂停解析,把页面渲染的控制权交给 JavaScript 引擎。(script标签的defer、async属性,见下面的外链
  3. 如果 script 元素引用外部脚本,就下载该脚本再执行,否则直接执行代码。
  4. JavaScript 引擎执行完毕,控制权交还给渲染引擎,恢复往下解析HTML网页。
  5. HTML代码解析为DOM,CSS代码解析为CSSOM(CSS Object Model)。
  6. DOM和CSSOM合成渲染树(render tree)。
  7. 计算渲染树布局(layout),将渲染树绘制到屏幕。

HTML解析

回流重绘

你真的了解回流重绘吗?

以上是关于浏览器工作原理的主要内容,如果未能解决你的问题,请参考以下文章