GZip

长列表

项目当中，会涉及到非常多的长列表场景，区别于普通的分页来说，大部分的前端在做这种 无限列表 的时候，大部分新手前端都是通过一个 v-for 将数据遍历出来，想的多一点的就是做一个分页。滚动到底部的时候就继续请求 API 。其实这也是未思考妥当的。随着数据的加载， DOM 会越来越多，这样就导致了性能开销的问题产生了，当页面上的 DOM 太多的时候，难免给客户端造成一定的压力，所以对于长列表渲染的时候，建议将 DOM 移除掉，类似于图片懒加载的模式，只有出现在视图上的 DOM 才是重要的 DOM 。 网络上有一些很好的解决方案，如 vue-virtual-scroller 库等等，大家可以理性的选择。

  1. vue-virtual-scroll-list 优化长列表

虚拟列表的实现原理：只渲染可视区的 dom 节点，其余不可见的数据卷起来，只会渲染可视区域的 dom 节点，提高渲染性能及流畅性，优点是支持海量数据的渲染。

  1. Object.freeze 优化长列表

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。
对于 data() 或 vuex 中冻结的对象， vue 不会做 getter 和 setter 的转换。因此对于一个不变的、大数据量的数组或 Object 数据来说，使用 Object.freeze() 可以有效地提升性能。

图片合理的优化方式

图片应该都不陌生吧，在网页中，往往存在大量的图片资源，这些资源或大或小。当我们页面中DOM中存在大量的图片时，难免不会碰到一些加载缓慢的问题，导致图片出现加载失败的问题。网络上大部分都在使用 懒加载 的使用方式，只有当 存在图片的DOM 出现在页面上才会进行图片的加载，无形中起到了分流的作用，下面就说一套实践的方案吧

  • 小图标使用 SVG 或者字体图标
  • 通过 base64 和 webp 的方式加载小型图片
  • 能通过cdn加速的大图尽量用cdn
  • 大部分框架都带有懒加载的图片，不要嫌麻烦，多花点时间使用它

    懒加载

    关于目录树，后台将数据全部都返回了，前端做了一个 loading，等所有的dom渲染完后才结束loading，但是loading很长，影响用户体验，于是只展示目录树的第一级，等到点击对应的父节点时才加载对应的子节点。

参考链接：