Да и ещё. Одинаковой работы скрипта в во всех браузерах вы всё равно не добъётесь.
|
Рассскажите своему работодателю, что есть файлы с названиями 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%, но неполностью, тоже странный факт. |
Ну если такой вариант вам кажется проще, прозрачнее и понятнее - флаг вам в руки...
|
Появилась идея, что несоответствие идёт в (height, width) и (top, left, bottom, right), а точнее в их совместном использовании. Но проверку уже на завтра перенесу.
inline-block и float, как сами могли убедиться, могут иметь прямое отношение к торможению скрипта, а могут и косвеное, из-за торможения совсем других свойств, оказывающих на них влияние, причина пока неясна. Цель данной темы найти истинного виновника, а не просто заменить inline-block на флоаты и радоваться дальше. В будущем рано или поздно опять эта проблема всплывёт, хоть с флоатами, хоть с инлайн-блоками. |
Виновник всех бед в 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, дальше после тестов может изменю. |
если так важно время выполнения скрипта установи его сам )))
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)" |
Я так понял, проблема в том, что абсолюты уезжают за край порта просмотра, появляются скроллбары, отжирают место у порта просмотра и заставляют рефловить всю страницу.
В таком случае достаточно поставить overflow:hidden для, скажем, body (или блока-обвертки), и этого происходить не будет. |
Это насчёт Оперы? Пока не проверял. На Хром overflow:hidden не принёс ожидаемых результатов и с полосами прокрутки и без оных.
По Хрому: тормоза появляются при height:100% у html, body, дива-обёртки (+ relative у обёртки в качестве нагрузки, всё остальное, включая inline-block элементы, убрано) и position:absolute у разворачиваемого элемента. Полос прокрутки нет. Если разворачиваемый элемент переместить в static, то тормоза исчезнут. Решение - либо убирание height:100% и задания любой определённой высоты в пикселях (не процентах), либо перенос разворачиваемого элемента в static. Может тут где-то проблема? |
Цитата:
Вторая причина впринципе объяснена вами, осталась теперь первая, про height:100%. И статей то не встречал в интернете, как правильно верстать, чтобы не тормозили скрипты, непопулярная тема что ли. p.s. overflow:hidden для обёртки, если для body, тогда полос прокрутки не будет. Я по правде говоря так до конца и не понял каким образом overflow:hidden повлиял на IE, полосы прокрутки естественно так и остались, но работать он стал заметно быстрее. На все остальные браузеры overflow:hidden для body и для обёртки с убиранием полос прокрутки не повлиял никак (Опера 10.51 повисла, но в этой опере баг), в остальных и не хуже и не лучше. |
Цитата:
а по теме посмотри http://webo.in/articles/all/2009/31-...flow-relayout/ http://webo.in/articles/all/2009/28-efficient-css/ |
Часовой пояс GMT +3, время: 14:59. |