一、页面资源加载优化
推荐资源加载相关设置:
- css放在head中,因其加载不阻塞页面进程
- js脚本放到body的底端加载
- 动态加载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