Posted by Pavel Podlipensky on February 12 11:17 PM
<p>Честно говоря раньше не придавал особого значения такой фазе веб-девелопмента, как верстка. Отчасти потому что никогда этим сам не занимался(на должном уровне), отчасти от того, что недопонимал некоторые аспекты веб-разработки. Недавно наткнулся на <a href="http://www.artlebedev.ru/tools/technogrette/html/browser-performance/" target="_blank" rel="nofollow">интересную статью</a> Сергея Чикуенока (из команды никому не известного <a href="http://www.artlebedev.ru" target="_blank" rel="nofollow">Артема Лебедева</a>). Суть этой статьи сводится к следующему: если клиентский код работает медленно - убейте дизайнера, верстальщика или кто этим у вас там занимался. Потому как <strong>разметка влияет на скорость работы веб-приложения</strong>. Кому интересно почитать детали можно в <a href="http://www.artlebedev.ru/tools/technogrette/html/browser-performance/" target="_blank" rel="nofollow">оригинале статьи</a>, а я лишь процитирую выводы:</p> <ol> <ol> <li>Для интерактивных элементов лучше использовать <tt>position: absolute</tt>. <li>Большое количество элементов на странице может снизить производительность, но не стоит увлекаться их сокращением в ущерб надежности макета. <li>Не надо делать очень глубоких вложенных структур элементов. <li>Прежде чем начинать верстку макета, следует узнать, какие интерактивные механизмы там должны быть — это избавит от многих проблем уже на начальном этапе работы над проектом. <li>Не надо загонять себя в угол глупых стереотипов: «валидность» и «семантичность» никому, кроме самих разработчиков, не нужна. <li>Не стоит без надобности растягивать картинки. Если это необходимо сделать, следует воспользоваться <tt>canvas</tt>. <li>Как правило, <tt>img</tt>-элемент будет работать гораздо быстрее, чем CSS-свойство <tt>background-image</tt>. <li>Помните главное правило: <i>оптимизировать нужно то, что требует оптимизации</i>. </li></ol></ol> <p>Вот так-то господа, веб разработчики...</p>

Честно говоря раньше не придавал особого значения такой фазе веб-девелопмента, как верстка. Отчасти потому что никогда этим сам не занимался(на должном уровне), отчасти от того, что недопонимал некоторые аспекты веб-разработки. Недавно наткнулся на интересную статью Сергея Чикуенока (из команды никому не известного Артема Лебедева). Суть этой статьи сводится к следующему: если клиентский код работает медленно - убейте дизайнера, верстальщика или кто этим у вас там занимался. Потому как разметка влияет на скорость работы веб-приложения. Кому интересно почитать детали можно в оригинале статьи, а я лишь процитирую выводы:

    1. Для интерактивных элементов лучше использовать position: absolute.
    2. Большое количество элементов на странице может снизить производительность, но не стоит увлекаться их сокращением в ущерб надежности макета.
    3. Не надо делать очень глубоких вложенных структур элементов.
    4. Прежде чем начинать верстку макета, следует узнать, какие интерактивные механизмы там должны быть — это избавит от многих проблем уже на начальном этапе работы над проектом.
    5. Не надо загонять себя в угол глупых стереотипов: «валидность» и «семантичность» никому, кроме самих разработчиков, не нужна.
    6. Не стоит без надобности растягивать картинки. Если это необходимо сделать, следует воспользоваться canvas.
    7. Как правило, img-элемент будет работать гораздо быстрее, чем CSS-свойство background-image.
    8. Помните главное правило: оптимизировать нужно то, что требует оптимизации.

Вот так-то господа, веб разработчики...