DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript組件打包css image
JavaScript組件打包css image
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:js組件通常帶著css image ,但這樣使用起來可能會有些小麻煩,為了讓組件足夠的solo,有了把css image也打包在js的想法,然後順便把請求數變少,這個順便好像更重要,呵呵。

JavaScript組件打包模式

js組件通常帶著css image ,但這樣使用起來可能會有些小麻煩,為了讓組件足夠的solo,有了把css image也打包在js的想法,然後順便把請求數變少,這個順便好像更重要,呵呵。

那怎樣打包呢,雖然有resource-packages這樣的方案,可是我們的核心用戶還在玩ie6這種時尚的浏覽器呢!

我的方案:

  • CSS:CSS可以當成字符串存在js裡,並由js動態加到頁面上,頁面用的可能不適合,但組件通常不會影響。
  • image:CSS裡用的圖片用dataURI(RFC 2397)跟MHTML(RFC 2557)的方式編到js裡面。(秦歌寫的dataURI和MHTML依然推薦給不知道是什麼東東的同學看)。CSS裡如果要絕對路徑同樣可以存js,js如果有直接用到的理論上也是可以,但js通常只改className會比較好。
  • flash:一些比較小的flash,比如存儲,復制等也可以選擇打包,不過現在米解決非IE的問題,非IE使用外鏈吧

這個有個打包測試的例子。

一些細節和糾結的地方

  1. 所有圖片都打包到js裡不一定合理,打包進去的應該是必用的圖片。
    那排除的圖片是再打一個包好呢還是直接用圖片?
  2. 圖片可以先壓後編,我選用的圖片壓縮工具是pngout,而且一般是用-s5
    有人做了些測試Uncompressed data in base64? Probably not,大家自行判斷。
  3. 重復的圖片引用直接用dataURI會搞得很大很大,gzip又笨得跟豬一樣不會壓掉。
    我是選用存成js變量,淘寶的同學是用提class的方式
  4. MHTML在ie7+/vista缺少結束分割符無法顯示,win03sp2缺少Content-Type會有安全提示,原因都MIME不標准,不是所有的東西都可以省。
  5. 是選擇把所有的東西都打包在一個文件還是按MHTML跟dataURI分類型打包成兩份在server按ua派文件或由類庫智能去讀取,好像後者比較和諧。
  6. swf用dataURI編入有問題,據說fp8沒問題,現在都fp10了。
    另一種solo的方案就是把js打包到swf,不過感覺不和諧

multipart/related例子

不算標准但能跑,換行也是很重要的

Content-Type:multipart/related;boundary="_BAIDU_YOUA_BB_YEP"

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:logo.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:nono.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP--

btw:上篇文章的評論裡發現了這個打包的站,輸出界面很帥

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