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扩展了Link标题rel=subresource以确切使用此标记。

来自Server Push and Server Hints：

服务器提示是一种机制，服务器可以在客户端发现之前向客户端通知所需的资源。服务器不发送资源的全部内容，而只发送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

如果您知道客户端没有缓存中的资源，您可能还需要考虑保存往返的Server Push。

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

2015年5月编辑

HTTP/2（基于SPDY，已逐步淘汰）也有Push Requests（以及Link标题）。

Answer 2

如果您只关注javascript文件和现代浏览器，那么HTML5中的async代码就会有script属性。这支持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');

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

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

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>

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

5.如果有任何帮助，请查看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'
  }
]);

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

3 个答案:

2015年5月编辑