记一次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 条评论
登录 后参与评论

相关文章

来自专栏前端迷

浏览器输入URL回车之后发生了什么?(超详细版)

这个问题已经是老生常谈了,更是经常被作为面试的压轴题出现,网上也有很多文章,但最近闲的无聊,然后就自己做了一篇笔记,感觉比之前理解更透彻了。

9120
来自专栏salesforce零基础学习

salesforce lightning零基础学习(十四) Toast 浅入浅出

https://developer.salesforce.com/docs/component-library/bundle/force:showToast/s...

7920
来自专栏前端迷

喜马拉雅、ctrip、b站、流利说、蜻蜓FM、爱回收前端面试经历

我的回答是[1,2,6,4,3,5]。这道题目主要考对JS宏任务和微任务的理解程度,JS的事件循环中每个宏任务称为一个Tick(标记),在每个标记的末尾会追加一...

14220
来自专栏轮子工厂

有哪些值得推荐的程序员在线编程网站?

我知道对于一个新手来说,可能配运行环境要比上手写代码要难受的多。所以我就抽时间整了一些在线编程测试的网站,虽然推荐了这些网站,但是还是推荐大家平时写代码的时候在...

10110
来自专栏运维录

Nginx 缓存服务器(下)

上一节讲解了在那些场景下使用 Nginx Cache服务器,以及如何配置、调试 Nginx Cache功能,需要的可以看这里,这一节讲一讲 Nginx Cach...

9630
来自专栏前端达人

「css基础」关于字体相关的基础知识(一)

常言道网页设计的好坏,95%取决于字体的排版。尽管现在抖音、小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,...

5400
来自专栏前端迷

vue-cli首屏优化技巧

之前用 vuecli做了个博客,是一个单页面项目,大概有十个路由 直接 npm run build打包出来,有一个 1M的巨大 js文件

7910
来自专栏脑洞前端

为你重新系统梳理下, Web 体验优化中和图有关的那些事(万字长文)

Web 页面性能优化,解决了图片相关,问题就解决了大半。本文从 Web 常见的图片格式入手,引出与图片优化相关的有效方案,期望对大家能有一点帮助。

7820
来自专栏深度学习和计算机视觉

颜色模型与转换

本小节中将介绍几种OpenCV 4中能够互相转换的常见的颜色模型,例如RGB模型、HSV模型、Lab模型、YUV模型以及GRAY模型,并介绍这几种模型之间的数学...

7230
来自专栏相约机器人

图像处理初学者应该学习的100个问题-你都学会了吗?

本文整理了图像处理初学者应该需要了解的100个基础问题,涉及读取、显示图像、操作像素、拷贝图像、保存图像、灰度化(Grayscale)、二值化(Thres...

10250

扫码关注云+社区

领取腾讯云代金券

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