Почему эта SVG-графика затопляет Webkit только тогда, когда она большая?

Question

У меня проблемы с этим изображением в Chrome 16 и Safari 5 Desktop:

http://jsfiddle.net/D7ERH/embedded/result/

Чтобы воспроизвести проблемный вид с помощьюОкно развернуто, затем уменьшите высоту окна и перезагрузите.

Частота кадров сильно страдает, если она полноэкранная, но если вы уменьшите высоту окна, тогда webkit кажется довольным графикой.Opera и Firefox не имеют проблем ни с одним из этих размеров.

Графика создается с помощью d3.js, но я думаю, что это произойдет и с тем же SVG-изображением, поскольку это просто код, генерирующий элементы.Движение курсора чисто js.

В качестве идентификатора я обнаружил, что движение мыши плавное, если я использую translate3d(x, y, 0) вместо верхнего и левого, но я бы предпочел использовать это как последнее средство.translate(x, y) тоже медленно.

Answer 1

Простой ответ: перерисовать дорого. :) Хотя при перемещении круга радуга на заднем плане не меняется, браузеру может потребоваться перерисовать эти элементы при перемещении других элементов (черный круг) сверху. Браузеры обычно выполняют интеллектуальное перекрашивание, где они обнаруживают грязную область и перерисовывают как можно меньше элементов; например, когда окно меньше, браузер не должен перерисовывать элементы и части элементов, которые находятся за пределами видимой области. Тем не менее, нет никаких гарантий производительности.

Иногда вы можете обмануть браузер, чтобы кэшировать фоновые элементы в растровое изображение для более быстрой перерисовки, применяя трехмерное преобразование CSS (-webkit-transform: translate3d). Например, я использую это здесь, чтобы вращать сложную сцену. Нажмите и перетащите на внутреннюю часть круга, чтобы повернуть:

http://mbostock.github.com/d3/talk/20111116/bundle.html

Кроме того, вы можете визуализировать статический фон в элемент Canvas, а затем нарисовать поверх него динамические части SVG или HTML. Это заставляет браузер кэшировать пиксели фона для более быстрой перерисовки.