JavaScript - это очень хороший язык, синтаксис которого похож на синтаксис таких языков, как C\C++ и Java, поэтому изучая JavaScript вы получаете знания и по этим языкам. Очень хорошее дело - согласитесь?
Но, как и любой язык, JavaScript имеет свои преимущества и недостатки. Преимущества его состоят в том, что он идеально подходит для создания динамических Web-страниц, пунктов навигации, таблиц, связи баз данных с Web-страницами и так далее. Недостатки этого языка заключаются в том, что при создании сложных функций и обработчиков падает производительность работы всей страницы. Но этого недостатка не лишен ни один из языков. Чем сложнее функция - тем дольше времени требуется на ее обработку.
В данной статье пойдет речь о том как повысить производительность сценариев на JavaScript при полном сохранении всех функциональных возможностях сайта.
Вот основные способы, позволяющие увеличить скорость обработки сценариев [1, с. 112]:
eval().with.document.write().
Функция eval() достаточно удобна и проста в использовании, но ее выполнение занимает очень длительное время. Данная функция является одной из самых неэффективных функций JavaScript [1, с. 113]. Вместо использования этой функции обращайтесь к соответствующим коллекциям, либо применяйте функцию document.getElementById() (если данную функцию поддерживает браузер).
Не следует использовать конструкцию with, которая позволяет сократить код сценария; но интерпретатор при выполнении каждого оператора данной конструкции будет выполнять дополнительные действия, что в свою очередь уменьшает скорость работы сценария [1, с. 114].
Следует также избегать использовать повторных вычислений. Например, многие программисты пишут циклы следующего содержания: for (i = 0; i < s.length; i++). В таком коде при каждой итерации будет происходить расчет s.length, что увеличивает время обработки цикла, а ведь именно циклы являются наиболее уязвимым местом в исходном коде, где небольшая эффективность тела цикла увеличивает скорость всего его выполнения. Таким образом, лучше переписать вышеизложенный код следующим образом:
max = s.length;
for (i = 0; i < max; i++)
Если в коде используется постоянное обращение к какой-то функции, то лучше создать локальную переменную, которая будет иметь значение в виде результата выполнения такой функции. Таким образом, вы сэкономите время на постоянное вычисление результата данной функции.
Каждый раз, когда вам необходим большой многомерный массив или коллекция объектов, в которой сценарий будет искать нужные объекты, добавляйте к массиву имитированные хэш-таблицы. Такой подход сочетает лучшие стороны обоих методов: применение массива позволяет перебирать элементы, если необходимо обработать каждую запись, и возможность быстрого доступа к любой записи без перебора [1, с. 83].
// Создаем новый массив.
var sales = new Array();
sales[sales.length] = {period:'1', region:'east', total:2300};
sales[sales.length] = {period:'2', region:'east', total:3105};
sales[sales.length] = {period:'3', region:'east', total:2909};
sales[sales.length] = {period:'4', region:'east', total:4800};
// Создаем хэш-таблицу.
max = sales.length;
for (i = 0; i < max; i++) {
sales[sales[i].region + '_' + sales[i].period] = sales[i];
} // for
// Теперь можно использовать операцию для доступа к продажам третьего
// квартала восточного региона.
sales['east_3'].total;
Работая с массивом таким образом, вы получаете существенное преимущество. При необходимости получения определенного элемента массива вам не нужно обращаться ко всему массиву и обрабатывать все его элементы по очереди. При запуске сценария будет выполнен цикл, но затем, при дальнейшей работе с массивом вам не нужно будет обрабатывать каждый элемент массива в отдельности.
Метод document.write() формирует содержимое страницы при загрузке. Этот метод является сравнительно медленным, по сравнению с другими методами, которые предоставляет язык JavaScript. Если необходимо вывести на страницу большое количество HTML-кода, накопите текст в строковой переменной, а затем выведите этот код с помощью одного вызова document.write(). Возможно, что для вывода больших фрагментов HTML-кода, вы сможете использовать код метод innerHTML (для вывода текста - метод innerText), который предоставляется тегом <SPAN> и некоторыми другими тегами.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
span1.innerHTML = '<H1>Добро пожаловать на сайт!</H1>';
//-->
</SCRIPT>
<SPAN ID="span1" NAME="span1"></SPAN>
Вероятно существуют и другие способы повышения производительности сценариев JavaScript, но в этой статье написаны самые элементарные способы, которые позволяют ускорить процесс обработки сценария. Способы повышения исполняемого кода (EXE-файлов и DLL-библиотек) рассматриваются в публикации Оптимизация программ. Вопросы по оптимизации сценариев JavaScript (динамическое подключение сценариев, экстенсивный и интенсивный способы использования JavaScript) описаны в статье Элегантный сайт с помощью JavaScript.