Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.07.2010, 17:33
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Подтормаживает вёрстка
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<style>
html,body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	position:relative;
}
.page {
	min-height:100%;
}
#num {
	position:absolute;
	top:100px;
	left:200px;
	height:0;
	overflow:hidden;
	border:1px solid blue;
}
.xl {
	display:inline-block;
	vertical-align:top;
	width:200px;
	height:200px;
	border:1px solid red;
	/*float:left;*/
}
.header {
	padding-top:8px;
	display:table;
	width:100%;
	height:200px;
}


.leftside {
	width:170px;
	float:left;
}
.content {
	margin-left:178px;
}
</style>

<script>
function slide(el,i,j) {

	if (i!=j) {
		el.style.height=++j+'px';
		setTimeout(function() { slide(el,i,j) },0);
	}
}

</script>

</head>

<body>

<div class="page">

<div class="header">
<input type="button" value="Run" onclick="slide(document.getElementById('num'),180,0)">
</div>

<div class="leftside">texttexttexttexttext</div>

<div class="content">

<div id="num">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>

<div class="xl">

</div><div class="xl">

</div><div class="xl">

</div><div class="xl">

</div><div class="xl">

</div><div class="xl">

</div><div class="xl">

</div><div class="xl">

</div><div class="xl">

</div>

</div>

</div>

</body>
</html>

Из-за такой вёрстки подтормаживает скрипт. Хорошо видно особенно в Chrome при обновлении и чуть похуже в Safari. Остальным браузерам нужно больше элементов, чтобы явно стали видны тормоза скрипта.
Скрипт, расширяющий элемент - показатель скорости. В хроме и сафаре данный код тормозит. Чтобы проверить без тормозов, нужно inline-block заменить на float-left, либо убрать min-height:100%. Каким образом inline-block влияет на скорость javascript и почему скрипт намного быстрее работает при float:left, пока загадка, но подозреваю, что виноваты в этом relative у body и min-height у page. При большом количестве элементов такая история начинается во всех браузерах, причём ошибка гуляет по всем стилям, бывает "margin:0" у тега <p> уберу и скрипты перестают тормозить, какова зависимость между этими событиями, тоже неизвестно. display:table у хедера остался, уже не стал проверять, влияет он на скорость или нет, как можно больше уменьшил весь код. Скрипт один единственный.

Последний раз редактировалось DMH, 11.07.2010 в 05:50.
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2010, 23:42
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

Посмотрел у себя на хроме. Ничего не тормозит...
ЗЫ может лучше задержку поставить больше миллисекунд, а хеигхт увеличивать на большее кол-во пикселов?
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2010, 23:44
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

А не. скорость разная... Это вы имели ввиду под тормозами?
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2010, 23:46
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

Странно, как только открываю инструмент разработчика сразу ускоряется...
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2010, 06:07
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Да, скорость разворачивания должна быть такая, как после открытия инструмента разработчика. Такая же скорость будет, если убрать к примеру min-height или inline-block заменить на float. Привёл в пример Chrome, так как в нём хорошо это видно, для остальных браузеров нужно наполнить блоки контентом и тогда при наполненном сайте начинаются уже конкретные тормоза. И убрать как бы ничего нельзя, всё нужно для макета и от этих тормозов скрипта нужно как-то избавиться, а точнее сначала найти причину, я думаю сами по себе отдельно inline-block или min-height не могут создать такую задержку скрипту.
Ответить с цитированием
  #6 (permalink)  
Старый 10.07.2010, 07:48
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Проверил на основном коде, убрав body relative, ничего не изменилось. А вот после комментирования float:left, всё прекрасно заработало и в основном коде и в этом. Видимо выход из потока элемента и min-height родителя каким-то образом влияют на браузер.
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2010, 16:17
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

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

В вебките, видимо, это не так.
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2010, 16:36
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Пока левый сайдбар сделал с position:absolute, флоат у с него убрал. Chrome, Safari и FireFox на основном коде ожили, данный скрипт заработал в них с нормальной скоростью. Opera 9.64 еле заметно подтормаживает, а вот Opera 10.51 и Internet Explorer можно сказать ушли в транс (впрочем и до этого они там были), очень сильно тормозит в них скрипт. Занимаюсь поиском тормозящих стилей, пока натыкаюсь на те, на которые отражаются последствия ошибки, height, position и т.д., при их комментировании тормозить перестаёт, но ошибка изначально не в них. Есть подозрение на base64 и Оперу 10, но пока точно не ясно.
Ответить с цитированием
  #9 (permalink)  
Старый 10.07.2010, 16:55
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

.a_l {
	position:absolute;
	background:url(data:image/gif;base64,R0lGODlhAQABAIABAN/j5////yH5BAEKAAEALAAAAAABAAEAAAICRAEAOw==) repeat-y;
	top:96px;
	left:178px;
	bottom:51px;
	width:1px;
}
.a_r {
	position:absolute;
	background:url(data:image/gif;base64,R0lGODlhAQABAIABAN/j5////yH5BAEKAAEALAAAAAABAAEAAAICRAEAOw==) repeat-y;
	top:96px;
	right:0;
	bottom:51px;
	width:1px;
}
.a_b {
	position:absolute;
	background:url(data:image/gif;base64,R0lGODlhAQABAIABAN/j5////yH5BAEKAAEALAAAAAABAAEAAAICRAEAOw==) repeat-x;
	bottom:45px;
	left:184px;
	right:6px;
	height:1px;
}
.a_bl {
	position:absolute;
	background:url(data:image/gif;base64,R0lGODlhBgAGAOMNAN3h5d/j5t/j5+Xo6+rt7+zu8Ozv8e3v8fP19vT19vb3+Pz8/f3+/v///////////yH5BAEKAA8ALAAAAAAGAAYAAAQVELw5yaFvAUUbGsnUNEpQPGPDGEIEADs=) no-repeat;
	bottom:45px;
	left:178px;
	width:6px;
	height:6px;
}
.a_br {
	position:absolute;
	background:url(data:image/gif;base64,R0lGODlhBgAGAOMNAN3h5d/j5t/j5+Xo6+rt7+zu8Ozv8e3v8fP19vT19vb3+Pz8/f3+/v///////////yH5BAEKAA8ALAAAAAAGAAYAAAQU8EkJ5jtkKrBkGgjzFIHCMIJxnhEAOw==) no-repeat;
	bottom:45px;
	right:0;
	width:6px;
	height:6px;
}

Вот из-за этого фрагмента +вышеприведённый макет, скрипт в Opera начинает тормозить, и в девятой и в десятой.
Попробую уточнить из-за каких конкретно стилей.
Ответить с цитированием
  #10 (permalink)  
Старый 10.07.2010, 17:16
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

base64 отпадает.
Результаты:
Комментируем рисунки, background - скрипт продолжает тормозить.
Комментируем размеры, width, height - скрипт работает быстро.
Комментируем absolute - скрипт работает быстро.
Комментируем положение, top, left, bottom, right - скрипт работает быстро.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
верстка и прозрачность! HelpeR (X)HTML/CSS 3 22.11.2009 21:56
верстка таблицы (некорр. отобр) zerg Internet Explorer 8 18.03.2009 22:35
Верстка под КПК demi (X)HTML/CSS 6 31.01.2009 11:33
Правильная вёрстка сайта Till (X)HTML/CSS 1 28.07.2008 16:01
Резиновая верстка Empty (X)HTML/CSS 1 17.07.2008 14:40