前端面试 - 浏览器相关知识点
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 条评论
下一页
为你推荐
查看更多