5

比如说，我有一个要使用 Javascript 处理的 HTML 文件。例如：

  • 添加一些 DOM 元素，例如span或div包装器。
  • 稍微更改文档样式，例如基本字体大小、行高等。
  • 使用连字符来添加­实体。

什么是最有效的方法来做到这一点，即我想用最少的回流来做到这一点。

理想的情况是在第一个布局之前运行 JS 代码。这可能吗？我知道，在显示页面之前执行昂贵的脚本通常是一个坏主意，因为这会使页面在一段时间内看起来很空白，这是一种非常糟糕的体验。但是，我将需要它离线工作，这对我的项目来说不是问题。

或者，有没有办法一次性完成所有的 dom 修改，即在所有修改完成后触发回流？

4

4 回答 4

6

有几种方法。所有这些的主要目标是您最终导致一次 - 或至少尽可能少 - 回流/重绘。

非 DOM 元素

您可以在不附加到 DOM 的情况下使用元素，然后在所有内容设置完成后将所有内容附加在一起。

唯一的问题是如果您的代码需要引用偏移尺寸，因为尚未在 DOM 中的元素没有任何元素。

var container = document.createElement('section'); //not in the DOM yet
//do some extensive work here to prepare the doc
document.body.appendChild(container); //now we go to the DOM, causing a single re-paint

文档片段

这个主题的一个更正式且可能改进的变体是文档片段，它带来了性能优势（显然）。它们实际上是第二个没有显示的独立 DOM。

细绳

可能所有这些中最快的方法是将您的文档构建为字符串。显而易见的含义是您不能在其上使用 DOM 方法，但如果您对字符串处理和 REGEX'ing（当然在 HTML 上不理想）感到满意，则值得考虑。

最后，如果速度至关重要，并且您有大量的计算或字符串处理工作要做，那么您可能想要利用网络工作者。这些不能直接与 DOM 对话，但您可以将任务外包给它们，而且至关重要的是，它们在单独的线程上异步工作。

于 2012-07-07T10:46:09.463 回答
3

documentElement从 中删除document，对其进行修改并将其添加回document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>...</title>           
    </head>
    <body>
        <script type='text/javascript'>
var docElem = document.documentElement,
    parentNode = docElem.parentNode,
    nextSibling = docElem.nextSibling;
parentNode.removeChild(docElem); // reflow
// ...
docElem.lastChild.appendChild(docElem.ownerDocument.createElement('hr'));
// ...
parentNode.insertBefore(docElem, nextSibling); // reflow
        </script>
    </body>
</html>

这会触发两次回流和零到两次额外的重绘。

jsFiddle

于 2012-07-07T11:32:58.020 回答
0

我相信由浏览器决定然后重排内容。他们尽量在脚本执行完成之前不这样做。这里需要注意的是，例如，当您将 div 附加到文档正文时，它会导致 DOM 重新计算。为此，您可以使用 documentFragment 附加元素，然后将自身分段到正文。虽然如果在您的情况下，您需要将 1 个元素附加到不同的容器，它不会有太大帮助。

额外阅读 documentFragment：http ://ejohn.org/blog/dom-documentfragments/

于 2012-07-07T10:42:09.217 回答
-1

我认为你不能在页面加载之前处理样式或 DOM 元素。首先它加载然后你开始调整页面。我会隐藏加载页面并对其进行调整并显示。隐藏方法：

  1. 一切都加载到屏幕 X/Y 坐标之外，然后你把它设置为 0,0
  2. 内容页面数据具有样式的 DIV：显示：无或可见性：隐藏http://www.w3schools.com/css/css_display_visibility.asp在这里查看详细信息。
  3. 它可以是你在 1 像素 iframe 内加载页面，你作为父页面所有者可以控制子页面。完成你的调整后，调整 iframe 的大小，隐藏它的框架。
  4. 使用 Z 索引并将全尺寸非透明 DIV 黑色或白色隐藏在下面。准备好后将其删除

选择更适合您风格的。

于 2012-07-07T10:46:17.143 回答