<!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 у хедера остался, уже не стал проверять, влияет он на скорость или нет, как можно больше уменьшил весь код. Скрипт один единственный.