div 的计算成本是否比画布高？答案

【问题标题】：Are divs more computationally expensive than canvas?div 的计算成本是否比画布高？
【发布时间】：2016-02-04 09:51:10
【问题描述】：

我一直在玩这样的傻事：http://jsfiddle.net/dp5rvd91/5/

我使用动态生成的 div 来创建图像。

for (var i = 0; i< its; i++){

    var size = i; 
    var angle = dAngle * i; 
    var o = Math.sin(angle) * range; 
    var a = Math.cos(angle) * range; 

    var left = cx - a + i;
    var top = cy - o+ i; 



    var c = myservice.rgbToHex(i, i*2,i); 

    var style = "".concat ("position: absolute; left:", left, "px; top:", top, "px; width: ", i, "px; height: ", i, "px; background-color: ", c, ";"); 
    console.log(style); 
    $scope.divs.push(style);

}

<!-- HTML-->
<div ng-repeat = "d in divs" style  =  "{{d}}"/>

只是想知道 - 与使用 HTML5 画布相比，这在计算上是否效率低下？

【问题讨论】：

在大多数情况下，画布可能会更快，因为它只是数据的位图——这意味着 DOM 中实际上没有“n”个元素，因为您实际上只是在上面绘画最重要的是。当然，如果您只有 100 个左右的元素，差异可以忽略不计，但如果您有数千个元素，我肯定会考虑使用画布。
给出相同的定位计算，创建和操作 DOM 比操作画布像素更“昂贵”。

标签： html html5-canvas

【解决方案1】：

是的，您可能想在画布中执行此操作，此外，如果您要创建图像，从画布到图像很容易。

但是，如果您使用 div 进行操作，则必须使用 html2canvas 或其他库将其转换为图像。

至于计算成本更高，则视情况而定。

一个。 1 个画布比 1 个 div 贵。

b.但是你有很多很多的 div，它可能会比 1 个画布更贵。

无论如何，您制作的图片上都写满了画布。你用 div 做的很有趣。但不管怎样。对于计算机来说，无论我们谈论的是少于一百个 div，这都是一个笑话。但是，如果我们谈论的是数千个 div，那么您可能会遇到问题，cpu 会开始哭泣，因此使用 canvas 会更有效。

【讨论】：