我希望从登陆页面预加载JS文件和CSS文件,以便在着陆转换后优化主站点负载.我正在寻找有关这方面的信息,最后尝试使用以下方法完成此操作:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'jsUrl');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'cssUrl');
xhr.send('');
使用Firefox这很棒,但使用Chrome时,似乎XHR调用缓存在与css和js文件不同的缓存中.我们不使用JQuery,登陆页面必须是轻量级的(负载更少,转换率更高).
您是否有其他方法可以解决原始问题？(预加载组件)
您知道如何让Chrome缓存这些请求吗？
xmlhttprequest cross-browser web-optimization preload browser-cache
到目前为止,我知道我可以使用AJAX分离静态和动态内容,因此如果博客帖子有评论更新,那么文章不必重新加载(它是304),只有评论.现在,我正在考虑保留所获取的动态内容,以便下次只需要请求新的注释.有没有办法在不依赖Flash/Gears/HTML5Storage或其他插件的情况下做到这一点？
编辑:让我们说文章的评论部分如下所示:
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>43 comments:</h4>
<dl id='comments-block'></dl>
<p class='comment-footer'>
<a href='http://example.org/postcomment' onclick=''>Post a Comment</a>
</p>
</div>
在其上,用于获取注释的AJAX调用将它们附加到<dl id='comments-block'>包含以下代码段的片段:
<div class='comments-singleblock'>
<dt class='comment-author' id='comment-5378479254070788764'>
<a name='comment-5378479254070788764'></a>
Anonymous coward
<span class='comment-timestamp'>
<a href='#comment-5378479254070788764' title='comment permalink'>
5 February 2012 16:52
</a>
</span>
</a>
</dt>
<dd class='comment-body'>
<p>
Your lorum is my ipsum, the dolor is sit amet us.
</p>
</dd>
<dd class='comment-footer'>
Which eternal lies, that is not death.
</dd>
</div>
可以缓存.随后的AJAX调用应仅返回新内容,并附加到上面.现在加载文章时,逻辑就是这样
所以问题是如何修改缓存的内容以包括时间戳A和B之间的内容.
我还没有完全掌握的一件事是,如果缓存清单在列出的所有文件处于联机状态时也充当预取.
例如,假设我正在访问:
/page1.html
我网站上的每个页面都有相同的声明:
<html manifest="/cache.manifest">
在缓存清单文件中,我有:
CACHE MANIFEST
/page2.html
/page3.html
/page4.html
所以会发生的事情是我首先访问/page1.html,当我在线时,我的浏览器也会知道如何缓存2-4页.当我断开连接并访问第2-4页时,所有内容都会加载,因为它已经被缓存了.
问题:如果我访问/page1.html,并且我仍然在线连接,并访问/page2.html,我的浏览器是否仍会请求/page2.html,或者它是否会向服务器发出另一个请求并使用缓存的内容从/cache.manifest文件？基本上就像firefox使用的预取链接一样？
是的,我在这里和那里搜索了很多,这是我发现的最接近我认为可以实际工作的.但事实并非如此.
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|x-icon|js|css|jpg|jpeg|png|gif|swf|pdf)$">
Header unset Cookie
Header unset Set-Cookie
Header unset ETag
FileETag None
</FilesMatch>
</IfModule>
非常清楚它应该是我尝试cookie释放子域提供的静态文件,并删除这些静态文件上的ETag标头.ETag的工作正常,但我无法取消设置cookie.
仅供参考,Wordpress安装在example.com上(不是www.example.com; www.example.com重定向到example.com),这不是无cookie的.i.example.com提供静态文件.我想让i.example.com无cookie.当非www tld不是无cookie时,是否可以使子域无cookie？(我也看到这就是许多人建议使用www.tld的原因).
我有一个应用程序，它使用 JavaScript 动态加载图像并将它们绘制到画布上。图像可以更改，但我也想利用缓存，因此我使用最后修改的 http 标头并在图像未修改时发送 304 响应。一切都很好，而且似乎正在起作用......
但是有一件奇怪的事情正在发生（到目前为止仅在 OSX 上的 Chrome 和 Safari 中进行了测试），其中浏览器偶尔会忽略发送图像请求！在脚本中，我创建了一个new Image()，然后onload函数会触发，但是当我使用网络检查器时，从未发出请求。我也可以在服务器端确认没有收到请求。
带有空缓存响应的原始请求具有以下标头：
Connection:keep-alive
Content-Length:25937
Content-Type:image/png
ETag:Thu, 10 May 2012 20:48:13 GMT
Last-Modified:Thu, 10 May 2012 20:48:13 GMT
浏览器不应该每次都为这个图像发出一个新请求，因为它有最后修改的标头吗？当我运行测试时，浏览器似乎每分钟左右只发出一个新请求（无论我尝试加载多少个相同图像的副本）......这是预期的行为吗？是否有一些标题组合会强制浏览器每次修改图像时都进行检查？或者也许一些 JavaScript 魔法可以解决这个问题？
我想在浏览器中缓存一个特定的aspx页面.我有正当理由将其作为ASPX页面,我需要在浏览器上进行缓存.
现在,在服务器缓存上,我可以通过参数改变缓存.在缓存页面响应时,浏览器是否也会考虑参数？
例如,以下两个响应是否会在浏览器中保存为两个不同的缓存项？ http://mypage.com/page.aspx?Param=1 和 http://mypage.com/page.aspx?Param=2
我有一个Web服务器,为特定的URL提供ETag.当浏览器执行对此URL的请求时,它提供http-header"If-None-Match",其中包含来自服务器的该URL的先前响应中包含的ETag值.现在,如果我编程添加请求头"如果-Modified-Since的"并将其设置为一个或者是将来或过去的日期(无所谓),浏览器停止发送"如果 - 无 - 匹配" -header.我在FireFox和Chrome中都看到过这种情况(未经任何其他浏览器测试).我不能从HTTP/1.1规范中得出结论,应该是这种情况.为什么会这样？
这是一个简单的代码示例,将重现该场景.该代码假定服务器使用Etag标头进行响应.
var request = new XMLHttpRequest();
request.open("GET", someUrl, true);
request.onreadystatechange = function(){};
// This statement makes the browser stop sending the "If-None-Match" header
request.setRequestHeader("If-Modified-Since", "Sat, 29 Oct 1994 19:43:31 GMT");
request.send(null);
据我了解,这是浏览器缓存的工作原理.假设一个远期未来的标题被设置为让我们说一年,并且foo.js被设置为缓存.以下是一些场景:
首次访问该页面,服务器返回200并且foo.js缓存一年.
下次访问时,浏览器会检查缓存,但必须检查服务器是否已修改foo.js.如果没有,服务器返回304 - 未修改.
用户已在页面上(并且foo.js在缓存中)单击链接以转到另一个页面,浏览器查看foo.js的缓存版本并在不对服务器进行往返的情况下提供服务并返回200(缓存) ).
用户已经在页面上(并且foo.js在缓存中)并且出于某种原因命中F5/Reload,浏览器检查缓存但是必须往返服务器并检查foo.js是否已被修改.如果没有,服务器返回304.
正如您所看到的,每当刷新页面时,它总是必须访问服务器以检查文件是否已被修改.我知道这不是很多,服务器只会返回标题信息,但在某些情况下往返时间非常重要.
问题是,有没有办法可以避免这种情况,因为我已经设置了文件的到期时间.我只是希望它总是从缓存中获取它,直到到期期满或用其他东西替换文件(通过版本控制).
MDN说location.reload()一个可选参数.
forcedReload
是一个布尔标志,如果为true,则会导致始终从服务器重新加载页面.如果为false或未指定,则浏览器可以从其缓存重新加载页面.
但是这个论点在IE和Chrome中不起作用.
下表显示了发送到服务器的标头(no-cache均值Pragma: no-cache):
+---------------+----------+-------------------+-------------------+
| | IE11 | Firefox47 | Chrome54 |
+---------------+----------+-------------------+-------------------+
| reload(false) | no-cache | If-Modified-Since | If-Modified-Since |
+---------------+----------+-------------------+-------------------+
| reload(true) | no-cache | no-cache | If-Modified-Since |
+---------------+----------+-------------------+-------------------+
IE和Chrome会发送不同的缓存标头,不仅会忽略forcedReload参数.
此外,这种方法的W3C Spec似乎没有提到缓存.
所以我的问题是......
location.reload()关于缓存,我应该期待什么？我正在创建一个网站,但我需要刷新几次才能看到我在网站上所做的更改.我可以使用任何选项来禁用WordPress中的缓存吗？
browser-cache ×10
caching ×4
http-headers ×3
browser ×2
javascript ×2
ajax ×1
asp.net ×1
header ×1
html ×1
html5 ×1
http ×1
http-caching ×1
iis ×1
image ×1
prefetch ×1
preload ×1
wordpress ×1