Незнаю как Вы но я столкнулся с этой проблемой, писать статьи особо не умею, так что по сути, кто в теме тот поймет:
Современные веб-страницы сильно перегружены файлами javascript. Это ведет к замедлению загрузки и последующего отображения страницы. В худших условиях (медленное подключение к Интернету, много javascript файлов) посетителю сайта приходится ждать до 30 секунд.
HTML устроен так, что веб-страница загружается, синхронно (строка за строкой) загружая по очереди все включенные в html-код элементы. Таким образом, загрузка тормозится в местах с javascript строками.
ПС: не все скрипты сработают в футере, некоторые работают только между тегами <head>!
Выход есть: поместить явавские строки в конец html документа (следовательно их загрузка будет происходить после прорисовки всей страницы) и только после этого содержимое блоков будет отображено в нужных местах. Это называется асинхронная загрузка JavaScript. Все серьезные проекты сегодня стараются как можно быстрее перейти на новую технологию загрузки. Тем более, что это абсолютно легко.
Есть несколько подходов. Начну по порядку.
JavaScript: синхронная загрузка скрипта
Загрузка javascript файла осуществляется так:
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
Асинхронная загрузка скрипта HTML5
Стандарт HTML5 поддерживает возможность асинхронной загрузки скриптов, что может значительно ускорить общее время получения страницы. Просто добавьте async или defer.
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
Чем же отличаются атрибуты async и defer
В обоих случаях мы получаем асинхронную загрузку скриптов. Разница заключается только в моменте, когда скрипт начинает выполнятся. Скрипт с атрибутом async выполнится при первой же возможности после его полной загрузки, но до загрузки объекта window. В случае использования атрибута defer – скрипт не нарушит порядок своего выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но до события DOMContentLoaded объекта document.
К сожалению, этот механизм на сегодняшний день не работает во всех браузерах (особенно это касается IE). Также не будет работать, если в файле script.js есть строки document.write.
Асинхронная загрузка javascript скриптом от Google
Как известно всем мастерам, Google уделяет особое внимание скорости загрузки сайтов, и понижает медленные в поисковой выдаче. Что бы помочь, Гугл разработал специальный скрипт, при помощи которого можно сделать асинхронную загрузку javascript.
Чтобы использовать, просто заменяем
<script src=”…”>
на
<script extsrc=”…”>
И подключаем файл скрипта extsrc.js
Получится так:
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
К сожалению, этот способ тоже не подойдет к файлам с document.write
Лучшая рабочая асинхронная загрузка javascript
Универсальный способ для всех браузеров. Работает даже с document.write
В том месте страницы, где нужно реально отобразить наш элемент создаем пустой div блок:
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
В самом конце страницы перед </body> вставляем скрипт для асинхронной загрузки файлов:
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
Как то так! Спс за внимание1
