построение страницы в браузере

[ShumNo]

Может быть это слишком сложно или просто миф или что-то еще

Даже вопрос несколько сложно сформулировать.. какие теги наиболее сложны для обработки браузером (любым)

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

К сожалению примеры показать сложно. Кто замечал подобное?

[Great Rash]

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

[ShumNo]

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

Сейчас немного потестировал еще и тормозит не верстка html а стили к ней так как если стили отключить то плавность анимации возрастает и видно это хорошо. В моем случае таблиц на странице 1-2 формы отсутствуют как и фреймы. Быть может есть свойства для стилей которых лучше использовать поменьше?

[Great Rash]

Expression'ов точно в стилях нет?

[rash]

HTML-элементов на странице много?

Дайте примеры селекторов, которые используются в CSS, хотя бы несколько наиболее типичных. Ну или ссылку выложите на посмотреть.

[ShumNo]

например такие селекторы

#news-block_1 h2 {font-size:1.9em;font-family: 'lucida grande', Arial, sans-serif;font-weight:100;color:#487302;padding-bottom:18px;background:#FFF url(images/news.png) no-repeat;padding-left:30px;padding-top:9px;margin-left:10px;}

штук 15 таких

Кстати сразу вопрос есть ли разница расписывать отступы как 0 0 0 0; или же для каждого писать left top и т.д кроме размера файла

встречаются такие

#menu-jmenu ul li a {display:block; padding:4px 10px 4px 10px; float:left; color:#FFF;}

На странице порядка 70-100 div конструкций что в общем-то немного

в css порядка 250 селекторов

Вариант попробовать отключать группы селекторов в css и смотреть на результат. лишь бы только планомерно не вырастала производительность у скрипта

Edited October 28, 2010 by ShumNo

[ShumNo]

Отключение стилей дало результат. плавность анимации заметно подросла после отключения стиля

.bgcont { background:#EEF1F7 url(images/bg.png) center repeat-y; display:inline-block; width:992px; }

это контейнер с контентом и фоновой картинкой в 1 пиксель растягивающийся на высоту контента

[rash]

Вообще селекторы вложенности достаточно медленные, можно несколько ускорить отрисовку, если постараться сделать каждый селектор атомарным.

Например ссылкам #menu-jmenu ul li a задать класс .jmenu-link, и обращаться к ним только по этому классу, даже не уточняя тег в селекторе.

Ну или если очень нужны селекторы вложенности, то указывать максимально близкого родителя для проверки вложенности. То есть, например, для li указывать непосредственного родителя ol/ul по классу или еще как-нибудь однозначно.

Это должно помочь несколько увелчить скорость отрисовки.

Если не поможет — будем думать дальше, хотя трудно сказать не видя страницы, что в ней является слабым местом. Может на фоне какой-нибудь серьезной проблемы эта оптимизация даст совсем небольшой эффект.

Кстати, разбивка shorthand-свойства на отдельные (как отступы, например) по идее влияет только на скорость парсинга стилей, то есть на первоначальную отрисовку станицы, хотя это предположение, не более того. Надо мерять, чтобы сказать точно.

А еще, попробуйте однопиксельную картинку сделать побольше, 100x100например, чтобы браузеру приходилось ее меньше раз повторять в фоне.

[ShumNo]

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

Спасибо за ответы

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

картинку увы 100 на 100 не сделать можно только 992 на 10 попробовать. но думаю проблема совсем не в этом она же когда отрисовалась находится на одном месте и не претерпевает каких бы то ни было изменений, а анимация заметно подтормаживает и естественно проц на 100% на секунду пока идет анимация (слайдер) без стилей проц где-то в районе 90-95% для сравнения а на пустой странице 85-90%

Edited October 28, 2010 by ShumNo