前端需要理解的浏览器知识

前端需要理解的浏览器知识_第1张图片

1 浏览器架构

浏览器是多进程多线程的应用程序,多进程可以避免相互影响和减少连环崩溃的几率:

  1. 浏览器(主)进程:主要负责界⾯显示、⽤户交互、⼦进程管理、存储等功能。内部会启动多个线程分别处理不同的任务。
  2. ⽹络进程:负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。之前是作为一个模块运行在浏览器进程内。
  3. 渲染进程(多个):渲染进程启动后,会开启⼀个渲染主线程,主线程负责执⾏ HTML、CSS、JS 代码。默认情况下,chrome浏览器会为每个标签开启⼀个新的渲染进程,以保证不同的标签⻚之间不相互影响(参见 Chrome 官方文档。处于安全考虑,渲染进程都是运行在沙箱模式下。
    1. 新增渲染进程
      • 新增标签页,无论同源与否;
      • 当前标签页内打开非同源页面;
    2. 复用渲染进程:当前标签页内打开同源页面;
  4. GPU进程:进行页面的绘制
  5. 插件进程(多个):负责插件的运行,因插件容易崩溃,需要单独的插件进行来隔离,避免插件运行崩溃对浏览器和页面造成影响。

2 浏览器内核

浏览器由外壳(shell)和内核组成,起初浏览器内核分为渲染引擎(layout engineer或Rendering Engine)和JS引擎,随着JS引擎独立化,内核就倾向于只指渲染引擎。

渲染引擎负责网页的效果显示和内容加载JS引擎负责解析和执行JavaScript完成动态效果和交互

常见的浏览器内核和五大浏览器:trident(IE)gecko(Firefox,扩展性和功能强大,内存消耗大)、 presto(opera,快,部分不兼容性,后来转向研发使用blink)、webkit( Safari,较快,代码容错性较低)、blink(Chrome,webkit精简强化版)、EdgeHTML(edge,现在也转向使用blink)

常见JS引擎有V8(Chrome)、SpiderMonkey(Firefox)、JavaScriptCore(Safari)。

3 浏览器渲染原理

准备好渲染进程后,浏览器进程接收到网络进程的响应头数据后,向渲染进程发起“提交文档”的消息,进入提交文档的阶段:

  1. 建立传输管道:渲染进程接收到浏览器进程发出的 “提交文档” 消息后,会和网络进程建立传输数据的 “管道”;
  2. 确认提交:等数据传输完成后,渲染进程会返回 “确认提交” 的消息给浏览器进程
  3. 更新浏览器界面状态:浏览器进程收到确认提交消息后,更新界面状态,包括安全状态、地址栏的URL、前进后台的历史状态以及进入渲染页面阶段

进入渲染页面阶段:产生一个渲染任务,并将其传递给渲染主线程的消息队列。在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。

整个渲染流程分为多个阶段,分别是:HTML 解析样式计算布局分层生成绘制指令分块光栅化显示。每个阶段都有明确的输入输出,上一个阶段的输出会成为下一个阶段的输入。

解析 HTML

解析过程中遇到 CSS 解析 CSS,遇到 JS 执行 JS。为了提高解析效率,浏览器在开始解析前,会启动一个预解析的线程,率先下载HTML中的外部CSS文件和外部的JS文件。

如果渲染主线程解析到  位置,此时外部的 CSS 文件还没有下载解析好,主线程不会等待,继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。同时,CSS文件的加载会阻塞后面的脚本JS的执行,因为脚本JS可能想要获取元素的坐标和其他与样式相关的属性。CSS的加载会阻塞DOM树的渲染。

如果主线程解析到 

你可能感兴趣的:(前端,面试,前端,浏览器,chrome)