1. Делайте загрузку JavaScript «отложенной»
Одной из наиболее частых проблем из рассматриваемого комлекса является прямое исполнение JavaScript по ходу загрузки страницы, хотя этого можно и избежать. Если код скрипта не изменяет содержимое страницы (DOM) при загрузке, то выполнение этого кода может быть отложено до полной загрузки страницы. Таки образом, сначала появится содержание страницы, а потом уже будут выполнено все отложенные скрипты. К несчастью, это поддерживается не всеми браузерами. Подробнее про атрибут defer у тега .
2. Уменьшайте объем кода, который должен выполниться при полной загрузке страницы (при событии window.onload)
Все, что исполняется после загрузки страницы, увеличивает время этой загрузки. Чем меньше кода будет выполнено, тем лучше. Другим важным моментом является отсечение зависимостей для загрузки конкретной страницы (когда загрузка зависит от ряда внешних загрузок или вызовов). Это большая проблема, т.к. может повлечь «подвисший» вызов скрипта. В любом случае, JavaScript код, который исполняется несколько секунд, является узким местом (bottleneck) при загрузке страницы. Используя разбиение выполнения кода на отдельные независимые части при помощи задержек (timeouts) можно частично решить эту проблему, хотя это и довольно дорогой («болезненный») путь. Также в этом случае может помочь использование «ненавязчивого» (unobtrustive) JavaScript
3. Используйте балансировщик нагрузки при помощи различных URL для подгружаемого файла JavaScript
Сейчас большинство скриптов использует единственный URL в качестве истоника основного файла, например: www.mycoolwidget.com. Это немасштабируемое решение. Чем дальше распространяется виджет, тем больше нагрузка на сервер с исходным кодом, и число параллельных запросов на один и тот же сервер может быть достаточно большим. Лучше всего выдавать пользователям различные URL'ы, например: server1.mycoolwidget.com, server2.mycoolwidget.com и т.д. Пусть даже изначально они будут указывать на один и тот же IP адрес (физическую машину), однако, в будущем это позволит разделить трафик и нагрузку.
4. Используйте стандартные библиотеки
Пожалуй, хуже всего то, что авторы JavaScript кода каждый раз изобретают велосипед, хотя это и чревато большим количеством ошибок. По сравнению с Java (в которой присутствует набор стандартных библиотек), в JavaScript нет ничего, похожего на стандарт, но, по-видимому, довольно эффективно будет использовать такие разрабатываемые библиотеки, как prototype. Они написаны довольно опытными людями, которые уже наступили не один раз на все возможные грабли, поэтому им можно доверять. В любом случае, использовать их наработки может оказаться очень полезным. Предполагается, то для уменьшения кода виджетов он подгружает стандартную библиотеку, ту же prototype, или проверяет, загружена ли она. Чем больше будет виджетов, использующих какой-то стандарт, тем меньше внешнего кода придется загружать посетителям страниц.
5. «Семь раз отмерь, один раз отрежь»
Предполагайте наличие других JavaScript файлов, которые могут загружаться на сайте автора блога, это очень вероятно. Рассматривая себя частью большой системы, разработчики могут избежать ряда проблем, которые могут возникнуть при конфликте их разработок с чужими (виджетами), и гарантировать доступность своих приложений у каждого отдельного пользователя.
6. Вывод функций, которые должны загружаться, в код OnLoad
1. Инициализируем переменную arr_onload как массив.
2. По мере загрузки страницы добавляем в массив имена функций которые должны выполнится по окончании загрузки страницы.
3. По окончании загрузки страницы будет запущена функция f_onload(), своеобразный контроллер выполнения JavaScript-кода, который пробежится по всем элементам массива и выполнит последовательно все функции.
<html>
<script>
arr_onload = new Array();
function f_onload() {
for(i=0;i<arr_onload.length;i++) {
eval(arr_onload[i] + '();');
}
}
</script>
<body onload="f_onload()">
<div id="bar">Bar</div>
<script>
function bar2foo() {
obj = document.getElementById('bar').innerHTML = 'Foo';
}
arr_onload[arr_onload.length] = 'bar2foo';
</script>
<div id="foo">Foo</div>
<script>
function foo2bar() {
document.getElementById('foo').innerHTML = 'Bar';
}
arr_onload[arr_onload.length] = 'foo2bar';
</script>
</body>
</html>
No comments:
Post a Comment