不必需的样式脚本文件导致页面不能及时更新
2009-08-08 00:38
555 查看
在开发过程中,有时遇到由于缓存问题导致页面不能及时更新,有时页面引入了不必需的样式脚本文件,有时由于文件太多,字节过大导致页面的性能缓慢,为了解决这些问题,个人设想了一个初步的解决方案。
解决方案如下:
描述
备注
资源级别
页面的资源级别:
全局级(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
代码在开发中。欢迎大家一起探讨指教下。
解决方案如下:
描述
备注
资源级别
页面的资源级别:
全局级(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
代码在开发中。欢迎大家一起探讨指教下。
相关文章推荐
- IE中由于缓存导致页面数据不能及时更新的解决办法
- IE中由于缓存导致页面数据不能及时更新的解决办法
- [搬家文]css文件的编码导致页面引用已定义的样式无效
- 项目中js文件修改后浏览器不能及时更新的解决办法
- IE6 下不能加载页面样式文件
- css文件引用后变成了乱码导致样式不能显示的问题的解决
- 项目中js文件修改后浏览器不能及时更新的解决办法
- aspx页面不能及时更新数据
- myeclipse中的项目不能及时编译导致项目不能及时更新
- Form认证导致登陆页面的样式无效和图片不能显示的原因
- 安卓 往SD卡里写文件不能及时更新的问题
- 修改js之后前台页面不能及时更新的问题
- document.write 方式引入外部 JS 文件导致脚本程序执行顺序不同以及 DOM 树更新延迟问题
- Imageloader缓存问题 导致不能及时更新图片
- 短时间内多个请求状态更新,导致react 不能及时响应问题总结
- Form认证导致登陆页面的样式无效和图片不能显示的原因
- Form认证导致登陆页面的样式无效和图片不能显示的原因
- 项目中js文件修改后浏览器不能及时更新的解决办法
- 项目js文件修改后chrome不能及时更新的解决办法