页面渲染是什么意思

页面渲染的意思是指：页面渲染引擎的基本操作，简单而言就是从一个网页的Url开始，根据Url所对应的网页各项资源，输出可视化的结果的过程。repaint(重绘)和reflow(回流)是影响渲染速度的两个因素。

一、什么是渲染

页面渲染引擎的基本操作，简单而言是从一个网页的Url开始，根据Url所对应的网页各项资源，输出可视化的结果的过程；

基本流程可大致分为：

Compute Style。根据Url读取解析Html、Css文件，根据Html代码形成Dom（文本对象模型）Tree，根据Css形成Css Rule Tree（Css规则树）；

Construct Frames。在Dom Tree和Css Rule Tree之上，创建一颗由一组待生成对象组成的Rendering Tree （渲染树）；

Layout。计算每个Element（对象）的位置，定位坐标和大小，是否换行，各种position, overflow, z-index属性等等等等；

Painting。将Rendering Tree（渲染树）上的元素展现在浏览器上，形成可视化结果。

二、影响渲染速度的两个因素

repaint(重绘)

如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow（在IE中例外，reflow 要比 repaint 更缓慢）。

reflow(回流)

说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。

reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

如何尽量避免reflow(回流) ：

reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。