前端面试 - 浏览器相关知识点
2021-01-26 19:40:04 0 举报AI智能生成
整理了前端面试中可能会出现的浏览器相关的知识点
作者其他创作
大纲/内容
构成
用户界面
浏览器引擎
网络
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
0 条评论
下一页
