前端性能优化

一、页面资源加载优化

推荐资源加载相关设置：

1. css放在head中，因其加载不阻塞页面进程
2. js脚本放到body的底端加载
3. 动态加载js模块

在html里的请求资源，可以使用相应的关键字优化资源加载的优先级。
简要列明常用的属性：

• vue-cli默认开启prefetch,可以在vue.config.js中优化配置
• 兼容性：IE11+/主流浏览器

二、HTTP请求优化

• 与后台合理商讨接口划分。避免一个页面发起太多请求。

• 合理设置缓存过期时间，与后台协商合理的缓存机制，配合localStorage适当缓存资源

• 资源合并压缩

  • 图标：iconfont字体图标、雪碧图
  • js脚本：分模块、分页面打包压缩首屏加载时间
  • 图片压缩：webp

• 懒加载：图片懒加载、模块懒加载、路由懒加载

三、代码优化

1、CSS减少重绘回流

• 避免使用层级较深的选择器
• 避免使用CSS表达式，（计算频繁，页面滚动缩放都会触发）
• 元素适当地定义高度或最小高度，避免布局发生晃动
• 实现动画效果、拖拽效果时，可将元素position设置为absolute，脱离文档流
• 不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间
• 能够使用CSS实现的效果，尽量使用CSS而不使用JS实现。避免频繁访问元素的scrollTop、scrollHeight等属性

2、函数防抖节流

在遇到频繁触发的事件时，比如监听鼠标移动事件、鼠标拖拽事件、窗口resize事件、input框输入事件时，为了性能的考虑，我们可以把回调函数的执行控制在一个时间阈值里，优化响应速度。具体的响应逻辑可以自己优化，也可以直接使用lodash中提供的方法：debounce、throttle。

3、常见的代码优化

• 频繁的元素插入、删除操作，使用链表结构组织数据。
• 使用mvvm框架（vue）时，避免把嵌套层级深的复杂结构如地图实例等对象放到data里，以免频繁触发框架的响应监听。
• 使用闭包后，谨记释放内存。
• 耗时的数据处理工作，可以新开一个Web Worker的线程进行处理。
• 图形库的内存释放

应用中如果把结构复杂的对象，如地图库、图形库等挂载到组件实例（window全局对象同理）中，应该在组件卸载时及时释放内存。常见内存溢出场景：地图分屏功能、含地图实例的组件在路由切换时未释放内存。工程中使用如ArcGIS for js/ThreeJS/Cesium等webgl框架，除了调用框架本身提供的销毁方法，也要获取canvas中webgl的上下文，清除gpu内存。以Threejs内存释放为例：依次销毁几何、材质、贴图，清空挂载在this上的对象，清空webgl上下文。

四、Webpack打包优化

JS加载会阻塞浏览器进程，通过webpack打包优化，把常用的第三方库单独打包，避免单个js文件体积太大。以 vue.config.js 配置为例：

module.exports = {
  chainWebpack(config) {
    config.optimization.splitChunks({
      chunks: 'all', // "initial"，"async"和"all"。
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 1, // 数字越大优先级越高
          chunks: 'initial',
        },
        threejs: {
          name: 'three',
          priority: 2,
          test: /[\\/]node_modules[\\/]_?three(.*)/,
        },
        element: {
          name: 'element',
          priority: 2,
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
        },
      },
    });
  }
}

• 去除生产环境sourceMap

module.exports = {
  productionSourceMap: false,
}

• 外网项目的公共库可以使用cdn引入，以使用 externals 让 webpack 不打包某部分，然后在其他地方引入 cdn 上的 js 文件，利用缓存下载 cdn 文件达到减少打包时间的目的。
• 使用compression-webpack-plugin压缩体积较大的js/css/json（需要后端配合启用gzip
• 使用image-webpack-loader压缩体积较大的图片

性能优化参考资料：
https://juejin.cn/post/6844904195707895816
https://www.cnblogs.com/xiaohuochai/p/9178390.html