顯示廣告
隱藏 ✕
Disp BBS guest 註冊 登入(i) 線上人數: 52
※ 本文為 Knuckles 轉寄自 ptt.cc 更新時間: 2012-02-14 10:14:06
看板 Ajax
作者 TonyQ (沉默是金。)
標題 [心得] js 踩到雷 2: 快取
時間 Mon Jun  7 20:15:23 2010



        所謂的 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:push1F 06/07 21:16
JeremyJoung:這兩個問題 我都碰過 1.我是在js內敲版本號 要是號碼2F 06/08 10:11
JeremyJoung:不對 就重新一次 2.就是加亂數了 不過我是用流水號
kurotanshi:大推 cache 問題常常搞死我 orz4F 06/08 14:24
knuckles:我是js檔名加流水號 每次一更新就改檔名5F 06/08 17:04
iam87king:我是直接清瀏覽記錄6F 06/08 23:21
cloudccw:我是傳亂數@@7F 06/11 11:17
mesak:受益良多 (Y)8F 06/11 21:05

--
※ 看板: JavaScript 文章推薦值: 0 目前人氣: 0 累積人氣: 4754 
分享網址: 複製 已複製
TL 轉錄至看板 TL (使用複製) 時間:2012-12-09 15:24:39
guest
x)推文 r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇