DIV CSS 佈局教程網

在開發過程中，有時遇到由於緩存問題導致頁面不能及時更新，有時頁面引入了不必需的樣式腳本文件，有時由於文件太多，字節過大導致頁面的性能緩慢，為了解決這些問題，個人設想了一個初步的解決方案。

解決方案如下：

 

描述

備注

資源級別

頁面的資源級別：

1. 全局級（Common）
2. 模塊級（Module）
3. 頁面級（Page）

 

優化方案

優化主要從以下幾個方面：

1. 減少單個文件的字節大小
2. 減少文件的個數（即減少http請求數）

    

其他的優化是從開發技巧上進行的，取決於專業水平

文件輸出方案

1. 合並
2. 壓縮

基於資源級別及優化方案，制定以下4種方案：


1、直接引用單個文件依次引入（<link/>、<script/>）


2、基於1，進行單個文件壓縮


3、按照資源級別合並成新的單個文件


4、基於3，進行合並後的文件壓縮



 

思考點

方案3： 如何確定合並的文件個數？

緩存問題

采用時間戳後綴

 

f2econfig_JSon

配置文件：

var f2eJSon={
            "Version":"v3",//版本

"Update":"20091015",//根據時間戳更新緩存

"Compress":"1",//文件輸出方案（1，2，3，4）

"Common":[//全站公共樣式

  "common/global.CSS"

],

"Module":{ //模塊及樣式

       "模塊1":["product,.CSS"]

},

"Page":{//每個頁面所擁有的樣式

       "index.PHP":["","sys/index.CSS"],

         //第一個元素存儲模塊引用名稱，無則留空

       "search.PHP":["模塊1","product/search.CSS"]

       //引用多個模塊，用 “，”隔開，比如：   模塊1，模塊2

 }

}

1. PHP有專門的JSon轉換庫
2. JS的配置結構同CSS的配置JSon

f2engine.PHP

   1、讀取JSon配置文件，轉化成PHP數組
   2、根據每個頁面的資源參數，查找該頁面擁有的樣式資源
   3、根據文件輸出方案，進行處理
   4、在頁面上輸出

1. 配置文件沒有更新的情況下，只解析一次JSon為數組
2. 只解析一次資源，並將結果保存，供下次直接使用

    

例子

比如search.PHP這個頁面的樣式引用

 

1. 根據頁面找到頁面級資源： Page["search.PHP"]
2. 根據該數組的第一個值查找所引用的模塊樣式
3. 根據配置文件中的“Compress”值確定文件輸出方案，並進行處理
4. 在頁面上進行輸出

   //全站樣式 common

   <link type="text/css" href="common/global.pack.CSS?20091015" rel="stylesheet" />

   //模塊樣式 module

   <link type="text/css" href="product.pack.CSS?20091015" rel="stylesheet" />

   //頁面樣式 page

   <link type="text/css" href="product/serach.pack.CSS?20091015" rel="stylesheet" />

    

   注:壓縮後文件名稱變為   search.pack.CSS

    

 

代碼在開發中。歡迎大家一起探討指教下。