31.07.2014, 09:36
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
MallSerg,
не-не-не, я никогда бы не стал в цикле использоваться конструкцию с el.innerHTML += 'бла бла бла';
Если на вашем примере, то было бы так:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
b {marginLeft:2pt;}
</style>
</head>
<body>
<div id="first">test 1 </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, 09:46
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
|
WorM32, ты бы не стал. А те, кому ты советы даёшь без пояснений - стали бы. Потому хотябы в ответах новичкам воздержись от этого дерьма.
__________________
29375, 35
|
|
31.07.2014, 09:56
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
|
Aetae,
Простите, но пояснения, что "нужно использовать только appendChild и всё, писец!" - я тоже не увидел) Так что в данном случае ваш совет ничем не лучше моего.
А вообще нужно уметь пользоваться разными инструментами, в зависимости от конкретной ситуации, но это придет только с опытом.
|
|
31.07.2014, 10:03
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
WorM32,
Ты лукавишь речь шла про то что « .innerHTML += » это писец
а ты переврал и убрал эту конструкцию из своего теста и пытаешься всех обмануть.
Не нада так делать.
Нужно просто признать что « .innerHTML += » именно в таком сочетании это писец ад и погибель
Последний раз редактировалось MallSerg, 31.07.2014 в 10:16.
|
|
31.07.2014, 10:23
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
MallSerg,
Простите, где это я из своего теста убрал полный ребилд элемента? Ведь именно в этом и был смысл нашего спора с Aetae.
Конструкции
var html = el.innerHTML;
html += '<b>bla</b>';
el.innerHTML = html;
и
el.innerHTML += '<b>bla</bla>';
Являются идентичными! И делают полный ребилд элемента el.
Про то что el.innerHTML += 'bla' можно использовать в цикле я нигде не говорил, и у ТСа в описании проблемы тоже не было никаких циклов. Так что не надо фантазировать и подгонять тесты под свои фантазии.
|
|
31.07.2014, 10:56
|
|
Новичок на форуме
|
|
Регистрация: 30.07.2014
Сообщений: 8
|
|
Aetae,
Спасибо большое, вы сделали мой день. И да, вы может упустили момент, но мне нужно отправлять текст по нажатию на enter, сейчас же страница тупо обновляется.
Да, спасибо всем, кто помог мне в решении проблемы. Все ваши ответы послужат мне уроком 
В моем случае, код - Aetae был тем, что мне нужно.
|
|
31.07.2014, 11:00
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
Сообщение от same4
|
|
В моем случае, код - Aetae был тем, что мне нужно.
|
халявой? |
|
31.07.2014, 11:03
|
|
Новичок на форуме
|
|
Регистрация: 30.07.2014
Сообщений: 8
|
|
Сообщение от MallSerg
|
|
халявой?
|
Да, правильно подмечено. |
|
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:29
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
|
Сообщение от Rise
|
|
Что это? Тест сложения строк?
|
это ответ на
|
Сообщение от Rise
|
|
У ТС при добавлении команд будет увеличиваться содержимое элемента output, при innerHTML браузеру с каждым разом придется извлекать(преобразовать dom в строку), создавать заново(строку в dom) структуру содержимого из большего числа элементов.
|
И тест показывает, что для конкретного случая, прироста производительности от использования appendChild нет!
Последний раз редактировалось WorM32, 31.07.2014 в 11:34.
|
|
|
|
