问1：下面这段代码的页面效果

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

页面效果：

问：为什么child3不会去到之前child2的位置？

因为transform属性是位于Composite Layers 层(复合层)。
GPU进程开启新的复合图层，不会影响默认的复合图层(就是普通的文档流)，
所以并不会影响周边的DOM结构。所以transform不会引起回流。
GPU是看不懂HTML代码的，要通过浏览器引擎进行解析，解析之后让GPU进行绘制。

问2：如何css画一个三角形

代码如下：

.parent
{
    width: 0;
    height: 0;
    border-bottom: 10px solid #000;
    border-left: 10px solid transparent;//transparent是透明属性
    border-right: 10px solid transparent;
}

问3：如何css画一个扇形

代码如下：

.parent{
            width: 0;
            height: 0;
            border: 50px ;
            border-style: solid;
            border-color: #000 transparent transparent;
            border-radius: 50px;   
        }

问3：以上代码发生了几次重排(回流) 几次重绘

<script>
        let el=document.getElementById('app')
        el.style.width=(el.offsetWidth+1)+'px'
        el.style.width=1+'px'
</script>

答：发生了两次重排(回流) 两次重绘

什么是重排(回流)什么是重绘？

• 重排：页面布局和几何属性 的改变；GPU拿到渲染树后，进行布局绘制
• 重绘：不影响几何位置的改变，比如颜色改变；当页面上的DOM节点发生非布局变更时GPU需要再次绘制
• DOM树（纯HTML）：表示页面结构，
• 渲染树(DOM树加CSS)：就是GPU能读的懂的东西，表示DOM节点如何显示
• 不管是重排还是重绘，都会消耗浏览器的性能

怎样触发重排：

• 页面首次渲染
• 删除或添加可见的dom元素
• 改变元素位置
• 改变元素尺寸
• 改变窗口大小
• offsetWidth offset... clientTop client

怎么触发重绘：

• 当页面上的dom改变了非几何信息的属性时

回流一定会重绘，重绘不一定回流

问4：下面这段代码输出什么？

var name = 'world!';

(function() {
  if (typeof name === 'undefined') {
    var name = 'Jack'//声明提升，会提升到当前作用域的顶部
    console.log('Goodbye' + name);
  } else {
    console.log('Hello' + name);
  }
})()

执行结果：

• 这段代码有两个作用域，全局作用域和函数作用域。函数里面的 var name = 'Jack'会提升到当前函数作用域的顶部，也就是声明提升。