【小貼士】【stringify神BUG】【localstorage失效】【消滅Safari alert框】【是否延遲加載】【頁面10px白屏】

時間 2019-11-19

標籤小貼士 stringify神BUG localstorage失效消滅 safari alert 是否延遲加載頁面10px白屏欄目 JavaScript 简体版

原文原文鏈接

前言

最近碰到幾個噁心問題，也發現一點優化技巧，以及對Hybrid知識的一些整理，這裏便一併拿出來作分享了，關於Hybrid的調試，會是我從此一個重點

個人博客首先是學習筆記，方便本身作知識沉澱，之後好查閱，其次纔是分享，因此其中有誤請提出，以爲亂是頗有可能的~~~~~~

咱們在工做中通常會有這麼一個流程：發現問題->定位問題->解決問題

其中最難就是定位問題，有時候咱們會花上幾天時間定位問題，而解決問題卻只須要幾秒......

因此定位問題的能力很是重要，這也是經驗的體現，所謂高手其實就是坑踩得多而又善於總結罷了

我這裏首先分享一個坑爹的問題，而後由此問題展開今天的學習

JSON.stringify出BUG啦！

沒錯，這個我最近碰到最爲噁心的一個問題！！！

全部頁面，原本在手機上好好的，就算全部手機、奇葩機都測試經過了，最後Hybrid聯調時總會出兩個莫名其妙的BUG

PS：不知道Hybrid各位聽過麼？沒有聽過的前端須要好好補補課了，最近2年這個多是一大趨勢，在與Hybrid的戰鬥中，Hybrid表現出了移動開發萬惡之源的應有素質，配合索尼小米三星組成了一個難以逾越的障礙牆（UC咱們就不提了）

問題的現象是，一個服務器下發的數據對象被存到了localstorage中，拿出來後其中的小數變成null了

該問題暫時發現發生於 Hybrid 三星S3 Sony L39H中，應該還有很多其它低端機型有問題。

幾經定位發現現象以下：

var testObject1 = {
  OrderAmount: 0.11
};
JSON.stringify(testObject1) => OrderAmount: null

① 進頁面便觸發這段代碼不會出問題~~

② click事件中執行上面代碼在60%的機率中便中招了！

最初我固然不相信原生的JSON.stringify會出問題，便反覆測試，反覆定位，最後頁面的代碼刪到只有幾行的時候，我不得不認可是他出了問題~~~~~~Hybrid就是讓你料想不到

一旦定位問題後，這裏的解決方案也便出來了：

在Hybrid中判斷useAgent，重寫掉JSON.stringify的邏輯便可，這裏貼一段參考代碼：

var json2 = {
  type: function (obj) {
    if (obj == null) return String(obj);
    var h = { '[object Boolean]': 'boolean', '[object Number]': 'number', '[object String]': 'string', '[object Function]': 'function', '[object Array]': 'array', '[object Date]': 'date', '[object RegExp]': 'regexp', '[object Error]': 'error' };
    var t = Object.prototype.toString.call(obj);
    if (t in h) return h[t];
    if (t == '[object Object]') t = obj + '';
    var arr = t.match(/^\[object (HTML\w+)\]$/);
    if (arr) return arr[1];
    return 'object';
  },
  stringifyJSON: function (obj) {
    var str, t = window.JSON;
    var rstringifyJSON = /([\n\r\f\\\/\'\"])/g;
    var arr = [], i = 0, n, p;
    var stringHash = {
      '\n': '\\n',
      '\r': '\\r',
      '\f': '\\f'
    };
    switch (json2.type(obj)) {
      case null:
        str = 'null';
        break;
      case 'undefined':
        str = 'undefined';
        break;
      case 'object':
        for (p in obj) {
          if (obj.hasOwnProperty(p)) {
            arr[i++] = json2.stringifyJSON(p) + ':' + json2.stringifyJSON(obj[p]);
          }
        }
        str = '{' + arr.join(',') + '}';
        break;
      case 'array':
        for (i = 0, n = obj.length; i < n; i++) {
          arr[i] = json2.stringifyJSON(obj[i]);
        }
        str = '[' + arr.join(',') + ']';
        break;
      case 'string':
        str = '\"' + obj.replace(rstringifyJSON, function (a) {
          return stringHash[a] || '\\' + a;
        }) + '\"';
        break;
      case 'date':
        str = 'new Date(' + obj.getTime() + ')';
        break;
      case 'number':
      case 'boolean':
      case 'function':
      case 'regexp':
        str = obj.toString();
        break;
      default:
        str = 'null';
    }
    return str;
  }
};

JSON.stringify = json2.stringifyJSON;

View Code

固然，我這裏其實挖掘的不夠完全，我只是定位到了JSON.stringify有問題，卻不能再定位裏面哪一個環節有問題了......javascript

更加優雅的作法：html

var stringifyFunc = JSON.stringify
JSON.stringify = function () {
  if (arguments.length == 1) {
    return stringifyFunc.call(this, arguments[0], function (k, v) {
      if (!isNaN(v)) return v + '';
      else return v;
    })
  }
  else {
    stringifyFunc.apply(this, arguments);
  }
}

localstorage讀取失效

上面說到了localstorage，這裏正好將它拿出來講下，首先有幾個必需要牢記的規則前端

① localstorage最大字符爲500多萬（5M）
各個手機有所差別，可是不會太大，因此使用localstorage必定要記得清理，不清理可能致使
讀取localstorage效率降低，localstorage滿了會引起業務邏輯錯誤
② localstorage讀取文件的
因此其性能沒有內存讀取快，firefox更是會一次性將數據導入內存，想一想就以爲嚇人啊
③ localstorage不被爬蟲識別，因此與SEO相關的關鍵信息須要避免使用localstorage，不然後續會被坑死

上面說了幾個localstorage須要注意的地方，事實上localstorage對性能提高仍是有一些做用的

存儲不過重要的數據，好比城市信息；存取1分鐘內有用的數據也是能夠減小請求的

可是在android Hybrid中有一個神奇的後退按鈕，此按鈕一旦按下會回到上一個頁面，這個時候裏面的localstorage可能會讀取失效！！！一個簡單不靠譜的解決方案是在webapp中加入：

window.onunload = function () { };//不要問我爲何，我也不知道！

最後在開啓隱私模式下時，safari的localstorage讀寫是不可用的，可是qq瀏覽器卻能夠，至於緣由我就不知道了......java

消除連接失效時safari alert框

該問題的使用場景首先出如今這裏：

http://www.cnblogs.com/yexiaochai/p/3439179.html

致使alert框的出現的緣由是我點擊了一個無效連接，這個時候Safari便會彈框提示

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="taobao://wireless">測試無效URL</a>
</body>
</html>

前段時間，小釵的一個同事找到了解決方案，大體作法以下：

http://sandbox.runjs.cn/show/h3ec96kr

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3   <title></title>
 4   <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
 5   <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
 6 </head>
 7 <body>
 8   <a href="http://www.baidu.com">百度一下</a> <a href="taobao://wireless">測試無效URL</a>
 9   <script type="text/javascript">
10     $('a').click(function (e) {
11       var el = $(e.target);
12       var url = el.attr('href');
13       if (url.indexOf('taobao') != -1) {
14         var ifm = document.createElement('iframe');
15         ifm.onload = function () {
16           ifm.contentWindow.document.write('<script>location.href="' + url + '"</' + '' + 'script>');
17         }
18         ifm.src = 'about:blank';
19         document.body.appendChild(ifm);
20       } else {
21         window.location = url;
22       }
23       e.preventDefault();
24     });
25   </script>
26 </body>
27 </html>

View Code

核心代碼在此：android

 1     $('a').click(function (e) {
 2       var el = $(e.target);
 3       var url = el.attr('href');
 4       if (url.indexOf('taobao') != -1) {
 5         var ifm = document.createElement('iframe');
 6         ifm.onload = function () {
 7           ifm.contentWindow.document.write('<script>location.href="' + url + '"</' + '' + 'script>');
 8         }
 9         ifm.src = 'about:blank';
10         document.body.appendChild(ifm);
11       } else {
12         window.location = url;
13       }
14       e.preventDefault();