3

在与自己进行了多次辩论后，我决定动态创建覆盖画布的 div。但我有一个问题。动态创建 div 有多贵？如果我有一个完整的画布——1000x1000——充满了 16x16 的 div，会不会很混乱？如果有1000个隐藏的div会更糟吗？（或显示：无）？

或者我应该只将鼠标坐标与将容纳 x、y 位置的容器进行比较，并且必须将图像渲染到画布上。

我倾向于第一个更有效率，但我不确定。也许有一个中间立场。

对回复很感兴趣！谢谢你的时间。

（如果这是转发，对不起，我试图谷歌）

4

2 回答 2

4

这完全取决于如何将 DIV 插入 DOM。理想情况下，您应该在内存中构建 DIV，并通过单个操作将它们注入 DOM。有多种方法可以做到这一点（有关各种完整示例，请参阅基准测试用例）。

如果你使用 jQuery，你可以像这样在内存中构建元素：

var i = 1000;
var aHTML = [];
while (i--) {
  aHTML.push("<div>a new div</div>");
}
var sHTML = aHTML.join("");
var domElmt = $(sHTML);

然后将该 DIV 插入 DOM：

$('body').append(domElmt);

如果您不使用 jQuery，则需要使用createDocumentFragment, cloneNode,appendChild等。这些是本机浏览器方法，速度最快（我可以在 Intel Q8200 上使用 Chrome 21 实现大约双倍速度）但使用这些本机方法将如果您需要构建复杂的 DOM 结构，则使用起来会更加棘手。本机方法也可能存在跨浏览器支持问题。

如果您对它的工作原理感兴趣，请查看 John Resig 的这篇旧文章：http: //ejohn.org/blog/dom-documentfragments/

现在将其与使用每个 DIV 访问 DOM 的方法进行对比：

var i = 1000;
while (i--) {
    $('body').append("<div>a new div</div>");
}

代码行数更少，但效率很低。

运行 jsPerf DOM 插入基准测试

对于我的计算机上的 Chrome 基准测试，在内存中渲染 DIV 并一次性注入比将每个单独的 DIV 单独注入 DOM 快 38 倍。

最终，DOM 遍历/操作是你想要避免的。重复的 DOM 遍历/操作是昂贵的操作，并且肯定会在 1000x1000 的 DIV 画布上陷入困境——尤其是在较旧的浏览器上。

编辑：自从我发布了这个问题，@RobG、@Devu 和我为各种 DOM 插入方法组合了一堆不同的基准测试。某些浏览器（Chrome、Safari）上最快的方法是使用createDocumentFragment,cloneNode等，但令人惊讶的是，在其他浏览器（FireFox 15、Internet Explorer 等）上，通过 an 创建一长串 HTMLarray.join()并插入 viainnerHTML实际上是最快的方法。

于 2012-09-14T07:51:10.267 回答
0

一般回答：这主要取决于您的应用程序，我们对此知之甚少。一般来说，你的 HTML 越复杂，在浏览器中呈现的时间就越长，它会占用更多的内存，DOM 更改会更昂贵等。匹配的 CSS 规则和 Javascript 操作也是如此。

I would suggest the following approach: try either approach. Start of small and raise the number of elements in HTML to what you want to have in the end. Try in different browsers, perhaps on mobile machines etc. Try to measure CPU and Memory usage and work from this.

于 2012-09-14T07:51:47.247 回答