Проблемы с производительностью HTML на холсте, с чего начать?

Question

Я работал над экспериментом по преобразованию HTML в изображение холста, когда javascript считывал всю необходимую информацию из загруженного DOM. Поскольку в Canvas отсутствуют многие стандартные части CSS, особенно в том, что касается форматирования текста, необходимо выполнить много обходных маневров и интенсивных процессов (letter-spacing для одного). Намерение состоит в том, чтобы сделать и никогда не будет делать надежный HTML-рендеринг, так как это просто невозможно, но вместо этого попытайтесь сделать его настолько точным, насколько это возможно.

Для примеров страниц Google Chrome обычно загружает их значительно быстрее, чем FF. Однако для некоторых страниц (обычно больших) Chrome полностью зависает, а Firefox загружает их нормально. Теперь я пытался точно определить, где именно дела идут плохо, но мне не очень повезло, поскольку в итоге ничего не выводится в Chrome.

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

Примеры (то, что нужно сделать, это визуализировать изображение холста в верхней части страницы, которое должно выглядеть более или менее так же, как реальная HTML-страница. Вы можете переключить изображение холста (показать / скрыть), щелкнув его. не открывайте их, если у вас есть несохраненная работа в браузерах, так как это может привести к их зависанию.):

простой тест, отлично работает в FF / Chrome

еще один простой тест, отлично работает в FF / Chrome

Полная страница, отлично работает в FF / Chrome

Полная страница, работает только в FF <4, Chrome зависает </a>

Все они используют одинаковые js, которые можно найти здесь .

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

Answer 1

С чего начать?

Сломай.

Используйте тот же пример и сократите, сколько вы это делаете (ваш код рендеринга) пополам. Это все еще не работает? Опять пополам и т. Д. Сработало? Положите обратно половину того, что вы вынули.

Как и в случае с, избавьтесь от всех попыток рендеринга текста или от всего кода границ / отступов. Просто закомментируйте это. Это работает тогда?

Или попробуйте просто закомментировать ctx.drawImage(img,x,y); в строке 199 и ничего больше. Это работает тогда?

Если вам повезет, вы сможете определить критическую точку, когда Chrome тратит много времени на выполнение каких-либо действий.

Answer 2

Вы пытались использовать встроенный в Chrome профилировщик производительности?

Answer 3

Проблема, по-видимому, связана с атрибутом css background-repeat, в частности repeat-x.Закомментирование

for(bgx=(x+background_position_left);bgx<=w;){
                            drawImage(image,bgx,(y+background_position_top));
                            bgx = bgx+image.width;
                        }

Исправлена ​​проблема, по крайней мере, для chrome, и, глядя на то, что это, скорее всего, был бесконечный цикл, как предложил Кинлан, но почему именно он застревает только на более новых версиях FF, а хром - этоМне нужно посмотреть более подробно (скорее всего, пока нет доступного image.width, или что-то подобное).