在正文之前发送头部以尽快加载 CSS 和 JS答案

【问题标题】：Send head before body to load CSS and JS asap在正文之前发送头部以尽快加载 CSS 和 JS
【发布时间】：2012-03-05 01:45:40
【问题描述】：

我想知道是否有人找到了一种在渲染中间发送 head 标签的方法，以便在页面渲染完成之前加载 CSS 和 Javascript？我们的页面需要大约 523 毫秒来呈现，并且在收到页面之前不会加载资源。我已经做了很多 PHP 并且可以在脚本结束之前刷新缓冲区。我试图在 Masterpage page_load 的末尾添加一个 Response.flush()，但之后页面布局被严重破坏。我看到很多人使用更新面板之后使用 AJAX 发送内容，但我不太清楚它会对 SEO 产生什么影响。

如果我没有找到解决方案，我想我必须走反向代理路线，并找到一种方法在页面内容更改时使代理缓存失效。

【问题讨论】：

标签： javascript asp.net css optimization prerender

【解决方案1】：

不要将 Flush 放在代码后面，而是放在 html 页面上：

</head>
<%Response.Flush();%>
<body >

这可能会在页面上产生类似闪烁的效果，因此您可以尝试将刷新移动到页面更低的位置。

也可以在 Yahoo 提示页面上查看 Flush the Buffer Early
http://developer.yahoo.com/performance/rules.html

静态缓存

此外，您可以在 css 和 javascript 等静态内容上添加客户端缓存。在此页面中包含所有 iis 版本的所有方法。

http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache

跟进

在我看到您的页面后，我建议您将所有 css 和 javascript 分别放在一个文件中。并且还使用 minified 来最小化它们。

我使用这个缩小后的http://www.asp.net/ajaxlibrary/Download.ashx，结果非常好，并且实时缩小了。

【讨论】：

这绝对是我想要做的，尽早刷新缓冲区。但是，即使我这样做了，在页面完全加载之前不会加载 CSS 样式表，至少这是 Firebug 时间线向我显示的内容。
@werfu 你有网页在线看吗？你也可以用 chrome 测试一下吗？
如果缓冲有点帮助，我尝试禁用缓冲，但我不得不放弃刷新页面，因为某些页面需要更改会话。网址是[sherweb.com]。我目前正在改进 SEO 和加载性能。我应该能够在今天下午或明天早上直播这个迭代。我能够在缓存到原来的 10% 的同时减小页面大小，这真是太疯狂了。
@werfu 我正在查看您的页面，但没有发现任何问题，我错过了什么？
我正在尝试尽可能多地缩短加载时间。浏览器直到请求开始后 600 毫秒才开始加载 CSS，而如果 head 标签能更快接收，它可以在此之前加载。我知道这正在变得极端，但如果可能的话，这是我将要做的最终优化。下一步是减少 Javascript 开销。顺便说一句，优化后的版本应该会在明天早上上线。

【解决方案2】：

考虑使用内容交付网络 (CDN) 来托管您的图像、CSS 和 JS 文件。浏览器的每个域有 8 个或 4 个连接限制 - 所以一旦你用完这些，浏览器就必须等待资源被释放。

通过在 CDN 上托管一些文件，您可以获得另一组可同时使用的连接，从而加快所有内容的加载速度。

如果您还没有启用 GZIP，还可以考虑在您的服务器上启用 GZIP。这会即时压缩文件，从而减少传输量。

【讨论】：

【解决方案3】：

您可以使用 jQuery 在加载后立即执行您的 js。

$.fn.ready(function(){
    //Your code here
})

或者你可以只使用独立的准备功能 -> $(document).ready equivalent without jQuery

【讨论】：

【解决方案4】：

加载文档后，您可以进行淡入或显示。只需设置body display:none;

【讨论】：