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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

范大脚脚 2017-11-16 10:11:00 浏览919
展开阅读全文
前言

最近碰到几个恶心问题,也发现一点优化技巧,以及对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的逻辑即可,这里贴一段参考代码:
 View Code
当然,我这里其实挖掘的不够彻底,我只是定位到了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框

该问题的使用场景首先出现在这里:
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
 View Code
核心代码在此:

 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();
其原理就是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脱离文档流即可
结语

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




本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/p/3858994.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
范大脚脚
+ 关注