是否在PHP中存儲所有JS / CSS？

Question

背景：我正在開發一個單頁面的Web應用程序，該應用程序通過AJAX加載所有內容，因此幾天前開始學習php。 我立即想到將所有內容（html，css，javascript）放入php文件，以便只有一個html文件和一個sprite請求。 例如，外部javascript可以存儲在：

main.js.php （僅將.js添加用於組織目的）如下所示：

<script>
 ...
</script>

要么

<style>
 ...
</style>

問題：將所有內容存儲在php中是個壞主意嗎？ 我有OCD，並且喜歡在單獨的文件中（並且實際上在文件夾中）具有相關功能，所以我們可以說我的項目使用100多個include。 當用戶訪問（AJAX站點）時，這些文件僅被加載一次。 我想將Http請求的數量減少到僅1個html和1個sprite（我的應用程序實際上對圖像使用了自定義字體）。 我的應用程序還將在移動設備上運行（使用不同的設計，使用更少的包含，但使用類似的方法）。

研究：這是我所知道的：

• 您可以將Apache作為php處理js / css，但不是我感興趣的（危險）- 鏈接
• 這個站點給了我一個主意，盡管我不太了解- 壓縮CSS的3種方法
• 使用APC之類的緩存（不確定其工作方式，但超出此問題的范圍）會提高php的速度（？）

Answer 1

雖然減少HTTP請求的數量是一件好事，但它也有問題。 如果將CSS和Javascript合並到HTML文件中，則會增加頁面大小。 您還使瀏覽器也無法緩存CSS和Javascript文件-因此，這些資產將一遍又一遍地重新下載，而不僅僅是一次。

另外-提供靜態文件比通過PHP提供服務快得多。 PHP很慢 。

但是，合並所有圖像是一個好主意。 這就是Google所使用的： http : //www.google.co.uk/images/nav_logo91.png

總體而言，我說不要打擾。 將CSS和Javascript分開，在可能的情況下合並圖像，並且-是的-如果可以的話，一定要使用APC。 不過請記住-不要過早優化您的網站。 首先在其中獲取內容，開發功能等。快速創建網站可能會以降低可維護性為代價-我從經驗中知道。

Answer 2

需要考慮的幾點：

1.代碼-文字比例：

您的內容頁面已被Google閱讀。 當google對您的網頁進行排名時，參數之一是代碼與文本內容的比率。 如果將css / js代碼與內容放在一起，則會降低比率。 （順便說一句，使用div代替表格的參數之一是表格通常會使用更多的html代碼並降低比率）。

編輯：這是一個理論，並不是一個真正已知的事實。 重要的是html代碼在語法上正確無誤，因此搜索引擎解析器將更易於解析。 有人說google會忽略前100kb之后的內容，因此也需要考慮。

2. nginX

我已經用apache安裝了nginx作為反向代理來處理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精靈（如@Muu所述）對性能有很大的改善，因此絕對應該采用。

另一個針對您的情況的建議-如果您希望對內容進行正確的索引-由於您提到大多數數據將使用Ajax加載，因此我建議在不使用Ajax的情況下也顯示該數據。 例如：www.domain.com/將具有指向#contact的鏈接，該鏈接將顯示表單（使用ajax加載）。 您還應該具有www.domain.com/contact進行索引。 還要確保如果用戶輸入www.domain.com/#contact-他將被重定向到聯系人頁面（否則內容將被動態加載）。

使用瀏覽器的Web開發工具來查看正在發出的請求，並查看可以減少請求數量的位置，還應注意文件的大小，查看要緩存的文件以及服務器所請求的文件。 在服務器配置和htaccess中定義緩存屬性。

希望能有所幫助;）

PS：另一個提示-如果您的水濺到整個鍵盤上-不要嘗試用吹風機吹干它-它可能會熔化您的琴鍵...

Answer 3

除非它是動態生成的，否則我將CSS和JS排除在PHP之外。 靜態頁面通常可以更快，更輕松地由Web服務器提供。 將文件分開保存還可以使客戶端瀏覽器緩存一些重復使用的數據（例如CSS文件）。

不過，請確保對單個文件使用壓縮。 Google“ Page Speed”文檔中的一些有用鏈接。

同樣，字節碼緩存肯定會提高速度。 不必每次都編譯。