前语

咱们好，我是零一。最近我预备在组里进行代码串讲，所以我收拾了下项目之前的业务代码。在收拾的过程中，我看到了有个翻开条组件写的非常好，这又想起我刚开端学前端时写的翻开条的代码，跟这个比起来真的距离太大markdown笔记了（浏览器前史上的痕迹在哪里大部分的初学者应该都想不到，并且我第一家实习的公司带我的appearmentorMarkdown亦是如此）。

因而，我想给咱们同享一下这个思路极好的翻开条组件，一起它也存在非常严峻的功用问题，本文末尾也会解说一下问题所在以及优化方法

翻开条的使用场景

一般翻开条组件都呈现在相似抖音播映视频的这样场景中，如图中底部的箭头动画片少儿小猪佩奇所示：

翻开条跟着视频的长度而进行添加，视频暂停，翻开条的动画也会随之暂停

接下来看看大部分人是怎样写的，为什么说思路动画制造软件和功用欠好。这儿以React变量名的命名规矩为例markdown是什么，Vue开发者也不必怕看不懂，首要是看思路

首要完动画头像毕功用：

• 支撑播映、暂app是什么意思停、重app是什么意思播
• 播映结束后，播映次数+1，并从头开端播映

不举荐的写法

组浏览器的前史件部分

// index.jsx
import { useState } fr变量值om 'react'
import './index.css'
let timmarkdown下载er = null  //  递加翻开的定时器
let totalTime = 3000  // 假定视频播映为3s
funmarkdown软件ction App() {
coappearnst [progress, setProgre浏览器哪个好ss] = use动画片小猪佩奇S浏览器怎样翻开链接tate动画片小猪佩奇(0)  // 展动画开
coAPPnst动画制造软件 [isPlay浏览器, setIsPl浏览器下载ay] = useSt变量名a动画片少儿te(false)  // 是否播markdown软件放
// setProgress的递加逻辑
const h变量的定义andlerProgress =变量是什么意思 pr变量的拼音e => {
i浏览器怎动画图片头像样翻变量泵开链接f(pre < 100) return pre + 1;
else {
alert('播映变量名的命名规矩结束')
return变量的拼音 0   // 播映结束，从头开端播映
}
}浏览器
// 开端播映 && 暂浏览器怎样翻开网站停播映
const handleVideo = () => {
sappearanceetIsPlay(!isPlay)
isPlay
? clearInterval动画大放映(timer)
: timer = setInterval(() =&gmarkdown符号t; setProgress(handlerProgress), totalTime / 100)
}
// 重播appreciate
const replay = () =&gt动画专业浏览器约束拜访网站; {
setmarkdown是什么IsPlay(true)
if(timer) clearInterva浏览器查找记载删去怎样找回l(timer)markdown中引证的标记符号是;
setProgress(0)
timer = setInterval(() => setProgreappreciatess(handlerProgress), totalTime / 100)
}
return (
<div id="root">
<变量的指针其意义是指该变量的button onClickapproach={handleVid动画片少儿eo}>{ isPlay ?apple '暂停' : '播映' }</buappointmenttton动画片猫和老鼠&变量的拼音gt;
&ltmarkdown笔记;butmarkdown语法ton onClick={replay}>重播</button>
<div className="container">
<divmarkdown中文官网 className="progress" style={{ width: `${progress}动画制造软件%` }}/>
</div>
</div>
)
}浏览器看过的视频在哪里

款式部分

.contaapplicationiner {
height: 10px;浏动画图片头像览器
border-radius:appointment 5pxmarkdown下载;
border: 1px solid black;
}
.progress {
height: 100%;
width: 0;
backgappleround-color:动画片少儿小猪佩奇 r动画图片头像ed;
}

来简略演示一下这个翻开条的姿态

为什么说这种写法不太好呢？因为咱们是经过定时器来快速递markdown是什么加变量progress以此来结束翻开添加变量的，appearance变量变量与函数每次改动变量值都会驱动视图从头核算烘托，这markdown编辑器必定是功用很差的（说实话，我markdown教程在动画大放映体会这个demo的时分浏览器查找记载删去怎样找回，肉眼可见的小卡顿）浏览器的前史

除此之外呢？其app是什么意思实还有一个appreciate构成卡顿的原因，你们不妨猜猜看，咱们放到究竟浏览器怎样翻开网站一起讲，想知道答案的小伙伴能够直接变量类型有哪些滑到下面

举荐的写法

这变量儿举荐浏览器怎样查前史的便是我在阅apappearanceproach读代码时看到的比较优异的计划了，接下来同享给咱们

组件部分

/apple/ index.jsx变量值
import { useState } from 'react'
import './index.css'
let totalTime = 3000  // 假定视频播映动画大放映为3s
fuapplenction App() {
const [markdown软件浏览器前史上的痕迹在哪里isPlay, setIsPlaapplicationy] = useState(f变量的指针其意义是指该变量的alse)  // 是否播映
const [co动画片猫和老鼠unt, setCo动画大放映unt] = useState(0)  // 播映次数
coapp是什么意思n变量的拼音st [type, setType] = useState(0)   // 运用哪个动画。0: @appreciatekeyframes plamarkdown符号y; 1: @keyframes replay;
//动画图片头像 暂停 &&amarkdown符号mp; 播映
const handleVideo =markdown教程 () => setIAPPsPlay(!isPlay变量);
// 重播
const replay = () =appetite&gappearancappetiteet; {
setIsPlay(true)
setType(type ? 0 : 1)
}
// 动画结束时触发的作业
c浏览器束缚拜访网站onst e变量的拼音nd = () => {
setCount(count +浏变量的拼音览器怎样翻开网站 1)  // 播映次数 +1
replay()   // 从头开端播映
}
return (
<div id="root"&g变量与函数t;
&markdown编辑器lt;but动画专业t变量与函数on onClick={handleVideo}&浏览器下载gt;{ isPlay ? '暂停' : '播映' }</button>
<button onClick={replay}>重播</button>
<span>{ `播映次数为：${count}` }&ltapp是什么意思;/span浏览器怎样翻开网站>
<div classN变量泵ame="container">
<div
className={`progress ${isPlay ? 'play' : 'pause'}`}
style={{
animationDuration:变量的拼音 `${totalTime}ms`动画专业,
animationName: `${type ? '变量的指针其意义是指该变量的replay浏览器约束拜访网站' : 'play'}动画片少儿`
}}
onAnimationEnd={end}  // 动画结束时的作业
/>
</div>
</div>
)
}

款式部分

@keyframes play {
to {
width: 100%;变量
}
}
@markdown教程keyframes replay {
to {
width: 1markdown笔记00%;
}
}
.container {
hmarkdown中引证的标记符号是eight: 10px变量名的命名规矩;
border-radius:浏览器下载 5px;
border: 1px somarkdown语法lid black;
}
.progress {
heighappstoret: 100%;
width: 0;
bac变量泵kground-动画片猫和老鼠color: red;
animatiomarkdown编辑器n-tim浏览器怎样翻开链接ing-fu变量名的命名规矩nct变量与函数ion: linear;
}
.progress.pl动画大放映ay {     /* 使animationmarkdown教程动画发动 */
animation-play-state: runn浏览器查找记载删去怎样找回ing;
}
.progress.pause {    /* 使anim动画制造软件ation动画暂停 */
animation-play-state: paused;
}

咱们设置了两个@keyfrmarkdown软件ames动画是为了在使翻开条从头播映时能够做一个切换，即点击 “重播” 时，直接切换到另一个动画，就能够结束翻开条从0开端递加

一起咱们还设置了两个类名的款式，别离用于操控动画的播映和暂停

播映结束时，播映次数+1的功用能够经过作业ani变量名mationend来监听即可

相同的，来看一下这动画图片头像套方动画制造软件案的动画片少儿小猪佩奇效果图（跟前一套计划功用一模浏览器怎样翻开链接相同）markdown编辑器

对比一下前一套计划，你就能知变量与函数道这种写法不需求去一贯修改变量是什么意思数据来驱动视图的改动，减少了断appreciate构内的很多核算，提高了不app是什么意思少的功用

缺陷

第二种计划尽管功用很好，但是与第一种计划相同，存在其他一个躲藏的功用问题，这也是我在排查前搭档代浏览器前史上的痕迹在哪里码功用问题时所发现的。

缺陷：这两种计划都会引发再三的重排和重绘

能够仰仗ch动画片小猪佩奇rome deappstorevtools performance来验证一下页appearance面的状况

小小浏变量名的命名规矩览器查找记载删去怎样找回的一浏览器下载个翻开条触发了那么那么多次重排和重绘，那么它毕竟有什么影响呢？来简略回想一下重排和重绘的影响

重排：浏览器需求从头核算元素的几许特征，并且其他元素的几许特征或方位或许也会因而改动受到影响。

重绘：不是一切的DOM改动都影响元素的几许特征，假设改动元素的背ap浏览器下载plica浏览器tion风景并不影响它的宽度和高度，这种状况，只会发生一次重绘，而不会发变量的定义生重排，因为元素的布局没改动

所以知道了浏览器怎样翻开网站重排和重绘构成的严峻问题后，咱们立刻对其进行变量分析优化

极致的优化

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

页面的烘托，大体上走的便是这5个流程。当然也有方法跳过中间某些过程，例如避免Lay变量out和Paint

再来回想一下有动画片汪汪队哪些方法会引起重排和重绘吧

触发重排的要素：添加或删去可见的DOM元素、改动元素方位、元素的规范markdown符号浏览器怎样翻开网站改动（包括：外边距、内边距、边框、高度等）、内容改动（如：文本改动动画片少儿或图片被其他一个不同规范变量名的命名规矩的图片代替）、浏览器窗口规范的改动、经过d浏览器isplay: none躲藏⼀个DOM节点等

触发重绘的动画片猫和老鼠要素：重排动画头像必定触发重绘（重要）、经过visibility: hidmarkdown中引证的标记符号是den躲藏⼀个DOM节点、修改元素背风景、修改字体色彩等

那么咱们前面写的代码浏览器下载中毕竟是哪里触发了重排和重绘呢？简略查看一下，不难appstore发现两种计划都是在变量类型有哪些不断改动元素的width，元素的宽度一改动浏览器前史上的痕迹在哪里必定会引起重排和重绘，更何况是超再三的改动呢！

解决计划：启用GPU加快，避开重动画片猫和老鼠排和重绘的环节，将展markdown语法开条独自提高到一变量个图层，即不影响其它元素

就独自针对第二种计划进行优化吧~我浏览器查找前史在哪们变量的拼音只需求改动其cssmarkdown下载内容即可（标示出即为改动处）

@keyframes play {     /* 经过transfor变量m来启用GPU加快，跳过重排重绘阶Markdown段 */
0% {
trappearansform: translateX(-50%) scaleX(0);  /* 用 scaleX 来代替 width */
}
to {
transform: translmarkdown中引证的标记符号是ateX动画大放映(0) smarkdown符号caleX(1);
}
}
@keyframes replay {
0% {
transform: translateX(-50%) scaleX(0);
}
to {
transfor变量与函数m: translateX(浏览器的前史0) scaleX(1);
}
}
.container {
height: 10px;
border-radius: 5pxmarkdown语法;
bappearanceorder: 1px soli浏览器束缚拜访网站d black;
}
.progre变量的指针其意义是指该变量的ss {
height: 100%;
wi浏览器查找前史在哪dth: 100%apple;   /* 初始宽度为100%，因为咱们要对其缩放 */
background-color: red动画图片头像;
will-change: transform;   /* 经过will-change奉告浏览器提前做好优化预备 */
a变量名nimation浏览器的浏览前史怎样删去-timmarkdown软件ing-function: linear;
}
.prog动画专业ress.play {
anima变量值tioappreciaten-play变量值-state: running;
}
.progreapp是什么意思ss.pause {
animation-play-state: pau浏览器束缚拜访网站sed;
}

这儿简略解释一下translateX和scaleX的数值设置。设置翻开条width: 100%，咱们经过scaleX(0.5)将其缩放一半，能够发现翻开条长度为容器的动画片少儿小猪apple佩奇一半且居中，此时咱们就需求经过translateX(-25app是什么意思%)将其向左平移到最左端，为什么是-25markdown符号%呢？浏览器查找前史在哪因为翻开条占动画图片头像了动画头像容器的一markdown符号半且居中，标明左右的留白正markdown笔记好别离是(100% - 50%) / 2 = 25%动画片猫和老鼠，所以也不难得知当初始状况scaleX(0)时，translateX的值为-(100% - 0%) / 2 = -50%

这么做了往后，咱们再次用performance检动画专业验一下

能够很明浏览器前史上的痕迹在哪里显地看到页面重排重绘的次数减少了许多许多，动画头像剩下的根柢都是页面最根柢的重动变量与函数画大放映排和重绘了。

有人要说我标题党了，接变量的拼音下来给你们展现一变量与函数下毕竟优化了多少功用

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

看图中右侧，FPS根柢是稳定在55 ~ 70之间

再来看看文章开端第一种计划的peMarkdownrformance跑分

看浏览approach器图中右侧，FPS根柢是稳浏览器查找记载删去怎样找回定在32 ~ 50之间

能够浏览器很清楚得看浏览器查找记载删去怎样找回到，优化前的FPS动摇非常严峻，即不行稳定，所以简略​呈现卡顿问题；而优化后的FPS的改动是不大的，appstore整体改动趋势比较平，几乎是一贯变量的指针其意义是指该变量的线

在这样一个极简页面中，咱们优化后功用都大约提高了大约40% ~ 54%

那么假设在正常的项目中，考虑到页面的复杂性，咱们优化后的计划既避免了页动画面重复得核算浏览器看过的视频在哪里烘托，又避免了重绘回流，可想而知在那种现象下功用的提高应该是远不止40% ~ 54%的，emmmmmm，所以我说功用行进70%应该变量值也不是很过火吧 hhhhh

小彩蛋

启用GPU加appear速会将元素提高到独自的一个图层中，咱们能够经过chr动画制造软件ome devtools layers来查看

这儿就别离展现一下咱们优化前和优化后的页面分层状况吧

「优化前」

很明显地看到，整个页面就只有document层，即翻开条没有APP被分层出来动画专业

「优化后」

相同也很变量的指针其意义是指该变量的appetite明显地能够看到，翻开条被独自分出来一个图层了

结束

往期举荐：

• 手把手带你10分钟手撸一个简易的Markdown编辑器（159+ ）
• 昨晚尤大的markdown中引证的标记符号是连麦直播，我学到了许多！！！（517+ ）
• 一文带你了appointment解怎样变量的界markdown下载说排查内存泄露导致的页面卡顿现象（1动画片少儿小猪佩奇029markdown符号+ ）变量的定义

我是零浏览器约束拜访网站一，假设我的文浏览器约束拜访网站章对你有appetite协助，请点个 赞 支撑我一下

我做了一个大众号：前端形象，每天推送优浏览器怎样查前史质文章。其他也欢迎咱们参与我的前端群，一起谈天揄扬沟通技能，markdown图片vx: Lpyexplore333