【H5疑难杂症】脱离文档流时的渲染BUG

BUG重现

最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!!



如图所示,我动态的改变了dom结构,结果页面那一坨变得什么都没有,相当奇怪!!!在PC模拟iPhone就可以重现,iPhone、note4等手机上也可重现,由于这种BUG我不是第一次碰到,很快便引起了注意,总结起来可以归结于:

js代码改变fixed元素的html结构(一般是动画后并且布局相对复杂),页面不会渲染
问题定位-分离法

本着发现问题,定位问题,解决问题的步骤,我开始了定位,这里的难点是,这类问题往往非常难以定位,因为他的dom tree相当复杂,首先我做了一个事情,直接将其htmlcss分离出来,摆脱js的原因,直接显示该dom。



于是问题不在了,这个很令人费解,难道是js对其造成了影响?经过一轮纠缠,定位失败开始二轮定位。

问题定位-最小化问题

这种问题确实不好处理的时候,光靠看页面可能不能处理了,这个时候便把机票的代码拿到本地,部署起来,做了几件事情:

① 去掉该页多余的业务代码,基本上不完成任何功能

② 去掉多余的dom结构(由于我们是单页应用,dom可能相对比较复杂)

打开对应业务代码一看,洋洋洒洒3000行,立马想吐:



这个时候一行行去读代码就是2B的行为了,直接找到那个显示日历的代码:



然后稍作改动,把其它业务逻辑全部搞掉,事件绑定也搞掉,只留下显示日历的事件,直接一来点击显示日历,这个时候形成的dom结构由4000多行变成了1000多行,但是依旧有BUG

问题定位-CSS重置

由于机票对日历的样式,做了重置,所以有理由怀疑是他们自己的css导致的问题,于是想去掉他们的css引用试了试,虽然样式难看了点,但是问题依旧存在......



问题定位-js逻辑

这个时候便有理由怀疑其日历显示后,本身有一定逻辑功能导致出错,于是看到了日历show后面干的事情,并且为了防止dom结构过大,将月份显示设置为1月。

都这个样子了,他居然还是渲染不处理,有点伤害自尊!!!



因为这个日历显示时候有一个从右到左的动画,这个时候将其动画关掉,却发现问题解决了!!!其中的代码为zepto的实现,不是关键

复制代码
$el.css({
      '-webkit-transform': prepareCss,
      transform: prepareCss
})
  .show()
  .animate({
    '-webkit-transform': 'translate(0, 0)',
    transform: 'translate(0, 0)'
  }, 500, 'ease-in-out', function() {
    $el.css({
      '-webkit-transform': '',
      transform: ''
    });
  });
复制代码
问题定位成功-脱离文档流的渲染

最后问题定位成功,至少从表现和处理来说是定位成功的,简单来说:



动画执行结束后,如果我改变的是fixed元素中的一个子单元的html,不会有反应,但是我们同时改变static元素便会引起一次渲染,尼玛这是神马鬼!!!

问题探索-渲染的差异

为了弄懂这个原因,我们得看到渲染的细节,这里做了一个对比:

不引起static dom变化



引起static dom变化











这里注意观察最后一次paint便可以看见渲染出来的东西不一样,导致这种的差异是什么呢,我们一次次的对比几次不同





这里做一个差异对比,因为这里的static元素与fixed元素还有一些管理,我们这里操作与之完全无关的元素试试。事实证明没有什么影响,所以这类问题的解决方案是:

移动端过多定位元素布局时,偶尔操作fixed元素html不会渲染,解决方案是同步改变与之相关的static元素,便会引导渲染
刚刚使用的是设置html,这里完全可以使用这种做法:

el.html(el.html())
可以达到相同的功能,但是问题导致原因依旧不可知......不可说不是一种遗憾!!!如果您知道这个问题的答案,请您留言。




本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/p/4359983.html,如需转载请自行联系原作者
上一篇:云网络十年:探路者阿里云的理想和坚持


下一篇:五分钟知识科普:什么是 Base64编码 | 算法必看系列三十九