如何將小部件webapp框架與搜索引擎友好的CSS和JS文件結合起來

我正在使用Zend框架和自制小部件系統編寫webapp。每個小部件都有一個控制器，並可以選擇渲染許多視圖中的一個。這確實有助於我們模塊化並重新配置和重用網站上任何位置的小部件。如何將小部件webapp框架與搜索引擎友好的CSS和JS文件結合起來

問題是每個窗口小部件的視圖都包含它們自己的JS和CSS代碼，當整個頁面放在一起時會導致非常混亂的HTML代碼。您隨處可見各種風格和腳本標籤。由於我相信你知道，這有很多不同的原因，但它對我們的SEO也有深遠的影響。

幾種解決方案，我已經能想出：每一個插件到自己的文件中每個視圖的

獨立的CSS和JS - 這對加載時間嚴重缺陷（還有更多的資源需要單獨加載），並且編碼非常困難，因爲現在您必須打開3-4個文件才能編輯小部件。
將所有小部件CSS合併爲一個文件（與JS相同） - 當某人進入網站時，也會導致大量負載，混合CSS和所有小部件的JS，因此很難保持跟蹤其中，以及我相信你能想到的其他問題。
創建一個使用方法1（每個小部件分開的CSS和JS）的系統，當交付頁面時，將所有CSS和JS拼接在一起。這顯然需要更多的處理時間，這樣的系統課程的創建等

我的問題是什麼你們認爲這些解決方案，或者如果有，你知道的預先存在的解決方案（或任何可能有幫助的技術）解決這個問題。我真的很感激你的想法和意見！

謝謝你們，

阿里

來源

2010-05-23 Ali

我肯定會去的第三種方法的響應。您可以獲得第一種方法中描述的分離靈活性，但您可以調整應用程序的性能（正如Pointy指出的那樣）。

您只需要一些中央註冊表系統（一個類），您可以使用它來跟蹤哪些樣式表需要加載。

Styles::add_sheet('widget_1.css');

此外，你可以觸發（方法）添加到這個類，這樣，如果級聯樣式表必須重建其處理緩存的代碼可以跟蹤。

if (Styles::cache_needs_update()) { 
    // rebuild (concatenate) stylesheet and save in cache 
}

走得更遠，人們還可以通過級聯模塊或一些其他類型的分組繞圈的樣式表。當有很多樣式表（或js文件）時，這些連接的樣式表組可以被分開緩存。

上面的代碼樣本將成爲像

Styles::add_sheet('widget_1.css','group_name'); if (Styles::cache_needs_update('group_name')) { // rebuild (concatenate) stylesheet for this 'group_name' and save in cache }

來源

2010-05-30 14:05:52 Zilverdistel

採用方法2，你就可以把瀏覽器緩存的優勢。如果適當的話，如果站點有一個帶有導航等的「前門」入口頁面，並且不需要該小部件庫，則可以在加載着陸頁之後預加載其他頁面的的CSS和JS。

如果你通過YUICompressor之類的東西運行你的JS，然後確保服務器gzip JS和CSS文件，那麼你真的沒有談論那麼多的東西，除非你的代碼真的很不穩定。如果您利用託管在Google API存儲庫等可靠網站上的庫，那麼您可以保持較小的代碼。（我對Zend一無所知，因此可能會或可能不相關。）

來源

2010-05-23 19:04:31 Pointy

不確定這是否可以在PHP中使用，但是如果您能夠推遲頁面的傳輸，直到頁面已經被處理;

有每個插件使用一些靜態方法
地方註冊在頁面上包含在渲染管線讀取並連接所有必要的資源所包含的部件鉤
修改響應以包括資源
發送到客戶端

來源

2010-05-23 19:32:40

如何將小部件webapp框架與搜索引擎友好的CSS和JS文件結合起來

回答

相關問題