1. 浏览器内核浏览器功能：计算机上出现的网页实际上是位于各种计算机文件中的元素的集合。因此，浏览器的功能就是首先检索文件，然后组装页面的各个部分，并根据文本中的HTML命令排列各个部分。
浏览器的核心分为两部分：渲染引擎和JavaScript引擎。其中，渲染引擎是浏览器核心中较为重要的部分。 Core目前指的是渲染引擎。
常见的浏览器内核：
4 核：
1.三叉戟内核。也称为IE 内核。
2.Webkit内核。
3.Gecko内核。
4.急速核心。
各浏览器使用的内核：
1. IE浏览器内核：Trident内核。通常也称为IE 内核。
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核。
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核。
4. Safari浏览器内核：Webkit内核。
5. Opera浏览器内核：最初是专有的Presto内核，然后是Webkit，现在是Blink内核。
6、360浏览器、猎豹浏览器核心：IE+Chrome双核；
7、搜狗、傲游、QQ浏览器核心：Trident（兼容模式）+Webkit（快速模式）。
8.百度浏览器、世界之窗内核：IE内核。
9. 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核。
二、浏览器显示页面的步骤1、从网络层（network）获取请求文档的内容，解析HTML/SVG/XHTML，形成DOM树（DOM tree）。
默认情况下，加载和运行JavaScript 会阻止构建DOM 树。
内部js脚本在引入的地方执行，外部脚本在加载后执行。
注意：因此，无论是内联脚本还是外部脚本，都必须放在标签末尾之前（页面加载之前），以保证页面本质上加载完毕（除非需要调用一些脚本）。在运行脚本之前加载。
2.解析CSS代码，计算最终的样式数据，生成CSS规则树。
CSS解析的顺序：浏览器默认设置、用户设置、外部链接样式、内联样式、HTML样式。
3. 解析JavaScript
通过DOM API 操作DOM 树，通过CSSOM API 操作CSS 规则树
4、解析完以上三个代码后，构建渲染树（rendering tree）。
渲染树和DOM树的区别如下：
渲染树不包含不需要渲染的节点。 HTML 头元链接样式脚本显示： 无渲染树中的每个节点都存储相应的CSS 属性。
5. 一旦开始渲染，页面初始化时就会发生重排。
3. 页面重绘和回流1. 什么是页面重绘和回流？
回流：当由于元素大小、布局、隐藏等变化而需要重建部分（或全部）渲染树时。 （布局和几何属性可能需要更改）
重绘：如果渲染树中的某些元素需要更新属性，这些属性仅影响元素的外观和样式，而不影响布局，例如背景颜色。这称为重绘。
因此，回流必然会影响重绘，而重绘可能会阻止回流的发生。回流比重喷贵
2.什么时候会发生回流焊？
如果页面布局或几何特征发生变化，则需要回流焊。浏览器回流发生在以下情况：
1. 添加或删除可见的DOM 元素。
2. 元素位置发生改变。
3. 调整元素大小—— 边距、填充、边框、宽度、高度
4.计算内容变化引起的宽度和高度变化，例如文本变化或图像尺寸变化。
5.初始化页面渲染。
6. 如果浏览器窗口大小发生变化并触发——resize 事件（因此需要调整该功能）。
3. 浏览器针对回流和重绘的优化工作
浏览器维护一个队列，并将所有引起回流和重绘的操作放入这个队列中。当队列中的操作数量达到一定数量或一定时间间隔时，浏览器释放队列并执行批处理。这会将多次回流和重绘变成一次回流和重绘。 （感觉和文档碎片的frameElement类似）
有浏览器优化，但是你编写的某些代码可能会强制浏览器提前释放队列，因此浏览器优化可能不会有效。当您向浏览器请求任何样式信息时，浏览器会被要求释放队列。例如：
offsetTop, offsetLeft, offsetWidth, offsetHeightscrollTop/Left/Width/HeightclientTop/Left/Width/Heightwidth, height 当您在IE 中请求getCompulatedStyle() 或currentStyle 时，浏览器会返回最准确的值。队列中可能有影响这些值的操作，因此必须释放队列。即使为元素获取的布局和样式信息与最近发生或更改的布局信息无关，浏览器也会强制渲染队列更新。
4.减少回流焊和重涂
(1)不要每次都改变DOM样式
兑换方式：
提前定义CSS，然后更改DOM中的className和样式中的style.cssText。
(2) 将DOM下线然后修改
您可以首先将DOM 指定为display:none （带回流），然后根据需要进行更改。例如，改变100次，然后再次显示。将DOM 节点复制到内存中并根据需要进行修改。更改完成后，将其替换为在线节点。
(3) 不要将DOM节点的属性值作为循环变量放入循环中。
(4)尽可能修改下层DOM
(5) 对动画HTML 元素使用固定或绝对位置
使用固定或绝对的元素将从文档流中取出，并且在更改CSS 时不会重排。
(6) 切勿使用表格布局
注意：CSS 匹配DOM 树主要从右到左解析CSS 选择器。这是一个非常复杂的性能问题。 DOM 树应该很小，CSS 应该尽可能多地使用ID 和类，而不是覆盖它们。
欢迎并关注。
本文和图片来自网络，不代表火豚游戏立场，如若侵权请联系我们删除：https://www.huotun.com/game/668683.html