前言

最近碰到几个恶心问题，也发现一点优化技巧，以及对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;

当然，我这里其实挖掘的不够彻底，我只是定位到了JSON.stringify有问题，却不能再定位里面哪个环节有问题了......

更加优雅的做法：

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浏览器却可以，至于原因我就不知道了......

消除链接失效时safari alert框

该问题的使用场景首先出现在这里：
导致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>

前段时间，小钗的一个同事找到了解决方案，大致做法如下：
 <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">

   <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>

 </head>

 <body>

   <a href="http://www.baidu.com">百度一下</a> <a href="taobao://wireless">测试无效URL</a>

   <script type="text/javascript">

     $('a').click(function (e) {

       var el = $(e.target);

       var url = el.attr('href');

       if (url.indexOf('taobao') != -1) {

         var ifm = document.createElement('iframe');

         ifm.onload = function () {

           ifm.contentWindow.document.write('<script>location.href="' + url + '"</' + '' + 'script>');

         }

         ifm.src = 'about:blank';

         document.body.appendChild(ifm);

       } else {

         window.location = url;

       }

       e.preventDefault();

     });

   </script>

 </body>

 </html>

核心代码在此：

     $('a').click(function (e) {

       var el = $(e.target);

       var url = el.attr('href');

       if (url.indexOf('taobao') != -1) {

         var ifm = document.createElement('iframe');

         ifm.onload = function () {

           ifm.contentWindow.document.write('<script>location.href="' + url + '"</' + '' + 'script>');

         }

         ifm.src = 'about:blank';

         document.body.appendChild(ifm);

       } else {

         window.location = url;

       }

       e.preventDefault();

其原理就是iframe中url解析错误的话，Safari不太理睬~~~~~~

延迟加载·性能与体验

以延迟加载来说，最常见的便是图片延迟加载，但是很多朋友却不知道为什么要做延迟加载
浏览器能同时请求的并发数是有限的，对于手机来说一般是4-6之间，不同型号的手机或者浏览器会有所不同，差距不会太大
这个请求数限制存于浏览器，所以一处请求卡死，就算新开标签也会受到影响（手机一般不考虑tab），下面有一个场景：
一个页面打开，里面有N多图片，并且有几个js待加载，这个时候若是图片先加载的话，图片会占用js的并发数，从而阻塞页面的加载~~~~~~
举个webapp的例子，我们进一个列表页，加载了15个图片，用户点击列表项booking页模块js开始加载（requireJS规则），这个时候业务js需要等待前面图片加载结束后才能加载，至少需要空闲并发数
所以，图片是有可能堵塞JS的，这个也是我们做图片延迟加载的主要原因

首屏载入速度

延迟加载是提升首页载入速度的一大手段，对于webapp来说，操作会有所不同
webapp中一个个业务view都是一个独立的js文件，我们能控制第二个view在首页是否加载
或者说，页面中用到的组件，我们皆可以按需加载，但这里就有一个情况需要取舍
首屏快，操作慢VS首屏慢操作快
说得多不如亲身操作：
  
第一个便是首屏快的代码，其它组件全部采用按需加载的手段，但是事实上这类做法会导致后续操作十分卡！！因为每一个操作可能引发一次请求！
第二个便是首屏将UI与View业务代码全部打包一起了，这样首屏加载会比较慢，他的效果时后续操作的无缝性
当然，是否需要将js全部打包，这会是一场口水战，直接有一个阀值，有一个区间，只要做到这个区间便好

统计代码导致10px白屏

很多大型网站都会具有统计代码，而此类统计代码一般是以img做请求发出，但是他可以导致10px白屏你知道吗？

会出现10px左右的白屏区域，这个问题导致的原因是：
独立的inline元素出现时，会为他创建一个line boxes，这个就是传说中的文字框
一行文字有一个line boxes，line boxes的高度由line-height控制而不是行内元素的width height控制
所以，img的高度与line boxes没有关系
下面那一行白屏空间其实就是一个匿名line boxes，这个时候给body设置line-height他便会消失，或者让img脱离文档流即可

结语

依旧这句话，问题的定位才是难点，若能定位一个问题，其解决方案往往是分分钟的事情......
这里记录这些奇怪的知识点，以便今后查阅，也希望对各位有所帮助！

【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】的更多相关文章

  1. Angular2 小贴士 Name

    Angular2 正式版已经发布了一个月了,我也是通过各种方式在进行验证是否可以满足我们的需求,今天我就发现了一个问题.现在我们来一起说明一下,这个可能不算是bug,而应该需要我们记住就可以了. 我们 ...

  2. SVN小贴士

    我辛辛苦苦写的到哪里了? SVN小贴士SVN服务器上的代码项目组公用,你的每一个提交都会体现给项目组每个人,所以提交要慎重,要注意避免代码冲突,使用SVN小贴士: 1.提前宣布开发计划,保持项目组成员 ...

  3. 初识bd时的一些技能小贴士

    既然小豆腐如此给力,而且充分的利用主动学习的优势,已经有了迅速脑补,压倒式的优势,不过这只是表面而已,一切才刚刚开始,究竟鹿死谁手,还有待验证. 以上可以看到,小豆腐为什么拼命的要teach我们了么, ...

  4. 初识bigdata时的一些技能小贴士

    既然小豆腐如此给力,而且充分的利用主动学习的优势,已经有了迅速脑补,压倒式的优势,不过这只是表面而已,一切才刚刚开始,究竟鹿死谁手,还有待验证. 以上可以看到,小豆腐为什么拼命的要teach我们了么, ...

  5. 【小贴士】虚拟键盘与fixed带给移动端的痛！

    前言 今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的: [小贴士]工作中的”闭包“与事件委托的”阻止冒泡“,有兴趣的朋友可 ...

  6. android性能小贴士 翻译

    转自http://developer.android.com/training/articles/perf-tips.html 性能小贴士: 这篇文档主要一些微优化可以提升应用程序性能,但是这些改变不 ...

  7. 小贴士——提高PHP程序在NGINX代理服务器的性能

    NGINX本身就是面向最大性能的代理服务器,因此在使用NGINX,并没有性能调整的配置工作.但是却有很多选项可用于定制NGINX的行为,利用底层硬件和操作系统. 下面将介绍用于提供PHP在NGINX的 ...

  8. jprofiler8使用小贴士

    说明:本文的小贴士是针对jprofiler8的,其他版本上可能有不适用的地方 贴士一:使用jpenable监控,无需增加jvm参数和重启 贴士一:使用jpenable监控,无需增加jvm参数和重启 j ...

  9. 小程序背景图片bug

    在pc端调试的时候已经可以看到出现背景图片了,但是在真机调试的时候却发现没有背景图片,那么原因是什么呢?真机调试和vconsole也看不出什么鸟,其实这是小程序的一个bug.另一种说法是:backgr ...

随机推荐

  1. Angular1还是Angular2

    Angular1还是Angular2 学完angular1,尝试去看了下angular2,虽然号称更强更快,可是这基于ES6和TypeScript的全新框架让人完全招架不住,而且我只是需要angula ...

  2. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（1）用户注册

    上一次把基本框架搭建起来了,这次开始整Web部分,终于可以看到界面了小激动一下.web项目部分从用户功能开始,基本有注册,登录.注销.查找.查看.删除等涉及Member区域和Manage区域. 目录: ...

  3. 细说Linq之Aggregate

    前言 Linq中有关常见的方法我们已经玩的得心应手,而对于那些少用的却是置若罔闻(夸张了点),但只有在实际应用中绞尽脑汁想出的方法还不如内置的Linq方法来的实际和简洁,不喜勿喷,怪我见识短. 通过R ...

  4. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  5. Javascript与ECMAScript

    我们经常习惯性认为Javascript就是ECMAScript,但其实不是这样的. ECMAScript是一种脚本在语法和语义上的标准. 主要包括:语法.类型.语句.关键字.保留字.操作符.对象. 它 ...

  6. 使用Python和Perl绘制北京跑步地图

    当你在一个城市,穿越大街小巷,跑步跑了几千公里之后,一个显而易见的想法是,如果能把在这个城市的所有路线全部画出来,会是怎样的景象呢? 文章代码比较多,为了不吊人胃口,先看看最终效果,上到北七家,下到南 ...

  7. iOS开发之多表视图滑动切换示例（仿"头条"客户端）---优化篇

    前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展 ...

  8. wcf DataTable作为返回类型

    如果这个DataTable是自己定义的,则再声明DataTable dt=new DataTable("exampleName")时,一定要调用带有一个参数的DataTable个构 ...

  9. Centos 7 开启端口

    CentOS 7 默认没有使用iptables,所以通过编辑iptables的配置文件来开启80端口是不可以的 CentOS 7 采用了 firewalld 防火墙 如要查询是否开启80端口则: 1 ...

  10. LINQ to SQL语句(9)之Top/Bottom和Paging和SqlMethods

    适用场景:适量的取出自己想要的数据,不是全部取出,这样性能有所加强. Take 说明:获取集合的前n个元素:延迟.即只返回限定数量的结果集. var q = ( from e in db.Employ ...