文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 01:12

关注

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

进度条的应用场景

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

image.png

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

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

主要实现功能:

不推荐的写法

组件部分 

  1. // index.jsx  
  2. import { useState } from 'react'  
  3. import './index.css'  
  4. let timer = null  //  递增进度的定时器  
  5. let totalTime = 3000  // 假设视频播放为3s  
  6. function App() { 
  7.      const [progress, setProgress] = useState(0)  // 进度  
  8.     const [isPlay, setIsPlay] = useState(false)  // 是否播放     
  9.     // setProgress的递增逻辑  
  10.     const handlerProgress = pre => {  
  11.         if(pre < 100) return pre + 1;  
  12.         else {    
  13.           alert('播放结束')  
  14.           return 0   // 播放结束,重新开始播放  
  15.         }  
  16.     }  
  17.      // 开始播放 && 暂停播放  
  18.     const handleVideo = () => {  
  19.         setIsPlay(!isPlay)  
  20.         isPlay  
  21.         ? clearInterval(timer)  
  22.         : timer = setInterval(() => setProgress(handlerProgress), totalTime / 100) 
  23.     }  
  24.      // 重播  
  25.     const replay = () => {  
  26.         setIsPlay(true)  
  27.         if(timer) clearInterval(timer);  
  28.         setProgress(0)  
  29.         timer = setInterval(() => setProgress(handlerProgress), totalTime / 100)  
  30.     } 
  31.     return (  
  32.         <div id="root">  
  33.             <button onClick={handleVideo}>{ isPlay ? '暂停' : '播放' }button>  
  34.             <button onClick={replay}>重播button>  
  35.             <div className="container">  
  36.                 <div className="progress" style={{ width: `${progress}%` }}/>  
  37.             div>  
  38.         div>  
  39.     )  

样式部分 

  1. .container {  
  2.     height: 10px;  
  3.     border-radius: 5px;  
  4.     border: 1px solid black;  
  5.  
  6. .progress {  
  7.     height: 100%;  
  8.     width: 0;  
  9.     background-color: red;  

来简单演示一下这个进度条的样子

0opakkask9kklana669029.gif

为什么说这种写法不太好呢?因为我们是通过定时器来快速递增变量progress以此来实现进度增加的,变量每次改变都会驱动视图重新计算渲染,这必然是性能很差的(说实话,我在体验这个demo的时候,肉眼可见的小卡顿)

除此之外呢?其实还有一个造成卡顿的原因,你们不妨猜猜看,我们放到最后一起讲,想知道答案的小伙伴可以直接滑到下面

推荐的写法

这里推荐的就是我在阅读代码时看到的比较优秀的方案了,接下来分享给大家

组件部分 

  1. // index.jsx  
  2. import { useState } from 'react'  
  3. import './index.css'  
  4. let totalTime = 3000  // 假设视频播放为3s  
  5. function App() {  
  6.     const [isPlay, setIsPlay] = useState(false)  // 是否播放  
  7.     const [count, setCount] = useState(0)  // 播放次数  
  8.     const [type, setType] = useState(0)   // 使用哪个动画。0: @keyframes play; 1: @keyframes replay;      
  9.     // 暂停 && 播放  
  10.     const handleVideo = () => setIsPlay(!isPlay);   
  11.      // 重播 
  12.     const replay = () => {  
  13.         setIsPlay(true)  
  14.         setType(type ? 0 : 1)  
  15.     }   
  16.      // 动画结束时触发的事件  
  17.     const end = () => {  
  18.         setCount(count + 1)  // 播放次数 +1  
  19.         replay()   // 重新开始播放  
  20.     }   
  21.      return (  
  22.         <div id="root">  
  23.             <button onClick={handleVideo}>{ isPlay ? '暂停' : '播放' }button>  
  24.             <button onClick={replay}>重播button>  
  25.             <span>{ `播放次数为:${count}` }span>  
  26.             <div className="container">  
  27.                 <div   
  28.                     className={`progress ${isPlay ? 'play' : 'pause'}`}   
  29.                     style={{  
  30.                         animationDuration: `${totalTime}ms`,  
  31.                         animationName: `${type ? 'replay' : 'play'}`  
  32.                     }}  
  33.                     onAnimationEnd={end}  // 动画结束时的事件  
  34.                 />  
  35.             div>  
  36.         div>  
  37.     )  

样式部分 

  1. @keyframes play {     
  2.     to {  
  3.         width: 100%;  
  4.     }  
  5.  
  6. @keyframes replay {  
  7.     to {  
  8.         width: 100%;  
  9.     }  
  10.  
  11. .container {  
  12.     height: 10px;  
  13.     border-radius: 5px;  
  14.     border: 1px solid black;  
  15. .progress {  
  16.     height: 100%;  
  17.     width: 0;  
  18.     background-color: red;  
  19.     animation-timing-function: linear;  
  20.  
  21. .progress.play {       
  22.     animation-play-state: running;  
  23.  
  24. .progress.pause {      
  25.     animation-play-state: paused;  

我们设置了两个@keyframes动画是为了在使进度条重新播放时可以做一个切换,即点击 "重播" 时,直接切换到另一个动画,就可以实现进度条从0开始递增

同时我们还设置了两个类名的样式,分别用于控制动画的播放和暂停

播放完成时,播放次数+1的功能可以通过事件animationend来监听即可

同样的,来看一下这套方案的效果图(跟前一套方案功能一模一样)

0opakkask9kklana669029.gif

对比一下前一套方案,你就能知道这种写法不需要去一直修改数据来驱动视图的改变,减少了框架内的大量计算,提升了不少的性能

缺陷

第二种方案虽然性能很好,但是与第一种方案一样,存在另外一个隐藏的性能问题,这也是我在排查前同事代码性能问题时所发现的。

缺陷:这两种方案都会引发频繁的重排和重绘

可以借助chrome devtools performance来验证一下页面的情况

11010asdakkkakasd69029.gif

小小的一个进度条触发了那么那么多次重排和重绘,那么它到底有什么影响呢?来简单回顾一下重排和重绘的影响

重排:浏览器需要重新计算元素的几何属性,而且其他元素的几何属性或位置可能也会因此改变受到影响。

重绘:不是所有的DOM变化都影响元素的几何属性,如果改变元素的背景色并不影响它的宽度和高度,这种情况,只会发生一次重绘,而不会发生重排,因为元素的布局没改变

所以知道了重排和重绘造成的严重问题后,我们马上对其进行分析优化

极致的优化

先来看看一个非常常见的图

页面的渲染,大体上走的就是这5个流程。当然也有办法跳过中间某些步骤,例如避免Layout和Paint

再来回顾一下有哪些方法会引起重排和重绘吧

触发重排的因素:添加或删除可见的DOM元素、改变元素位置、元素的尺寸改变(包括:外边距、内边距、边框、高度等)、内容改变(如:文本改变或图片被另外一个不同尺寸的图片替代)、浏览器窗口尺寸的改变、通过display: none隐藏⼀个DOM节点等

触发重绘的因素:重排必定触发重绘(重要)、通过visibility: hidden隐藏⼀个DOM节点、修改元素背景色、修改字体颜色等

那么我们前面写的代码中到底是哪里触发了重排和重绘呢?简单检查一下,不难发现两种方案都是在不停改变元素的width,元素的宽度一改变必然会引起重排和重绘,更何况是超频繁的改变呢!

解决方案:启用GPU加速,避开重排和重绘的环节,将进度条单独提升到一个图层,即不影响其它元素

就单独针对第二种方案进行优化吧~我们只需要改动其css内容即可(标注出即为改动处) 

  1. @keyframes play {       
  2.     0% {    
  3.         transform: translateX(-50%) scaleX(0);    
  4.     }  
  5.     to {  
  6.         transform: translateX(0) scaleX(1);  
  7.     }  
  8.  
  9. @keyframes replay {  
  10.     0% {  
  11.         transform: translateX(-50%) scaleX(0);  
  12.     }  
  13.     to {  
  14.         transform: translateX(0) scaleX(1);  
  15.     }  
  16. .container {  
  17.     height: 10px;  
  18.     border-radius: 5px;  
  19.     border: 1px solid black;  
  20.  
  21. .progress {  
  22.     height: 100%;  
  23.     width: 100%;     
  24.     background-color: red;  
  25.     will-change: transform;     
  26.     animation-timing-function: linear;  
  27.  
  28. .progress.play {      
  29.     animation-play-state: running;  
  30.  
  31. .progress.pause {     
  32.     animation-play-state: paused; 
  33.  

这里简单解释一下translateX和scaleX的数值设置。设置进度条width: 100%,我们通过scaleX(0.5)将其缩放一半,可以发现进度条长度为容器的一半且居中,此时我们就需要通过translateX(-25%)将其向左平移到最左端,为什么是-25%呢?因为进度条占了容器的一半且居中,表明左右的留白正好分别是(100% \- 50%) / 2 = 25%,所以也不难得知当初始状态scaleX(0)时,translateX的值为-(100% \- 0%) / 2 = \-50%

这么做了以后,我们再次用performance检验一下

kasjdaskdj0022asd69029.gif

可以很明显地看到页面重排重绘的次数减少了很多很多,剩余的基本都是页面最基本的重排和重绘了。

有人要说我党了,接下来给你们展示一下到底优化了多少性能

先用刚极致优化完的跑一下performance

image.png

看图中右侧,FPS基本是稳定在55 ~ 70之间

再来看看文章开头第一种方案的performance跑分

image.png

看图中右侧,FPS基本是稳定在32 ~ 50之间

可以很清楚得看到,优化前的FPS波动非常严重,即不够稳定,所以容易出现卡顿问题;而优化后的FPS的变化是不大的,整体变化趋势比较平,几乎是一直线

在这样一个极简页面中,我们优化后性能都大约提升了大约40% ~ 54%

那么如果在正常的项目中,考虑到页面的复杂性,我们优化后的方案既避免了页面反复得计算渲染,又避免了重绘回流,可想而知在那种情形下性能的提升应该是远不止40% ~ 54%的,emmmmmm,所以我说性能提高70%应该也不是很过分吧 hhhhh

小彩蛋

启用GPU加速会将元素提升到单独的一个图层中,我们可以通过chrome devtools layers来查看

image.png

这里就分别展示一下我们优化前和优化后的页面分层情况吧

「优化前」

image.png

很明显地看到,整个页面就只有document层,即进度条没有被分层出来

「优化后」

image.png

同样也很明显地可以看到,进度条被单独分出来一个图层了 

 

来源:前端大全内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯