前端性能优化

一、用户体验优化

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值