|
在開發(fā)過程中，有時遇到由于緩存問題導(dǎo)致頁面不能及時更新，有時頁面引入了不必需的樣式腳本文件，有時由于文件太多，字節(jié)過大導(dǎo)致頁面的性能緩慢，為了解決這些問題，個人設(shè)想了一個初步的解決方案。
解決方案如下：
|
|
描述 |
備注 |
|
資源級別 |
頁面的資源級別：
- 全局級（Common）
- 模塊級（Module）
- 頁面級（Page）
|
|
|
優(yōu)化方案 |
優(yōu)化主要從以下幾個方面：
- 減少單個文件的字節(jié)大小
- 減少文件的個數(shù)（即減少http請求數(shù)）
|
其他的優(yōu)化是從開發(fā)技巧上進(jìn)行的，取決于專業(yè)水平 |
文件輸出方案
- 合并
- 壓縮
|
基于資源級別及優(yōu)化方案，制定以下4種方案：
1、直接引用單個文件依次引入（<link/>、<script/>）
2、基于1，進(jìn)行單個文件壓縮
3、按照資源級別合并成新的單個文件
4、基于3，進(jìn)行合并后的文件壓縮
|
思考點(diǎn)
方案3： 如何確定合并的文件個數(shù)？
|
|
緩存問題 |
采用時間戳后綴 |
|
|
f2econfig_json |
配置文件：
var f2eJson={
"Version":"v3",//版本
"Update":"20091015",//根據(jù)時間戳更新緩存
"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
}
} |
- php有專門的json轉(zhuǎn)換庫
- js的配置結(jié)構(gòu)同css的配置json
|
|
f2engine.php |
1、讀取json配置文件，轉(zhuǎn)化成php數(shù)組
2、根據(jù)每個頁面的資源參數(shù)，查找該頁面擁有的樣式資源
3、根據(jù)文件輸出方案，進(jìn)行處理
4、在頁面上輸出 |
- 配置文件沒有更新的情況下，只解析一次json為數(shù)組
- 只解析一次資源，并將結(jié)果保存，供下次直接使用
|
|
例子 |
比如search.php這個頁面的樣式引用
- 根據(jù)頁面找到頁面級資源： Page["search.php"]
- 根據(jù)該數(shù)組的第一個值查找所引用的模塊樣式
- 根據(jù)配置文件中的“Compress”值確定文件輸出方案，并進(jìn)行處理
- 在頁面上進(jìn)行輸出
//全站樣式 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" />
注:壓縮后文件名稱變?yōu)?nbsp; search.pack.css
|
|
代碼在開發(fā)中。歡迎大家一起探討指教下。
原文：http://www.cnblogs.com/nebel/archive/2009/08/03/f2engine_css_js.html
本文鏈接：http://m.95time.cn/tech/web/2009/6927.asp 
出處：路口
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
