BrowserStack-浏览器引擎及渲染机理
2021-02-22 00:29:05
BrowserStack涉及的浏览器引擎主要为Blink、Webkit、Gecko等，渲染机理包括解析HTML/CSS生成DOM/CSSOM树、合并为渲染树、计算布局并绘制页面，二次渲染时可能触发重排或重绘。以下是具体内容：
一、浏览器引擎与内核- 引擎分工：现代浏览器包含渲染引擎（处理HTML/CSS）和JS引擎（执行JavaScript），两者通过DOM数据结构关联。
- 内核定义：浏览器内核最初指JS引擎，但随着JS扩展至非浏览器环境，内核现通常仅表示渲染引擎。
渲染引擎：
Firefox：Gecko
Chrome & Opera：Blink（Google联合Facebook、IBM、Opera等开发）
Safari：Webkit
IE：Trident
Edge：Edgehtml → Blink（2020年更新）
JS引擎：
Firefox：SpiderMonkey
Chrome：V8（最通用，用于Node.js和Deno）
Safari：JavaScriptCore
IE：Chakra
Edge：Chakra → V8（2020年更新）
解析对象模型：
DOM树：读取HTML文件，根据标签和层级关系创建树形结构。
CSSOM树：分析CSS生成另一树形结构。
目的：树形结构的节点（Node）包含对象属性和方法，提供编程接口（如通过JS操作元素）。
JS动态修改：根据JS代码更新DOM树和CSSOM树（若无修改则跳过）。
合并渲染树：
合并DOM树和CSSOM树生成渲染树（Render Tree）。
排除项：不参与布局的内容（如<meta>、<link>、display:none）不会被加入。
保留原因：DOM树和CSSOM树需保留以支持JS交互。
计算布局：
根据渲染树确定节点几何信息（位置、尺寸）。
优化：若几何布局未改变（如仅修改颜色），二次渲染可跳过此步骤。
绘制页面：
浏览器根据布局确定像素显示，利用GPU完成绘制。
流程图：
定义：
重排（Reflow/Layouting）：影响布局的更改（如宽高、浮动、DOM操作）触发重新计算布局。
重绘（Repaint）：仅视觉内容变化（如颜色、透明度）触发重新绘制。
性能优化：
减少次数：重排和重绘是前端性能优化的关键，需尽量降低频率。
浏览器优化：
队列机制：多个连续变化暂存队列，每帧批量执行并清空队列。
例外情况：请求盒子模型属性（如clientTop、scrollTop）或元素样式（如getComputedStyle()）会强制清空队列。
部分重解析：初次渲染的解析步骤可部分执行。
JS修改优先：若页面加载时JS已修改DOM/CSSOM，会先执行更改再生成渲染树。
开发者优化：
参考资源：
Minimizing Repaints And Reflows网页性能管理详解
- 核心功能：解析和执行JavaScript代码，与渲染引擎通过DOM交互。
- 主流引擎：V8（Chrome/Node.js）、SpiderMonkey（Firefox）、JavaScriptCore（Safari）。
热门标签
