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())

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

【H5疑难杂症】脱离文档流时的渲染BUG的更多相关文章

  1. css脱离文档流

    作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  2. 脱离文档流两操作,float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  3. float之脱离文档流

    所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...

  4. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

  5. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  6. HTML元素脱离文档流的三种方法

    一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...

  7. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  9. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

随机推荐

  1. Tomcat 部署我的第一个程序

    idea 生成war包.先双击clean,再双击package.生成成功之后就会产生war包. 第二步:将生成好的war文件复制到tomcat文件夹下. 第三步:配置tomcat的server.xml ...

  2. Microsoft Visual Studio 2017 for Mac Preview 下载+安装+案例Demo

    目录: 0. 前言 1. 在线安装器 2. 安装VS 3. HelloWorld 4. ASP.NET MVC 5. 软件下载 6. 结尾 0. 前言: 工作原因,上下班背着我的雷神,一个月瘦了10斤 ...

  3. NYOJ 954

    首先观察: 2! = 2×1                 = (2)10     = (10)2,        则第一个1是第2位,2!有1个质因数23! = 3×2×1             ...

  4. 一步步学习javascript基础篇(8):细说事件

    终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...

  5. React单元测试——十八般兵器齐上阵,环境构建篇

    一个完整.优秀的项目往往离不开单元测试的环节,就 github 上的主流前端项目而言,基本都有相应的单元测试模块. 就 React 的项目来说,一套完整的单元测试能在在后续迭代更新中回归错误时候给与警 ...

  6. zerojs! 造出最好的 CMS 轮子

    zerojs是一个基于nodejs.angularjs.git的CMS.在它之上可以继续开发出博客.论坛.wiki等类似的内容管理型系统. 拥抱开发者和社区 层次清晰,高度解耦.前后端即使分开也都是完 ...

  7. 【Java并发编程实战】-----“J.U.C”:CountDownlatch

    上篇博文([Java并发编程实战]-----"J.U.C":CyclicBarrier)LZ介绍了CyclicBarrier.CyclicBarrier所描述的是"允许一 ...

  8. ASP.NET MVC 视图(二)

    ASP.NET MVC 视图(二) 前言 上篇中对于视图引擎只是做了简单的演示,对于真正的理解视图引擎的工作过程可能还有点模糊,本篇将会对由MVC框架提供给我们的Razor视图引擎的整个执行过程做一个 ...

  9. 快速Android开发系列网络篇之Retrofit

    Retrofit是一个不错的网络请求库,用官方自己的介绍就是: A type-safe REST client for Android and Java 看官网的介绍用起来很省事,不过如果不了解它是怎 ...

  10. dom 操作

    1.dom 的查找 (1)根据id 查找 var object = document.getElementById("id 值"): (2)根据 name 查找:返回 dom 对象 ...