可以在标题中指定异步文件吗？

Question

所以我的时间表总是这样

http://see.kirkstrobeck.com/TjQU/Screen%20Shot%202014-02-04%20at%206.40.14%20PM.png

index.html加载然后请求其他文件。 我想有没有办法让响应请求的标题说明应该删除哪些文件？ 所以它看起来像这样..

http://see.kirkstrobeck.com/TjKl/Screen%20Shot%202014-02-04%20at%206.40.14%20PM.png

也许像..

<?

header('fileGetRequest: /js/common.js');
header('fileGetRequest: /css/common.css');

?>

Answer 1

我今天不知道这样做的方法，但是SPDY扩展了带有rel=subresource的Link头，正是这个用途。

从服务器推送和服务器提示 ：

服务器提示是一种机制，服务器可以在客户端发现之前向客户端通知所需的资源。 服务器不发送资源的全部内容，而只发送URL作为响应的早期部分。 然后，客户端可以验证其缓存（甚至可能消除了对GET-if-modified-since的需要），并且仅在需要时才正式请求资源。

HTTP/1.1 200 OK
Cache-Control: private, max-age=0
Content-Encoding: gzip
Content-Length: 13847
Content-Type: text/html; charset=UTF-8
Date: Thu, 13 Jan 2011 17:47:12 GMT
Expires: -1
Server: FastServer1.0
Link: <logic.js>; rel=subresource

<html>
<body>
  [ lots of content here ]
  <script src="logic.js" type="text/javascript></script>
</body>

示例来源： SPDY - LINK rel = subresource

如果您知道客户端没有缓存中的资源，您可能还需要考虑服务器推送 ，这节省了往返。

服务器推送是服务器将资源直接推送到客户端而客户端不需要资源的位置。 服务器在此假设推动资源是可取的。 推送可缓存资源可能存在风险，因为浏览器可能已经拥有资源并且推送可能是多余的。

---

2015年5月编辑

HTTP / 2 （基于SPDY，稍微淘汰）也有推送请求 （和Link头）。

Answer 2

如果您只关注javascript文件和现代浏览器，那么HTML5中的script标记就具有async属性。 Firefox 3.6 +，IE 10 +，Chrome 2 +，Safari 5 +，Opera 19 +，IE Mobile 10 +，iOS 5+和Android 3+均支持此功能。

<script async src="script.js"></script>

如果需要支持旧浏览器，和/或您还想异步加载CSS和JS文件，则需要使用其中一个javascript异步加载器。 有许多伟大的，一个可能适合您的特定需求。

LazyLoad是一种适用于CSS和JS的流行选项。 以下是它的一个使用示例：

// Load multiple JS files and execute a callback when they've all finished.
LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () {
  alert('all files have been loaded');
});

// Load a CSS file and pass an argument to the callback function.
LazyLoad.css('foo.css', function (arg) {
  alert(arg);
}, 'foo.css has been loaded');

与其他异步加载器的链接：

• HeadJS
• ToastJS
• RequireJS
• yepnope.js
• LABjs

还有一些可靠的消息来源：

• 基本的Javascript加载器
• 思考异步

Answer 3

1.此功能将跨浏览器工作，以异步方式加载脚本

function loadScript(src, callback)
{
  var s,
      r,
      t;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
    //console.log( this.readyState ); //uncomment this line to see which ready states are called.
    if ( !r && (!this.readyState || this.readyState == 'complete') )
    {
      r = true;
      callback();
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parent.insertBefore(s, t);
}

2.如果你已经在页面上有jQuery，只需使用$ .getScript（url，successCallback）

最简单的解决方案是将所有脚本保持在页面底部，这样他们就不会在执行时阻止加载HTML内容。 它还避免了必须异步加载每个必需脚本的问题。

如果你有一个特别花哨的交互并不总是需要某种类型的更大的脚本，那么避免在需要之前加载特定的脚本（延迟加载）会很有用。

3.来自Google的示例

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

你可能会发现这篇wiki文章很有趣： http ： //ajaxpatterns.org/On-Demand_Javascript

如果有任何帮助，请看看Modernizr 。 它是一个小型轻量级库，您可以异步加载javascript，其功能允许您检查文件是否已加载并在您指定的另一个脚本中执行脚本。

以下是加载jquery的示例：

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.6.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);