我优化了进度条，页面性能竟提高了70%

时间：2023-03-21 19:36:18 科技观察

优化了进度条，页面性能提升了70%在梳理的过程中，看到有一个进度条组件，写的非常好。这让我想起了刚开始学习前端时写的进度条代码。学者想都别想，我第一个实习公司给我带来的导师也是如此）。因此，我想与大家分享这个优秀的进度条组件。同时，它也存在着非常严重的性能问题。在本文的最后，我将解释优化方法的问题和应用场景。进度条组件一般出现在抖音播放视频这样的场景中，如图下方箭头所示：image.png进度条会随着视频的长度而增长，当视频暂停时，进度条的动画也会暂停。来看看大部分人是怎么写的，为什么说思路和表现不好。这里我们以React为例。Vue开发者不用怕看不懂。主要看思路。主要功能有：支持播放、暂停、重放。/index.jsximport{useState}from'react'import'./index.css'lettimer=null//增量进度定时器lettotalTime=3000//假设视频播放为3sfunctionApp(){const[progress,setProgress]=useState(0)//Progressconst[isPlay,setIsPlay]=useState(false)//是否播放//setProgress递增逻辑consthandlerProgress=pre=>{if(pre<100)returnpre+1;else{alert('playingover')return0//播放结束，重新开始播放}}//开始播放&&暂停播放constandleVideo=()=>{setIsPlay(!isPlay)isPlay?clearInterval(timer):timer=setInterval(()=>setProgress(handlerProgress),totalTime/100)}//重播constreplay=()=>{setIsPlay(true)if(timer)clearInterval(timer);setProgress(0)timer=setInterval(()=>setProgress(handlerProgress),totalTime/100)}return({isPlay?'Pause':'Play'}重播

)}stylepart.container{height:10px;border-radius:5px;border:1pxsolidblack;}.progress{height:100%;width:0;background-color:red;}来简单演示一下这个进度条的外观0opakkask9kklana669029.gif为什么说这种写法不太好呢？因为我们使用定时器快速递增变量progress来实现进度递增。变量每次变化都会驱动视图重新计算渲染，这肯定性能不好（说实话，我体验这个demo的时候，肉眼可见的小卡顿）还有什么？其实，滞后还有一个原因。你不妨猜一猜。我们最后再说吧。想知道答案的可以直接滑到下方推荐的写法。这里推荐的是我看代码时看到的对比。优秀的解决方案，给大家分享一下组件部分//index.jsximport{useState}from'react'import'./index.css'lettotalTime=3000//假设视频播放是3sfunctionApp(){const[isPlay,setIsPlay]=useState(false)//是否播放const[count,setCount]=useState(0)//播放次数const[type,setType]=useState(0)//使用哪个动画0:@keyframesplay;1:@keyframesreplay;//暂停&&播放constandleVideo=()=>setIsPlay(!isPlay);//重播constreplay=()=>{setIsPlay(true)setType(type?0:1)}//动画结束时触发的事件constend=()=>{setCount(count+1)//播放次数+1replay()//重新开始播放}return({isPlay?'Pause':'Play'}Replay{`播放次数：${count}`}