Производительность: анимация CSS3 против холста HTML5

Я работаю над webapp (будет только работать в Chrome 19+), который в настоящее время построен с переходами CSS3. В частности, я использую JQuery Transit для запуска анимации CSS3 с помощью JQuery. Мысль здесь заключалась в том, что некоторые анимации вытягиваются на несколько секунд, а анимация jquery не была достаточно гладкой, но Transit - отличное решение для этого. JQuery Transit работает достаточно хорошо, но мне любопытно, будет ли HTML5 Canvas делать вещи еще более гладкими? И если это так, стоит ли его преследовать, учитывая тот факт, что я использую AJAX и основанные на процентах местоположения для DIVs в настоящее время? Если кто-нибудь знает, как CSS3-анимация сравнивается с производительностью холста HTML5 в Chrome и будет готова внести свой вклад, я бы очень признателен!

Ответы

Ответ 1

CSS3 даст вам меньше головных болей, и вы сможете легко его изменить в будущем, и он будет изящно работать на системах, которые не имеют возможности canvas.

Если вы используете текст, вы должны обязательно придерживаться CSS, если сможете с ним справиться. Холст разрушает доступность вашего приложения и запрещает пользователям использовать карат или выделять текст или использовать текст для речи.

Если вы просто делаете забавную скользящую кнопку или что-то в этом роде, вы также должны просто использовать CSS, так как это, вероятно, будет намного проще реализовать и поддерживать. Повторить CSS проще, чем проваливать (что может быть сложным) JavaScript.

Я не могу честно сказать, будет ли холст-рендеринг более гладким. Одним из плюсов холста является то, что вы можете анимировать вещи на кажущийся более крупный размер (сохраняя холст такого же размера), не вызывая повторной компоновки DOM. В большинстве современных систем это действительно не проблема.

Кроме того, если это уже сделано с CSS3, у вас действительно проблемы с производительностью? Если никто еще не жаловался на производительность, зачем беспокоиться о переписывании его для холста? Если вы пока не сталкиваетесь с какими-либо проблемами с реальной производительностью, зачем изобретать свое приложение?

Ответ 2

Проблема, с которой я могу столкнуться с холстом, заключается в том, что он основан на растровых изображениях. Поэтому масштабирование вверх и вниз после первоначальной визуализации страницы будет проблемой. Кроме того, разрыв линии будет болезненным, чтобы иметь дело с потенциально. Люди, которые пишут ваш контент сайта, могут счесть сложным вставить разрывы строк, потому что нет такой вещи, как разрыв строки с использованием canvas, svg или vml. На самом деле вам нужно предварительно вычислить разрывы строк. "\n", используя работы raphael.js, но это не очень удобно. Кроме того, вы не можете использовать селектора для таргетинга различных частей, если вы используете свою графику svg. Возможно, вы сможете использовать холст, возможно.... Canvas, вероятно, имеет buncha из тех же самых gotchas.

На фронте изображения у вас будут размытые изображения, если они масштабируются, и есть меньше библиотек, которые имеют дело с изменением размера изображения для холста. Это может измениться в будущем, но это все равно будет тяжелым испытанием. Я бы просто придерживался ваших divs/css3 с помощью резервных копий jquery для старых браузеров.

С точки зрения чисто производительности, проверьте первый комментарий к своему вопросу. У этого есть некоторые хорошие тесты.