Сейчас я работаю над небольшим сайтом для своей семьи. Одна из вещей, которую я хотел сделать, - это сделать базовое "создание" стоп-моушен видео. Я мог бы собрать его и загрузить на 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?