пройти авторизацию: 

Ускоряем загрузку страниц с JavaScript
UPD
65 1 4

Ускоряем загрузку страниц с JavaScript

Javascript представляет определенную проблему для современных ресурсов. Они попросту перегружены ими и это приводит к медленной загрузке и, следовательно, некачественному отображению.

Ускоряем загрузку страниц с JavaScript

Если соединение с Сетью медленное, что характерно для мобильной связи и удаленных пользователей, то загрузке существенно замедляется, вызывая оправданное раздражение.

Когда браузер считывает html-код, он отображает результат последовательно. Т.е. каждая строка идет друг за другом, но в месте, где установлен javascript происходит остановка – с этой проблемой приходилось, безусловно, сталкивались те, кто использует этот язык для написания ресурсов.

Решение проблемы — асинхронная загрузка. Просто разместите javascript в конце html-кода страницы. Это приведет к тому, что загрузка «явы» будет отдалена по времени, обеспечивая корректное отображение страницы и быстрый страт для пользователей ресурса. На асинхронную загрузку переходят большинство серьезных ресурсов, старающихся сохранить аудиторию и внедрить полезное нововведение.

Разберем несколько способов оптимизации загрузки javascript.

Синхронная загрузка скрипта

Такая загрука javascript-файла осуществляется следующим образом:

<script src="//www.адрес_сайта/script.js" type="text/javascript"></script>

Асинхронная загрузка javascript на HTML5

HTML5 предусмотрительно озаботился проблемой загрузки страницы с «явой». В нем есть возможность установить асинхронную загрузку скрипта, что увеличивает скорость отображения ресурса в разы. Для этого в html-код следует добавить параметры async или defer, как это указано ниже:

<script async src="//www.адрес_сайта/script.js" type="text/javascript"></script>
<script defer src="//www.адрес_сайта/script.js" type="text/javascript"></script>

В чем разница между атрибутами async и defer?

Оба параметра работают с асинхронной загрузкой javascript. Различие состоит во времени отображения и начале выполнения работы скрипта.

Атрибут async запустит скрипт сразу же, после полной загрузки, но при этом пропустит загрузку window.

При установке в код страницы атрибута defer — javascript встанет в очередь между другими скриптами, не нарушая их порядок выполнения. Он начнет работу только после полной загрузки страницы, но пропустит событие DOMContentLoaded (объект document).

Однако, данные атрибуты не работают в некоторых современных браузерах. Так, например, InternetExplorer не поддерживает атрибуты async и defer. А строки document.write ничем не помогут в файлах script.js

Специальный скрипт от Google для асинхронной загрузки javascript

Google стал лидером в разработке технологий, позволяющих загружать страницы сайтов в рекордно низкие сроки. К тому же, рейтинг поисковой машины Google понижает сайты с низкой производительностью, поэтому обратите внимание на специальный скрипит от веб-мастеров Google, разработанный для асинхронной загрузки javascript.

Чтобы применить данный скрипт, просто заменяем
<script src="...">
на
<script extsrc="...">

Затем подключаем файл скрипта extsrc.js

Получаем следующий код:

<script src="//extsrcjs.googlecode.com/svn/trunk/extsrc.js"></script>
<script extsrc="...."></script>

К сожалению, этот способ тоже не подойдет к файлам с document.write

Оптимальная асинхронная загрузка javascript

Этот способ подойдет для всех браузеров без исключения и работает даже с document.write

В html-коде страницы создаем пустой div-блок:

<div id="script_block" class="script_block"></div>

А в конце html-кода, перед </body>, вставляем скрипт для асинхронной загрузки:

<div id="script_ad" class="script_ad" style="display:none;">
Здесь любой файл или скрипт, который нужно загрузить.</div>
 
<script type="text/javascript">
   // переместить его в реальную позицию отображения
   document.getElementById('script_block').appendChild(document.getElementById('script_ad'));
   // показать
   document.getElementById('script_ad').style.display = 'block';
</script>

Обратите внимание, что в версиях IE ниже 6-ой, включительно, такая загрузка не работает. Но я не уверен, что такие пользователи остались — их меньшинство. Другие браузеры и сервисы используют данную оптимизацию для javascript, что отражается лучшим образом на скорости загрузки ресурсов.

Хостинг и VPS которые никогда не тормозят

Рекомендую самый быстрый VPS на немецких серверах за разумные деньги — FastVPS

Опубликовано:
Обсуждение

Чтобы оставить своё мнение, необходимо

пройти авторизацию: 

Комментарии и Отзывы: 4

Вася

Не знаю уж, кто в инете у кого копирует статьи, но асинхронная загрузка это одно, а отложенная — совсем другое.
В последнем примере именно отложенная!

0

Попробуйте такую конструкцию.

Создаём контейнер для отображения контента в нужном месте:

<div id="script_block1" class="script_block1"></div>

и второй

<div id="script_block2" class="script_block2"></div>

А затем скрипт асинхронной загрузки для двух контейнеров:

<div id="script_ad1" class="script_ad1" style="display:none;">Контент для 1-го контейнера.</div>
 
<div id="script_ad2" class="script_ad2" style="display:none;">Контент для 2-го контейнера.</div>
 
<script type="text/javascript">
document.getElementById('script_block1').appendChild(document.getElementById('script_ad1'));
document.getElementById('script_ad1').style.display = 'block';
document.getElementById('script_block2').appendChild(document.getElementById('script_ad2'));
document.getElementById('script_ad2').style.display = 'block';
</script></div>
0
Александр

Здесь любой файл или скрипт, который нужно загрузить.

Один поставил, работает.
А как еще один поставить?

0
Михаил

Добрый вечер.
Подскажите — если ставить в первый контейнер следующий скрипт или надо убирать «» и оставлять только непосредственно js/jquery.min.js ?

1

Чтобы оставить своё мнение, необходимо

пройти авторизацию: