Форум

float · #21 (**permalink**) 11.07.2010, 16:39

Да и ещё. Одинаковой работы скрипта в во всех браузерах вы всё равно не добъётесь.

DMH · #22 (**permalink**) 11.07.2010, 16:59

Рассскажите своему работодателю, что есть файлы с названиями ie6.css и ie7.css, которые позволяют достичь кроссбраузерности.
Кстати, inline-block в ie6 и ie7 по функциональности заменяется на display:inline; zoom1; Замена производится только в этих двух файлах, поэтому на остальные браузеры не влияет. В остальном свойство кроссбраузерно (про указание vertical-align:top и убирание пробелов между элементами наверое все знают).
Так, теперь насчёт кода. В Opera 10.51/9.64 скрипт тормозит только из-за стилей "a_l" (они закомментированы). Удаление position relative и прочее на Оперу особого влияния не произвело (скорость увеличилась на 0.1с), а вот Хром ведёт себя немного по другому. Удаление стилей "a_l" так же как и в Опере, сразу разгоняет скрипт (примерно на 1с), но также на ускорение влияет удаление position:relative либо min-height. Прикрутил заодно таймер, в миллисекундах, а то на глаз иногда неразличимо.

<!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 {
	background:aqua;
	position:relative;
}
.page {
	min-height:100%;
}

#num {
	position:absolute;
	top:100px;
	left:200px;
	height:0;
	overflow:hidden;
	border:1px solid blue;
}

/*

.a_l {
	position:absolute;
	background:red;
	top:96px;
	left:178px;
	bottom:51px;
	width:1px;
}
.a_r {
	position:absolute;
	background:red;
	top:96px;
	right:0;
	bottom:51px;
	width:1px;
}
.a_b {
	position:absolute;
	background:red;
	bottom:45px;
	left:184px;
	right:6px;
	height:1px;
}
.a_bl {
	position:absolute;
	background:red;
	bottom:45px;
	left:178px;
	width:6px;
	height:6px;
}
.a_br {
	position:absolute;
	background:red;
	bottom:45px;
	right:0;
	width:6px;
	height:6px;
}

*/

p {
	margin:0;
	padding:0;
}
</style>

<script>

xxx='';

function slide(el,i,j) {

	if (i!=j) {
		el.style.height=++j+'px';
		setTimeout(function() { slide(el,i,j) },0);
	}
	else end();
}
function begin() {
var date1=new Date();
xxx=date1.getTime();
slide(document.getElementById('num'),180,0)
}
function end() {
var date2=new Date();
alert(date2.getTime()-xxx);
}
</script>

</head>

<body>

<div class="page">

<input type="button" value="Run" onclick="begin()">

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

<p class="a_l"></p><p class="a_r"></p><p class="a_b"></p>
<p class="a_bl"></p><p class="a_br"></p>

</div>

</body>
</html>

Если у "a_b" увеличить height до 2-х пикселей, то в Опере скрипт разгонится примерно на 50%, но неполностью, тоже странный факт.

float · #23 (**permalink**) 11.07.2010, 17:10

Ну если такой вариант вам кажется проще, прозрачнее и понятнее - флаг вам в руки...

DMH · #24 (**permalink**) 11.07.2010, 17:43

Появилась идея, что несоответствие идёт в (height, width) и (top, left, bottom, right), а точнее в их совместном использовании. Но проверку уже на завтра перенесу.
inline-block и float, как сами могли убедиться, могут иметь прямое отношение к торможению скрипта, а могут и косвеное, из-за торможения совсем других свойств, оказывающих на них влияние, причина пока неясна. Цель данной темы найти истинного виновника, а не просто заменить inline-block на флоаты и радоваться дальше. В будущем рано или поздно опять эта проблема всплывёт, хоть с флоатами, хоть с инлайн-блоками.

DMH · #25 (**permalink**) 12.07.2010, 08:34

Виновник всех бед в Opera 9 и Firefox найден - height:100% у html, body и page. В Chrome - тот же самый height. Остальные версии браузеров пока исследуются.
А с высотой, заданной в процентах, видимо при её вычислении, происходит нечто странное внутри движка браузеров, что приводит к подтормаживанию скриптов. Особенно, если контент уезжает вниз за границы экрана.
редактирование:
Вобщем убрал отовсюду height:100% и скрипты снова заработали с нормальной скоростью, даже в Опере 10. Есть конечно отклонения в 0.1-0.2 секунды при пустом и заполненном макете, но это мелочи по сравнению с предыдущими задержками в 3 раза. Теперь и inline-block и флоаты и position:relative уживаются вместе и при этом не притормаживают скрипты. Высота тормозила именно при процентном указании, при тех же 100px всё работало нормально. Проблема теперь другого плана, чем заменить все height:100%. Раз при пиксельном указании всё гладко, решил пока временно переделать задание высоты с помощью javascript.
Судя по скорости работы данного скрипта на пустой странице, Chrome на первом месте, далее, проигрывая с задержкой в два раза, идут Firefox и Opera, позади всех с задержкой в 3 раза идёт Internet Explorer. Что в Хроме происходит за 2 секунды, то в IE за 6, видимо для плавного кроссбраузерного разворачивания элементов нужно учитывать ещё и коэффициент тормознутости браузеров. Хотя может ну его, это разворачивание.
редактирование:
пришлось пожертвовать плавностью, привязать вызов функции ко времени (задержка 10мс, чтобы браузеры догнали друг друга) и соответственно увеличить прибавление высоты на +3px. Более-менее выровнялось, Хром правда чуть быстрее (на 0.3с), плавность на глаз нормальная. При дальнейшем увеличении параметров, браузеры полностью выравниваются, но начинается дёрганье при разворачивании/сворачивании. Пока золотой серединой будет 10мс и 3px, дальше после тестов может изменю.

рони · #26 (**permalink**) 14.07.2010, 00:24

если так важно время выполнения скрипта установи его сам )))

var rg = /(height.*?)(\d+)/i;

function slide(b, d, c, f) {
    var a = b.style.cssText;
    rg.test(a) || (a += "; height: " + c + "px;");
    var g = (new Date).getTime();
    setTimeout(function () {
        var e = ((new Date).getTime() - g) / f;
        a = a.replace(rg, "$1" + Math.floor((d - c) * e + c));
        b.style.cssText = a;
        if (e < 1) setTimeout(arguments.callee, 10);
        else {
            a = a.replace(rg, "$1" + d);
            b.style.cssText = a
        }
    }, 10)
};

b - элемент
d - конечный параметр высоты элемента
с - начальный параметр высоты элемента
f - время выполнения скрипта
для примера от 0 до 180px за 1 секунду
onclick="slide(document.getElementById('num'),180, 0,1000)"

subzey · #27 (**permalink**) 14.07.2010, 01:36

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

DMH · #28 (**permalink**) 14.07.2010, 08:20

Это насчёт Оперы? Пока не проверял. На Хром overflow:hidden не принёс ожидаемых результатов и с полосами прокрутки и без оных.
По Хрому: тормоза появляются при height:100% у html, body, дива-обёртки (+ relative у обёртки в качестве нагрузки, всё остальное, включая inline-block элементы, убрано) и position:absolute у разворачиваемого элемента. Полос прокрутки нет. Если разворачиваемый элемент переместить в static, то тормоза исчезнут.

Решение - либо убирание height:100% и задания любой определённой высоты в пикселях (не процентах), либо перенос разворачиваемого элемента в static. Может тут где-то проблема?

DMH · #29 (**permalink**) 14.07.2010, 08:50

Сообщение от subzey

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

Да, это вторая проблема, тормозившая Internet Explorer на 0.2-0.3с, нижние и боковые абсолютные бордеры выходили за пределы экрана и начиналось притормаживание, а там где не выходили, работало чуть быстрее. После убирания height:100%, скорость увеличилась в 3 раза, после применения overflow:hidden скорость увеличилась на 0.2-0.3с. Такими темпами скрипты скоро летать будут

Вторая причина впринципе объяснена вами, осталась теперь первая, про height:100%.

И статей то не встречал в интернете, как правильно верстать, чтобы не тормозили скрипты, непопулярная тема что ли.

p.s. overflow:hidden для обёртки, если для body, тогда полос прокрутки не будет. Я по правде говоря так до конца и не понял каким образом overflow:hidden повлиял на IE, полосы прокрутки естественно так и остались, но работать он стал заметно быстрее. На все остальные браузеры overflow:hidden для body и для обёртки с убиранием полос прокрутки не повлиял никак (Опера 10.51 повисла, но в этой опере баг), в остальных и не хуже и не лучше.

рони · #30 (**permalink**) 14.07.2010, 10:19

Сообщение от DMH

И статей то не встречал в интернете, как правильно верстать, чтобы не тормозили скрипты, непопулярная тема что ли

не скрипт тормозит а прорисовка и перерасчёт документа -- дай время браузерам на прорисовку setTimeout(function() { slide(el,i,j) },0);
а по теме посмотри http://webo.in/articles/all/2009/31-...flow-relayout/
http://webo.in/articles/all/2009/28-efficient-css/

Форум

Справочник

Discord чат

Курсы javascript