|
在开发过程中，有时遇到由于缓存问题导致页面不能及时更新，有时页面引入了不必需的样式脚本文件，有时由于文件太多，字节过大导致页面的性能缓慢，为了解决这些问题，个人设想了一个初步的解决方案。
解决方案如下：
|
|
描述 |
备注 |
|
资源级别 |
页面的资源级别：
- 全局级（Common）
- 模块级（Module）
- 页面级（Page）
|
|
|
优化方案 |
优化主要从以下几个方面：
- 减少单个文件的字节大小
- 减少文件的个数（即减少http请求数）
|
其他的优化是从开发技巧上进行的，取决于专业水平 |
文件输出方案
- 合并
- 压缩
|
基于资源级别及优化方案，制定以下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
}
} |
- php有专门的json转换库
- js的配置结构同css的配置json
|
|
f2engine.php |
1、读取json配置文件，转化成php数组
2、根据每个页面的资源参数，查找该页面拥有的样式资源
3、根据文件输出方案，进行处理
4、在页面上输出 |
- 配置文件没有更新的情况下，只解析一次json为数组
- 只解析一次资源，并将结果保存，供下次直接使用
|
|
例子 |
比如search.php这个页面的样式引用
- 根据页面找到页面级资源： Page["search.php"]
- 根据该数组的第一个值查找所引用的模块样式
- 根据配置文件中的“Compress”值确定文件输出方案，并进行处理
- 在页面上进行输出
//全站样式 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
|
|
代码在开发中。欢迎大家一起探讨指教下。
原文：http://www.cnblogs.com/nebel/archive/2009/08/03/f2engine_css_js.html
本文链接：http://www.blueidea.com/tech/web/2009/6927.asp 
出处：路口
责任编辑：bluehearts
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
