Browser caching CSS, Javascript file 問題

有時遇到改了css或js，但卻沒反應，除了天兵改錯隻以外，太多是因為browser自己cache住了，有幾個做法可避免

1. ap server處理
   apache可用mod_expires
   

   //1.載入mod_expires.so
   # vi /etc/httpd/conf/httpd.conf
   LoadModule expires_module modules/mod_expires.so  #拿掉註解
   
   //2.config 
   #vi your_app_path/.htaccess
   ExpiresActive on
   ExpiresByType application/javascript "access plus 1 months"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType text/css "access plus 1 months"

   p.s. 最好搭must-revalidate ，不然cache時間寫太長的要改檔案才會變，不過也是有人測試說不一定有作用...，所以還是利用下面的做法一定有效!
   
2. 利用uri不同，迫使Browser reload
   以前是自己在get參數列加版本or日期
   

   <link type="text/css" href="aaa.css?v=20130526"/ >

   不過每次有更新就得手動更改，實在不是好方法
   看到有人利用file更新日期搭RewriteEngine~ 真是太棒了~
   
   • html載入
     

     <link type="text/css" href="/css/main.<?php echo filemtime('/path/to/css/main.css'); ?>.css" / >
     //會產出 /css/main.1237440708.css

     main.1237440708.css只是虛擬的檔案，此檔並不存在會透過rewrite rule指向main.css，因此還需設定.htaccess
     
   • .htaccess設定
     

     RewriteEngine On
     RewriteRule ^(css|js)/(.*)\.[0-9]+\.(.*)$ /$1/$2.$3 [L]

     p.s. 如果很好學想知道rewrite rule怎麼寫的，可以看Force reload of updated CSS and Javascript files with unique filenames
3. 利用HTML5的cache manifest
   就隨意改一下 cache manifest的內容
   Browser就會自己檢查有沒有新的版本...

References

• Using Apache mod_expires to control browser caching
• Force reload of updated CSS and Javascript files with unique filenames
• Try to avoid "no-cache"
  

apache 常用設定

250行 ServerAdmin root@localhost
           系統管理員的 email ，當網站出現問題時，錯誤訊息顯示的聯絡信箱
264行 ServerName www.example.com:80
            設定主機名稱，如果沒有指定的話，預設會以你的 hostname 為依據。填入的這個主機名稱要找的到 IP
354行 UserDir disable 修改成--> #UserDir disable
361行 #UserDir public_html 修改成--> UserDir public_html
390行 DirectoryIndex index.html index.html.var 修改成--> DirectoryIndex index.html index.htmindex.php 
                                                                                                       index.html.var
730行 LanguagePriority en zh-TW ...... zh-CN
            設定顯示語系的優先順序
746行 AddDefaultCharset UTF-8 
            有兩種作法，一種是『直接指定由 WWW 宣告 Big5 編碼，而不用網頁表頭的宣告』：
            AddDefaultCharset Big5   或 AddDefaultCharset  zh-TW
            另一種則是不要宣告預設語系，由網頁表頭宣告的啦！直接註解起來即可
            # AddDefaultCharset UTF-8

減少JavaScript記憶體使用量

以下截錄 Ajax in Action (Ajax 實戰手冊)

• Reuse DOM Nodes (重用DOM節點)
  Create Always 與 Create If Not Exists
• Unlink On Hide (隱藏時斷開連結)
  即不用display=none 而用 node.parentNode.removeChild(node);
• Break Cyclic References (斷開循環參考)
  node = null 及 node內的用到的obj也要 null

表8.4 ClickBox Benchmark

ID	Reuse DOM Nodes	Unlink On Hide	Break Cyclic Refs	Final Memory Use (IE)
A	N	N	N	166 MB
B	N	N	N	84.5 MB
C	N	Y	N	428 MB
D	Y	N	N	14.9 MB
E	Y	N	Y	14.6 MB
F	Y	Y	N	574 MB
G	Y	Y	Y	14.2 MB

~
本以為reuse會最省，沒想到F居然會佔最高
有使用Unlink On Hide只有G才會降低記憶間用量，C & F 都爆了
所以開發時不要用！(誤)