JS进阶 - 浏览器工作原理

一、浏览器的结构

浏览器的主要组件为:

  • 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口(显示页面),其他部分都属于用户界面。
  • 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。
  • 渲染引擎 - 显示(渲染)请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
  • 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
  • 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。公开了与平台无关的通用接口,在底层使用操作系统的用户界面方法。
  • JavaScript 解释器。用于解析和执行 JavaScript 代码。
  • 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

JS进阶 - 浏览器工作原理_第1张图片

二、渲染引擎

渲染引擎负责渲染——即渲染HTML/XML文档或者图片(通过插件可以渲染PDF等等)。渲染引擎有

  • Chrome/Safari - Webkit
  • Firefox - Gecko
  • Edge - EdgeHTML(不在本文讨论范围)

(一)渲染主流程

浏览器从网络层获取请求的文档内容,然后开始渲染流程:

  • 解析并开始构建 content tree(element --> DOM nodes),同时解析样式数据(外部CSS和style元素);
  • 两者结合构建 render tree(渲染树包含带有视觉属性(如颜色和尺寸)的矩形们)
  • 在渲染树创建后进入 Layout 阶段,给渲染树的每个节点设置在屏幕上的位置信息
  • Paint 阶段,通过 UI backend 绘制 render tree 到屏幕。

注意,渲染过程是渐进式的。浏览器会尽早展示文档内容,即不会在所有HTML文档解析完成后才会去构建render tree,而是部分内容被解析和展示,并继续解析和展示剩下的。

对chrome而言,渲染的具体流程是

JS进阶 - 浏览器工作原理_第2张图片

对firefox而言,

JS进阶 - 浏览器工作原理_第3张图片

(二)处理脚本和样式表的顺序

  1. script 是同步的

    web模型一直是同步的,即网页作者希望引擎遇到

你可能感兴趣的:(JS进阶 - 浏览器工作原理)