将所有 JS/CSS 存储在 PHP 中？答案

【问题标题】：Storing all JS/CSS in PHP?将所有 JS/CSS 存储在 PHP 中？
【发布时间】：2011-11-02 00:37:35
【问题描述】：

背景：我正在开发一个通过 AJAX 加载所有内容的单页网络应用程序，因此几天前开始学习 php。我立即想到将所有内容（html、css、javascript）放在 php 文件中，这样只有一个 html 文件和一个 sprite 请求。例如，外部 javascript 可以存储在：

main.js.php（添加 .js 仅用于组织目的）如下所示：

<script>
 ...
</script>

或

<style>
 ...
</style>

问题： 将所有内容都存储在 php 中是个坏主意吗？我有强迫症，喜欢在单独的文件（实际上也是文件夹）中拥有相关功能，所以假设我的项目使用了 100 多个包含。当用户访问（AJAX 站点）时，这些只会被加载一次。我想将 Http 请求的数量减少到只有 1 个 html 和 1 个 sprite（我的应用程序实际上使用自定义字体来处理图像）。我的应用也将在移动设备上运行（使用不同的设计，使用更少的包含但类似的方法）。

研究：以下是我所知道的：

您可以让 Apache 将 js/css 处理为 php，但这不是我感兴趣的东西（危险）-link
这个网站给了我这个想法，虽然我不太明白 - 3 Ways to Compress CSS
使用 APC 之类的缓存（不确定它是如何工作的，但超出了这个问题的范围）会提高 php 速度 (?)

【问题讨论】：

您应该考虑为此创建一个框架。例如，您可以添加一个控制器，它最终会包含一个模板，您可以在其中包含所有内容。
嗯，@jakx 我已经在使用 CodeIgniter 但我认为这不是你在说的？

标签： php

【解决方案1】：

虽然减少 HTTP 请求的数量是一件好事，但它也存在问题。如果将 CSS 和 Javascript 组合到 HTML 文件中，则会增加页面大小。您还使浏览器也无法缓存 CSS 和 Javascript 文件 - 因此这些资产会被一遍又一遍地重新下载，而不仅仅是一次。

另外 - 提供静态文件比通过 PHP 提供服务要快得多。 PHP 很慢。

不过，合并所有图像是个好主意。这是谷歌使用的：http://www.google.co.uk/images/nav_logo91.png

总的来说，我说不要打扰。保持 CSS 和 Javascript 分开，尽可能组合图像 - 是的 - 如果可以的话，绝对使用 APC。但请记住 - 不要过早地优化您的网站。首先获取内容，开发功能等。让您的网站快速运行可能会降低可维护性 - 我从经验中知道这一点。

【讨论】：

+1 用于缓存。如果您正确配置您的服务器，浏览器将不会在每个页面加载时都下载这些 CSS 和 JS 文件，所以这不是我们需要担心的事情。一个好主意是在浏览器缓存中设置 CSS 和 JS 文件永不过期，然后在 URI 的末尾附加一个查询字符串以获取版本号，这样只有在发生变化时才会重新下载。
对缓存的另一个 +1。考虑将 JS 存储在单独的静态文件中，并使用 code.google.com/p/minify 之类的东西，它可以合并和缩小这些文件，并将结果存储在 memcached 或 APC 等介质中。
@elazar 感谢您的链接，我的另一个选择是构建一个为我执行此操作的程序！ Web 开发对我来说是如此陌生...... Muu 你知道吗，我要把最后一点牢记在心。我来自游戏开发背景，这类似于等到最后才添加所有“漂亮”的图形，而不是专注于性能并实际制作东西。

【解决方案2】：

需要考虑的几点：

1.代码-文字比例：

Google 会读取您的内容页面。当 google 对您的页面进行排名时，参数之一是代码与文本内容的比率。如果将 css/js 代码与内容放在一起，则会降低比率。（顺便说一句，使用 div 代替表格的理由之一是表格通常会占用更多的 html 代码并降低比率）。

编辑：这是一个理论而不是真正已知的事实。重要的是 html 代码在语法上是正确的，因此搜索引擎解析器会更容易解析。有人说 google 忽略了前 100kb 之后的内容，所以这也是需要考虑的。

2。 nginX

我安装了 nginx 和 apache 作为反向代理来处理 php。

nginx 是一个 http 服务器，它知道如何处理静态页面。 apache 的设计是每个客户端线程，而 nginx 使用反应器模式，这意味着 - nginx 作为 Web 服务器可以处理比 apache 更多的流量（大约是请求数量的 50 倍）。

缺点是 nginx 不处理 php 请求，因此也安装了 apache - nginx 会将所有 php 调用发送到 apache，因此它将处理它们并将响应返回给 nginx，并且回客户端。

如果在该设置中（这很常见）您将 css/js 文件放在 javascript 下，您将失去 nginx 的优势，它不会自己处理静态 js/css 文件，而是将它们发送到 apache，因为它会将它们作为 php 页面来处理。

3.缓存

缓存文件是提高网站性能同时减少流量的最常用机制之一。如果您将静态内容与动态内容混合使用，您将失去缓存静态文件的优势。

在网络环境中工作时，最好（作为一种习惯）尽可能多地保留静态内容和动态内容。这将在缓存静态数据时为您提供最佳结果。

当然，对于什么应该什么不应该是没有规则的。我有很多动态js内容，但主要功能通常被提取到静态文件中。

4. CSS 精灵

css sprites（正如@Muu 提到的）对性能有很大的改进，绝对应该采用。

另一个更针对您的案例的建议 - 如果您希望正确索引您的内容 - 因为您提到大多数数据将使用 ajax 加载，我建议在没有 ajax 的情况下也将其显示。例如：www.domain.com/ 将有一个指向#contact 的链接，它将显示表单（使用 ajax 加载）。您还应该有 www.domain.com/contact 用于索引。还要确保如果用户输入 www.domain.com/#contact - 他将被重定向到联系人页面（或内容将被动态加载）。

使用浏览器的 Web 开发工具查看正在发出的请求以及可以减少请求数量的位置，同时还要注意文件大小，查看哪些文件被缓存以及哪些文件被服务器请求。在服务器配置和 htaccess 中定义缓存属性。

希望有所帮助；）

PS：另一个提示 - 如果你的键盘溅满了水 - 不要试图用吹风机吹干它 - 它可能会熔化你的按键......

【讨论】：

如果我可以 +1 我会的。你在（1）中所说的很有趣，虽然我不太确定我是否能够避免这种情况（作为一个应用程序），但知道这肯定会在未来帮助我。似乎每个人都同意缓存静态内容，所以我肯定会走那条路。就 nginX 而言，它很有趣，但现在超出了我的理解范围......我没有备用键盘，所以我会稍后保存......
它被称为“文本代码比”。我认为40左右是最佳的。有人说 42 - en.wikipedia.org/wiki/42_(number) ;) 您的 html 代码需要在语法上正确（比比率更重要）。当你有更少的代码和更多的内容时，它通常在语法上会更好，并且搜索引擎解析器更容易解析和索引它
@OMGCarlos 我扩展了一点（1）
啊，明白了！尽管访问者只会使用 .js.php 方法发送一个 http 请求，但他们实际上获得了一个可能包含 99% 代码的巨大页面。相反，我可以只使用标准的
将所有的 js/css 合并到文件文件中，发送并缓存是一个好主意。但是将它与动态内容放在一起，并且每次都重新发送它意味着没有缓存这些内容。我谈到了混合静态和动态数据的缺点。我订购了一个新键盘；）

【解决方案3】：

除非是动态生成的，否则我会将 CSS 和 JS 排除在 PHP 之外。静态页面通常更快，更容易由网络服务器提供服务。将文件分开还允许客户端浏览器缓存一些重复使用的数据（例如 CSS 文件）。

不过，请确保对单个文件使用压缩。 Google "Page Speed" documentation中的一些有用链接。

此外，字节码缓存肯定会提高速度。不必每次都编译。

【讨论】：