TransitionCSS3Transition是一个元素逐渐从一种风格转变为另一种风格的效果。值说明transition-property指定CSS属性名称，transitioneffecttransition-durationtransitioneffect指定多少秒或者Transition-timing-function指定transition效果的旋转速度曲线。transition-delay定义过渡效果何时开始。transition-property值说明none如果没有属性，将获得过渡效果。all所有属性都会得到过渡效果。property定义一个以逗号分隔的CSS属性名称列表，以应用过渡。transition-timing-function值描述了以相同速度开始和结束的线性过渡（等于cubic-bezier(0,0,1,1)）。ease指定开始缓慢，然后变快，然后缓慢结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。ease-in指定以低速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。ease-out指定以低速结束的过渡（等于cubic-bezier(0,0,0.58,1)）。ease-in-out指定以低速开始和结束的过渡（等于cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在cubic-bezier函数中定义自己的值。可能的值是0到1之间的数值。Animation创建一个动画值说明animation-name指定要绑定到选择器的关键帧的名称animation-durationanimation指定完成动画需要多少秒或毫秒-timing-function设置动画将如何完成一个循环animation-delay设置动画在启动前的延迟间隔。animation-iteration-count定义播放动画的次数。infinite指定动画应该无限（永远）播放animation-direction指定动画是否应该依次反向播放。animation-fill-mode指定动画未播放时（动画完成时，或动画开始播放前有延迟时）应用于元素的样式。animation-play-state指定动画是运行还是暂停。animation-timing-function值描述了线性动画的速度从开始到结束是相同的。默认情况下轻松。动画以低速开始，加速，然后减速结束。缓入动画以低速开始。缓出动画以较慢的速度结束。缓入缓出动画以低速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier函数中拥有自己的值。可能的值是从0到1的数值。animation-direction值描述了正常的默认值。动画播放正常。reverse动画反向播放。交替动画在奇数时间（1、3、5...）向前播放，在偶数时间（2、4、6...）反向播放。alternate-reverse动画在奇数时间（1、3、5...）向后播放，在偶数时间（2、4、6...）向前播放。animation-fill-mode取值说明none默认值。动画执行前后不会对目标元素应用任何样式。forwards动画结束后（由animation-iteration-count决定），动画将应用该属性值。向后动画将应用在动画延迟定义期间开始动画第一次迭代的关键帧中定义的属性值。这些是from关键帧中的值（当animation-direction为“normal”或“alternate”时）或to关键帧中的值（当animation-direction为“reverse”或“alternate-reverse”时）。两种动画都遵循向前和向后的规则。也就是说，动画会在两个方向上扩展动画属性。animation-play-state值描述paused指定动画暂停running指定运行动画浏览器界面背后的浏览器事件循环机制隐藏了很多用户无法感知的事件执行机制，包括加载资源、渲染、网络请求、用户交互等很多其他的行为，动画也是其中的一部分，因为我们无法控制行为的优先顺序，了解这些机制对于开发以及如何更好的使用动画是有好处的。所有任务都运行在主线程上，形成一个执行栈，同步任务直接执行，阻塞后续任务等待结束。当遇到一些异步任务时，会新开一个线程去执行任务，然后继续执行。异步任务执行完毕并返回结果后，回调事件会被加入任务队列（Queue）作为执行栈（Executioncontextstack），所有任务执行完毕后，会从任务队列中提取所有微任务（队列）。这一步是一起执行的；一旦循环结束，GUI渲染线程接管检测是否有渲染机会（renderingopportunity），渲染机会根据物理环境决定（取决于机器的性能，根据屏幕刷新率、页面性能、页面是否在后台运行）共同决定）；浏览器会尽量保持帧率稳定，比如页面性能不能保持60fps（每16.66ms渲染一次），那么浏览器会选择30fps的更新率，而不是偶尔掉帧。如果浏览器上下文不可见，则页面会下降到4fps左右甚至更低。即使满足上述条件，仍然可以跳过渲染a。浏览器判断更新渲染不会带来视觉上的变化。b.如果帧动画回调为空，如果本轮没有渲染，后面的操作会被推迟，不会执行。多个任务会合并到下一轮渲染中，这也有利于优化它们之间状态的合并或重叠。offsetting等引起的渲染消耗对于需要渲染的文档，如果窗口大小发生变化，则执行监听的resize方法。如果页面滚动，则执行scroll方法。执行帧动画回调，即requestAnimationFrame的回调。执行IntersectionObserver的回调。重新渲染绘制用户界面。判断异步队列是否全部为空，如果为空则执行Idle空闲期的算法，判断是否执行requestIdleCallback的回调函数。在保持任务顺序的前提下，浏览器可能会分配四分之三的优先级给用户交互（鼠标和键盘事件），保证用户的输入得到最高优先级的响应，剩下的优先级给其他任务，并保证他们不会“饿死”。对于resize和scroll，这一步不执行滚动和缩放，浏览器会保存一个pendingscrolleventtargets，等到事件循环中的scrollstep，dispatch一个事件给对应的target，并驱动它去执行回调监控功能。调整大小也是一样的。requestAnimationFrame/***想要执行一个动画，要求浏览器在下一次重绘前调用指定的回调函数更新动画*@paramcallback*@returnrequestID*/window.requestAnimationFrame(callback)描述下一次重绘回调函数之前调用的更新动画帧的函数。回调函数会传入DOMHighResTimeStamp参数，与performance.now()的返回值相同，表示requestAnimationFrame()开始执行回调函数的时刻。返回值是一个长整型，请求ID，是回调列表中的唯一标识。它是一个非零值，没有其他含义。您可以将此值传递给window.cancelAnimationFrame()以取消回调函数。回调函数的执行次数通常为每秒60次，但在大多数遵循W3C推荐的浏览器中，回调函数的执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，在大多数浏览器中，当requestAnimationFrame()在后台选项卡或隐藏的iframe中运行时，requestAnimationFrame()将被挂起以提高性能和电池寿命。回调函数会传入DOMHighResTimeStamp参数，DOMHighResTimeStamp表示当前触发按requestAnimationFrame()排序的回调函数的时间。同一帧中的多个回调每个都会收到相同的时间戳，即使在计算前一个回调的工作量期间已经消耗了一些时间。时间戳是以毫秒为单位的十进制数，最小精度为1ms（1000μs）。DOMHighResTimeStamp是一个double类型，用于存储时间值。该值可以是离散时间点或两个离散时间点之间的时间差。T的单位是毫秒ms（毫秒），应该精确到5微秒μs（微秒）。但是，如果浏览器无法提供精确到5微秒的时间值（例如，由于硬件或软件限制），浏览器可能会以毫秒为单位表示精确到毫秒的值。requestAnimationFrameVStimer我们使用两个API来实现同样的动画效果，看看它们的表现如何。setTimeoutconstgap=16.6letnum=0lettimerfunctionrun(){timer=setTimeout(()=>{num++document.body.style.background=num%2?"red":"blue"console.log(num)num<30&&run()},gap)}run()requestAnimationFrameletnum=0functionrun(){window.requestAnimationFrame(()=>{num++document.body.style.background=num%2?"red":"blue"复制代码console.log(num)num<30&&run()})}run()结论setTimeout不画了，visual好像掉帧了，requestAnimationFrame会定时画界面。原因是正常情况下，浏览器的帧率和屏幕的帧率是一致的，基本都是60，也就是16ms左右刷新一次。定时器只是超时才将相应的任务添加到处理队列中，仍然等待执行栈空闲后再抽出队列执行。这些的结果是，如果定时器时间小于帧率，则定时器回调在下一次渲染之前已经执行了多次。执行被主线程的其他任务阻塞，每次出错都会影响后面的执行时间。这两个效果导致带定时器的动画经常过屏掉帧或者码率异常。requestAnimationFrame是在浏览器下次重绘之前调用的，即它的调用时机是由系统自己控制的，可以保证在空闲时间执行。另一个好处是当页面切换到其他应用程序或隐藏时，调用将被挂起以提高性能和电池寿命。另一个定时器setInterval也有一些累积效应。如果执行栈被阻塞的时间足够长以至于队列中已经有多个setInterval任务，那么执行时间会比开发者预期的结果低很多；部分浏览器（如Safari等）在滚动过程中执行JS，容易造成卡顿和未知错误；setInterval会在浏览器最小化时继续执行，但是对应的任务会等到浏览器恢复后瞬间全部执行；requestIdleCallback(实验中)thisFunction部分浏览器还在开发中，请参考浏览器兼容性表，获取适合不同浏览器的前缀。由于与该功能对应的标准文档可能会被修改，因此该功能的语法和行为可能会在未来版本的浏览器中发生变化。/***排队一个在浏览器空闲期间调用的函数*@paramcallback*@paramoptions*/window.requestIdleCallback(callback[,options])描述回调函数，当事件循环空闲时将被调用引用。该函数会接收一个名为IdleDeadline的参数，该参数可以获取当前空闲时间以及超时前回调是否已经执行。options（可选）timeout：如果超时被指定并且有一个正值，并且回调没有被调用，超时以毫秒为单位，回调将在下一个空闲期强制执行，尽管这很可能会对性能产生负面影响。React实现了一套类似的时间片渲染机制。抽象Web开发使用此API协作安排后台任务，以便它们不会压倒共享相同周期阶段的其他高优先级任务，例如输入处理、动画和帧合成。延迟。用户代理可以根据其对当前计划任务、垂直同步（vsync？）延迟、用户交互等延迟或闪烁（jank？）的了解，更好地确定何时适合运行后台任务。因此，使用此API可以更适当地在浏览器空闲时安排后台任务。空闲期是在给定帧内完成输入处理、渲染和合成之后。用户代理的主线程通常是空闲的，直到下一帧开始，另一个等待任务才会有资格参与操作。或者接收用户输入，本规范提供了一种在其他空闲时间通过requestIdleCallbackAPI回调安排执行回调的方法。强制执行用户代理定义的空闲期，这给出了与当前空闲期的结束时间相对应的一致截止日期。这决定了用户代理定义的空闲期如何构成，但它们预计会在浏览器处于空闲期的不活动期间发生。空闲期的一个示例是在将给定帧提交到屏幕和开始处理下一帧之间的动态动画期间图1帧间空闲期的示例在动态动画和屏幕更新期间，这种空闲时间经常发生，但通常很短（即，对于具有60Hzvsync周期的设备，小于16ms）。请注意，Web开发人员应仔细考虑空闲回调期间操作完成的所有工作。一些操作比如promise解析或者触发页面布局，可能会导致后续的任务在空闲期结束后被调度，此时应用程序应该在deadline到期前完成这些额外的工作，让这些操作在下一个框架之前执行最后期限。图2没有挂起的帧更新时的空闲期示例另一个示例是当用户代理处于空闲期但没有屏幕更新发生时。在这种情况下，用户代理可能没有可以绑定空闲期结束的后续任务。为避免在用户输入处理等不可预测的任务中出现用户可察觉的延迟，这些空闲时间的长度应限制在最大50毫秒，并且用户代理可以在完成后安排另一个空闲时间（如果他保持空闲），如图2所示，以便后台工作在较长的空闲时间内继续进行。在空闲期间，用户代理以先进先出的顺序运行回调，直到空闲期间结束或没有更多的空闲回调有资格运行。因此，用户代理不需要在空闲时间内运行当前问题。的所有空闲回调。任何剩余的空闲任务都可以在下一个空闲期间运行。请注意，为开发人员提供最佳性能，鼓励消除不必要的回调（如requestAnimationFrame、setTimeout等），它们不执行有意义的工作，不要让这些回调持续触发并等待事件的响应。相反，根据需要安排它们在事件可用时对其做出反应，此模式提高了整体效率并允许用户代理安排可用于高效执行大量后台工作的长时间空闲时间（最多50毫秒）。因为它还没有标准化，更新细节可以在这里找到
