Собрался оптимизировать один свой старый скриптик под новую задачу, но оказалось, что всё написано не так... И как всегда, проще написать заново. Но раз уж заново, значит и подойти к вопросу следует обтсоятельно. Подошел... Загрузился вопросом о самом быстром создании элементов - innerHTML или createElement?
http://door-to.ru/scripts/tests/testSpeedCreationElement.htm (осторожней с Мозиллой, открывайте отдельным процессом.)
Ну, и код...
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title block</title>
<script type="text/javascript">
<!-- // --><![CDATA[
var old = 0;
function milliSec() {
var t = new Date();
if (old == 0) {
old = t.valueOf();
}
else {
tmp = t.valueOf() - old;
old = 0;
return tmp;
}
}
function qwe() {
}
function domCreationDiv() {
var i = 400;
milliSec();
while (i--) {
var div = document.createElement('div');
div.setAttribute('id', "div" + i);
div.style.width = 0 + 'px';
div.style.height = i + 'px';
div.style.border = '1px solid #0000FF';
/*@cc_on 1 | @*/ 0 ? div.style.styleFloat = 'left' : div.style.cssFloat = 'left';
div.onclick = qwe;
document.getElementById('td').appendChild(div);
}
if (document.getElementById('time0').innerHTML == "") document.getElementById('time0').innerHTML = milliSec() + ' milliseconds';
else if (document.getElementById('time1').innerHTML == "") document.getElementById('time1').innerHTML = milliSec() + ' milliseconds';
else if (document.getElementById('time2').innerHTML == "") document.getElementById('time2').innerHTML = milliSec() + ' milliseconds';
}
function innerHTMLCreationDiv() {
var i = 400;
milliSec();
while (i--) {
document.getElementById('td').innerHTML += "<div style='border: 1px solid #0000FF; width: 0px; height: " + i + "px; float: left;' id='div'" + i + " onclick='qwe()'></div>";
}
if (document.getElementById('time3').innerHTML == "") document.getElementById('time3').innerHTML = milliSec() + ' milliseconds';
else if (document.getElementById('time4').innerHTML == "") document.getElementById('time4').innerHTML = milliSec() + ' milliseconds';
else if (document.getElementById('time5').innerHTML == "") document.getElementById('time5').innerHTML = milliSec() + ' milliseconds';
}
function cleanAll() {
for (var i = 0; i < 5; i++) {
document.getElementById("time" + i).innerHTML = "";
}
document.getElementById("td").innerHTML = "";
}
// ]]>
</script>
</head>
<body>
<table width="100%" id="table1" cellspacing="0" cellpadding="0" style="border:1px solid #0000FF; border-collapse: collapse">
<tr>
<td width="55%" style="border: 1px solid #0000FF">Time of generation <b>createElement</b></td>
<td id="time0" width="15%" style="border: 1px solid #0000FF" align="right"></td>
<td id="time1" width="15%" style="border: 1px solid #0000FF" align="right"></td>
<td id="time2" width="15%" style="border: 1px solid #0000FF" align="right"></td>
</tr>
<tr>
<td style="border: 1px solid #0000FF">Time of generation <b>innerHTML</b></td>
<td id="time3" style="border: 1px solid #0000FF" align="right"></td>
<td id="time4" style="border: 1px solid #0000FF" align="right"></td>
<td id="time5" style="border: 1px solid #0000FF" align="right"></td>
</tr>
<tr>
<td style="border: 1px solid #0000FF"><input type="button" value="createElement" onclick="domCreationDiv()"><input type="button" value="innerHTML" onclick="innerHTMLCreationDiv()"><input type="button" value="cleanAll" onclick="cleanAll()"></td>
<td style="border: 1px solid #0000FF" align="right"></td>
<td style="border: 1px solid #0000FF" align="right"></td>
<td style="border: 1px solid #0000FF" align="right"></td>
</tr>
<tr>
<td id="td" colspan="4" height="400"></td>
</tr>
</table>
</body>
</html>
|
Над кодом не смеяться! Лепил как попало....
Скорость Оперы поражает воображение.... 
Mozilla, при создании через createElement, как то, хитровы...ано выдает результат... У меня старенький P4 3GHz, дак Mozilla, на первое нажатие кнопки "createElement" визуально значительно медленнее срабатывает чем IE, но время показывает всего раза в полтора большее. А если нажимаю второй раз, то уходит на долго в штопор... но после выхода, время опять то-же! 
|
Как плохо у IE с генерацией таблиц.... А это, пожалуй, один из основных элементов в вэбе. Если Mozilla так чудненько справляется с табличками, попробую провести тест динамического изменения размеров таблиц и дивов. А вдруг, динамика с таблицами пойдет лучше... Меня сейчас сильно интересует одновременное плавное изменение размеров у 5-20 элементов на странице, потому и начал эти тестирования. Скоро выложу последнее решение по плавному движению, выкинул полностью все вычисления из динамического процесса. Потестируем...
