原文链接: 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.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也不行
