页面渲染是什么意思 |
您所在的位置:网站首页 › 渲染图画什么意思 › 页面渲染是什么意思 |
页面渲染是指,页面渲染引擎的基本操作,简单而言就是从一个网页的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,都会导致它的子结点及祖先结点重新渲染。 最后,推荐我们的管理工具给大家。 ![]() ![]() |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |