具有多个css和javascript文件_Javascript_Jquery_Html_Css - Fatal编程技术网

具有多个css和javascript文件

javascript jquery html css

具有多个css和javascript文件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我脑子里有多个jquery、javascript和css文件。我想要一种方法来简化和加快加载这些文件的过程。我在head和/body标记上方也有不同的Javascript。我研究过requirejs和headjs，但我发现它非常复杂，不知道是否可以用这个框架加载样式表该网站的大小是相当大的，因为它是一个滚动节网站。我的问题是，有没有一种方法可以以简单快速的方式加载我的css、javascript文件、jquery代码和javascript，如果这在headjs或requirejs中是可行的，有

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

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

谢谢

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

Javascript:

或者缩小：

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

Javascript:

或者缩小：

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

因此，您的第一步是按照包含它们的相同顺序组合这些文件，然后只包含一个组合的CSS文件和一个组合的JavaScript文件

下一步

完成此操作后，您可以使用以下方法进行后续操作：

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

将脚本移动到

之前。这给人一种速度错觉，因为在请求脚本之前，可视页面将加载，这使得页面对用户显示得更快。

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

因此，您的第一步是按照包含它们的相同顺序组合这些文件，然后只包含一个组合的CSS文件和一个组合的JavaScript文件

下一步

完成此操作后，您可以使用以下方法进行后续操作：

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

将脚本移动到

之前。这给人一种速度错觉，因为在请求脚本之前，可视页面将加载，这使得页面对用户显示得更快。

为了获得更好的性能，您可以采取以下措施：

合并将小型CSS或JS文件合并为一个文件，以减少请求数量
在服务器上使用GZip，以减少资源的大小。（例如，jQuery缩小版大约为90kb，但在Web服务器上启用GZip后，它将变成30k）
为服务器设置GZip非常简单
使用可缩小代码的工具。缩小代码后可以节省很多钱。有很多我经常使用的在线工具
在关闭
```
body
```
标记之前，我将javascript代码放在了页面的末尾。例如，您可能无法在HTML的中间运行jQuery代码，但在最后加载JS的好处远不止这一个缺点

合并将小型CSS或JS文件合并为一个文件，以减少请求数量
在服务器上使用GZip，以减少资源的大小。（例如，jQuery缩小版大约为90kb，但在Web服务器上启用GZip后，它将变成30k）
为服务器设置GZip非常简单
使用可缩小代码的工具。缩小代码后可以节省很多钱。有很多我经常使用的在线工具
在关闭
```
body
```
标记之前，我将javascript代码放在了页面的末尾。例如，您可能无法在HTML的中间运行jQuery代码，但在最后加载JS的好处远不止这一个缺点

<?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);
?>

<link rel="stylesheet" href="yourFile.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);
?>

<link rel="stylesheet" href="yourFile.php" />

[jquery]相关文章推荐

随机文章推荐