前端性能优化

一、用户体验优化

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); // 获取滑块高度