前端性能优化有哪些?

1、大图片的处理

     比如:几万像素的图片,可以修改图片格式为wbp

2、页面组件懒加载、按需加载、异步加载、预加载

        比如说页面的一些组件按需加载:(比如一些sql组件、地图组件,进入当前页面需要使用的时候再加载,有些组件加载过的可缓存)

3、尽可能少通过js操作dom,尽量不要频繁操作dom

4、如果频繁修改的用v-show,而不是用v-if

5、页面很多图片卡片的页面,可以做滚动监听,滚动即将到底部再加载下一页面数据

6、一些搜索等的防抖节流

     那么防抖和节流的区别又是什么?

   什么叫防抖?防抖就是一定时间间隔内(比如说防抖时间是300毫秒),用户没有再操作(比如说搜索),才会触发请求

  什么叫节流?用户一定时间间隔内只会触发一次请求,比如说300毫秒内,只会触发一次,不管用户在300毫秒内点了多少次,都只会触发一次

它们的实现原理都是用定时器去计算

7、大数据列表,可以用虚拟列表(比如elemen等有自带的虚拟列表功能)

 那么虚拟列表的实现原理又是什么呢?

虚拟列表的实现原理主要在于只渲染可视区域内的列表项,‌而不是渲染整个列表。‌当用户滚动容器时,‌虚拟列表会根据滚动位置和可视区域的大小计算出当前应该显示的列表项。‌具体来说,‌虚拟列表通过以下步骤实现优化:‌

    a)保存所有列表元素的位置:‌使用数组等方式保存所有列表元素的位置信息,‌这是实现虚拟列表的基础。‌

    b)渲染可视区内的列表元素:‌仅对当前在可视区域内的元素进行渲染,‌这大大减少了DOM的操作数量,‌提高了渲染性能。‌

   c) 动态计算渲染元素:‌当可视区滚动时,‌根据滚动的偏移量(‌offset)‌以及所有列表元素的位置信息,‌计算在可视区应该渲染哪些元素。‌这种动态的计算方式保证了只有必要的元素被渲染,‌从而进一步提高了性能。‌

虚拟列表的实现关键在于减少不必要的渲染操作,‌通过仅渲染可视区域内的元素,‌有效提升了长列表的滚动性能和用户体验。‌这种技术在处理大量数据时尤为有效,‌能够显著提高网页或应用的响应速度和流畅度

8、可以用浏览器F12自带的performance去对页面进行分析和优化,它里面会有一些详细的建议

9、尽可能写简洁的代码,让代码体积更小,还有对webpack做一些打包优化

10、使用闭包以后,记得及时释放对应空间,避免内存泄漏

什么叫闭包?函数里面调用可以使用当前函数的临时变量的函数。(这是为了避免当前最外层函数的临时变量被释放而无法使用)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值