前端面试 - 浏览器相关知识点

浏览器

构成

用户界面

浏览器引擎

网络

UI后端

JS解释器

数据存储

现有浏览器与内核

IE

Trident

Chrome

Webkit-Blink

Blink是Webkit的一个分支

Firefox

Gecko

功能强大丰富，支持复杂网页效果和浏览器扩展接口，资源消耗大

Safari

Webkit

速度快，代码容错性低

Opera

Presto-Webkit-Blink

360/猎豹

IE+Chrome

搜狗/遨游/QQ

Trident+Webkit

浏览器内核

定义

主要分成两部分：渲染引擎和 JS 引擎。渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。JS 引擎：解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

渲染过程

DOM树

CSSOM规则树

生成渲染树（节点被称为渲染对象）

根据渲染树进行布局（回流/自动重排）

绘制

重绘

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘

当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流

回流

触发方式

添加或者删除可见的 DOM 元素

元素尺寸改变——边距、填充、边框、宽度和高度

内容变化，比如用户在 input 框中输入文字

浏览器窗口尺寸改变——resize事件发生时

计算 offsetWidth 和 offsetHeight 属性

设置 style 属性的值

当你修改网页的默认字体时

如何减少

使用 transform 替代 top

不要把节点的属性值放在一个循环里当成循环里的变量

不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM

不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className

为了避免JS执行请求或影响样式信息，所以如果浏览器尚未完成CSSOM的下载和构建，浏览器将延迟JS脚本执行和文档解析，直到CSSOM下载和构建完成

JavaScript的加载、解析和执行会阻塞文档的解析，如果遇到<script>标签，当前执行流程会转移到JS引擎；所以脚本位置后移是比较好的，也可以添加defer或async属性

defer

defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。

async

async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。

默认

浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行

如何优化渲染路径

对关键路径进行分析和特性描述：资源数、字节数、长度

最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等

优化关键字节数以缩短下载时间（往返次数）

优化其余关键资源的加载顺序：您需要尽早下载所有关键资源，以缩短关键路径长度

主流程

页面解析在 Renderer 进程中进行，Renderer 进程通过在主线程中持有的 Blink 实例边接收边解析 HTML 内容

每次从网络缓冲区中读取 8KB 以内的数据。浏览器自上而下逐行解析 HTML 内容，经过词法分析、语法分析，构建 DOM 树

遇到外部CSS链接时，主线程调用网络请求模块异步获取资源，不阻塞DOM树构建。下载完后，主线程解析CSS内容，经过词法、语法分析构建CSSOM树

浏览器结合DOM和CSSOM树构建Render树，计算布局属性（每个Node的集合属性、在坐标系中的位置）

通信

多个标签页之间的通信

使用 WebSocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端

使用 SharedWorker （仅支持 chrome ），两个页面共享同一个线程，通过向线程发送数据和接收数据来实现标签页之间的双向通行

var myWorker = new SharedWorker('worker.js');myWorker.part.start();

使用本地存储的方式，通过监听本地存储改变的事件来获取对应的数据

使用postMessage，只要能获得对应标签页的引用

新增API

页面可见性

作用

减少网页在不可见时的行为

对服务器轮询

动画

音频视频的播放

API内容

Document.hidden

Document.visibilityState

Document: visibilitychange