如果JavaScript是多线程的，会带来很多复杂的问题，假如 JavaScript有A和B两个线程，A线程在DOM节点上添加了内容，B线程删除了这个节点，应该是哪个为准呢?...队列中所有的代码都要等到javascript进程空闲之后才能执行，而不管它们是如何添加到队列中的。 ?...结果是，在这个时间点上的定时器代码不会被添加到队列中 使用setTimeout构造轮询能保证每次轮询的间隔。...这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。...requestAnimationFrame 60fps与设备刷新率 目前大多数设备的屏幕刷新率为60次/秒，如果在页面中有一个动画或者渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致
今天，在读javascript异步编程的js事件深入理解部分的时候，了解到了requestAnimationFrame 这个api，在这里记录一下。...一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。...它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。...，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果 特点： 【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来...，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率 【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU
这也是rAF的最大优势–它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘，从而避免setTimeout通过时间定义动画频率，与屏幕刷新频率不一致导致的丢帧。...实际使用示例 「上才艺，E G M,E G M E G M E G M」 我们以在3000毫秒内移动1500px距离的动画为例 setTimeout的实现方式 以下代码通过setTimeout每10毫秒为间隔时间改变一次元素的位置以实现元素的动画效果...request 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成（这点很像虚拟DOM不是~），并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,这样就不会出现过度渲染的问题，保证了流畅的需求以及浏览器的完美渲染...由于在显示刷新间隔之前发生了另一个绘制请求，因此无法绘制每次的第三个绘制（红色箭头指示）。这种透支会导致动画断断续续，「因为每三帧都会丢失」。...「使浏览器画面的重绘和回流与显示器的刷新频率同步」它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘，从而避免setTimeout通过时间定义动画频率，与屏幕刷新频率不一致导致的丢帧。
60Hz 的屏幕每 16.7ms 绘制一次，如果在屏幕每次绘制前，将元素的位置向左移动一个像素，即1px，这样一来，屏幕每次绘制出来的图像位置都比前一个要差1px，你就会看到图像在移动；而由于人眼的视觉停留效应...具体一点讲就是，系统每次绘制之前会主动调用 rAF 中的回调函数，如果系统绘制率是 60Hz，那么回调函数就每16.7ms 被执行一次，如果绘制频率是75Hz，那么这个间隔时间就变成了 1000/75=...它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。...函数节流：在高频率事件(resize,scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，使用 rAF 可保证每个绘制间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销...一个绘制间隔内函数执行多次时没有意义的，因为显示器每16.7ms 绘制一次，多次绘制并不会在屏幕上体现出来。 优雅降级 由于 rAF 目前还存在兼容性问题，而且不同的浏览器还需要带不同的前缀。
主流浏览器的刷新频率是 60HZ，每16.66毫秒刷新一次，js可以操作DOM，GUI渲染界面 所以JS线程和 GUI 渲染线程如果同时执行，会导致混乱，因此，浏览器的这两个线程被设计成互斥的。...requestIdleCallback 的作用是是在浏览器一帧的剩余空闲时间内执行优先度相对较低的任务，它的 FPS 只有 20 同步的调用多次 requestIdleCallback，该方法的回调执行可能会分布在不同的帧上，每执行完一次回调...requestAnimationFrame()已经解决了浏览器不知道 JavaScript 动画何时开始的问题， 以及最佳间隔是多少的问题 requestAnimationFrame 方法会告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画...requestAnimationFrame的基本思想是 让页面重绘的频率和刷新频率保持同步 通过 requestAnimationFrame 调用回调函数引起的页面重绘或回流的时间间隔和显示器的刷新时间间隔相同...，比如被添加或删除。
JavaScript语言就采用这种机制，来解决单线程运行带来的一些问题。 在JavaScript中，任务被分为两种，一种宏任务（MacroTask）也叫Task，一种叫微任务（MicroTask）。...JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。...然后，当执行宏任务时，遇见定时器，那么便给定时器中的内容压入队列中，到下一次的Event Loop执行，接着去执行，微任务 最后，微任务执行完毕，清空执行栈，拿到队列中的下一次Event Loop的内容...1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。...2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
A.append(B)：将B添加到A的末尾 A.prepend(B)：将B添加到A的开头 A.remove()：删除元素A A.empty()：清空元素A的所有儿子 ---- 对类的操作 $A.addClass...requestAnimationFrame(func) 该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。...该函数可以保证每两次调用之间的时间间隔相同，但setTimeout与setInterval不能保证这点。...setTmeout两次调用之间的间隔包含回调函数的执行时间；setInterval只能保证按固定时间间隔将回调函数压入栈中，但具体的执行时间间隔仍然受回调函数的执行时间影响。...常用API： add()：添加元素 has()：返回是否包含某个元素 size：返回元素数量 delete()：删除某个元素 clear()：删除所有元素 1.11.5 localStorage
（2）假如用 JS 实现呢 首先想到的是 setInterval/setTimeout，原理就是利用人眼的视觉残留和电脑屏幕的刷新，让元素以连贯平滑的方式逐步改变位置，最终实现动画的效果。...我们以常用的刷新频率为例，60Hz 意味着屏幕每 1000 / 60 ≈ 16.7ms 刷新一次，所以我们设置 setInterval 的间隔为 16.7ms： const animateDiv = document.querySelector...刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout 只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。...以上两种情况都会导致 setTimeout 的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。 虽然在上述代码中我们将时间间隔设置为 16.7ms，但是还是不能完全避免丢帧的现象。...函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用 requestAnimationFrame 可保证每个刷新间隔内，函数只被执行一次。
函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性...，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。...减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60...但是容易出现卡顿、抖动的现象；原因是：settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；settimeout的固定时间间隔不一定与屏幕刷新间隔时间相同...use strict 是一种 ECMAscript5 添加的（严格模式）运行模式，这种模式使得 Javascript 在更严格的条件下运行。
，每一帧变化都是系统绘制出来的（GPU或者CPU）。...实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame...代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。...DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随显示器的刷新频率（60 Hz或者75 Hz）； 在隐藏或不可见的元素中，将不会进行重绘或回流，这当然就意味着更少的的cpu，...（normal、alternate） DEMO传送门 Canvas 是HTML5新增的元素，作为页面图形绘制的容器，可用于通过使用JavaScript中的脚本来绘制图形。
它的最高绘制频率受限于显示器的刷新频率（而非显卡，大多数是60Hz或者75Hz）。 帧频越高，屏幕上图片闪烁感就越小，稳定性也就越高。人的眼睛不容易察觉75Hz以上刷新频率带来的闪烁感。...实现方式 通常我们在前端实现动画效果的几种主要实现方式如下： JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame...代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。...DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随显示器的刷新频率（60 Hz或者75 Hz）； 在隐藏或不可见的元素中，将不会进行重绘或回流，这当然就意味着更少的的cpu...f=css3_animation Canvas 是HTML5新增的元素，作为页面图形绘制的容器，可用于通过使用JavaScript中的脚本来绘制图形。
刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px，这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动，由于我们人眼的视觉停留效应...刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。...那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，RequestAnimationFrame的步伐跟着系统的刷新步伐走，它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次...函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性...，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。
队列中所有的代码都要等到javascript进程空闲之后才能执行，而不管它们是如何添加到队列中的。...当执行这个定时器代码时，在405ms处又给队列添加了另一个副本。在下一个间隔，即605ms处，第一个定时器代码仍在运行，同时在队列中已经有了一个定时器代码的实例。...结果是，在这个时间点上的定时器代码不会被添加到队列中使用setTimeout构造轮询能保证每次轮询的间隔。...这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。...4. requestAnimationFrame4.1 60fps与设备刷新率目前大多数设备的屏幕刷新率为60次/秒，如果在页面中有一个动画或者渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致
队列中所有的代码都要等到javascript进程空闲之后才能执行，而不管它们是如何添加到队列中的。...这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。...4. requestAnimationFrame 4.1 60fps与设备刷新率 目前大多数设备的屏幕刷新率为60次/秒，如果在页面中有一个动画或者渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致...因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。...，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。
保证 JavaScript 在帧开始时运行的唯一方式是使用 requestAnimationFrame。...这得从显示器的刷新频率说起，目前主流的LCD液晶显示器，刷新频率规格大多在60Hz。 60Hz什么概念呢，就是大约每16.66毫秒刷新一次屏幕，叫做一个渲染帧。...打开我们Chrome的开发者工具，选择JavaScript Profiler就可以看见了（可以用下面的示例代码跑一跑，感受一下） <!...函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性...一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。
举个例子：刷新频率为60Hz的屏幕每16.7ms刷新一次，在屏幕刷新前将图像的位置向左移动1px，这样的话，每次屏幕刷新之后的位置都和原来差1px，因此我们就看到图像在动了。...假设屏幕每个16.7ms更新一次，而setTimeout每10ms设置图像向左移动1px，绘制过程如下： 第0ms: 屏幕刷新，等待中，setTimeout未执行，等待中 第10ms: setTimeout...requestAnimationFrame的步伐跟着系统的刷新步伐，它能保证回调函数在屏幕每次的刷新间隔中只被执行一次，这样就不会丢帧，也不会导致动画卡顿。...函数节流：在高频事件（resize,scroll）中，为防止一个刷新间隔多次函数执行，使用requestAnimationFrame可保证每个刷新间隔，函数只被执行一次，这样既保证了流畅性，又更好的节省了函数执行的开销...多次执行是没有意义的，因为显示器每16.7秒刷新一次，多次绘制并不会在屏幕上体现出来。
这回就知道了，原来它根本就不用手动设置执行间隔时间，而是根据 浏览器屏幕刷新次数 自动调整了,也就是说浏览器屏幕刷新多少次，它就执行多少次。看到这我只想说一句 厉害坏了 。...也就是浏览器刷新一次的时候，执行所有的 requestAnimationFrame ，并且它们的回调参数是一模一样的。...可以看见，每执行一次，数值就会 +1 (() => { const beginBtn = document.querySelector("#begin") let myRef;...小技巧 我们这样就可以把每两次执行的时间间隔传递给外部使用了。...它们的内在运行机制决定了 时间间隔参数 实际上只是指定了把动画代码添加到 浏览器UI线程队列 中以等待执行的时间。
函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性...，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。...减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60...但是容易出现卡顿、抖动的现象；原因是：settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；settimeout的固定时间间隔不一定与屏幕刷新间隔时间相同...LRU 算法实现代码如下:// 一个Map对象在迭代时会根据对象中元素的插入顺序来进行// 新添加的元素会被插入到map的末尾，整个栈倒序查看class LRUCache { constructor
函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性...，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。...减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60...但是容易出现卡顿、抖动的现象；原因是：settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；settimeout的固定时间间隔不一定与屏幕刷新间隔时间相同...它是已有元素上添加类别的，不会产生新的元素。
动画 js动画 css动画 Web动画的本质是元素状态改变造成的样式变更，CSS动画和JS动画的区别并不是由语言来决定的，而是由两者的特点和适用场景来判断的。...CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告 代码冗长。...requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是:1)requestAnimationFrame 会把每一帧中的所有...DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。...2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
领取专属 10元无门槛券
手把手带您无忧上云
