Загружаем сторонние скрипты асинхронно

Только вчера заметил, что виджет вконтакте для групп сильно тормозит при загрузке. И мало того, что он тормозит, так из-за него не грузятся и остальные рабочие скрипты.

А ведь загрузка идет строго по документации. Так зачем, спрашивается, надеяться на сторонние второстепенные сервисы, которые рано или поздно вас подведут.

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

Думаете, что «контакт отвалился только вчера, и то из-за каких-то проблем с датацентром сегодня уже все починили...». Но это же может случиться снова и снова и узнаете вы об этом только от пользователей ваших сервисов. Не проще ли перестраховаться заранее... подумайте об этом...

Делается это очень легко.

Если мы используем JQUERY, в нем есть замечательная функция, которая выполнится после загрузки страницы. Также в нем есть замечательная функция загрузки скриптов$.getScript

Проблема в том, что данная функция вызывает скрипт принудительно, а нам надо научить ее брать данные из кэша, если они есть.

Плюс, очень желательно после загрузки страницы дать немного времени, чтобы основные скрипты также успели пуститься в работу.

В общем в итоговом виде — функция загрузки будет выглядеть следующим образом

$(function(){
    setTimeout(function(){
        $.ajax({
            url: url,
            dataType: "script",
            cache: true,
            success: function(){
                function_after_script_loaded();
            }
        });
    },1000)
})

Рядом же мы можем аналогично запихнуть все оставшиеся второстепенные сервисы, которые могут вызвать задержку. Виджеты от фейсбука, кнопки лайков, аналитика, метрика, логинза и прочее, что от нас не зависит и может привести к задержкам в загрузке сайта

Мы использовали задержку в 1000 миллисекунд, чтобы успели начать выполняться скрипты, которые запланированы на запуск сразу после загрузки страницы. Чтобы данные не брались из кэша — указываем дополнительно cache: true.

Не забывайте также, скрипт срабатывает после прорисовки DOM структуры страницы и визуально страница грузится быстрее за счет отложенных второстепенных скриптов.

Желаю успехов и надежной работы сайта.

Больше материалов выкладываю на своем Дзен канале

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 947
  • Комментариев: 0
  • Создан: 31.08.2014 21:32

Комментарии (0)

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

ajax axios backup bootstrap core framework eloquent excel home project html ios javascript keep-alive kpi laravel legacy mvp orm php rip scroll solid timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца зимние книги как заполнить анкеты кеширование книги на новый год логирование мцф недвижимость новогодние книги образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сдача сколько стоил ремонт апартаментов спорт стандарты таблица финансы хостинг цена ремонта что почитать зимой юзабилити

Случайный пост

25.01.2016 17:44
Топ 250 фильмов. План на год