描述

備注

資源級別

頁面的資源級別：

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