页面渲染是什么意思

六六 TOP1 679

页面渲染的意思是指:页面渲染引擎的基本操作,简单而言就是从一个网页的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,都会导致它的子结点及祖先结点重新渲染。

回复

我来回复
  • 暂无回复内容

联系我们
关注微信
关注微信
分享本页
返回顶部