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

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

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

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

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

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

Если мы используем 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
  • Просмотров: 797
  • Комментариев: 0
  • Создан: 31.08.2014 21:32

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

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

Теги

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

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

17.01.2013 10:10
Раскрутка сайта. Продвижение сайта. На простом языке