在画布上使用html元素的性能考虑事项

已知如果在Flash元素的顶部有html元素（例如带有列表的模式窗口），则会导致性能问题，导致浏览器重新绘制任何HTML的顶部，而闪光灯是动画。我想知道如果在动画canvas元素顶部有html元素，情况也会如此。在画布上使用html元素的性能考虑事项

我在问这个原因，我正在构建一个帆布游戏，我不知道是否使用DOM制作GUI（菜单，导航按钮等）并不是在画布上绘制它是一个好主意。

来源

2013-07-31 chchrist

是的，将其他DOM元素放在画布元素的顶部会降低其性能。

这是因为浏览器在更新画布/绘画时必须做额外的裁剪。

画布需要每秒更新60次以输出到屏幕。如果有什么东西在上面，它需要被剪裁多次。如果DOM元素也被重新绘制，将会依赖于浏览器，但元素本身的性能会降低。

通常，DOM绘图发生在单个线程中（但对于大多数主流浏览器即将改变），所以如果该线程上有额外的负载，它将影响其他绘制的东西。

还有JavaScript的单线程，它是用来更新画布所必需的。如果画布的性能比执行其更改的脚本（以及对DOM的更改）性能下降。

来源

2013-07-31 21:36:34 K3N

它是否也会降低html元素的性能？我试图找出为什么我的模态在画布元素顶部出现时如此缓慢 – chchrist

@chchrist画布尝试每秒更新60次。如果有时出现在最上面，它需要被剪裁多次。它的浏览器实现依赖于DOM元素是否会重新绘制（通常不需要，因为大多数DOM元素都有静态内容，直到属性发生变化 - 通常不包括输出到屏幕更新），但是* canvas *元素的性能会降低。 – K3N

我刚刚使用Chromium Version 28.0.1500.45 Mageia.Org 3（205727）进行了测试，并且在我的画布动画时不会重新绘制元素。

我试过this带DIV的简单盒子动画。之后，我介绍了我的应用程序，看看发生了什么。我注意到只有画布被重新粉刷。

window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback) { 
    window.setTimeout(callback, 1000/60); 
    }; 
})(); 
var GX = 0; 
function animate() { 
    var canvas = document.getElementById('jaja'); 
    var context = canvas.getContext('2d'); 
    // update 
    GX += 10; 
    if (GX > 500) GX = 0; 
    // clear 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    // draw stuff 
    context.beginPath(); 
    context.rect(GX, 10, 100, 100); 
    context.fillStyle = '#8ED6FF'; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = 'black'; 
    context.stroke(); 
    requestAnimFrame(function() { 
    animate(); 
    }); 
} // request new frame

以下，我试图通过选择文本使DIV重绘。这一次是的，DIV重新粉刷。

下面是profile的屏幕截图。 enter image description here

1：我们可以选择Paint（600x586），每当我做动画的时候都会调用它。

2：仅在选择文本时才为DIV元素调用Paint。

我个人不相信任何其他浏览器会有不同的行为。

来源

2013-07-31 22:55:54 wendelbsilva

在画布上使用html元素的性能考虑事项

回答

相关问题