css 合成层优化 [未解决]

原创
2020/11/08 23:11
阅读数 140

 

原文链接: css 合成层优化 [未解决]

遇到一个在ios上拖拽图片时产生撕裂的问题, 初步定位是由于动画导致合成层频繁绘制, 在旧机器上由于ios的渲染策略和安卓不同? 导致的

还是canvas好啊, 不用考虑兼容问题 o(╥﹏╥)o

 

感觉没啥用... 换手机最快...  或者换canvas, ios上的bug太多了...

http://fouber.github.io/test/layer/

https://www.codenong.com/cs105690386/

https://dzone.com/articles/front-end-performance-optimization-with-accelerate

https://zhuanlan.zhihu.com/p/88288584

https://www.alibabacloud.com/blog/front-end-performance-optimization-with-accelerated-compositing-part-1_594194

https://www.cnblogs.com/dashnowords/p/11885045.html

https://www.jianshu.com/p/24b8bd4ed9c0

https://blog.poetries.top/browser-working-principle/guide/part5/lesson24.html

https://zhuanlan.zhihu.com/p/79881310

https://cloud.tencent.com/developer/article/1558723

https://fed.taobao.org/blog/taofed/do71ct/performance-composite/

http://jartto.wang/2017/09/29/expand-on-performance-composite/

https://juejin.im/post/6844903966573068301

https://www.codenong.com/cs105690386/

 

 

translateZ 会生成合成层

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrap {
    }
    .box {
      width: 100px;
      height: 100px;
      background: deepskyblue;
      margin: 10px 0;
      transform: translateZ(0);
    }
  </style>
  <body>
    <div class="wrap">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

 

就算加上 z-index和absolute, will change也不行

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部