Отсчет времени отсчета
У меня есть часы обратного отсчета, над которыми я работаю. Если вы посмотрите его в течение нескольких секунд, вы начнете замечать, что он иногда зависает или немного подпрыгивает при подсчете. Это тонко, но... очевидно. Мы протестировали на многих браузерах и ОС, и проблема кажется постоянной, и мы просто не уверены, что с этим делать. Изначально у нас были спрайты изображений для шрифта, но мы изменили это мнение, что у нас просачивался какой-то http-запрос, но теперь, когда мы перешли на cufon, мы все еще видим те же самые проблемы.
Еще одно обновление, которое мы сделали, - установить интервал времени в 500 мс, но мы все еще застряли
http://dl.dropbox.com/u/2982102/Moto/Countdown/Cufon/markup-new/countdownclock/index.html
Любая помощь будет потрясающей в этом.
1 ответ
Я предполагаю, что каждый "тик" часов слишком интенсивен, чтобы правильно синхронизироваться. Чтобы это работало, вам нужно, чтобы действие, выполняемое каждым тиком, было как можно ближе к мгновенному.
Просмотр DOM во время обратного отсчета показывает, что счетчик перестраивает фрагмент DOM с обновленным значением с каждым "тиком". Само по себе это не вызовет проблем (я думаю), но добавление Cufon в смесь добавляет ОЧЕНЬ много накладных расходов - Cufon необходимо переиндексировать новые элементы, прочитать их значения и перерисовать шрифты.
Могут быть причины, по которым плагин обратного отсчета перестраивает DOM каждый раз, когда он тикает, но на первый взгляд это кажется неэффективным способом сделать это.
Если вам действительно нужны причудливые шрифты, я бы либо использовал решение @font-face, либо, как вы сказали, использовал набор спрайтов изображений. Управление спрайт-картой путем настройки классов позволит вам обновить счетчик, не затрагивая структуру DOM вообще. Это потребует создания собственной версии плагина.
ОБНОВИТЬ:
Думаю, у меня могут быть плохие новости для тебя, приятель. Я возился с основанием хорошего таймера JavaScript, и я думаю, что столкнулся с основной причиной ваших проблем с часами, которые вы использовали. По сути, это сводится к тому, что функции синхронизации Javascript не очень точны по нескольким причинам: разрешение таймера уровня браузера составляет всего лишь 10 или 15 мс, в зависимости от браузера. Javascript является однопоточным, что означает, что события таймера попадают в очередь, что приводит к потере времени. Я установил базовый тест, который делает все "правильно" - сохраняет все, что необходимо для своевременной работы, небольшим и быстрым, и самокорректируется при любых неточностях во времени, связанных с очередями событий "галочка". По сути, галочка проверяется каждые 20 мс, чтобы найти наиболее точную точку для обновления дисплея. Каждое обновление занимает 1 мс или меньше на моем компьютере (это ниже предела временного разрешения Javascript).
Теперь, 90% времени, это производит часы, которые обновляются в пределах 20 мс от точного времени, которое должно, что выглядит красиво и точно. Проблема в том, что браузер решает сделать что-то еще - с другой вкладкой или чем-то внутренним для браузера. Затем мы видим именно ту задержку, которую вы заметили: дисплей может зависнуть на секунду или более, прежде чем обновится. Будучи самокорректирующимся, следующее обновление возвращается в нужное время, но оно определенно заметно, как и в случае с другими. Пользователю даже не нужно ничего делать - я могу сидеть и наблюдать скачок показаний точности с 5(мс), 5, 8, 10, 5, 1300, 5, 5, 800... вообще ничего не трогая,
Итак, похоже, что я мог бы дать вам задницу - проблема не в том, что ваш код обновления занимает слишком много времени (хотя есть некоторые недостатки, которые мы могли бы улучшить), а в том, что браузеры не настроены для точной синхронизации точные интервалы. На данном этапе я не вижу способа обойти это фундаментальное ограничение.
Вот еще немного чтения, если вам интересно: http://ejohn.org/blog/how-javascript-timers-work/, http://old.nabble.com/Proposal%3A-High-resolution-%28and-otherwise-improved%29-timer-API-td19791635.html