Групповое изменение стилей

Если мы уже задумались над максимально быстрым изменением интерфейса нашего веб‑приложения (отрисовке) через свойство style, то стоит иметь в виду следующий момент. Мы можем изменять свойство cssText, которое отвечает за компилируемые стили элемента:

element.style.cssText = "display:block;width:auto;height:100px;...";

Таким образом, мы можем дополнительно ускорить наше единовременное обновление стилей у элемента, потому что произойдет всего одно присвоение свойств и всего один reflow (и он случится сразу же после изменения этого свойства, а не в отложенном режиме).

Два слова о таблицах

Таблицы замечательно подходят для организации информации. Однако если в HTML‑документе встречается таблица, то браузеру приходится пробежаться по ней дважды: в первый раз – чтобы выбрать все элементы, рассчитать их взаимные размеры, и чтобы отрисовать их все – во второй раз. Если на странице выводятся большие массивы данных (например, параметры товаров или статистические данные), то гораздо быстрее будет визуализировать такие таблицы в один проход.

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

Необходимо установить для table CSS‑атрибут table‑layout в значение fixed.

Затем явно определить объекты col для каждого столбца.

И установить для каждого элемента col атрибут width.

В качестве примера можно привести такой фрагмент кода:

<table style="table‑layout: fixed">

<!‑‑ первый столбец имеет ширину 100 пикселей ‑‑>

<col width="100"></col>

<!‑‑ второй – 200 ‑‑>

<col width="200"></col>

<!‑‑ третий и четвертый – по 250 ‑‑>

<col width="250"></col><col width="250"></col>

<thead>...</thead>

<tfoot>...</tfoot>

<tbody>...</tbody>

</table>