2

将所有 JS 和所有 CSS 压缩成单个缩小文件并从 HTML 页面链接到它们是一种合理的方法，这似乎是许多网站对其进行优化的地方。

但是，我很少看到只有一个资源负载的网站。

我的问题是，拥有三个这样的资源是否与获取它们的内容并将其放入标签中以生成一个要加载的资源完全相同。对于 JS，这很简单，只需使用<script>标签（取出src缩小的 JS 并将其放入标签中），而对于 CSS，这只是简单地替换<link rel="stylesheet" ... />为<style type="text/css" /> ...minified CSS... </style>.

这是将页面压缩到可能的最小包（希望是单个 TCP 事务）中的一种常见做法吗？

如果不出意外，它极大地简化了网络服务器软件的工作。

4

3 回答 3

2

出于以下两个原因，我会将它们分开：

  1. 浏览器可以使用多个套接字下载内容

  2. 脚本/样式表可以缓存并在其他 html 页面中重复使用，因此只会下载一次

于 2013-08-10T19:01:08.060 回答
2

我确信这不会对移动设备等设备的速度优化造成伤害，但是在宽带连接上它不会有太大的不同（显然速度是一个很好的优化，我并不是说不是）但是从我所拥有的阅读尽可能从多个服务器提供所有内容/图像以及代码优化不是更好吗？Mumford 内容将节省总页面大小。但是我认为代码是在页面上还是通过 src 文件并不重要，只要您没有多个 CSS 页面和多个 js 文档并对其进行优化，即缩小内容并去除重复的标签，即

.header{ 颜色：#000000; } .test{ 颜色：#000000; } 进入 .header, .test{ 颜色:#000000; }

并缩小 CSS，不确定这是否是您正在寻找的内容，但我敢肯定，如果您优化太多，您将花费更多时间进行优化，因为您可能只增加 0.001 秒的速度。

于 2013-08-10T19:06:37.307 回答
1

拥有链接资源并将它们嵌入到 html 页面中是相同的。但是不方便在多个页面上使用。然后你必须重复自己。

如果将所有脚本和 css 放在一起，请记住这一点：

在大多数情况下，大部分 JavaScript 代码处理用户发起的事件，例如鼠标单击和拖动。所有这些用户触发的事件都发生在页面加载并触发 onload 事件之后。为了延迟加载这些 JavaScript，在包含文档的头部插入一个 JavaScript 事件侦听器，强制在 onload 事件之后加载外部文件。（谷歌开发者提示）

这是一个更清楚的代码示例，延迟脚本将在基本页面元素形成后加载：

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
于 2013-08-10T19:02:19.013 回答