Выразительный JavaScript (Хавербеке) - страница 136

Разбор документа – задача сложная. В целях быстродействия браузерные движки не перестраивают документ каждый раз после его изменения, а ждут так долго, как это возможно. Когда программа JavaScript, изменившая документ, заканчивает работу, браузеру надо будет просчитать новую раскладку страницы, чтобы вывести изменённый документ на экран. Когда программа запрашивает позицию или размер чего-либо, читая свойства типа >offsetHeight или вызывая >getBoundingClientRect, для предоставления корректной информации тоже необходимо рассчитывать раскладку.

Программа, которая периодически считывает раскладку DOM и изменяет DOM, заставляет браузер много раз пересчитывать раскладку, и в связи с этим будет работать медленно. В следующем примере есть две разные программы, которые строят линию из символов X шириной в 2000 пикселей, и измеряют время работы.

>

>

>

Мы видели, что разные элементы HTML ведут себя по-разному. Некоторые показываются в виде блоков, другие встроенные. Некоторые добавляют визуальный стиль – например, > делает жирным текст и > делает текст подчёркнутым и синим.

Внешний вид картинки в теге > или то, что ссылка в теге > при клике открывает новую страницу, связано с типом элемента. Но основные стили, связанные с элементом, вроде цвета текста или подчёркивания, могут быть нами изменены. Вот пример использования свойства >style (стиль):

>

Обычная ссылка

>

Зелёная ссылка

Атрибут >style может содержать одно или несколько объявлений свойств (>color), за которым следует двоеточие и значение. В случае нескольких объявлений они разделяются точкой с запятой: >“color: red; border: none”.

Много всякого можно изменить при помощи стилей. Например, свойство >display