具有多个CSS和JavaScript文件
[英]Having multiple css and javascript files
问题描述
我的脑海中有多个jquery，javascript和css文件正在加载。 我想要一种简化和加快加载这些文件的过程的方法。 我的头部和/ body标签上方也有不同的javascript。 我已经研究了requirejs和headjs，但发现它非常复杂，不知道是否可以使用此框架加载样式表。
该站点的大小非常大，因为它是滚动到部分站点的。 我的问题是，有没有一种方法可以以一种简单的快速方式加载我的CSS，JavaScript文件，jquery代码和javascript，如果可以用headjs或requirejs做到这一点，那么有人可以给我一个简单的方法示例，例如我很困惑，因为对于初学者来说，他们的API不容易理解。
谢谢。
9 个解决方案
解决方案1
3 2013-05-24 13:01:19
您可以采取的最简单的第一步是减少HTTP请求的数量。 通常，每个请求花费的时间与下载所花费的时间相同，因此您可以通过拥有一个CSS文件和一个JavaScript文件来减少所有排队时间。
因此，第一步是按照包含文件的顺序来组合文件，然后仅包含一个组合的CSS文件和一个组合的JavaScript文件。
下一步
完成此操作后，可以执行以下操作：
缩小。 此过程可以减小文件大小，例如，删除不必要的空格并压缩变量名。
将脚本包含移动到</body>之前。 这给人一种速度上的错觉，因为可见页面将在请求脚本之前加载，从而使页面对用户的显示速度更快。
解决方案2
1 2013-05-24 13:04:40
轻松合并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" />
解决方案3
0 2013-05-24 13:00:43
解决方案4
0 2013-05-24 13:01:45
您可以采取一些措施来获得更好的性能，例如：
- 将小型CSS或JS文件合并为一个文件，以减少请求数量。
- 在服务器上使用GZip可以减少资源大小。 （例如，jQuery的最小版本约为90kb，但在您的网络服务器上启用GZip后，它将变为30k）
为您的服务器设置GZip非常简单。 - 使用将运行如下的代码的工具。 缩小代码后，您可以节省很多。 有喜欢很多在线工具这一块 ，我始终使用。
- 有一段时间，我在关闭
body标签之前将javascript代码放在页面的末尾。 例如，您可能无法在HTML的中间运行jQuery代码，但最后加载JS的好处不只是这一缺点。
解决方案5
0 2013-05-24 13:03:28
解决方案6
0 已采纳 2013-05-24 13:04:40
您可以使用js / css组合技术来减少来自服务器的请求
https://code.google.com/p/minify/
还有其他方法，例如在其他服务器上托管外部文件。 （CDN技术）
这也将对您有帮助： http : //sixrevisions.com/web-development/site-speed-performance/
解决方案7
0 2013-05-24 13:06:48
您可以做的最好的事情之一就是缩小您发布的文件。 有许多免费服务可以做到这一点，例如http://gruntjs.com或http://jsmini.com
更进一步，如果您的站点使用PHP，则可以设置一些文件以有条件地加载。
在我的个人网站上...我使用PHP设置变量$title等于简化的页面名称，例如“ home”或“ gallery”。
然后，我在<head>包含两个文件，一个用于条件CSS文件，一个用于条件JS文件...
然后，例如，图库页面只需要3个javascript文件和2个CSS文件。 所以我在上面提到的两个条件文件中有一个简单的IF语句，如下所示：
if ($title == "Gallery") {
echo "<script src=\"afile.js\"></script>";
}
这样，除非实际需要，否则这些特定文件永远不会加载。 当然，有些CSS表格和javascript文件在站点范围内是必需的，在这种情况下，就像通常一样，我将它们输入到<head> ，并且我始终将“条件文件”加载到它们各自的对应文件之下。
解决方案8
0 2013-05-24 13:09:21
我相信您要寻找的就是捆绑和缩小。 您可以使用它来将所有javascript文件合并为一个大文件，并最小化其大小。 同样的情况适用于css文件。
根据您用于开发的平台，有很多不同的解决方案。
例如： http : //www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
解决方案9
0 2014-09-28 16:13:52
您可以通过以下两项操作来减小网页的大小：1）压缩文件：js / Css文件通常写有很多空白以提高可读性，因此占用了更多带宽。 压缩后，通常可以将Javascript文件的大小减少30-50％，将Css文件的大小减少40-70％。 2）合并多个文件：每次将文件从服务器发送到客户端时，它都会占用请求响应标头和其他一些信息。 可以通过合并文件来减少。 如果是javascript和CSS文件的相关文件，则可以将多个js / css文件合并为一个文件。
您可以使用在线工具进行压缩，也可以将多个css / js文件合并为一个
在Webpack中，如何通过单个条目main.js（文件中包含多个CSS文件）获得多个输出？
[英]In Webpack, how to get multiple outputs with a single entry main.js(having multiple css files inside files)?
有没有办法使用javascript来更改多个html文件的css？
[英]Is there a way to use javascript to change the css of multiple html files?
带有多种字体，js和css文件的Javascript Angular 4 Adding Assets文件夹
[英]Javascript Angular 4 Adding Assets folder with multiple fonts, js and css files
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用Javascript在多个CSS文件之间切换
多个javascript / css文件：最佳做法？
在Webpack中，如何通过单个条目main.js（文件中包含多个CSS文件）获得多个输出？
css 转换和 javascript 的问题
Tailwind CSS 遇到 JavaScript 问题
有没有办法使用javascript来更改多个html文件的css？
带有多种字体，js和css文件的Javascript Angular 4 Adding Assets文件夹
加载JavaScript / CSS文件
css 和 javascript 文件未链接
创建 CSS 和 JavaScript 文件
相关标签