|
Подтормаживает вёрстка
<!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 у хедера остался, уже не стал проверять, влияет он на скорость или нет, как можно больше уменьшил весь код. Скрипт один единственный. |
Посмотрел у себя на хроме. Ничего не тормозит...
ЗЫ может лучше задержку поставить больше миллисекунд, а хеигхт увеличивать на большее кол-во пикселов? |
А не. скорость разная... Это вы имели ввиду под тормозами?
|
Странно, как только открываю инструмент разработчика сразу ускоряется...
|
Да, скорость разворачивания должна быть такая, как после открытия инструмента разработчика. Такая же скорость будет, если убрать к примеру min-height или inline-block заменить на float. Привёл в пример Chrome, так как в нём хорошо это видно, для остальных браузеров нужно наполнить блоки контентом и тогда при наполненном сайте начинаются уже конкретные тормоза. И убрать как бы ничего нельзя, всё нужно для макета и от этих тормозов скрипта нужно как-то избавиться, а точнее сначала найти причину, я думаю сами по себе отдельно inline-block или min-height не могут создать такую задержку скрипту.
|
Проверил на основном коде, убрав body relative, ничего не изменилось. А вот после комментирования float:left, всё прекрасно заработало и в основном коде и в этом. Видимо выход из потока элемента и min-height родителя каким-то образом влияют на браузер.
|
Очень странные реультаты.
По крайней мере, в опере используется приём с position: absolute: если элемент позиционирован абсолютно (или фиксированно), то ни он, ни его потомки, не влияют на внешний поток, поэтому можно делать только частичный reflow (перерисовывать только элемент и его содержимое), что очень сильно ускоряет отображение анимации. В вебките, видимо, это не так. |
Пока левый сайдбар сделал с position:absolute, флоат у с него убрал. Chrome, Safari и FireFox на основном коде ожили, данный скрипт заработал в них с нормальной скоростью. Opera 9.64 еле заметно подтормаживает, а вот Opera 10.51 и Internet Explorer можно сказать ушли в транс (впрочем и до этого они там были), очень сильно тормозит в них скрипт. Занимаюсь поиском тормозящих стилей, пока натыкаюсь на те, на которые отражаются последствия ошибки, height, position и т.д., при их комментировании тормозить перестаёт, но ошибка изначально не в них. Есть подозрение на base64 и Оперу 10, но пока точно не ясно.
|
.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 начинает тормозить, и в девятой и в десятой. Попробую уточнить из-за каких конкретно стилей. |
base64 отпадает.
Результаты: Комментируем рисунки, background - скрипт продолжает тормозить. Комментируем размеры, width, height - скрипт работает быстро. Комментируем absolute - скрипт работает быстро. Комментируем положение, top, left, bottom, right - скрипт работает быстро. |
| Часовой пояс GMT +3, время: 15:36. |
|