В процессе разработки скрипта большую строку часто объединяют и сращивают для вывода по определенному правилу. Например, при написании элемента управления-скрипта вывод HTML-тега, который управляет внешним видом всего элемента управления, или при динамическом анализе и создании HTML-тегов после получения возвращаемого значения на стороне сервера в AJAX, но я не буду обсуждать конкретное применение сращивание строк здесь. Я просто хочу обсудить здесь эффективность сращивания.
Когда мы пишем сращивание строк, мы всегда используем оператор «+=", s += String; не знаю, заметили ли вы, что емкость объединенной строки равна Когда число равно. десятки или даже сотни К, выполнение скрипта происходит очень медленно и загрузка процессора чрезвычайно высока, например:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
вар результат = "";
for(var i=0; i<2000; i++) result += str;
Всего за один шаг строка результата равна 200 КБ, это занимает 1,1 секунды (это связано с конфигурацией компьютера), а пиковое значение ЦП составляет 100 %. (Чтобы увидеть эффект более интуитивно, я сделал еще несколько петель). Вполне возможно, что именно такой этап операции отнимает у меня больше секунды времени. Вкупе с затратами времени других кодов время выполнения всего блока скрипта становится невыносимым. Есть ли какое-нибудь решение по оптимизации? Есть ли другой способ? Ответ, конечно, да, иначе мне было бы глупо писать эту статью.
Более быстрый способ — использовать массив. При объединении в цикле вместо объединения в строку строка помещается в массив, и, наконец, для получения результирующей строки используется метод array.join(""). :
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
var result = "", a = new Array();
for(var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;
Вы можете проверить время, необходимое для объединения строки одинакового размера. Результат, который я тестировал здесь: <15 миллисекунд. Обратите внимание, что его единица измерения - миллисекунды. а это значит, что для сборки такой струны 200К затраты времени двух мод составляют почти два порядка. что это значит? Это значит, что последний закончил работу и вернулся с обеда, а первый еще усердно работает. Я написал тестовую страницу. Вы можете скопировать следующий код, сохранить его как файл HTM и открыть на веб-странице, чтобы проверить разницу в эффективности между ними. В любом случае, я проверил, что первый вариант занимает полминуты. , и последнее Или это можно сделать за 0,07 секунды (цикл 10 000 раз).
<тело>
Количество конкатенаций строк<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="Метод сращивания строк" onclick="method1()">
<input type="button" value="Метод соединения назначения массива" onclick="method2()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<textarea id="show" style="ширина: 100%; высота: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Длина этой склеенной строки 100 байт автор: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
//Метод 1;
метод функции1()
{
вар результат = "";
var totle = parseInt(document.getElementById("totle").value);
var n = новая Date().getTime()
for(var i=0; i<totle; i++);
{
результат += ул;
}
document.getElementById("показать").value = результат;
var s = "Метод склейки строк: длина большой строки после склейки"+ result.length +"bytes",+
«Сращивание требует времени» + (new Date().getTime()-n) + «Миллисекунды!»;
document.getElementById("method1").innerHTML = s;
}
//Метод 2
функция метод2()
{
вар результат = "";
var totle = parseInt(document.getElementById("totle").value);
вар n = новая дата().getTime();
вар а = новый массив();
for(var i=0; i<totle; i++)
{
а[я] = ул;
}
результат = a.join(""); a=null;
document.getElementById("show").value = result;
var s = "Метод объединения массива с присвоением: длина большой строки после сращивания"+ result.length +"bytes,"+
«Сращивание требует времени» + (new Date().getTime()-n) + «Миллисекунды!»;
document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>
Наконец, позвольте мне сказать несколько слов. Будет ли соединение массивов использоваться для сращивания строк в будущем? Это зависит от ваших реальных потребностей. Для обычных комбинаций из нескольких байтов или байтов уровня K нет необходимости использовать метод массива, поскольку открытие переменных массива также является дорогостоящим. Если комбинаций строк K больше нескольких, эффективность массива высока.
-------------------------------------------------- ----------
IE 6.0:
Метод сращивания строк: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 22 089 миллисекунд!
Метод соединения с присвоением массива: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 218 миллисекунд!
Фаерфокс 1.0:
Метод сращивания строк: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 1044 миллисекунды!
Метод объединения с присвоением массива: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 1 044 миллисекунды!
Мозилла 1.7:
Метод сращивания строк: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 1045 миллисекунд!
Метод объединения с присвоением массива: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 1 044 миллисекунды!
Нетскейп 7.0:
Метод сращивания строк: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 10 273 миллисекунды!
Метод объединения с присвоением массива: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 1 138 миллисекунд!
Опера 7.54:
Метод сращивания строк: длина склеенной большой строки составляет 1 010 000 байт, а сращивание занимает 6 968 миллисекунд!
Метод соединения с присвоением массива: длина склеенной большой строки составляет 1010000 байт, а сращивание занимает 6922 миллисекунды!
Результаты тестирования 10 000-кратного цикла показывают, что эффективность может быть значительно повышена в IE и Netscape, в то время как затраты времени обоих методов в Firefox Mozilla Opera в основном аналогичны. Этих данных достаточно, чтобы определить, что метод объединения массивов лучше, чем метод объединения массива. традиционное сращивание струн.