描述

備注

資源級(jí)別

頁面的資源級(jí)別：

1. 全局級(jí)（Common）
2. 模塊級(jí)（Module）
3. 頁面級(jí)（Page）

優(yōu)化方案

優(yōu)化主要從以下幾個(gè)方面：

1. 減少單個(gè)文件的字節(jié)大小
2. 減少文件的個(gè)數(shù)（即減少http請(qǐng)求數(shù)）

    

其他的優(yōu)化是從開發(fā)技巧上進(jìn)行的，取決于專業(yè)水平

文件輸出方案

1. 合并
2. 壓縮

基于資源級(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ù)？

緩存問題

采用時(shí)間戳后綴

f2econfig_json

配置文件：

var f2eJson={
            "Version":"v3",//版本

"Update":"20091015",//根據(jù)時(shí)間戳更新緩存

"Compress":"1",//文件輸出方案（1，2，3，4）

"Common":[//全站公共樣式

  "common/global.css"

],

"Module":{ //模塊及樣式

       "模塊1":["product,.css"]

},

"Page":{//每個(gè)頁面所擁有的樣式

       "index.php":["","sys/index.css"],

         //第一個(gè)元素存儲(chǔ)模塊引用名稱，無則留空

       "search.php":["模塊1","product/search.css"]

       //引用多個(gè)模塊，用 “，”隔開，比如：   模塊1，模塊2

 }

}

1. php有專門的json轉(zhuǎn)換庫
2. js的配置結(jié)構(gòu)同css的配置json

f2engine.php

1. 配置文件沒有更新的情況下，只解析一次json為數(shù)組
2. 只解析一次資源，并將結(jié)果保存，供下次直接使用

    

JS性能問題解決的例子

比如search.php這個(gè)頁面的樣式引用

 

1. 根據(jù)頁面找到頁面級(jí)資源： Page["search.php"]
2. 根據(jù)該數(shù)組的第一個(gè)值查找所引用的模塊樣式
3. 根據(jù)配置文件中的“Compress”值確定文件輸出方案，并進(jìn)行處理
4. 在頁面上進(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)?/SPAN>   search.pack.css