Например, при поиске информации, я открываю первые 5 результатов, и практически всегда, первые два результатах дают 100% информации, просматриваю конечно те страницы, которые загрузились первыми. Но, как ни странно, это может влиять и на получения прибыли от сайтов. Google констатировал, что после переработки страниц, время загрузки страницы увеличилось на 0.4 секунды для 10 и на 0.9 для 30 поисковых результатов, это привело к уменьшению поискового трафика и доход от рекламы на 20% (Linden, 2006)!
Если разобраться на что уходит время при работе с Javascript на этапе загрузки страницы, то можно выделить 3 этапа:
1. Загрузка файла/кода JavaScript
2. Анализ/разбор JavaScript кода браузером
3. Выполнения JavaScript кода на этапе загрузки страницы
Первый и второй этап в большинстве случаев и вызывают задержку. Одним из оптимизационных действий, которые рекомендуется делать, является перенос JavaScript кода в отдельные файлы и добавление ссылки на эти файлы перед закрывающимся тегом body.
<html>
<head>
//ваш html разметка секции head
</head>
<body>
//ваш html разметка секции body
<script type="text/javascript" src="myJavaScript.js">
</script>
</body>
</html>
Первое делается для того, чтобы браузер мог закешировать JavaScript код. Второй, чтобы дизайн страницы отрисовался раньше, чем начнут загружаться файлы с JavaScript кодом.
При оптимизации некоторых вещей иногда думаешь, а зачем это вообще все нужно? Как оказывается, данный вопрос можно применить к JavaScript скриптам.
А почему скрипты должны загружаться и анализироваться в начале загрузки страницы? Сколько процентов кода выполняется на этапе загрузки?!
Скорей всего ответ будет приблизительно следующий - незначительная часть кода будет выполнятся при первой загрузке страницы и, думаю, бывают моменты, когда большая часть JavaScript кода вообще не используется.
Динамическая загрузка JavaScript кода
Вы можете предусмотреть такие ситуации и воспользоваться возможностью динамической загрузкой JavaScript кода.
Динамическое изменение свойства src
<script src='' id="s1" type="text/javascript"></script>
<script type="text/javascript">
var s1 = document.getElementById("s1");
s1.src= "myJavaScript.js";
</script>
Динамическое создание script тега
<script type="text/javascript">
var script = document.createElement('script');
script.src = "myJavaScript.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
Уловка от John Resig
Если совместить динамическую загрузку JavaScript кода с интересной уловкой описанной John Resig в статье Degrading Script Tags, то выполнения скриптов после загрузки страницы можно реализовать следующим образом.
window.onload = function() {
var script = document.createElement('script');
script.src = "myJavaScript.js";
script.text = "my.init()"; // выполняем свои скрипты
document.getElementsByTagName('head')[0].appendChild(script);
}
Скрипт "my.init()" будет выполнен, когда будет успешно загружен JavaScript код. При этом, если при загрузки возникнет ошибка, скрипт не будет выполнен. Работает в Firefox, Opera, Safari, и всеми "уважаемом" IE.
Отложенный анализ/разбор JavaScript кода браузером
Как показывает практика, при нормальном скорости интернета файлы с JavaScript кодом закачиваются быстро(кеширования тоже спасает ситуацию), но при больших скриптах много уходит времени на анализ и разбор кода браузером. Для уменьшения времени отклика можно воспользоваться отложенным анализом/разбором, в качестве метода загрузки воспользуемся классом XmlHttpRequest.
<script type="text/javascript">
function loadFile(url) {
function callback() {
if (req.readyState == 4) { // 4 = Loaded
if (req.status == 200) {
//можно реализовать анализ скриптов по требованию
eval(req.responseText);
} else {
// ошибка в получении ответа
}
}
};
var req = new XMLHttpRequest();
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send("");
}
</script>
Для загрузки и анализа скриптов вам понадобится вызвать метод "loadFile" с указанием url ардеса файла. Ключевым моментом в данной реализации есть функция eval, которая и производит анализ/разбор полученного кода.
На данный момент у меня пока не сложилось цельное решение, которое можно будет применить для любой ситуации. Но вот такие методики работы с загрузкой и анализом JavaScript файл позволят уменьшить время "отклика" при загрузке сайта, что благоприятно повлиять на отношения пользователей.
0 коммент.:
Отправить комментарий