Это может стать очень нюансированным вопросом до такой степени, что, боюсь, я дам вам общий тест, который скажет вам сделать либо - либо потому, что вы всегда должны проверять код своего приложения, чтобы увидеть, где оно может быть быстрее или медленнее,Как только ваш продукт будет готов, каким бы способом вы ни выбрали, я призываю вас пересобрать его другим способом и сделать реальный тест и посмотреть.
С помощью jsperf легко настроить тест, который сравнивает фон рисования +передний план на одном холсте против рисования фона на одном холсте только один раз, а затем рисование переднего плана на втором холсте.
Если вы рисуете примерно одинаковое количество материала на заднем и переднем плане, то я думаю, вы ожидаете увидетьодин холст будет примерно на 50% медленнее, чем использует два холста.
На самом деле это то, что вы видите:
http://jsperf.com/one-vs-two-canvases
Но держите телефон длявторой.У тебя статичный фон?Зачем тогда использовать два холста?Почему бы не сделать этот фон в формате PNG и установить его как CSS background-image одного холста и покончить с этим?Это было бы еще быстрее, и это сделало бы DOM менее беспорядочным, и вы бы вообще избежали этого вопроса!
Вы должны заметить, что количество слоев не обязательно хорошо масштабируется.Холсты являются объектами DOM, и касание DOM происходит медленно, поэтому позиционирование и использование, скажем, 30 холстов в виде 30 слоев потребует потерь.Существует несколько холстов, в которых использование слоев становится намного менее целесообразным, но это число, как правило, больше, чем, скажем, 5. Если вы планируете использовать более 5 холстов, я настоятельно рекомендую сделать свои собственные тесты с собственнымикод, чтобы увидеть, что стоит.Профилировщик IE9 и JSperf оба дают очень хорошие результаты (JSperf в кроссбраузерных числах и IE9 в деталях о том, что именно тратит время).