Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
Olya_G
0 / 0 / 0
Регистрация: 14.09.2008
Сообщений: 25
1

Как ускорить работу JavaScript?

08.07.2009, 10:58. Просмотров 1974. Ответов 8
Метки нет (Все метки)

Может кто-нибудь знает как ускорить работу JavaScript? Размер скрипта 50 кб, перерисовка и заполнение комбобоксов идет достаточно медленно, чтобы это было заметно.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.07.2009, 10:58
Ответы с готовыми решениями:

JavaScript слайдера блокирует работу таймера
Здравствуйте! Подскажите, такая проблема: вставил на сайт javascript слайдера,...

Как ускорить выполнение функции?
Здравствуйте, решал задачу, по поиску пары элементов массива, которые равны...

Как ускорить движение объекта мышкой?
http://beta.maquetter.com/client зажимаю мышку на картинке - двигаю картинку...

Как перезагрузить javascript, javascript-ом?
как с помощью javascript перезагрузить javascript ? Смысл в том что один из...

Вставка элементов меню (содержащих javascript) через javascript
Пишу курсовой проект по JavaScript в ходе которого потребовалось создать...

8
palva
3100 / 2232 / 450
Регистрация: 08.06.2007
Сообщений: 8,132
Записей в блоге: 4
08.07.2009, 12:39 2
Я бы пытался бороться за скорость следующим образом: Комбобокс ведь заполняется в цикле. Если внутри цикла стоит document.all.box1.add() то я бы вынес из цикла нахождение объекта d1 = document.all.box1, а внутри цикла оставил бы d1.add(). Нахождение нужного объекта в структуре документа связано с просмотром всего файла, и естественно его выполнять только один раз. Другая мысль, это если нужно найти сразу много объектов (фиксированное число), то не искать их каждый по отдельности, а дать им общее имя и искать их получая коллекцию объектов при помощи метода document.getElementsByName, а потом с каждым объектов работать по соответствующему индексу. Но с точки зрения эффективности это дает не очень много. Наиболее плодотворная идея - это выносить всё что можно из внутренних циклов во внешние.

Возможно, я не один такой умный и у вас всё это уже оптимизировано, возможно, кто-то проводил исследования, делал замеры?
0
sl_play
2 / 2 / 3
Регистрация: 25.05.2009
Сообщений: 2,576
08.07.2009, 13:26 3
to: palva
а можно немного поподробнее о document.all.box1.add()
что ты таким образом добавляешь и как?
0
AsperDaffy
0 / 0 / 0
Регистрация: 02.07.2009
Сообщений: 39
08.07.2009, 14:49 4
to: Olya_G

Пришлите пожалуйста текст (можно на e-mail) все, что можем, сделаем.

to: sp_play

Когда Вы пишете 'document.all.box1.add()', Вы заставляете системы выполнить поиск объекта 'document' среди свойств объекта 'window', затем поиск объекта 'all' среди свойств объекта 'document', затем поиск объекта 'box1' среди свойств объекта 'all', поиск метода 'add' в объекте 'box1' и, наконец - вызвать метод 'add'.

Если Вы используете такую конструкцию в цикле, то вся это длинная цепочка повторяется КАЖДЫЙ раз. Именно это имел в виду pavla.
0
palva
3100 / 2232 / 450
Регистрация: 08.06.2007
Сообщений: 8,132
Записей в блоге: 4
08.07.2009, 15:27 5
2 sl_play

Я почему-то подумал (может быть, был неправ), что комбобокс формируется примерно таким образом:
Код
<SELECT NAME=nm1 ID=id1>
</SELECT>
<SCRIPT>
for(i=0; i<3; i++) {
  op = document.createElement('OPTION')
  op.value = i
  op.text = 'item' + i
  document.all.id1.add(op)
}
</SCRIPT>
Ну то есть, создается новая опция и добавляется к комбобоксу при помощи метода add. Но в данном случае это неважно. Я имел ввиду, что неэффективно располагать вычисление document.all.id1... внутри цикла, а такое вычисление понадобится при любом способе заполнения комбобокса.
0
sl_play
2 / 2 / 3
Регистрация: 25.05.2009
Сообщений: 2,576
08.07.2009, 16:09 6
Меня интересовала сама функция add().
Я почему-то думал, что выше описанный пример делается через appendChild();
Тепер познакомился с add().
0
Olya_G
0 / 0 / 0
Регистрация: 14.09.2008
Сообщений: 25
08.07.2009, 17:26  [ТС] 7
To Asper:
Извините, MSIE 5.5 или 6.0.
0
AsperDaffy
0 / 0 / 0
Регистрация: 02.07.2009
Сообщений: 39
08.07.2009, 18:17 8
Сравните функции oldWay и newWay.

Первая добавляет опции так, как это делаете Вы. Беда с ней в том, что функция add увеличивает длину массива options. Массив же устроен так, что при увеличении длины, автоматически создается пустой option!!!

Т.е. в Вашем случае создается два объекта option. Один создает функция add (и потом выбрасывает за ненадобностью!), а второй создаете Вы сами.

Версия newWay не создает объектов option а просто устанавливает длину массива и пользуется уже созданными. Запустите и сравните время! Как и следовало ожидать - выигрыш почти в два раза! Почти - из-за накладных расходов.

Более того, при таком подходе Вам ВОВСЕ НЕ НУЖНО чистить select перед его повторным использованием! Так что Вы сэкономите еще и на этом.

Код
<html>
<head>
<script language='JavaScript'>
var totalValues = 1000;

function oldWay(sel) {
	clearBox(sel.options);
	var begin = new Date();
	for (var i=0; i<totalValues; i++) {
		sel.options.add(new Option('Option #'+i,'val'+i));
	}		
	alert('Totally: '+((new Date()).getTime()-begin.getTime())+' milliseconds');
}	

function newWay(sel) {
	clearBox(sel.options);
	var begin = new Date();
	var opts = sel.options;
	opts.length = totalValues;
	for (var i=0; i<totalValues; i++) {
		var opt = opts[i];
		opt.text = 'Option #'+i;
		opt.value = 'val'+i;
	}
	alert('Totally: '+((new Date()).getTime()-begin.getTime())+' milliseconds');
}

function clearBox(opts) {
	opts.length = 0;
}
</script>
<title>Sample #2 for Olya</title>
</head>
<body>
<form>
	<select id='select1'></select><p>
	<select id='select2'></select><p>
	<input type='button' onclick='oldWay(document.all.select1)' value='Fill up with old way'><p>
	<input type='button' onclick='newWay(document.all.select2)' value='Fill up with new way'>
</form>
</body>
</html>
0
ollalla
0 / 0 / 0
Регистрация: 16.02.2009
Сообщений: 18
09.07.2009, 15:40 9
А теперь полюбопытствуйте имеет ли смысл использовать DOM для сооружения select box. Особенно если Вас волнует быстрота работы Вашего скрипта.
http://www.ollaz.com/fund/TestPerformance/testSelect.htm
0
09.07.2009, 15:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.07.2009, 15:40

Выполнение Javascript файла в котором присутствуют javascript теги
text1.js &lt;link...

Как с помощью JavaScript вызвать окно 'Сохранить как' (File->Save As) ?
Народ, прорграммисты.. монстры, как с помощу JavaScript вызвать окно 'Сохранить...

Как javascript-ий unescape заставить работать так же как и perl ?
есть страничка со следующим фрагментом: &lt;SCRIPT LANGUAGE='JavaScript'&gt; var...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru