cvmachine.com - 申博开户网

查找: 您的方位主页 > 电脑频道 > 电脑教程 > 阅览资讯:怎么样运用css进行重绘与重排?

怎么样运用css进行重绘与重排?

2018-03-19 11:16:53 来历:www.cvmachine.com 【

怎么样运用css进行重绘与重排?

浏览器加载页面原理

一般在文档初度加载时,浏览器引擎会解析HTML文档来构建DOM树,之后依据DOM元素的几许特点构建一棵用于烘托的树。烘托树的每个节点都有巨细和边距等特点,类似于 盒子模型 (因为躲藏元素不需求显现,烘托树中并不包含DOM树中躲藏的元素)。当烘托树构建完结后,浏览器就能够将元素放置到正确的方位了,再依据烘托树节点的款式特点制造出页面。因为浏览器的 流布局,对烘托树的核算一般只需求遍历一次就能够完结。但table及其内部元素在外,它或许需求屡次核算才干确定好其在烘托树中节点的特点,一般要花3倍于平等元素的时刻。这也是为什么咱们要防止运用table做布局的一个原因。

重绘

重绘是一个元素 外观的改动 所触发的浏览器行为,例如改动vidibility、outline、背景色等特点。浏览器会依据元素的新特点从头制造,使元素呈现新的外观。重绘不会带来从头布局,并不一定随同重排。浏览器在进行重绘和重排的时分是要支付昂扬的功用价值的。

重排

重排是更显着的一种改动,能够了解为烘托树需求从头核算。下面是常见的触发重排的操作:

  1. DOM元素的几许特点改动。
  2. DOM树的结构改动。

例如节点的增减、移动等.

获取某些特点。

当获取一些特点时,浏览器为获得正确的值也会触发重排。这样就使得浏览器的优化失效了。这些特点包含:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以,在屡次运用这些值时应进行缓存。

此外,改动元素的一些款式,调整浏览器窗口巨细,滚动条呈现等等也都将触发重排。

削减重排次数和重排影响规模

1、将屡次改动款式特点的操作兼并成一次操作。例如,

JS:
  var changeDiv = document.getElementById(‘changeDiv’);
  changeDiv.style.color = ‘#093′;
  changeDiv.style.background = ‘#eee';
  changeDiv.style.height = ‘200px';
  能够兼并为:
CSS:
  div.changeDiv {
    background: #eee;
    color: #093;
    height: 200px;
  }
JS:
  document.getElementById(‘changeDiv’).className = ‘changeDiv';

2、 将需求屡次重排的元素,position特点设为absolute或fixed,这样此元素就脱离了文档流,它的改动不会影响到其他元素。例如有动画作用的元素就最好设置为肯定定位。

3、 在内存中屡次操作节点,完结后再增加到文档中去。例如要异步获取表格数据,烘托到页面。能够先获得数据后在内存中构建整个表格的html片段,再一次性增加到文档中去,而不是循环增加每一行。

4、 因为display特点为none的元素不在烘托树中,对躲藏的元素操作不会引发其他元素的重排。假如要对一个元素进行杂乱的操作时,能够先躲藏它,操作完结后再显现。这样只在躲藏和显现时触发2次重排。

5、 在需求常常取那些引起浏览器重排的特点值时,要缓存到变量

以上便是本文的全部内容,期望对咱们的学习有所协助,也期望咱们多多支撑申博开户。


本文地址:http://www.cvmachine.com/dnjc/97958.html
Tags: css 重排 重绘
修改:申博开户网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部