https://juejin.im/entry/59dc9aedf265da43200232f9

上一篇描述了针对transform、opacity动画化的元素, 浏览器会提升一个合成层来优化渲染
以下几点也会导致浏览器将元素提升到一个新的渲染层.

1. position: fixed; 直接是一个新的Layer
2. will-change: transform, opacity; 两者设置其一就会形成 一个新的Layer
3. translation: transform || opacity || translate3d || filter || backdrop-filter; 需要结合对transform 值的改变才会形成.
4. video, canvas, iframe; 直接是一个新的Layer;
5. perspective
6. 元素A有一个z-index 比自己小的元素B, B是一个合成层(即该元素在复合层上渲染), 则A会提升位合成层(composite隐式合成);
   阅读全文 »

如下代码

浏览器执行了handleResize、handleClick分别干了什么事情

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style>
    ele3 {
        // will-change: transform; 和 translateZ(0) 效果雷同
        translation: transform 0.2s;
    }
<style>
window.addEventListener('resize', handleResize)
window.addEventListener('click', handleClick)
function handleResize() {
    ele1.style.width = xxx;
    ele1.style.height = yyy;

    ele2.style.color = '#fff';
}

function handleClick() {
    ele3.style.transform = 'translateX(1000px)';
}

Async是什么

经历

• 百度大数据部-数据科学平台前端开发, 主要负责平台数据可视化相关业务设计&开发
• 海云数据-数据可视化平台产品设计&开发
  阅读全文 »