Производительность фон-холст против обычного холста - PullRequest
Новая
       5

Производительность фон-холст против обычного холста

9 голосов
/ 25 ноября 2011

Некоторое время назад webkit (и, следовательно, Safari) начал поддерживать фоновые холсты CSS для элементов (Источник: http://www.webkit.org/blog/176/css-canvas-drawing/).

). Это может значительно упростить создание игр и мультимедиа, поскольку вам не нужнонапример, вставить тег canvas в DIV, но просто подключиться непосредственно к фону DIV. Возможно, что-то вроде этого: 

<div id="gameview"
style="background: -webkit-canvas(myscreen); width: 320px; height: 480px;">
</div>

<script>
    var target = document.getElementById("gameview");
    var wd = target.clientWidth;
    var hd = target.clientHeight;
    var context =  document.getCSSCanvasContext("2d", "myscreen", wd, hd);
    /* draw stuff here */
</script>

Мне было интересно, есть ли какие-либо ограничения скорости, связанные с этим?«Теоретически я думаю, что рисование на фоновом холсте должно выполняться быстрее, чем рисование на теге холста, особенно если целевой элемент пуст.

Кто-нибудь проверял это на высокоскоростных демонстрациях или играх?

Ответы [ 2 ]

3 голосов
/ 12 января 2012

Согласно моим тестам (также запускается в обратном порядке ), оригинальный canvas элемент немного, но последовательно медленнее, чем фон canvas.

Хром 17 рисует шахматную доску 10000 раз за:

  • ~ 470 мс на фоне холста
  • ~ 520 мс на canvasэлемент

Safari 5 демонстрирует аналогичную динамику.

Попробуйте установить число итераций равным 100000, результаты должны соответствовать приведенным выше.

Обновление через полгода

Мы опробовали подход фонового холста в одном проекте (как попытку незначительной оптимизации), и результаты оказались резко противоположными нашим ожиданиям.Все это (два слоя: один - div с фоновым холстом, другое - обычный холст) стало незначительно медленнее .Фактически, , когда мы представили фоновый холст, приложение стало чертовски медленным .Протестировано в Chrome 21.

Я определенно не смог бы поручиться за ускорение фонового холста в во всех ситуациях.

0 голосов
/ 10 июня 2012 
test.php:11Regular Canvas 606
test.php:20Background Canvas 449
test.php:11Regular Canvas 516
test.php:20Background Canvas 483

Обычный, кажется, хуже, чем фоновый холст в моих тестах на chrome в linux debian, вот код, используемый (также добавленный к http://jsfiddle.net/hDPVr/) 

<div style="width:300; height:200; background: -webkit-canvas(test_canvas); "></div>
<canvas id="canvas" style="width:300; height:200;"></div>

<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var regular_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Regular Canvas', regular_timer - (new Date().getTime()) )



    var context = document.getCSSCanvasContext('2d', 'test_canvas', 300, 200); 
    var background_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Background Canvas', background_timer - (new Date().getTime()) )

</script>

Так что единственныйдля тестирования я использовал метод fillRect, но в некоторых случаях он по крайней мере на 10% лучше

...