8.5学习汇总

1.GPU硬件加速

可以带来动画性能优化，不需要repaint。
（1）可以默认只有一个复合层，所有的DOM节点都是在这个复合图层下。
（2）如果开启了硬件加速功能，可以将某一个节点变成复合图层。
（3）复合图层之间的绘制互不干扰，直接GPU直接控制。

1.2 开启GPU硬件加速

• transform
• opacity
• filter

1.3 注意事项

• 内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。
• 使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

2. filter

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

3. 缓存

3.1 http缓存

强缓存（expires、cach-control:max-age）
协商缓存（ETag、If-None-Match Last-Modefied、If-Modefied-Since）状态码304

3.2 CDN缓存

3.3 DNS缓存

dns prefetch

3.4 ARP缓存

4. setState

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0,
    };
  }

  componentDidMount() {
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val); // 第 1 次 log

    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val); // 第 2 次 log

    setTimeout(() => {
      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 第 3 次 log

      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
}

//0 0 2 3

前两个异步会合并，后两个在setTimeout中同步执行，根据isBatchingUpdates

前端100问：
https://github.com/yygmind/blog/issues/43

1.请分别用深度优先思想和广度优先思想实现一个拷贝函数？

2.简单讲解一下 http2 的多路复用

• 同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。
• 单个连接上可以并行交错的请求和响应，之间互不干扰

3.

var a = ?;
if(a == 1 && a == 2 && a == 3){
console.log(1);
}