通过在发送 html 结尾之前加载 js/css 来提高站点性能答案

【问题标题】：Improve site performance by loading js/css before end of html is send通过在发送 html 结尾之前加载 js/css 来提高站点性能
【发布时间】：2012-09-12 07:52:41
【问题描述】：

我正在为我的网站 (XML/XSLT) 使用模板系统。该系统将在完成所有工作后将生成的 HTML 一次输出。这会导致浏览器仅在生成所有 HTML 后才开始下载所有内容的行为。在某些页面上，这是在 1 秒或更长时间之后。

现在，我想尝试加快速度，让浏览器在所有工作完成之前下载 css/js 文件（可能还有图片精灵）。

我显然不能直接发送整个头部，因为每个页面的标题、关键字和描述都不同，并且只发送头部的一部分似乎不起作用。

有没有人建议如何做到这一点？

我正在使用 apache 和 php。

【问题讨论】：

我认为资源是在 HTML 中传递时加载的 - 它会在内容之前加载头部，因此链接到那里的 JS/CSS 应该在那时加载。跨度>

标签： php html performance apache template-engine

【解决方案1】：

您几乎无法控制浏览器如何下载呈现页面所需的内容。这取决于浏览器的实现。

chrome 中有一个不错的选项，可以显示下载内容的时间线。以下是如何构建 stackoverflow 的示例：

【讨论】：

我知道我无法控制浏览器，但我认为主要浏览器都以相同的方式实现了这一点？所以基本问题是（主要）浏览器何时开始下载其他内容。是在收到整个 HTML 之后还是仅在收到特定部分之后？从您的时间线可以清楚地看出，jquery 是在 html 之后下载的。但是有什么办法可以向前推进吗？
不使用 AJAX 就没有办法做你想做的事。您将加载一个登录页面，该页面带有一个旋转的图像，并立即执行从您的模板引擎获取数据的 JS 片段。在数据到达之前，将显示微调器。没有主流浏览器能以某种神奇的方式实现这一点，它们的工作方式都非常简单——获取索引、读取 html、从链接中顺序加载数据。