一、用户体验优化
1、加载组件loading
2、使用骨架图
3、进度条
二、前端性能优化
1、css抽离公共样式
2、HTML减少层级嵌套,尽量避免过深嵌套或者不必要嵌套
3、JavaScript
- 使用===
- 尽量减少操作DOM,例如可以用css改变样式尽量使用css、在vue框架中使用data
- 避免重排和重绘
4、请求资源优化
- 减少资源请求,使用雪碧图
- 图片懒加载
- 使用svg图片,阿里文字图片
- 节流和防抖
uni-app性能优化
1、尽可能的使用自定义组件(公共组件)
- 提高开发效率
- 方便重复使用
- 便于协同开发
- APP端会有一个独立的js引擎
2、长列表
- 最好在长列表中使用封装组件
- 采用分批加载
3、尽量使用原生uniapp原生组件库
详细说明
1、进度条使用
npm i --save nprogress
// api/request下引入进度条
import nprogress from "nprogress";
import "nprogress/nprogress.css"
// 请求和响应时候调用
nprogress.start(); // 请求拦截
nprogress.done(); // 响应拦截
2、避免重排和重绘
1)页面生成过程
1.HTML被解析成DOM树
2.CSS被解析成CSSOM树。
3.渲染树构建(Render Tree)。
4.绘制渲染树(Painting)。
重绘:某些元素的外观被改变,例如:元素的填充色。
重排:又叫回流。重新生成布局,重新排列元素。(消耗巨大的性能)
- 添加或者删除DOM元素
- 元素大小发生改变
- 元素位置改变
重绘不一定导致重排,重排一定导致重绘。
减少重排方法:
1. 尽量避免
2. 可以将需要的重绘元素脱离文档流
3、采用分批加载
1)采用一个组件,加载更多。
2)发送请求时候有几个参数:数量、页码、ID等。
4、节流和防抖
1)节流:在规定的时间内,重复点击多次,却只能触发一次。
案例:长列表加载,排序功能。排序功能
2)防抖:你不定的变换操作,只有当停止操作的时候才会发送请求
案例:输入框的时候不是每一次变化都发送请求
5、雪碧图
原理:外面套一层div,使用'overflow:hidden;'属性。image使用position:relative
6、图片懒加载
1)获取可视区域高度window.innerHeight
2)获取滑块高度
3)如果屏幕高度加上鼠标滚动的高度大于这张图片到顶部的高度,图片的src则获取路径
API介绍:
var h = document.documentElement.clientHeight; // 获取屏幕可视区域的高度
var H = window.innerHeight; // 获取可视区域高度
// 获取图片到顶部的高度
function getTop(e) {
return e.offsetTop;
}
var S = Math.floor(document.documentElement.scrollTop || document.body.scrollTop); // 获取滑块高度