Асинхронная загрузка JavaScript - Форум
Страница 1 из 11
Форум » Форум веб мастеров » html & css » Асинхронная загрузка JavaScript (ускоряем загрузку страниц)
Асинхронная загрузка JavaScript

330
Пользователи
Сообщений 27
+
0
-
Ваши награды 0
330 написал: В ответ пользователя 330 Написано 12 Ноября 2012 в 00:59
Сообщение № 1
Современные веб-страницы сильно перегружены файлами javascript. Это ведет к замедлению загрузки и последующего отображения страницы. В худших условиях (медленное подключение к Интернету, много javascript файлов) посетителю сайта приходится ждать до 30 секунд.

HTML устроен так, что веб-страница загружается, синхронно (строка за строкой) загружая по очереди все включенные в html-код элементы. Таким образом, загрузка тормозится в местах с javascript строками.

Выход есть: поместить явавские строки в конец html документа (следовательно их загрузка будет происходить после прорисовки всей страницы) и только после этого содержимое блоков будет отображено в нужных местах. Это называется асинхронная загрузка JavaScript. Все серьезные проекты сегодня стараются как можно быстрее перейти на новую технологию загрузки. Тем более, что это абсолютно легко.

Есть несколько подходов. Начну по порядку.

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

Загрузка javascript файла осуществляется так:

Code
<script src="http://www.site.ru/script.js" type="text/javascript"></script>


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

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

Code
<script async src="http://www.site.ru/script.js" type="text/javascript"></script>


Code
<script defer src="http://www.site.ru/script.js" type="text/javascript"></script>


Чем же отличаются атрибуты async и defer

В обоих случаях мы получаем асинхронную загрузку скриптов. Разница заключается только в моменте, когда скрипт начинает выполнятся. Скрипт с атрибутом async выполнится при первой же возможности после его полной загрузки, но до загрузки объекта window. В случае использования атрибута defer — скрипт не нарушит порядок своего выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но до события DOMContentLoaded объекта document.

К сожалению, этот механизм на сегодняшний день не работает во всех браузерах (особенно это касается IE). Также не будет работать, если в файле script.js есть строки document.write.
Асинхронная загрузка javascript скриптом от Google

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

Чтобы использовать, просто заменяем
<script src=”…”>
на
<script extsrc=”…”>

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

Получится так:

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


К сожалению, этот способ тоже не подойдет к файлам с document.write
Лучшая рабочая асинхронная загрузка javascript

Универсальный способ для всех браузеров. Работает даже с document.write

В том месте страницы, где нужно реально отобразить наш элемент создаем пустой div блок:

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


В самом конце страницы перед </body> вставляем скрипт для асинхронной загрузки файлов:

Code
<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 и ниже) асинхронная загрузка к сожалению не работает, но таких пользователей уже практически нет. Все остальные браузеры и сервисы успешно пользуются современной ускоренной загрузкой web-страниц.
«Пред. тема След. тема»

BLAzER
Друзья
Сообщений 2335
+
+13383
-
Ваши награды 48
BLAzER написал: В ответ пользователя BLAzER Написано 12 Ноября 2012 в 14:50
Сообщение № 2
Quote (330)
Выход есть: поместить явавские строки в конец html документа (следовательно их загрузка будет происходить после прорисовки всей страницы)

Тут же маленький минус, пока js не загрузится сайт может выглядеть криво.
подпись: BLAzER
Форум » Форум веб мастеров » html & css » Асинхронная загрузка JavaScript (ускоряем загрузку страниц)
Страница 1 из 11
Поиск:
Топ пользователей: