0

我脑子里加载了多个 jquery、javascript 和 css 文件。我想要一种方法来简化和加快加载这些文件的过程。我在头部和 /body 标记上方也有不同的 javascript。我研究了 requirejs 和 headjs 但我发现它非常复杂，不知道我是否可以使用这个框架加载我的样式表。

该站点的大小非常大，因为它是一个滚动到部分站点。我的问题是，有没有办法以简单快速的方式加载我的 css、javascript 文件、jquery 代码和 javascript，如果使用 headjs 或 requirejs 可以做到这一点，有人可以给我一个例子，说明如何以简单的方式做到这一点我很困惑，因为他们的 API 对于初学者来说并不容易理解。

谢谢。

4

9 回答 9

3

您可以采取的最简单的第一步是减少 HTTP 请求的数量。通常，每个请求在排队上花费的时间与下载时间一样多，因此您可以通过拥有一个 CSS 文件和一个 JavaScript 文件来减少所有排队时间。

因此，您的第一步是以包含它们的相同顺序组合文件，然后仅包含一个组合的 CSS 文件和一个组合的 JavaScript 文件。

下一步

完成此操作后，您可以跟进：

缩小。这是一个减小文件大小的过程，例如通过删除不必要的空格和压缩变量名。

将脚本包含到之前</body>的 . 这给人一种速度的错觉，因为可见页面将在请求脚本之前加载，这使得页面在用户看来更快。

于 2013-05-24T13:01:19.080 回答
1

轻松合并 CSS ：

制作一个php文件，

<?php
header('Content-type: text/css');
header("Vary: Accept-Encoding");
header("Cache-control: public");
header("Last-Modified: ".gmdate("D, d M Y H:i:s"). " GMT");

$cssstyles = '';

$lines = file("file1.css");
foreach ($lines as $line_num => $line)
  $cssstyles .= trim($line);

$lines = file("file2.css");
foreach ($lines as $line_num => $line)
  $cssstyles .= trim($line);

$lines = file("file3.css");
foreach ($lines as $line_num => $line)
  $cssstyles .= trim($line);

echo preg_replace('/\/\*(.+?)\*\/|[\s]*([:;{},>])[\s]*/','$2',$cssstyles);
?>

用你的每个文件替换 file1、file2、file3。你可以传递一个 GET 参数来为不同的页面获取不同的 CSS。

然后使用以下命令将您的文件称为样式表：

<link rel="stylesheet" href="yourFile.php" />
于 2013-05-24T13:04:40.953 回答
0

您可以尝试压缩/缩小它并将其合并在一起。

Javascript：谷歌闭包编译器（在线）

或缩小：缩小

于 2013-05-24T13:00:43.337 回答
0

您可以使用 js/css 组合技术来减少来自服务器的请求

https://code.google.com/p/minify/

还有其他方法，例如在其他服务器上托管外部文件。（CDN技术）

这也将对您有所帮助： http ://sixrevisions.com/web-development/site-speed-performance/

于 2013-05-24T13:04:40.817 回答
0

您可以做一些事情以获得更好的性能，例如：

  • 将您的小 CSS 或 JS 文件合并到一个文件中以减少请求数量。
  • 在您的服务器上使用GZip以减少资源的大小。（例如 jQuery 缩小版约为 90kb，但在您的网络服务器上启用 GZip 后它将变为 30k）
    为您的服务器设置 GZip 非常简单。
  • 使用可以缩小代码的工具。缩小代码后，您可以节省很多。有很多我经常使用的像这样的在线工具。
  • 有一段时间我将我的 javascript 代码放在页面末尾，就在结束body标记之前。例如，您可能无法在 HTML 中间运行 jQuery 代码，但最后加载 JS 的优势远不止这一劣势。
于 2013-05-24T13:01:45.870 回答
0

看看这些文章。你需要学习优化技术来提高代码加载的效率。

加载 JavaScript 更快

更快的页面加载捆绑您的 css 和 javascript

加快你的 javascript 加载时间

于 2013-05-24T13:03:28.900 回答
0

您可以做的最好的事情之一就是缩小您发布的文件。有各种免费服务可以做到这一点，例如http://gruntjs.com或http://jsmini.com

更进一步，如果您的网站使用 PHP，那么您可以设置一些文件以有条件地加载。

在我的个人网站上...我使用 PHP 将变量设置为$title等于简化页面名称的任何内容，例如“home”或“gallery”。

然后，我将两个文件包含到我的<head>一个用于条件 CSS 文件，一个用于条件 JS 文件...

然后，例如，我有 3 个 javascript 文件和两个 css 文件，它们仅用于画廊页面。所以我在上面提到的两个条件文件中有一个简单的 IF 语句，如下所示：

if ($title == "Gallery") {
echo "<script src=\"afile.js\"></script>";
}

这样，除非实际需要，否则这些特定文件永远不会被加载。当然，网站范围内需要某些 CSS 表格和 javascript 文件，在这种情况下，我<head>会像往常一样将它们输入到其中，并且我总是将我的“条件文件”加载到它们各自对应的文件下方。

于 2013-05-24T13:06:48.320 回答
0

我相信您正在寻找的东西称为捆绑和缩小。您可以使用它将所有 javascript 文件连接到一个大文件中，并最小化其大小。同样的事情也适用于 css 文件。

根据您用于开发的平台，有许多不同的解决方案。

例如： http ://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

于 2013-05-24T13:09:21.487 回答
0

您可以通过以下两件事来减小网页的大小 1) 压缩文件：通常 js/Css 文件编写有大量空白以提高可读性，因此它们占用更多带宽。压缩后，Javascript 文件的大小通常可以减少 30-50%，Css 文件的大小可以减少 40-70%。2）合并多个文件：每次从服务器向客户端发送一个文件时，它都会占用请求响应头和其他一些信息。这可以通过合并文件来减少。如果是 javascript 和 css 文件的相关文件，您可以将多个 js/css 文件合并到一个文件中。

您可以使用在线工具来压缩以及将多个 css/js 文件合并为一个，例如

jsCompressor和CSS 压缩器

于 2014-09-28T16:13:52.307 回答