所有 PHP 页面都包含整套 CSS 和 JS，效率高吗？答案

【问题标题】：All PHP pages include the entire set of CSS and JS, efficient?所有 PHP 页面都包含整套 CSS 和 JS，效率高吗？
【发布时间】：2017-02-13 16:34:48
【问题描述】：

我会总结一下。请在我无法正确表达我的问题的地方纠正我。

我有几个 PHP 页面，它们都具有以下格式：

<?php
include "header.php";
?>
INSERT PAGE SPECIFIC MATERIAL HERE
<?php
include "footer.php" ?>

header.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Main CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <navmenu></navmenu>

页脚.php

    <footer></footer>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- Theme JavaScript -->
    <script src="js/main.js"></script>

</body>
</html>

我是 PHP 新手，不确定这是否是有效构建 PHP 文件的正确方法，因为我担心的是：

现在每个 PHP 页面都加载相同的导航菜单和页脚。 这是有意的，没关系。但是，它也会同时加载所有 CSS 和 JS，即使有很多 CSS 和 JS 行，但在该特定页面中实际上并没有用，但在其他页面中使用。这是否需要关注？如果是，我们应该采取哪些方式来做到这一点？
我是否应该将 main.js、style.css、header.php 和 footer.php 分开，以便每个 PHP 页面加载正文函数所需的最少数量？
处理此案的标准做法是什么？

如果您能提供一些建议，将不胜感激！

【问题讨论】：

您可以创建一个模板系统，如果您愿意，您可以选择是否包含某些 css 或 js 库。
“但是，它也会同时加载所有 CSS 和 JS，即使有很多 CSS 和 JS 行在该特定页面中实际上没有用但在其他页面中使用” - 您是否希望您网站的典型访问者过来并查看一个页面，然后说“啊，这太糟糕了，我要去其他地方” - 或者您是否希望他们访问多个连续页数？那么这就是你的答案。
@CBroe 是的，例如 index.php 通常有很多插件可以让登陆页面变得很酷，但是这些插件在 search.php 和 product.php 等其他页面中没有使用但是由他们阅读，因为它们在 header.php 中。我的问题是，将它们分开是否值得。请参阅下面的 WillParky93 建议。
如果您的用户通常首先到达很酷的着陆页，他们会在第一个页面加载时下载所有 CSS 和 JavaScript；然后应该由他们的浏览器在本地缓存它，因此当他们访问另一个页面时不会重新加载它。你最好等到某件事真正给你带来了一个具体的、可衡量的问题，然后再询问这个问题。

标签： javascript php jquery html css

【解决方案1】：

我是否应该将 main.js、style.css、header.php 和 footer.php 分开，以便每个 PHP 页面加载正文函数所需的最少数量？

您应该为您的整个网站创建一个 css 文件和一个 js 文件。不要将 php 文件用作 css，因为：

如果你有高访问量的网站，最好有一个 css 和 js 文件。因为它是一个直接文件。但是当你通过 php 文件创建 css 或 js 时，php 需要计算。也许您认为这是快速计算，但如果您需要在高访问量网站上获得良好的性能，这很重要。
如果通过php创建css和js文件，有时需要导入多个js或css文件。谁知道？也许它会让你在 head 标签中使用 10 个 js 和 10 个 css！这对 SEO 不利。
不用担心一个 css 或 js 文件的大小。尺寸越小越好，但您仍然可以创建 100KB 的 css 或 js 文件而不会出现 SEO 问题。
您可以为所有媒体创建一个 css 文件。包括打印。无论您使用的是多个文件还是单个文件，如果需要，请始终在同一个文件中使用@media print{}。
一个 css 和 js 文件可以被全局缓存。即使你不需要 css 或 js 文件，全局 css 和 js 文件也已被缓存。

我并不是说一个 css 和 js 文件总是好主意，但它有最大的好处。

【讨论】：

【解决方案2】：

如果您想减少页面上 css/js 的数量，那么您可以执行以下操作...调用您的 CSS：
<link rel='stylesheet' type='text/css' href='css/style.php' />

在 style.php 中它看起来像这样：

 <?php
 switch(basename($_SERVER['PHP_SELF'])){
    case 'index.php':
      echo 'CSS code for index.php gos here';
    break;

    case 'login.php':
      echo 'CSS code for login.php gos here';  
    break;
 }
?>

除非你有很多样式和 javascript 被证实会严重增加加载时间，否则没关系，我不会这样做。

【讨论】：

我会给你一个+1，但我今天碰巧用完了票，明天再做。
大小写切换的建议不错，但似乎太费劲了。如果使用包含所有 css 和 js 的标准页眉和页脚是标准做法，那么我觉得不需要更改任何内容。问题是，普通的 html 页面是否也会加载所有页面所需的所有 JS、CSS？
这完全取决于开发人员。如果每个 HTML 页面都具有该页面所需的最少 CSS/JS，它将减少加载时间。几年前，当我运行我的小网站时（只是 HTML，在我深入研究 php 之前），我将所有的 CSS 放在一个文件中。不过，专业人士很可能会将其拆分。

【解决方案3】：

<?php 
$filename = basename(__FILE__, '.php'); 
?>
<link rel="stylesheet" href="css/<?= $filename ?>.css" />

...

<script src="js/<?= $filename ?>.js"></script>

缺点： 1. 将每个 CSS 和 JS 文件命名为您的 PHP 文件。 2.每个PHP文件都应该有自己的CSS和JS文件

P.S：将所有样式和脚本最小化为一个文件，从而加快页面加载速度。

【讨论】：

【解决方案4】：

是的，这是管理代码的好方法。要包含相同的页眉和页脚，您可以轻松添加/更新/删除菜单和其他功能，而无需编辑每个页面文件。

【讨论】：

所以你会建议将navmenu和footer放到另一个php include中，并使php页面的不同，以免包含不必要的JS和CSS？
不，您只需创建两个页眉和页脚文件，您可以在其中放置我们需要每个页面的 js、css 和菜单。我想建议将 js 文件放在您用于每个页面的页脚中。这将有助于改善您的页面加载时间。