|
|
31.07.2014, 11:08
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
Rise,
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
b {marginLeft:2pt;}
</style>
</head>
<body>
<div id="first">test 1 <b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b></div>
<div id="second">test 2</div>
<script type="text/javascript">
var f = document.getElementById("first");
var s = document.getElementById("second"); var r;
var html = f.innerHTML;
var time1 = new Date().getTime();
for (i = 0 ; i < 1000; ++i){
html += "<b>A da</b>";
}
f.innerHTML = html;
var time2 = new Date().getTime();
var time3 = new Date().getTime();
for (i = 0 ; i < 1000; ++i){
r = document.createElement ("b");
r.innerHTML = "A da";
s.appendChild (r);
}
var time4 = new Date().getTime();
alert ("(innerHTML +=)милисек = " + (time2 - time1) );
alert ("(appendChild)милисек = " + (time4 - time3) );
alert ("коффицент" + ((time2 - time1) / (time4 - time3)) );
</script>
</body>
</html>
Еще вопросы?
|
|
31.07.2014, 11:16
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Сообщение от WorM32
|
|
Еще вопросы?
|
Что это? Тест сложения строк?  ты засунь внутрь цикла строки 16 и 21 и посмотрим результат... |
|
31.07.2014, 11:29
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
|
Сообщение от Rise
|
|
Что это? Тест сложения строк?
|
это ответ на
|
Сообщение от Rise
|
|
У ТС при добавлении команд будет увеличиваться содержимое элемента output, при innerHTML браузеру с каждым разом придется извлекать(преобразовать dom в строку), создавать заново(строку в dom) структуру содержимого из большего числа элементов.
|
И тест показывает, что для конкретного случая, прироста производительности от использования appendChild нет!
Последний раз редактировалось WorM32, 31.07.2014 в 11:34.
|
|
31.07.2014, 11:38
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
|
... не нужно 1000 раз сложить строку
... нужно 1000 раз изменить элемент добавляя новые элементы в конец
в случае с innerHTML элемент будет пересоздаваться 1000 раз
в случае appendChild ....
все все знают но некоторые упираются ... =)
|
|
31.07.2014, 11:41
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от MallSerg
|
в случае с innerHTML элемент будет пересоздаваться 1000 раз
в случае appendChild ....
|
докажи  на примере консольки хрома или IE11
|
Сообщение от MallSerg
|
|
все все знают но некоторые упираются ... =)
|
угумс. но браузеры на месте то не стоят |
|
31.07.2014, 12:05
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
|
Сообщение от melky
|
|
угумс. но браузеры на месте то не стоят
|
браузеры это программы исполняемые на компьютерах они не могут стоять в принципе =) |
|
31.07.2014, 13:39
|
|
Новичок на форуме
|
|
Регистрация: 30.07.2014
Сообщений: 8
|
|
|
Сообщение от Rise
|
same4,
<form name="cmd">
<input name="input">
<textarea name="output"></textarea>
</form>
<script>
document.cmd.onsubmit = function(){
//this.input.value
//this.output.value
return false;
};
</script>
|
Спасибо за ответ, но у меня что-то никак не хочет работать этот код.
Да и к тому же у меня и без textarea код работает хорошо с div (спасибо Aetae) |
|
31.07.2014, 14:29
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
|
Сообщение от melky
|
Сообщение от MallSerg
в случае с innerHTML элемент будет пересоздаваться 1000 раз
в случае appendChild ....
докажи на примере консольки хрома или IE11
|
<div id="first"><a id="ele">Известно</a></div>
<form name="frm">
<input type="button" name="b1" value=".innerText +=" />
<input type="button" name="b2" value=".appendChild" />
</form>
<script type="text/javascript">
var f = document.getElementById ("first");
document.frm.b1.onclick = function (){
// показывает что все элементы внутни f создаются заного
var first = document.getElementById ("ele");
f.innerHTML += "<a> + добавка</a>";
var second = document.getElementById ("ele");
alert ( (first === second) );
}
document.frm.b2.onclick = function (){
// ссылка неизменна показывает что все элементы внутни f остались прежними
var a = document.createElement('a');
a.innerHTML = "<a> + добавка</a>";
var first = document.getElementById ("ele");
f.appendChild(a);
var second = document.getElementById ("ele");
alert ( (first === second) );
}
</script>
|
|
|
|
