DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 不必需的樣式腳本文件導致頁面不能及時更新
不必需的樣式腳本文件導致頁面不能及時更新
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:在開發過程中,有時遇到由於緩存問題導致頁面不能及時更新,有時頁面引入了不必需的樣式腳本文件,有時由於文件太多,字節過大導致頁面的性能緩慢,為了解決這些問題,個人設想了一個初步的解決方案。

在開發過程中,有時遇到由於緩存問題導致頁面不能及時更新,有時頁面引入了不必需的樣式腳本文件,有時由於文件太多,字節過大導致頁面的性能緩慢,為了解決這些問題,個人設想了一個初步的解決方案。

解決方案如下:

 

描述

備注

資源級別

    頁面的資源級別:

  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配置文件,轉化成php數組
   2、根據每個頁面的資源參數,查找該頁面擁有的樣式資源
   3、根據文件輸出方案,進行處理
   4、在頁面上輸出
  1. 配置文件沒有更新的情況下,只解析一次json為數組
  2. 只解析一次資源,並將結果保存,供下次直接使用

     

例子

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

     

 

代碼在開發中。歡迎大家一起探討指教下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved