CSS.JS文件發(fā)布機(jī)制的思考
- 全局級(jí)（Common）
- 模塊級(jí)（Module）
- 頁(yè)面級(jí)（Page）
- 減少單個(gè)文件的字節(jié)大小
- 減少文件的個(gè)數(shù)（即減少http請(qǐng)求數(shù)）
- 合并
- 壓縮
- php有專門的json轉(zhuǎn)換庫(kù)
- js的配置結(jié)構(gòu)同css的配置json
- 配置文件沒(méi)有更新的情況下，只解析一次json為數(shù)組
- 只解析一次資源，并將結(jié)果保存，供下次直接使用
- 根據(jù)頁(yè)面找到頁(yè)面級(jí)資源： Page["search.php"]
- 根據(jù)該數(shù)組的第一個(gè)值查找所引用的模塊樣式
- 根據(jù)配置文件中的“Compress”值確定文件輸出方案，并進(jìn)行處理
- 在頁(yè)面上進(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" />
//頁(yè)面樣式 page
<link type="text/css" href="product/serach.pack.css?20091015" rel="stylesheet" />
注:壓縮后文件名稱變?yōu)?/span> search.pack.css
在開發(fā)過(guò)程中，有時(shí)遇到由于緩存問(wèn)題導(dǎo)致頁(yè)面不能及時(shí)更新，有時(shí)頁(yè)面引入了不必需的樣式腳本文件，有時(shí)由于文件太多，字節(jié)過(guò)大導(dǎo)致頁(yè)面的性能緩慢，為了解決這些問(wèn)題，個(gè)人設(shè)想了一個(gè)初步的解決方案。
解決方案如下：
|
|
描述 |
備注 |
|
資源級(jí)別 |
頁(yè)面的資源級(jí)別： |
|
|
優(yōu)化方案 |
優(yōu)化主要從以下幾個(gè)方面： |
其他的優(yōu)化是從開發(fā)技巧上進(jìn)行的，取決于專業(yè)水平 |
|
文件輸出方案 |
基于資源級(jí)別及優(yōu)化方案，制定以下4種方案： 1、直接引用單個(gè)文件依次引入（<link/>、<script/>） 2、基于1，進(jìn)行單個(gè)文件壓縮 3、按照資源級(jí)別合并成新的單個(gè)文件 4、基于3，進(jìn)行合并后的文件壓縮
|
思考點(diǎn) 方案3： 如何確定合并的文件個(gè)數(shù)？ |
|
緩存問(wèn)題 |
采用時(shí)間戳后綴 |
|
|
f2econfig_json |
配置文件： var f2eJson={ "Update":"20091015",//根據(jù)時(shí)間戳更新緩存 "Compress":"1",//文件輸出方案（1，2，3，4） "Common":[//全站公共樣式 "common/global.css" ], "Module":{ //模塊及樣式 "模塊1":["product,.css"] }, "Page":{//每個(gè)頁(yè)面所擁有的樣式 "index.php":["","sys/index.css"], //第一個(gè)元素存儲(chǔ)模塊引用名稱，無(wú)則留空 "search.php":["模塊1","product/search.css"] //引用多個(gè)模塊，用 “，”隔開，比如： 模塊1，模塊2 } } |
|
|
f2engine.php |
1、讀取json配置文件，轉(zhuǎn)化成php數(shù)組 2、根據(jù)每個(gè)頁(yè)面的資源參數(shù)，查找該頁(yè)面擁有的樣式資源 3、根據(jù)文件輸出方案，進(jìn)行處理 4、在頁(yè)面上輸出 |
|
|
例子 |
比如search.php這個(gè)頁(yè)面的樣式引用
|
|
代碼在開發(fā)中。
歡迎大家一起探討指教下。
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇
