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

前言

大家好，我是零一。最近我准备在组里进行代码串讲，所以我梳理了下项目之前的业务代码。在梳理的过程中，我看到了有个进度条组件写的非常好，这又想起我刚开始学前端时写的进度条的代码，跟这个比起来真的差距太大了（大部分的初学者应该都想不到，而且我第一次家实习公司带我的mentor亦是如此）。

因此，我想给大家分享一下这个思路极好的进度条组件，同时它也存在非常严重的性能问题，本文末尾也会讲解一下问题所在以及优化方式

进度条的应用场景

一般进度条组件都出现在类似抖音播放视频的这样场景中，如图中底部的箭头所示：

进度条随着视频的长度而进行增长，视频暂停，进度条的动画也会随之暂停

接下来看看大部分人是怎么写的，为什么说思路和性能不好。这里以React为例，Vue开发者也不用怕看不懂，主要是看思路

主要实现功能：

• 支持播放、暂停、重播
• 播放结束后，播放次数+1，并重新开始播放

不推荐的写法

组件部分

// index.tsx
import { useState } from 'react'
import './index.css'

let timer = null  //  递增进度的定时器
let totalTime = 3000  // 假设视频播放为3s

function App() {
    const [progress, setProgress] = useState(0)  // 进度
    const [isPlay, setIsPlay] = useState(false)  // 是否播放
    
    // setProgress的递增逻辑
    const handlerProgress = pre => {
        if(pre < 100) return pre + 1;
        else {  
          alert('播放结束')
          return 0   // 播放结束，重新开始播放
        }
    }
    
    // 开始播放 && 暂停播放
    const handleVideo = () => {
        setIsPlay(!isPlay)
        isPlay
        ? clearInterval(timer)
        : timer = setInterval(() => setProgress(handlerProgress), totalTime / 100)
    }
    
    // 重播
    const replay = () => {
        setIsPlay(true)
        if(timer) clearInterval(timer);
        setProgress(0)
        timer = setInterval(() => setProgress(handlerProgress), totalTime / 100)
    }
    
    return (
        <div id="root">
            <button onClick={handleVideo}>{ isPlay ? '暂停' : '播放' }<