загружать скрипты асинхронно и иметь запасной вариант - PullRequest
Новая
       32

загружать скрипты асинхронно и иметь запасной вариант

1 голос
/ 30 января 2012

Моя цель здесь - загружать сценарии асинхронно, когда браузер поддерживает отложенную или асинхронную работу.
Если браузер не поддерживает ни то, ни другое, мне наплевать на асинхронную загрузку (не плохо).
Я хочу убедиться, чтолюбой сценарий выполняется только тогда, когда выполнены необходимые условия, например, загружен jQuery.Я хочу загружать свои сценарии во время загрузки других сценариев (только если браузер поддерживает отсрочку или асинхронность).

Я хочу сделать это, используя только API браузеров .Я не хочу, чтобы браузер загружал какие-либо надежные (или нет) скрипты, которые делают это для меня, независимо от того, насколько они маленькие.

Это должно работать с IE8 +, Gecko v.1.9.1 + (например, Firefox3.5. * Или firefox 9.0+), webkit (например, chrome), presto (например, Opera).Для тех, что я не упомянул версию, я имею в виду последнюю стабильную версию.

Если возможно, я не хочу никаких нелегких сценариев.Мне просто нужно что-то простое, чтобы сделать эту работу.Это означает:
Если возможно, я не хочу, чтобы такие вещи, как вызовы AJAX или причудливые объекты с некоторыми методами, делали обходные пути, как я видел на других страницах.Они предназначены для принудительной асинхронной загрузки скрипта в браузерах, которые не поддерживают асинхронную или отложенную

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

1 Ответ

2 голосов
/ 20 апреля 2012

Во-первых, использование библиотеки, такой как jQuery, делает этот процесс бесконечно более простым и надежным во всех браузерах. Это может увеличить размер загрузки ваших страниц (на очень небольшую величину), но скорость, получаемая благодаря эффективной загрузке / выполнению скрипта, почти всегда перевешивает это.

Относительно атрибутов асинхронных и отложенных скриптов:

  1. async="async": для тега скрипта IE8 / 9 вообще не поддерживается, скрипт выполняется немедленно (что соответствует вашему вопросу).

  2. defer="defer": тег скрипта начнет загружаться после того, как все в том порядке, в каком скрипты отсрочки появляются в HTML, до DOM Ready. НО, в Firefox, скрипты часто выполняются ПОСЛЕ готовности Это различие делает defer ненадежным в качестве средства обеспечения загрузки скриптов перед выполнением функций после готовности dom.

Общее руководство, когда не используется jQuery:

  1. Если скрипт имеет нисходящих зависимостей , вы должны поместить его в качестве стандартного тега сценария в конце тега body и чтобы все встроенные теги выполнялись после того, как документ был готов. В противном случае нет гарантии, что скрипт будет выполнен до выполнения зависимостей. Firefox - главная проблема здесь, сценарий «отсрочки» может не завершиться даже после готовности DOM.

  2. Если в сценарии нет зависимостей ниже по потоку, поместите его в конец тега body и используйте атрибут async = "async" в теге script. IE будет отображать его немедленно, а остальные будут отображать его при получении.

Общие указания при использовании jQuery:

  1. Поместите только jQuery в ваш <head>.

  2. Выполнить все остальные сценарии как $.getScript().

  3. Если сценарию необходимо выполнить как можно скорее (например, аналитику), используйте $.getScript в верхней части тела (это будет неблокирующий запрос, но он будет обработан, как только клиент получит файл ).

  4. Если скрипт может подождать, пока DOM не будет готов, оберните вызов $.getScript() в $(function() {});

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

  $(function() { 
    $.getScript("script.js", function() {
      for(var i = 0; i < myCallbacks.length;i++) {
        myCallbacks[i]();
      }
    });
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...