html5經驗記錄持續更新

1 關於page cache

　　由於移動端瀏覽器webkit基本都實現了page cache（火狐叫做back-forwoad cache）;所以回退操作基本不會觸發onload操作了，不過上一頁的狀態事件都會儲存，一般情況下不會出問題，如果需要每次展現都觸發事件可以考慮pageshow事件。

　　但是在三星s3上發現了一個問題，就是直接給dom設定屬性的時候（這裡指的是dom.prop = value 這種型別的，而不是attribute。）點選後退時原生的瀏覽器這個屬性會丟失，而awen在有些庫裡用到了這種方式。。。所以悲劇了。後來不得不改為attribute。

　　ps:某日awen意外 的發現如果引入自己寫的sjs庫，這個問題奇怪的消失了….看來還有待研究，日後給出解釋

2 pointer-events

　　被懸浮元素蓋住的元素基本是無法觸發滑鼠事件的。一般情況下比較符合要求，但是有時候我們需要觸發怎麼辦？比如說地圖。css3中有個樣式叫做：pointer-events可以解決，他的值如下：

• auto——- 預設值，滑鼠不會穿透當前層
• none—— 元素不再是滑鼠事件的目標，滑鼠不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設定了pointer-events為其它值，比如auto，滑鼠還是會監聽這個子元素的。
• 其它屬性值是針對SVG

　　相容性:Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支援這個CSS3屬性，IE6/7/8/9都不支援，Opera在SVG中支援該屬性但是HTML中不支援。不過值得慶幸的是，andorid和ios中基本都支援。

3 webkit取消預設的效果

　　常用的如下幾個：　

　　-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   //取消點選選取背景色
　　-webkit-user-drag:none;　　　　　　　　　　　//取消拖拽
　　-webkit-user-select:none;　　　　　　　　　　 //取消使用者選取

　　更詳細的說明，看這裡：http://ued.ctrip.com/blog/wp-content/webkitcss/

4 touchmove & e.preventDefault

　　大家都知道在手機上這個方法的重要性。也知道android的不連續觸發touchmove的bug，但是android上會有點同樣需要注意（只是個人見解，歡迎探討漲姿勢）。

　　手指touchup之前：如果第一次觸發touchmove的時候你呼叫了e.preventDefault方法，之後整個move的過程系統都不會再處理，哪怕你把該方法寫在了判斷裡，相反如果第一次觸發touchmove你沒有呼叫e.preventDefault,那麼你想在之後的touchmove觸發時不再e.preventDefault那是沒門的。

　　也就是說，android上的touchmove在手指離開螢幕之前，是否取消系統預設事件，只取決於第一次觸發touchmove時你有沒有呼叫e.preventDefault.

　　模擬一種場景，按鈕點選，如果我判斷移動一段距離之前呼叫e.preventDefault,出了該距離就不阻止預設事件，基本是沒效果的。他只會取決於你第一次touchmove的時候你的判斷是不是需要e.preventDefault，來決定之後整個手指在螢幕上的響應是給系統（比如滾動條）還是給你自己操作。

5  quojs&jQ.Mobi的裝置判斷

　　 判斷系統時我的中興的原生瀏覽器居然說不是移動裝置，我去。看看了quojs原始碼中的程式碼：

 SUPPORTED_OS = {
      Android: /(Android)s+([d.]+)/,
      ipad: /(iPad).*OSs([d_]+)/,
      iphone: /(iPhonesOS)s([d_]+)/,
      Blackberry: /(BlackBerry|BB10|Playbook).*Version/([d.]+)/,
      FirefoxOS: /(Mozilla).*Mobile[^/]*/([d.]*)/,
      webOS: /(webOS|hpwOS)[s/]([d.]+)/
    };

　　　　紅色部分有問題，因為中興的userAgent中”Android”和版本使用`/`間隔的。所以上面紅色部分應改為：Android: /(Android)[s/]+([d.]+)/,不知道別的手機是不是也有類似的問題呢？總有些oem廠商強大的就是不走尋常路。

 6 fixed on mobile

　　”position：fixed“的效果有目共睹，在移動裝置上除了android2.2以上和ios的5.0之後的版本效果還好，但是在這之前，很多人都被高的鬱悶不已。

　　根據蘋果官方文件，當頁面上設定了viewport的meta宣告之後。手指移動時其實移動的是viewport（抽象出頁面），而fixed是針對於頁面的，所以當手指移動式，其實頁面並沒有發生變化，從而導致看上去fixed無效。

　　對此，jquery mobile用的中規中矩的隨著手指一動改變top或者left的位置。sencha touch 和 twitter做的就比較新穎，基本摒棄了viewport的作用了，就像一些實現的滾動條外掛的做法。用translate的方法來改變內部元素的位置。這樣一來手指滑動的時候，頁面和viewport其實都沒有移動。

7 translate3d的妙用

　　有時候在使用css3變換的時候，經常發現頁面會發生閃現的情況，這是因為css3變化的時候影響頁面渲染造成了非常短暫的卡頓。方法是使用translate3d();來將元素浮出原ui層，這樣既可以儘可能的利用硬體加速。上面說的sencha touch 和 twitter都用到了類似處理。

8 css3動畫防抖

　　有時候在做css3動畫的時候頁面會閃一下，跟上面提到的差不多， 那麼可以使使用 `-webkit-backface-visibility` = `hidden` 或者 “-webkit-perspective: 1000;” 來防止頁面抖動。別忘了使用瀏覽器私有屬性hack

9 css透明

　　很多人覺得，移動開發可以放心opacity了，但是值得注意的是，有時候在有些機器上（android）,圖片opacity會造成大塊的黑色陰影塊，第一次碰到的時候直接麻爪了，後來發現是opacity搞的鬼，換成rgba就可以解決了

10 uploadify引起chrome崩潰

　　很好用的上傳工具，可以個問題差點讓我崩潰，chrome下會經常出現崩潰。原因不明，大概是chrome快取了uploadify的某些變數，重新載入時引起js bug。解決辦法就是給uploadify的js原始檔加時間戳版本號，每次請求新的。。。。

11 android addJavascriptInterface 失效

　　js呼叫java的時候，如果測試機器的sdk version >=17  並且應用設定了targetSdkVersion>=17時如果你不加@JavascriptInterface 註解就會出現這一問題。

12 android中註冊的javascript橋接類引數個數需謹慎

　　js往webview中註冊的js方法，在webview中被js呼叫的時候，切記引數個數必須完全一致，做js的不限引數使用慣了這裡經常會出錯。

13 android4.4 以上的 webview中圖片不顯示 

　　再android4.4版本之前，我們經常設定 setBlockNetworkImage(true) 來將圖片的渲染放在dom載入最後從而提升效能，但是從4.4之後這個屬性導致了webview中的圖片不能再被載入，原因不明，解決辦法，直接設成false或者不設定，當然你也可以判斷版本來設定：

if(Build.VERSION.SDK_INT<19){
　ws.setBlockNetworkImage(true);
}

 14 android4.4  webview頁面 onActivityResult  頁面重新整理

　　目前本人測試事4.4中，activity發起startActivityForResult，結果回到當前頁時，如果佈局中有webview，那麼頁面會重新整理，這時候如果你再onActivityResult中執行js方法（loadUrl(“javascript:..”)） 你就會悲催的發現報錯，方法不存在。

     可能設定頁面不重新整理能解決，但是我沒找到，cache也不管用，所以用了笨辦法，如果是sdk>18 則生成一個執行js的Runnable置於全域性，每次頁面載入完成時判斷這個專用於sdk19以上的Runnable!=null，則執行並置空。