为什么chrome很难在画布上显示大量的图像，而其他浏览器却没有'
Why does chrome struggle to display lots of images on a canvas when the other browsers don't?
我们正在使用HTML5画布，一次显示大量图像。
这个工作得很好，但是最近我们遇到了一个chrome浏览器的问题。
当你在画布上绘制图像时，你似乎达到了性能下降非常快的某个点。
这不是一个缓慢的效果，似乎你从60fps到2-4fps。
下面是一些复制代码:
// Helpers
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })();
// https://github.com/mrdoob/stats.js
var Stats = function () { var e = Date.now(), t = e; var n = 0, r = Infinity, i = 0; var s = 0, o = Infinity, u = 0; var a = 0, f = 0; var l = document.createElement("div"); l.id = "stats"; l.addEventListener("mousedown", function (e) { e.preventDefault(); y(++f % 2) }, false); l.style.cssText = "width:80px;opacity:0.9;cursor:pointer"; var c = document.createElement("div"); c.id = "fps"; c.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002"; l.appendChild(c); var h = document.createElement("div"); h.id = "fpsText"; h.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; h.innerHTML = "FPS"; c.appendChild(h); var p = document.createElement("div"); p.id = "fpsGraph"; p.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff"; c.appendChild(p); while (p.children.length < 74) { var d = document.createElement("span"); d.style.cssText = "width:1px;height:30px;float:left;background-color:#113"; p.appendChild(d) } var v = document.createElement("div"); v.id = "ms"; v.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none"; l.appendChild(v); var m = document.createElement("div"); m.id = "msText"; m.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; m.innerHTML = "MS"; v.appendChild(m); var g = document.createElement("div"); g.id = "msGraph"; g.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0"; v.appendChild(g); while (g.children.length < 74) { var d = document.createElement("span"); d.style.cssText = "width:1px;height:30px;float:left;background-color:#131"; g.appendChild(d) } var y = function (e) { f = e; switch (f) { case 0: c.style.display = "block"; v.style.display = "none"; break; case 1: c.style.display = "none"; v.style.display = "block"; break } }; var b = function (e, t) { var n = e.appendChild(e.firstChild); n.style.height = t + "px" }; return { REVISION: 11, domElement: l, setMode: y, begin: function () { e = Date.now() }, end: function () { var f = Date.now(); n = f - e; r = Math.min(r, n); i = Math.max(i, n); m.textContent = n + " MS (" + r + "-" + i + ")"; b(g, Math.min(30, 30 - n / 200 * 30)); a++; if (f > t + 1e3) { s = Math.round(a * 1e3 / (f - t)); o = Math.min(o, s); u = Math.max(u, s); h.textContent = s + " FPS (" + o + "-" + u + ")"; b(p, Math.min(30, 30 - s / 100 * 30)); t = f; a = 0 } return f }, update: function () { e = this.end() } } }
// Firefox events suck
function getOffsetXY(eventArgs) { return { X: eventArgs.offsetX == undefined ? eventArgs.layerX : eventArgs.offsetX, Y: eventArgs.offsetY == undefined ? eventArgs.layerY : eventArgs.offsetY }; }
function getWheelDelta(eventArgs) { if (!eventArgs) eventArgs = event; var w = eventArgs.wheelDelta; var d = eventArgs.detail; if (d) { if (w) { return w / d / 40 * d > 0 ? 1 : -1; } else { return -d / 3; } } else { return w / 120; } }
// Reproduction Code
var stats = new Stats();
document.body.appendChild(stats.domElement);
var masterCanvas = document.getElementById('canvas');
var masterContext = masterCanvas.getContext('2d');
var viewOffsetX = 0;
var viewOffsetY = 0;
var viewScaleFactor = 1;
var viewMinScaleFactor = 0.1;
var viewMaxScaleFactor = 10;
var mouseWheelSensitivity = 10; //Fudge Factor
var isMouseDown = false;
var lastMouseCoords = null;
var imageDimensionPixelCount = 25;
var paddingPixelCount = 2;
var canvasDimensionImageCount = 50;
var totalImageCount = Math.pow(canvasDimensionImageCount, 2);
var images = null;
function init() {
images = createLocalImages(totalImageCount, imageDimensionPixelCount);
initInteraction();
renderLoop();
}
function initInteraction() {
var handleMouseDown = function (eventArgs) {
isMouseDown = true;
var offsetXY = getOffsetXY(eventArgs);
lastMouseCoords = [
offsetXY.X,
offsetXY.Y
];
};
var handleMouseUp = function (eventArgs) {
isMouseDown = false;
lastMouseCoords = null;
}
var handleMouseMove = function (eventArgs) {
if (isMouseDown) {
var offsetXY = getOffsetXY(eventArgs);
var panX = offsetXY.X - lastMouseCoords[0];
var panY = offsetXY.Y - lastMouseCoords[1];
pan(panX, panY);
lastMouseCoords = [
offsetXY.X,
offsetXY.Y
];
}
};
var handleMouseWheel = function (eventArgs) {
var mouseX = eventArgs.pageX - masterCanvas.offsetLeft;
var mouseY = eventArgs.pageY - masterCanvas.offsetTop;
var zoom = 1 + (getWheelDelta(eventArgs) / mouseWheelSensitivity);
zoomAboutPoint(mouseX, mouseY, zoom);
if (eventArgs.preventDefault !== undefined) {
eventArgs.preventDefault();
} else {
return false;
}
}
masterCanvas.addEventListener("mousedown", handleMouseDown, false);
masterCanvas.addEventListener("mouseup", handleMouseUp, false);
masterCanvas.addEventListener("mousemove", handleMouseMove, false);
masterCanvas.addEventListener("mousewheel", handleMouseWheel, false);
masterCanvas.addEventListener("DOMMouseScroll", handleMouseWheel, false);
}
function pan(panX, panY) {
masterContext.translate(panX / viewScaleFactor, panY / viewScaleFactor);
viewOffsetX -= panX / viewScaleFactor;
viewOffsetY -= panY / viewScaleFactor;
}
function zoomAboutPoint(zoomX, zoomY, zoomFactor) {
var newCanvasScale = viewScaleFactor * zoomFactor;
if (newCanvasScale < viewMinScaleFactor) {
zoomFactor = viewMinScaleFactor / viewScaleFactor;
} else if (newCanvasScale > viewMaxScaleFactor) {
zoomFactor = viewMaxScaleFactor / viewScaleFactor;
}
masterContext.translate(viewOffsetX, viewOffsetY);
masterContext.scale(zoomFactor, zoomFactor);
viewOffsetX = ((zoomX / viewScaleFactor) + viewOffsetX) - (zoomX / (viewScaleFactor * zoomFactor));
viewOffsetY = ((zoomY / viewScaleFactor) + viewOffsetY) - (zoomY / (viewScaleFactor * zoomFactor));
viewScaleFactor *= zoomFactor;
masterContext.translate(-viewOffsetX, -viewOffsetY);
}
function renderLoop() {
clearCanvas();
renderCanvas();
stats.update();
requestAnimFrame(renderLoop);
}
function clearCanvas() {
masterContext.clearRect(viewOffsetX, viewOffsetY, masterCanvas.width / viewScaleFactor, masterCanvas.height / viewScaleFactor);
}
function renderCanvas() {
for (var imageY = 0; imageY < canvasDimensionImageCount; imageY++) {
for (var imageX = 0; imageX < canvasDimensionImageCount; imageX++) {
var x = imageX * (imageDimensionPixelCount + paddingPixelCount);
var y = imageY * (imageDimensionPixelCount + paddingPixelCount);
var imageIndex = (imageY * canvasDimensionImageCount) + imageX;
var image = images[imageIndex];
masterContext.drawImage(image, x, y, imageDimensionPixelCount, imageDimensionPixelCount);
}
}
}
function createLocalImages(imageCount, imageDimension) {
var tempCanvas = document.createElement('canvas');
tempCanvas.width = imageDimension;
tempCanvas.height = imageDimension;
var tempContext = tempCanvas.getContext('2d');
var images = new Array();
for (var imageIndex = 0; imageIndex < imageCount; imageIndex++) {
tempContext.clearRect(0, 0, imageDimension, imageDimension);
tempContext.fillStyle = "rgb(" + getRandomInt(0, 255) + ", " + getRandomInt(0, 255) + ", " + getRandomInt(0, 255) + ")";
tempContext.fillRect(0, 0, imageDimension, imageDimension);
var image = new Image();
image.src = tempCanvas.toDataURL('image/png');
images.push(image);
}
return images;
}
// Get this party started
init();
和一个jsfiddle链接，为您的互动乐趣:http://jsfiddle.net/BtyL6/14/
这是在画布上以50 x 50(2500)的网格绘制50px x 50px的图像。我也很快尝试了25px x 25px和50 x 50(2500)的图像。
我们有其他本地示例处理更大的图像和更多数量的图像，其他浏览器开始在更高的值下挣扎。
作为一个快速测试，我将js中的代码调高到100px x 100px和100 x 100(10000)个图像，并且在完全缩小时仍然以16fps运行。(注意:我必须将viewMinScaleFactor降低到0.01，以便在放大时适合所有内容。)
另一方面，Chrome似乎达到了某种极限，FPS从60下降到2-4。
以下是我们所做的尝试和结果的一些信息:
我们已经尝试使用setinterval而不是requestAnimationFrame。
如果你加载10张图片，每张画250次，而不是每张画2500张，那么问题就解决了。这似乎表明chrome正在达到某种限制/触发，因为它存储了多少关于渲染的数据。
在我们的更复杂的例子中，我们有剔除(不渲染超出视觉范围的图像)，虽然这有帮助，但它不是一个解决方案，因为我们需要能够一次显示所有的图像。
我们只有在局部代码发生变化时才会渲染图像，这有助于(当没有任何变化时，显然)，但这不是一个完整的解决方案，因为画布应该是交互式的。
在示例代码中，我们使用画布创建图像，但代码也可以运行到web服务来提供图像，并且会看到相同的行为(缓慢)。
我们发现很难搜索这个问题，大多数结果都是几年前的，而且很遗憾已经过时了。
如果有更多的信息是有用的，请问!
编辑:改变js提琴URL反映相同的代码在问题。代码本身实际上并没有改变，只是改变了格式。但我想保持一致。
编辑:更新了jsfiddle和css代码，以防止选择，并在渲染循环完成后调用requestanimm
在金丝雀这段代码冻结它在我的电脑上。至于为什么这发生在Chrome浏览器中，简单的答案是，它使用不同的实现比f.ex。FF。深入的细节我不知道，但显然在这方面有优化实现的空间。
我可以给一些提示，但是如何你可以优化给定的代码，使其在Chrome中运行为好:-)
这里有几件事:
- 您将每个颜色块存储为图像。这似乎对金丝雀/Chrome有巨大的性能影响。
- 在循环开始时调用
requestAnimationFrame - 你正在清除和渲染，即使没有变化
Try to(寻址):
- 如果你只需要纯色块，直接使用
fillRect()绘制它们，并将颜色索引保存在数组中(而不是图像)。即使你把它们画到屏幕外的画布上，你也只需要在主画布上画一次，而不是多次图像绘制操作。 - 将
requestAnimationFrame移动到代码块的末尾，以避免堆叠。 - 使用脏标志来防止不必要的渲染:
我稍微修改了一下代码——我将其修改为使用纯色来演示在Chrome/Canary中性能影响的地方。
我在全局范围内设置了一个脏标志为true(渲染初始场景)，每次鼠标移动时设置为true:
//global
var isDirty = true;
//mouse move handler
var handleMouseMove = function (eventArgs) {
// other code
isDirty = true;
// other code
};
//render loop
function renderLoop() {
if (isDirty) {
clearCanvas();
renderCanvas();
}
stats.update();
requestAnimFrame(renderLoop);
}
//in renderCanvas at the end:
function renderCanvas() {
// other code
isDirty = false;
}
您当然需要检查其他地方的isDirty标志的警告，并且如果在错误的时刻清除它，还需要引入更多的标准。我将存储鼠标的旧位置，只有(在鼠标移动时)如果它改变设置脏标志-我没有修改这部分虽然。
正如你所看到的，你将能够在Chrome和FF中以更高的FPS运行这个。
我也假设(我没有测试)，你可以优化clearCanvas()函数只绘制填充/间隙，而不是清除整个画布。但这需要测试。
添加了一个css规则，以防止在使用鼠标时选择画布:
对于这种情况下的进一步优化，即事件驱动的，您实际上根本不需要动画循环。当光标或鼠标滚轮发生变化时，你可以调用重绘。 修改:
http://jsfiddle.net/BtyL6/10/
这是chrome浏览器的一个合法bug。
https://code.google.com/p/chromium/issues/detail?id=247912它现在已经修复，应该很快就会在chrome主线版本中发布。
相关文章：
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome，在其他浏览器中显示
- jquery代码在Mozilla中有效，但在其他浏览器上无效
- java脚本在Chrome和其他浏览器中对LocaleTimeString的不同行为
- Javascript的某些部分在Chrome中不起作用，但在其他浏览器中可以完美工作
- 在BoilerplateJS浏览器加载所有脚本(在其他模块中），而不考虑激活的模块
- 防止“;jQuery(html）"防止触发浏览器请求图像和其他参考内容
- 如何隐藏空<span>在IE中使用javascript.(注意，在其他浏览器中工作正常）
- 我的时间倒计时脚本在谷歌浏览器中工作正常，但在其他浏览器中打开时它显示为南楠
- 如何使用javascript从同一浏览器下的其他页面获取URL?有可能吗
- 使用一个Javascript函数提交多个表单可以在FF中工作，而不需要其他浏览器
- 带有Safari的Javascript;不起作用——所有其他浏览器都起作用
- Javascript可以在chrome中使用，但不能在其他浏览器中使用
- 有没有一种方法可以在过滤掉iOS Chrome、Firefox和其他浏览器的同时检测iOS safari
- 在其他浏览器中打开页面时，令牌未保存在$window.sessionStorage中
- 编写脚本以关闭其他选项卡或浏览器
- 无法从IE中的data.responseText获取结果，但在其他浏览器中工作
- 在Firefox中使用锤子捏 错误地定向 - 适用于所有其他浏览器
- 在IE8和其他带有javascript的浏览器中获取正文类的标准解决方案是什么
- 索引在IE中导致错误;在其他浏览器中工作
- 将JSON对象转换为敲除observable在IE8中不起作用，但在所有其他浏览器中都起作用
