Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 13, средняя оценка - 4.85
Olya_G
0 / 0 / 0
Регистрация: 14.09.2008
Сообщений: 25
#1

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

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

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

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

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

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

Выполнение Javascript файла в котором присутствуют javascript теги - JavaScript
text1.js <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> ...

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

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

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

Возможно, я не один такой умный и у вас всё это уже оптимизировано, возможно, кто-то проводил исследования, делал замеры?
0
sl_play
2 / 2 / 0
Регистрация: 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
3088 / 2222 / 375
Регистрация: 08.06.2007
Сообщений: 8,106
Записей в блоге: 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 / 0
Регистрация: 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-ий unescape заставить работать так же как и perl ? - JavaScript
есть страничка со следующим фрагментом: &lt;SCRIPT LANGUAGE='JavaScript'&gt; var content = '%80%81%82%83%84'; content =...

JQuery как знаю это библиотека готовых решений. А AJAX как относится к JavaScript? - JavaScript
???

А как вы учили JavaScript? - JavaScript
Всем привет! Сейчас учу джава скрипт по урокам с сайта learn.javascript.ru, хороший учебник. Но вот задания там в конце почти каждого...

Как зациклить javascript? - JavaScript
Помогите зациклить следующую запись, а то монотонно приходится копировать. function getSumdobor0() { var piece_dobor0 =...


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

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

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