CSS与JS性能问题初步解决方案

描述

备注

资源级别

页面的资源级别：

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为数组
2. 只解析一次资源，并将结果保存，供下次直接使用

    

JS性能问题解决的例子

比如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