前端性能优化的几个小点（1）

1.  记录几个性能优化的好东西。

       

1.requestAnimationFrame()
2.fastdom
3.Object.freeze()

接下来解释一下这几个小玩意

requestAnimationFrame（）

优点：
浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。

经过浏览器优化，动画更流畅；
窗口没激活时，动画将停止，省计算资源;


fastDom()

dom操作  连续触发页面回流操作
使用fastDom进行优化，将对dom的读和写分离，合并。减少回流操作 增加性能


下列是组合用法：
cards为DOM
const update = (timestamp) => {
      for (let i = 0; i < cards.length; i++) {
        fastdom.measure(() => {
          let top = cards[i].offsetTop;
          fastdom.mutate(() => {
            cards[i].style.width =
              Math.sin(top + timestamp / 100 + 1) * 500 + "px";
           
          });
        });
      }
      window.requestAnimationFrame(update);
    };

Object.freeze()

Object.freeze() 方法可以冻结一个对象。冻结的对象增删改都无法操作，也不能操作其原型



vue 会将 data 对象中的所有的属性加入到 vue 的响应式系统中，当这些属性的值发生改变时，视图将会产生 响应，若对象的体积比较大，会消耗很多浏览器解析时间。

所以我们可以通过减少数据的响应式转换来提供前端的性能。

例:
 const res = await axios.get('abc')
 this.data = Object.freeze(res)