相关疑难解决方法(0)

什么类型的活动会触发带有DOM的网页重排？

似乎有不同的观点.根据http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/,它发生了

• 添加或删除DOM节点时.
• 动态应用样式时(例如element.style.width ="10px").
• 当您检索必须计算的度量时,例如访问offsetWidth,clientHeight或任何计算的CSS值(通过DOM兼容浏览器中的getComputedStyle()或IE中的currentStyle).

但是,根据http://dev.opera.com/articles/view/efficient-javascript/?page=3,只有当已经排队的重排操作时,测量才会触发重排.

有没有人有更多的想法？

情况就是这样.我有一些看起来像这样的JavaScript:

function onSubmit() {
    doSomeStuff();
    someSpan.style.display="block";
    otherSpan.style.display="none";
    return doLongRunningOperation;
}

当我将其作为表单提交操作并从非IE浏览器运行时,它会快速交换两个跨度可见性并运行长时间的javascript操作.如果我在IE中执行此操作,则直到onSubmit()完全返回后才会执行交换.

我可以通过粘贴一个警告框来强制重绘:

function onSubmit() {
    doSomeStuff();
    someSpan.style.display="block";
    otherSpan.style.display="none";
    alert("refresh forced");
    return doLongRunningOperation;
}

此外,明显的jquery重构不会影响IE行为:

function onSubmit() {
    doSomeStuff();
    $("#someSpan").show();
    $("#otherSpan").hide();
    return doLongRunningOperation;
}

IE8和IE6上存在此行为.反正是否强制在这些浏览器中重绘DOM？

<div>在将它们插入到 DOM 之前，我需要获取许多小元素的大小。

目前，我暂时添加它们，获取它们的offsetWidthand offsetHeight，然后再次删除它们：

document.body.appendChild(child);
size = [child.offsetWidth, child.offsetHeight]
document.body.removeChild(child);

问题是，这太慢了，因为它会触发每个<div>被测量的回流。

你知道如何加快速度吗？

我是一个jQuery noob试图追踪我们对大表的性能问题.我们有一个自制的表小部件,除其他外,它将列宽设置为标题宽度或行宽的最大值.

使用10行乘500列的表,这可能需要将近40秒(!),这似乎是过分的,因为表可以在一秒钟内呈现.

这是整个功能:

  var dataTable = this._div.find('.data-table');
  var headerTable = this._div.find('.data-header-table');
  if (dataTable.length === 0 || headerTable.length === 0) {
    return;
  }
  dataTable = dataTable[0];
  headerTable = headerTable[0];

  if (dataTable.rows.length === 0) {
    return;
  }

  var dataTr = dataTable.rows[0];
  var headerTr = headerTable.rows[headerTable.rows.length - 1];

  var marginColumnWidths =
    $(dataTr.cells[0]).outerWidth(true) +
    $(dataTr.cells[1]).outerWidth(true) +
    $(dataTr.cells[2]).outerWidth(true) -
    DOM.getHPaddings($(headerTr.cells[0])) + 1;

  $(headerTable)
    .find('> tbody > tr > td:first-child')
    .width('1%')
    .children()
      .first()
      .width(marginColumnWidths);

  for (var i = 1; i < headerTr.cells.length; i++) {
    var …