在PHP中存储所有JS/CSS？

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

main.js.php（增加仅用于组织目的的.js文件），它看起来像：

<script> 
... 
</script>

或

<style> 
... 
</style>

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

研究：这是我知道的：

你可以有阿帕奇处理JS/CSS如PHP，但不是我感兴趣的（危险的） - link
这个网站给了我的想法，虽然我不太明白 - 3 Ways to Compress CSS
缓存的东西，如APC（不知道它是如何工作的，但出了这个问题的范围）将提高PHP速度

（？）

来源

2011-11-02 Oz Ramos

你应该考虑为此创建一个框架。例如，你可以添加一个控制器，最终可以包含一个模板，你可以包含所有的东西。 – jakx

嗯，@ jakx我已经在使用CodeIgniter，但我认为这不是你在说什么？ –

几点考虑：

1码 - 文本比率：

要传达的内容是由谷歌阅读。当谷歌排名你的网页时，其中一个参数是代码与文本内容的比率。如果您将css/js代码与内容放在一起，则会降低比率。（顺便说一句，使用div代替表的一个参数是表通常会占用更多的html代码并降低比率）。

编辑：这是一个理论，而不是真正知道的事实。 html代码在语法上是正确的，这一点很重要，因此搜索引擎解析器将更容易解析。有人说谷歌忽略了第一个100kb之后的内容，所以这也是值得考虑的事情。

2. Nginx的

我已经nginx的用Apache作为反向代理服务器来处理PHP安装。

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

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

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

3.缓存

缓存文件是最常见的机制，以提高网站的性能，同时降低业务之一。如果您将静态内容与动态内容混合在一起，您将失去缓存静态文件的优势。

在网络环境中工作时，最好（作为习惯）保持尽可能多的静态内容，因为您可以将它们与动态内容分开。这会在缓存静态数据时给你最好的结果。

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

4. CSS精灵

CSS精灵（如@Muu提到的）都有很大的改进性能和绝对应该采纳。

另一个建议更具体到你的情况 - 如果你希望你的内容索引正确 - 因为你提到大多数数据将被加载使用Ajax，我建议它没有AJAX目前。例如：www.domain.com/将链接到#contact，它将显示表单（使用ajax加载）。您还应该有www.domain.com/contact进行索引编制。还要确保如果用户输入www.domain.com/#contact - 他将被重定向到联系页面（或内容将被动态加载）。

使用浏览器的Web开发工具来查看正在做什么请求，并查看可以在哪些地方降低请求数量，还要注意文件大小，查看哪些文件被缓存以及哪些文件被服务器请求。在你的服务器配置和htaccess中定义缓存属性。

希望帮助;）

PS：还有一个小窍门 - 如果你把水洒在你的键盘 - 不要试图用吹风机吹干它 - 它可以在你的钥匙熔化......

来源

2011-11-02 01:07:10 galchen

如果我能+1，我会的。你在（1）中说的很有趣，虽然我不太确定我是否能够避免这种情况（作为一个应用程序），但知道这对我将来肯定会有帮助。似乎每个人都同意缓存静态内容，所以我一定会走这条路。就nginX而言，这很有趣，但是现在我的理解力已经超出我的理解......我没有一个备用键盘，所以我稍后再保存它... –

它被称为“文本与代码比率”。我认为40左右是最佳的。有人说42 - http://en.wikipedia.org/wiki/42_(number）;）你的html代码需要在语法上是正确的（比比率更重要）。当你有更少的代码和更多的内容时，它通常会更好的语法正确性，并且搜索引擎解析器可以更容易地解析和索引它 – galchen

@OMGCarlos我扩展了一下（1） – galchen

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

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

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

总的来说，我说不要打扰。将CSS和Javascript分开，在可能的情况下合并图片， - 如果可以的话，绝对使用APC。请记住 - 不要过早地优化您的网站。首先获取内容，开发功能等。快速制作网站可能会降低可维护性 - 我从经验中了解到这一点。

来源

2011-11-02 00:42:48

用于缓存+1。如果你正确地配置你的服务器，浏览器不会每次加载页面都下载这些CSS和JS文件，所以这不是我们需要担心的。一个好主意是将CSS和JS文件设置为在浏览器的缓存中永不过期，然后将一个查询字符串附加到URI的末尾以获得版本号，因此只有在某些更改时才会重新下载。 – animuson

另一个缓存+1。考虑将JS存储在单独的静态文件中，并使用像http://code.google.com/p/minify/这样的东西来整合和缩小这些文件，并将结果存储在像memcached或APC这样的媒体中。 – elazar

@elazar感谢您的链接，我的另一个选择是建立一个程序，为我做到这一点！网页开发对我而言是如此的陌生...... 你知道吗，我会把最后一点放在心上。我来自游戏开发背景，这类似于等到最后添加所有“漂亮”的图形，而将注意力集中在性能上并实际上将东西带出去。 –

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

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

此外，字节码缓存确实提高了速度。不必每次都编译。

来源

2011-11-02 00:43:50 jli

在PHP中存储所有JS/CSS？

回答

相关问题