Skip to content

Отрисовка консоли в JavaScript — продолжение

04/03/2010

Итак, получив после предыдущего поста несколько решений, я зарылся в код🙂 Больше всего меня заинтересовало решение товарища qwe из комментариев к предыдущему посту. Из него я почерпнул два отличных способа ускорить отрисовку.

Но сначала надо было сделать средство для нормальных измерений производительности. Я написал функцию, которая выполняла полную смену палитры заданное количество раз, и выводила среднее значение. Решено было замерять длительность выполнения на тысяче итераций.

Итак, сперва — мой вариант, основанный на jQuery. Длительность выполнения: ~275 мс.

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

После этого решено было отказаться от функции css и менять цвет элементов через element.style. После этого производительность резко скакнула вверх — смена палитры выполнялась в среднем за 83 мс. Вариант qwe менял цвет в среднем за 322 мс, но при этом иногда перерисовывал консоль новыми символами (а это более затратная операция).

Последний вариант кода можно посмотреть в репозитории Github на ветке master.

Добавить комментарий

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: