1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

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

本帖由 DeepKolos2017-07-06 发布。版面名称:前端开发

标签:
  1. DeepKolos

    DeepKolos New Member

    注册:
    2017-07-06
    帖子:
    1
    赞:
    0
    之前通过Udacity的浏览器渲染优化课程了解到其中有讲到一个Layer管理 , 但是课程并没有细讲 , 今天遇到一个Layer层导致的Bug , 刚好用上了

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

    [​IMG]
    此时看看Layer

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

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

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

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

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

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

    *::-webkit-scrollbar{
    display: none;
    }
    这就是说明即便禁用滚动条还是会发生paint还有compsitie

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

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

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

    [​IMG]
    因为最近华中的H5招生火了嘛~跑去了解一下冰岩作坊
    可以看到这里的滚动还是在root的layer上面的 , 没有触发paint , 这就奇怪了~

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

    [​IMG]
    未解问题1:
    transform在Blink是只有composite的呀~那么会是什么原因 ?

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

    [​IMG]
    因为开了调试才会那么卡顿~
    未解问题2
    这里可以看到 , 开头一些的::after生成的横线并没有合并起来 , 但是后面的确合并了...还有当点击右边滚动条会发现后面会出现一部分的layer又合并了....但是这个页面却没有触发整个页面的重回....奇怪...

    [​IMG]
    还是不要引入更复杂的页面来做对比...
    先写到这里~有遇到相关问题的同学 ,或者有相关知识点的好文章也可以在评论推荐~~

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

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

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

    和商投资 Member

    注册:
    2017-08-22
    帖子:
    160
    赞:
    0
    学海无涯,学习了
     
  3. ﹏譆揂嶼妳ゞ

    注册:
    2017-08-28
    帖子:
    132
    赞:
    0
    新手学习中