记录–前端校招字节面试分享

<div class="parent">     <div class="child1">child1 content</div>     <div class="child2">child2 content</div>     <div class="child3">child3 content</div> </div> .child2{   transform:translateY(200) }

添加了单位之后，下移两百px。

为什么第三个div没有顶上去到第二个div的位置呢？

因为没有脱离文档流，它还是占据原来的位置

能否从渲染原理来解释呢？

由于transform是位于Composite Layers层

GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。

你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。

绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的。普通文档流就是默认复合图层，不要介意我交换使用它们如果你要使用硬件加速方式降低重排的影响，请不要过度使用，创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。

使用transform性能好的原因

俩个：

1. 因为不用占用主线程。是在GPU上上进行合成的。
2. 由于是位于Composite Layers层，从而避免了layout，避免了重排和重绘

第二题：动画？补间动画实现

发现字节好喜欢问动画， 几乎每场都会给个动画场景，然后问怎么实现。

补间动画就是指控制最开始的状态和最末的状态的动画，中间的状态由浏览器自动帮我们计算生成。

transition动画最主要的属性是transition属性，它其实是4个属性的缩写。

第三题：用css画一个扇形？

let el = document.getElementById('app'); el.style.width = (el.offsetWidth+1) + 'px'; el.style.width = 1 + 'px'

var name = 'World!'; (function () {     if (typeof name === 'undefined') {         var name = 'Jack';         console.log('Goodbye ' + name);     } else {         console.log('Hello ' + name);     } })();

function getJson(){   return new Promise((reslove,reject) => {     setTimeout(function(){       console.log(2)       reslove(2)     },2000)   })  } async function testAsync() {    await getJson()    console.log(3) }  testAsync()