#javascript #html #canvas
#javascript #HTML #canvas
Вопрос:
У меня есть проект веб-сайта с перспективной сеткой canvas, отображаемой Javascript (событие window.onload), но при загрузке сайта в любом новейшем браузере браузер зависает как минимум на несколько секунд, даже пользовательский интерфейс не реагирует. Скрипт состоит из 6 циклов, всего более 200 итераций, каждая из которых рисует линию. Как я могу избежать зависания? Установить тайм-аут после каждой итерации или после каждого цикла? Может ли это быть проблемой canvas?
www.modwebsolutions.com/test (Заблокирует браузер во время рендеринга)
Комментарии:
1. Хех .. «просмотр изображения» на фоновом холсте приводит к сбою моего firefox.
2. Как бы то ни было, я вижу только это несколько секунд зависания в Opera здесь. Firefox, Safari и Chrome отображают его мгновенно.
3. Здесь также нет задержек, за исключением небольшой паузы перед отрисовкой страницы.
4. Для меня это занимает более нескольких секунд, но сейчас я на XP с довольно устаревшими браузерами.
Ответ №1:
Для меня это сработало довольно хорошо.
Что вы могли бы сделать, так это делегировать рендеринг веб-работнику, чтобы ваш «Основной поток» был свободен для взаимодействия с пользователем
Ответ №2:
Ну, да, canvas довольно неоптимизирован. Ваш холст тоже довольно большой 😉
Да, вы можете отложить дальнейшее рисование, чтобы процессор мог позаботиться о вводе в браузере, тем самым уменьшая зависание 😉
Смотрите: http://pastehtml.com/view/1e7dan3.html (это не все отрисовывает, но вы можете уловить суть ;))
Комментарии:
1. Canvas использует графический процессор в Firefox на Linux, по крайней мере, с некоторыми драйверами (наверняка с бинарными драйверами nvidia) и в IE9 или Firefox 4 на Windows Vista и Windows 7.
Ответ №3:
JS запускается в том же потоке, что и браузер. Так что, вероятно, это потому, что рисование требует слишком больших затрат процессора. Да, используйте тайм-ауты / интервалы, чтобы браузер мог выполнять некоторые другие действия в перерывах между рисованием.
Ответ №4:
Вам нужно использовать setTimeout () или setInterval () для медленного рисования и во избежание зависания браузера 🙂