如何提升性能

首屏优化：

1.cdn分发（减少传输距离）

2.配置路由懒加载

3.组件动态加载，对于不在当前视窗的组件，先不加载；使用keep-alive缓存

4.图片懒加载（进入页面的时候，只请求可视区域的图片资源）

5.减少请求的数量

6.加loading图或者骨架屏

7.使用SSR渲染

8.利用好script标签的async和defer属性

9.webpack开启gzip压缩

10.减少DOM操作，如果非要操作DOM，看下面（减少回流和重绘）：

 

作为开发者，应该尽量设法降低重绘的次数和成本。比如，尽量不要变动高层的 DOM 元素，而以底层 DOM 元素的变动代替；再比如，重绘table布局和flex布局，开销都会比较大。

var foo = document.getElementById('foobar');

foo.style.color = 'blue';
foo.style.marginTop = '30px';

上面的代码只会导致一次重绘，因为浏览器会累积 DOM 变动，然后一次性执行。

下面是一些优化技巧。

• 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
• 缓存 DOM 信息。
• 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
• 使用documentFragment操作 DOM
• 动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
• 只在必要时才显示隐藏元素。
• 使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重绘之前执行，而不是立即要求页面重绘。
• 使用虚拟 DOM（virtual DOM）库。
  
  
  • 下面是一个window.requestAnimationFrame()对比效果的例子。

  // 重流代价高
  function doubleHeight(element) {
    var currentHeight = element.clientHeight;
    element.style.height = (currentHeight * 2) + 'px';
  }
  
  all_my_elements.forEach(doubleHeight);
  
  // 重绘代价低
  function doubleHeight(element) {
    var currentHeight = element.clientHeight;
  
    window.requestAnimationFrame(function () {
      element.style.height = (currentHeight * 2) + 'px';
    });
  }
  
  all_my_elements.forEach(doubleHeight);

上面的第一段代码，每读一次 DOM，就写入新的值，会造成不停的重排和重流。第二段代码把所有的写操作，都累积在一起，从而 DOM 代码变动的代价就最小化了。