Загрузка response.js асинхронно через modernizr.load идет медленно?

Я использую метод Modernizr.load(), чтобы проверить, понимает ли браузер (то есть) медиазапросы или нет, и если нет, я загружаю библиотеку response.js.

однако, я вижу, что загрузка response.js через метод modernizr.load дает мне FOUC, а метод встроенного скрипта - нет.

метод modernizr.load:

<script>
  Modernizr.load([{
    load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function () {
      if (!window.jQuery) {
        yepnope('js/libs/jquery.js?v=1.7.2');
      }
    }
  },
  {
    test: Modernizr.mq('only all'),
    nope: 'js/plugins/respond.js?v=v1.1'
  }])
</script>

встроенный метод:

<!--[if lte IE 8]>
  <script src="js/plugins/respond.js?v=v1.1"></script>
<![endif]-->

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

1 ответ

Решение

Это зависит от того, насколько вы заботитесь о FOUC. Преимущество асинхронного метода в том, что он неблокируемый. Я бы переключил его так, чтобы Respond был первым, чтобы вам не приходилось ждать, пока jQuery будет проанализирован. Это, вероятно, решило бы FOUC. Вызов Modernizr.load в вашем <head> ( см. здесь), как это:

Modernizr.load([{
    test: Modernizr.mq('only all'),
    nope: 'js/plugins/respond.js?v=v1.1'
  },{ 
    load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function () {
        window.jQuery || Modernizr.load('js/libs/jquery.js?v=1.7.2');
    }
}]);

Ваш IE IE условно является отличным решением - возможно, лучше. Если вы сделаете это, просто поместите его перед jQuery, и все будет в порядке:

<!--[if lt IE 9]> 
    <script src="js/plugins/respond.js?v=v1.1"></script>
<![endif]-->

Modernizr.load([{
    load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function () {
        window.jQuery || Modernizr.load('js/libs/jquery.js?v=1.7.2');
    }
}]);
Другие вопросы по тегам