记一次Layer管理遇到的Bug及其相关问题的探索

本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载

之前通过Udacity的浏览器渲染优化课程了解到其中有讲到一个Layer管理, 但是课程并没有细讲 , 今天遇到一个Layer层导致的Bug , 刚好用上了

还原Bug现场

横线是本来应该和跟随页面一并滚动的, 但是这里并没有

此时看看Layer

因为横线是使用::after + position:absolute; + margin偏移 来画的, 所以会导致浏览器会绘制单独一层的Layer

那么课程里面有说的可以通过will-changetransform: translate 来告诉浏览器这里需要创建Layer(只是可选 , 浏览器在一定情况会不创建, 忽略该参数 ,课程说)

那么尝试通过添加will-change 或者 transform

虽然问题解决了 , 但是奇怪的是Layer并没有创建 , 而是合并

继续细看上图的Paint count 是随着滚动而变化的 ,但是内存占用0B , 其理由理由是layerForVerticalScrollBar , 等等 , 你再看看 , 页面是不是没有出现滚动条?

对啊 , 我已经通过下面这个来禁用了

*::-webkit-scrollbar{
  display: none;
}

这就是说明即便禁用滚动条还是会发生paint还有compsitie

虽然通过添加will-change或者transform可以解决问题 , 但是还发现了其他的一些问题

这里可以看到.main的layer的高度是会随着滚动而变化的 , 还有同时触发paint , 那么滚动默认会触发paint 不是仅仅是composite ??

所以随便找一个网页对比测试看看

可以看到这里的滚动还是在root的layer上面的 , 没有触发paint , 这就奇怪了~

这个我的页面的paint是什么导致的捏?

未解问题1:

transform在Blink是只有composite的呀~那么会是什么原因 ?

等等 , 我还有其他页面带有滚动的 , 不过会把问题变得更加奇怪了

未解问题2

这里可以看到 , 开头一些的::after生成的横线并没有合并起来 , 但是后面的确合并了...还有当点击右边滚动条会发现后面会出现一部分的layer又合并了....但是这个页面却没有触发整个页面的重回....奇怪...

先写到这里~有遇到相关问题的同学 ,或者有相关知识点的好文章也可以在评论推荐~~

其实是感觉自己掌握的不够好~~逃~~

那个你会疑问为什么不通过border来实现那条横线 , 因为结构上添加一个DIV会导致很多的工作量 , 就是前面话的时候的漏画了...不然不需要这样来实现这条横线了~~

因为用的是padding , 如果使用border需要再div.name和big-notification再套一层div , 这里就很好的体现有view model的好处了......唉

------2017/8/8更新, 找到更好的解决办法了----------

横线是使用position:absolute画的 , 不跟滚动的原因是因为父容器没有加position:relative , 加上即可, 但是还是会有单独layer层的生成 , 此时通过will-change:transform来做合并 , 这样滚动不会又layer层的变化了, 帧率60妥妥的~

上面提到到几个未解问题均解决了~ 完美~ 哈哈~ CSS真不简单 , 一个属性的对渲染结果的影响很大啊~ 即便看起来效果一样的~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

前端优化的技巧

最近有几个搭档开通了自己博客,但却诉苦说因为的买的虚拟空间,所以自己博客网站翻开速度很慢。关于这种景象,依照一般的状况来看,一个网 最近有几个搭档开通了自己博客...

20500
来自专栏IMWeb前端团队

css经典布局之左侧固定大小右侧自动适应

最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会...

33700
来自专栏老马寒门IT

03-移动端开发教程-CSS3新特性(下)

transition的优点在于简单易用,但是它有几个很大的局限。

24400
来自专栏老马寒门IT

01-移动端开发教程-CSS3新特性(上)

移动互联网的兴起,让移动端的开发迅速蹿红。对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。

42900
来自专栏IMWeb前端团队

移动端重构实战系列1——基础知识

距离上个移动端重构系列已是两年了(不得不感叹时间是把杀猪刀)。这次将会带来实战系列,将欠下两年的债现在还上,给七年的重构赋予一次新生。 既然是新的开始,先简单说...

21900
来自专栏高爽的专栏

HTML内超过多少像素以省略号显示

        时间过的很快,转眼来到了2013年,我在北京工作也一年有余,静下心来,回头想想,自己貌似一年内没有成长多少,或者说成长的很少,反正自己没有看到,...

23600
来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

27500
来自专栏前端那些事

过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不...

37310
来自专栏练小习的专栏

绝对定位bottom值为0的位置问题

有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应...

21660
来自专栏西安-晁州

让div铺满整个空间

需要用到几个css属性: .content{ width:100%;position: absolute;top: 50px;bottom: 0px;le...

22700

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励