網頁制作poluoluo文章簡介:在開發過程中,有時遇到由於緩存問題導致頁面不能及時更新,有時頁面引入了不必需的樣式腳本文件,有時由於文件太多,字節過大導致頁面的性能緩慢,為了解決這些問題,個人設想了一個初步的解決方案。
在開發過程中,有時遇到由於緩存問題導致頁面不能及時更新,有時頁面引入了不必需的樣式腳本文件,有時由於文件太多,字節過大導致頁面的性能緩慢,為了解決這些問題,個人設想了一個初步的解決方案。
解決方案如下:
描述
備注
資源級別
頁面的資源級別:
優化方案
優化主要從以下幾個方面:
其他的優化是從開發技巧上進行的,取決於專業水平
文件輸出方案
基於資源級別及優化方案,制定以下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
}
}
f2engine.php
1、讀取json配置文件,轉化成php數組
例子
比如search.php這個頁面的樣式引用
//全站樣式 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
代碼在開發中。歡迎大家一起探討指教下。