通过modernizr.load 加载respond.js 异步很慢？答案

【问题标题】：loading respond.js async via modernizr.load is slow?通过modernizr.load 加载respond.js 异步很慢？
【发布时间】：2014-06-17 03:28:31
【问题描述】：

我正在使用 Modernizr.load() 方法来测试浏览器（即）是否理解媒体查询，如果不理解，我会加载 respond.js 库。

但是，我发现通过modernizr.load 方法加载respond.js 会得到一个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 并等待脚本加载...？

【问题讨论】：

标签： jquery asynchronous modernizr respond.js

【解决方案1】：

这取决于您对 FOUC 的关心程度。异步方法的优点是它是非阻塞的。我会切换它，以便首先响应，这样您就不必等待 jQuery 被解析。那可能会解决FOUC。像这样在您的<head> (see here) 中调用Modernizr.load：

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 条件也是很好的解决方案——可以说更好。如果你这样做，那么只要把它放在 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');
    }
}]);

【讨论】：