Какой лучший способ эффективно просмотреть большое количество изображений с фиксированной позицией в WebKit?

Сейчас я работаю над небольшим сайтом для своей семьи. Одна из вещей, которую я хотел сделать, - это сделать базовое "создание" стоп-моушен видео. Я мог бы собрать его и загрузить на Vimeo или что-то еще, но я подумал, что это прекрасная возможность использовать только HTML, CSS и Javascript.

Я все оформил, JS работает, и т.д., за исключением того, что он ужасно работает в Chrome и Safari. Интересно, что он отлично работает в Firefox, а в IE я его пока не поддерживаю. Я надеюсь на 8 - 12 кадров в секунду при воспроизведении музыки, что я еще не пробовал из-за этого. Плохая производительность - это все, что меньше этого. В настоящее время я получаю примерно 3 fps в Firefox (приемлемо, но не то, что я искал), а в Chrome и Safari я получаю примерно .6795 fps.

При запуске Chrome Profiler я получаю следующий (соответствующий) результат.

99.96%   99.96%     (program)
0.03%    0.03%      (garbage collector)
0.01%    0.01%      script.js:5:nextSlide

Я никогда раньше не использовал Profiler, но я полагаю, что это показывает мне, что мой JS не является тем, что так сильно бьет по производительности.

Я опубликовал тестовую страницу, которая документирует разницу в производительности, которую вы можете увидеть в Chrome и Firefox.

Я также обнаружил, что это, похоже, связано с цикличностью изображений. Циклирование различных, более простых изображений, похоже, отлично работает как в Chrome, так и в Firefox, несмотря на то, что Chrome все еще немного более энергозатратен, чем Firefox.

В качестве дальнейшего доказательства, по крайней мере, этого вывода, хотя он совершенно неприемлем, демонстрируется здесь, после прогона изображений через convert -compress JPEG -quality 1. Они обрабатываются гораздо эффективнее, но качество, конечно, ужасное.

Я запустил эти тестовые страницы в Chrome (16.0.912.63), Safari (5.1.2 (6534.52.7)), WebKit nightly (Версия 5. 1.2 (6534.52.7, r102985)) и Mobile Safari (последняя по состоянию на 2011/12/28), и только Mobile Safari работает так же хорошо, как FireFox. Настольные браузеры тестировались на MacBook Pro.

2.7 GHz Intel Core i7
8 GB 1333 MHz DDR3

Интересно, что Mobile Safari на iPad 2 работает так же хорошо, как FireFox, при рендеринге тестовой страницы. Хотя Mobile Safari основан на WebKit, в данном случае он работает совершенно иначе.

Уменьшение вызова setTimeout до 144 с 244 также, похоже, ничего не дало. Я пришел к 244 совершенно произвольно, поскольку уже на ранней стадии стало ясно, что время отображения по сравнению с вызовом не соответствует почти напрямую. Это наводит меня на мысль, что я отображаю слайд-шоу настолько быстро, насколько это возможно в каждом браузере.

Итак, мой вопрос в том, как я могу сделать это производительным в WebKit?

6
задан Tim Visher 3 January 2012 в 19:33
поделиться