[心得] js 踩到雷 2: 快取

[TonyQ (沉默是金。)]

        所謂的 cache 一直都是網頁設計上常碰到的問題，

        當我們一切事情都很正常也不想去修改他的時候，
        我們恨不得他每個東西都cache 起來，

        但是萬一剛剛發生慘案，不小心 deploy 炸彈到了網站，
        又會哭天搶地想要趕快把這些 cache 給幹掉～


        cache 也常常是網頁設計上的幽靈問題之一，
        因為你可能根本就不知道他的存在，也可能因為在不同瀏覽器的行為，
        就讓你疏忽了快取造成問題的可能性。


        （請注意，我們這裡講的是瀏覽器把資料存放的 client side cache，
          server side 也有可能會把response cache ，
          但是那個在這先不談，而且那跟前端其實比較沒有直接關係。）


        快取可能導致問題的狀況我們簡單分列以下兩種

                1.js file cache
                    這種狀況常發生在「用 script tag載入js檔案的情形」，
                    他的常見癥狀就是我明明有修改 js 的內容，
                    卻沒發生應該有的改變。

                    這種時候可以透過關閉 browser 的快取設定，
                    ie可以設定「每次」皆向伺服器要求資料。

                    基本上非常建議關閉，雖然我們有Cfrl+F5 (in windows)
                                                command + shift +r (in mac)
                    這個大絕招，不過偶爾還是會手殘、瀏覽器發瘋、靈異現象，
                    就是沒有更新的狀況。

                    要怎麼判斷確定是不是沒更新到咧？

                    來，跟我一起唸 f i r e b u g ，對，就是這樣。
                    打開firebug 開 script tab ，中間有個下拉式選單，
                    選到你要查的那隻 js 看他裡面呈現的結果是新的還舊的，
                    這樣就很清楚了。


                    萬一如果是舊的怎麼辦？？
                    跟著做以下步驟 1.用瀏覽器開該 .js 路徑，2.按下ctrl+f5

                    如果這時候還是舊的，那你該檢查的就是你是不是更新錯檔案了，

                    有時候倒楣一點是會剛好有其他人設定 server cache ，
                    但是你不知道，我以前接手前人專案時踢過一次這個雷，
                    非常的痛，你不會想嘗試的。

                    如果碰到的是 server cache ，那重開 server 通常會有幫助。
                    （再次重申，這種情形大概百中選一或千中選一吧）


                    另一個方法，跟下一個問題一起講

                2.ajax page cache

                     這個問題咧，問題本身在於 js 是沒問題的，
                     但是因為他有向 server 要回應，而且還同樣的東西要好幾次，
                     結果伺服器就很勤儉的把回應快取起來了。

                     如果是一般的request 還沒有關係，
                     如果今天這個東西是牽扯到資料更新或者是資料操作，
                     這可就糗大囉～～～


                     這個時候我們就要知道，因為我們平常向Server要東西，
                     server 是用網址（Request URL）來做回應，
                     所以當我們想要讓伺服器每次都認為我們送的是不同回應，

                     那就很簡單，拿 new Date().getTime() 來兜在 url上就好。

                      ex. $.get("xxx.php?t=12321323213123",{},fn_ok,fn_error);

                     每次數字都不一樣的話就能確保瀏覽器不會亂亂cache ，
                     對於這個問題，.js 檔的原理也是一樣的，

                寫成 <script type="text/javascript" src="xxx.js?213123"/>

                     這種表示法（也有人是乾脆就綁版本號，ex v=1,v=2..etc）


                ---
                好～第二篇就介紹到這裡～再會

--
這系列技術性的東西不多，但是應該都會「曾經」讓人覺得很痛苦的事情。XD

--
我：一半的日子讓你說，我聽你說你的所有______________________________________
______________________________________一半的日子我想說，對你說過去的所有：我
        _______________________________________________________

        在討論中妥善扮演兼具聆聽與分享的角色，是我們一生的課題。
        _______________________________________________________

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 114.137.5.204
推 iam87king:push
推 JeremyJoung:這兩個問題 我都碰過 1.我是在js內敲版本號 要是號碼
→ JeremyJoung:不對 就重新一次 2.就是加亂數了 不過我是用流水號
推 kurotanshi:大推 cache 問題常常搞死我 orz
推 knuckles:我是js檔名加流水號 每次一更新就改檔名
推 iam87king:我是直接清瀏覽記錄
→ cloudccw:我是傳亂數@@
推 mesak:受益良多 (Y)