html5 页面渲染数据 html如何渲染页面

1.渲染引擎

渲染引擎大致包括HTML解析器、CSS解析器、布局和JavaScript引擎。

• HTML解析器：解析HTML，将HTML文本解析成DOM树。
• CSS解析器：解析CSS，将DOM中的各元素加上样式信息，形成CSSOM树，给布局提供依据。
• 布局：将DOM树和CSSOM树结合起来，计算它们的大小、位置等布局信息形成一个能表示这所有信息的模型——Render树。
• JavaScript引擎：解析JavaScript代码，并把代码的逻辑和对DOM、CSS的改动应用到布局中。
• 这些模块依赖很多基础模块，包括网络、存储、2D/3D图形、音视频、解码器等。实际上，渲染引擎还包括如何使用这些依赖模块的部分。

2.渲染过程

浏览器内核拿到内容后，渲染大致分为以下五步：

1. 解析html，构建DOM树；解析css，构建CSSOM树。
2. 合并DOM树和CSSOM树，生成Render（渲染）树。
3. 布局Render树，负责各元素的尺寸、位置计算。
4. 绘制Render树，绘制页面像素信息。
5. 浏览器会将各层信息发给GPU，GPU会将各层合成，显示在页面上。

3.重排和重绘

重排（reflow）：改变文本内容、结构、元素位置或大小时，页面会进行重构。
重绘（repaint）：改变元素的背景颜色、可见性等不影响位 置的属性，页面会进行重绘。


重绘不一定会重排，但重排一定会重绘。

会触发重绘的几种事件：

• DOM操作（如元素的增、删、改）
• 内容变化（包括表单的文本域变化）
• CSS属性的计算或改变
• 增加或删除样式表
• 缩放、滚动浏览器窗口
• 伪类激活（如悬停）

4.优化渲染的方法

• 将需要多次重排的元素（如有动画效果的元素），position设为absolute或fixed。这样元素会脱离文档流，它的变化不会影响其他元素。
• 将多次改变属性样式的操作合并成一次操作。
• 如果一个元素需要进行复杂的操作，可以先隐藏它（display:none），操作完后再显示，这样只会触发两次重排（隐藏和显示）。

display:none ：隐藏元素，不占据网页的空间，网页的结构会发生变化，所以会引起一次重排和重绘。
visibility:none ：隐藏元素，但占据网页的空间，网页的结构不变，内容会变，所以只会引起一次重绘。
overflow:hidden ：裁剪元素，把超出部分裁剪掉，网页的结构会发生变化，所以会引起一次重排和重绘。