1. 简述对浏览器的理解
浏览器主要用于呈现用户选择的web资源
通过统一资源定位符（URL）请求服务器资源，并显示在浏览器窗口中，资源格式通常是HTML、PDF、image，还有一些其他格式
浏览器分为内核和外壳（shell），外壳主要提供用户界面操作、参数设置等，外壳调用内核实现各种功能。内核是浏览器功能实现的核心。
2. 简述对浏览器内核的理解
浏览器内核主要分两部分：渲染引擎和JS引擎
渲染引擎主要用于显示请求的内容，如HTML、XML和图片等，也可以通过一些处理显示PDF等
JS引擎：解析执行JavaScript实现网页交互
3. 常见的浏览器内核
- Trident内核：也叫IE内核，现在已经没落
- Gecko：火狐浏览器内核
- Presto：Opera曾经采用，现在Opera采用Blink
- Webkit：Ssfari内核
- Blink：Chromium项目内核，现在EDGE、Chrome等浏览器都是使用Blink，是webkit的分支
- 移动端浏览器主要还是基于webkit的二次开发
4. 简述浏览器的渲染过程
- 解析文档，生成DOM元素和属性节点组成的DOM树
- 解析CSS，生成CSSOM规则树
- 根据DOM树和CSSOM规则树构建渲染树
- 根据渲染树进行布局（回流），自动重排
- 遍历渲染树，调用渲染对象，将内容呈现在屏幕
注意：
渲染过程不是全部完成后才呈现内容，而是解析一部分就显示一部分，同时还可能通过网络下载其他内容
5. 渲染过程中遇到js文件怎么处理（浏览器解析过程）
js的加载、解析和执行会阻塞文档解析。
HTML解析器在遇到JavaScript时会暂停解析，将控制权交给JS引擎，等运行完后再重新解析文档
这就是建议将脚本卸载body底部的原因，当然也可以给script添加defer或者async属性
defer属性表示延迟执行引入的JavaScript，HTML文档解析和JS解析是并行的，HTML解析不会停止，等整个文档解析完毕，在DOMContentLoaded 事件触发之前才顺序执行脚本
async属性表示异步执行引入的JavaScript，与defer的区别是脚本解析不会阻塞文档解析，但执行会阻塞，且多个脚本间的顺序不能保证
6. 文档预解析（浏览器解析过程）
文档预解析是浏览器内核对解析过程的优化
在执行JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络请求的资源。这种方式使资源加载并行，加快整体速度。
文档预解析不会改变DOM树，只会解析外部资源的引入（脚本、样式、图片），构建DOM树是主解析过程的任务
7. CSS阻塞文档解析（浏览器解析过程）
理论上样式表不改变DOM树，不必停下文档解析等待样式加载。
实际上，JavaScript脚本中可能会请求样式信息，如果此时样式没有加载解析，会导致很多问题。
如果浏览器尚未完成CSSOM下载构建，想执行JavaScript，浏览器会延迟脚本执行，先下载构建CSSOM，然后执行脚本，最后接着解析文档。
8.渲染页面时常见的不良现象（浏览器渲染过程）
- FOUC：样式闪烁。一些浏览器的渲染机制（如Firefox）在css加载之前，先呈现HTML结构，由于样式加载时间过长或者样式放在底部，导致显示无样式，然后样式突然显示的现象
- 白屏：一些浏览器的渲染机制（如Chrome）要先构建DOM树和CSSOM树，然后渲染。如果样式在底部，没有加载完，浏览器迟迟没加载完，会导致白屏。或者将js脚本放在头部，导致文档解析阻塞，迟迟没有渲染，从而白屏。
9. 优化关键渲染路径（浏览器渲染过程）
为了尽快完成首次渲染，需要最大限度减小关键资源数量、关键路径长度、关键字节数量三种可变因素。
优化关键渲染路径的常规步骤如下：
（1）对关键路径进行分析和特性描述：资源数、字节数、长度。
（2）最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。
（3）优化关键字节数以缩短下载时间（往返次数）
（4）优化其余关键资源的加载顺序：需要尽早下载所有关键资产，以缩短关键路径长度
10.重绘和回流（浏览器绘制过程）
重绘：渲染树的一些元素更新属性只影响元素的外观、风格，不影响布局的操作。
回流：因为元素的规模尺寸、布局、隐藏等改变而需要重构的，会影响布局的操作。
常见引起回流的属性和方法：
任何改变元素的位置、大小的操作都会引起回流。如：
- 添加、删除可见的DOM元素
- 改变元素的边距、边框、填充、宽度、高度
- 元素内容变化
- 浏览器窗口尺寸改变
- 计算offsetWidth/offsetHeight属性
- 设置style属性值
- 修改网页默认字体
回流必定重绘，重绘不一定回流。
回流的成本比重绘高的多，父节点里的子节点改变可能会导致父节点的一系列回流
11. 减少回流的措施（浏览器绘制过程）
- 不要使用table布局，可能一个小改动会导致整个table的重新绘制
- 不要把节点的属性值放在一个循环中当成循环变量
- 不要一条条修改DOM样式
- DOM离线后修改
- ……
12. 操作DOM慢的原因（浏览器绘制过程）
一些DOM的操作或者属性访问会引起也买你的重绘和回流，增加性能消耗。
13. DOMContentLoaded事件与Load事件的区别
HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的加载完成。
Load 事件是当所有资源加载完成后触发的。
|