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).*OS\s([\d_]+)/,
      iphone: /(iPhone\sOS)\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，則執行並置空。