RequestAnimationFrameの出現の前に、一般的にSetimeOutとSetIntervalを使用しているのに、HTML5は新しいRequestAnimationFrameを追加するのですか？
利点と特性：1）RequestAnimationFrameは、各フレームのすべてのDOM操作を集中し、1回の書き換えまたは返品で完了し、再塗装またはリターンの時間間隔は、ブラウザの更新頻度を厳守しています。
2）非表示または目に見えない要素では、RequestAnimationFrameは再ドローまたはリターンを行いません。つまり、CPU、GPU、およびメモリ使用量が少ないことを意味します。
3）RequestAnimationFrameは、アニメーション専用にブラウザによって提供されるAPIです。ブラウザはメソッド呼び出しを自動的に最適化し、ページがアクティブ化されていない場合、アニメーションはCPUの費用を自動的に一時停止し、効果的に節約します。
一言で言えば、このようなものは高く、立ち往生していません。フレームレートは、さまざまなブラウザーに従って自動的に調整されます。あなたが理解していないか理解していないなら、それは問題ではありません。最初にそれを使用することを学びましょう！
RequestAnimationFrameの使用方法は？
使用方法は、タイマーのsettimeoutに似ています。
var timer = requestanimationframe（function（）{console.log（ 'タイマーコード'）;}）;}）;パラメーターはコールバック関数であり、戻り値は整数であり、タイマーの数を表すために使用されます。
< UAA -COMPATIBLE CONTERT = IE = EDGE> <Title> Document </title> <script> window.onload（）{var ainput = document.queeryselectollll（input）、timer = null; （）{Timer = RequestAnimationFrame（function say（）{console.log（1）; timer = requestanimationframe（fay）;};}; ainput [1] .onclick = function（）{can clanimationframe（timer）;}}} < /script> </head> <body> <入力タイプ=ボタン値= open> <入力タイプ=ボタン値=クローズ> </body> </html>CancelAnimationFrameは、タイマーの電源を切るために使用されます
この方法は互換性がある必要があります。
簡単な互換性：
window.requestanimframe =（function（）{return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimation || function（callback）{window.settimeout（callback、1000 /60）;};}）;ブラウザがAnimationFrameがわからない場合は、SettimeOutの互換性を使用してください。
3つの異なるタイマー（SettimeOut、SetInterval、RequestAnimationFrame）を使用して、進行状況バーの読み込みを実現します
1。SETINTERVALメソッド： < UAA -Compatibleコンテンツ= Edge> <title> div {height：40px; 30px /40px 'Microsoft yahei';} < /style> <script> windol.onload = function（）{var obtn = document.queryselector（input）、obox = document.queryselec tor（div）、timer = null、curwidth = 0、getStyle = function（obj、name、value）{if（obj.currentstyle）{return obj.currenttenle [name];} else {retcomputedStyle（obj、obj、false）[name];}}; OnClick = function（）{Timer）; 1000）{obox.width = obox.offsetwidth + 'px'; <p> <入力タイプ=ボタン値= go> </p> </body> </html>第二に、setimeoutメソッド<script> window.onload = function（）{var obtn = document.queryselector（input）、obox = document.queryselector（div）、timer = null、getsty le = function（obj、name、value）{if（obj。 currenstyle）{currentStyle [name];} ; Timer = setimeout（function go（）{curwidth = parseint（getStyle（obox、 'width'））; if（curwidth <1000）{obox。style.width= obox.offset + 10 + 'px'; obox。 inerhtml = parseint（getStyle（obox、 'width'）） /10 + '％'（go、1000 /60）;}スクリプト> 3。RequestAnimationFrameメソッド< UAA -Compatibleコンテンツ= Edge> <title> div {height：40px; 30px /40px 'Microsoft yahei';} < /style> <script> windol.onload = function（）{var obtn = document.queryselector（input）、obox = document.queryselec tor（div）、timer = null、curwidth = 0、getStyle = function（obj、name、value）{if（obj.currentstyle）{return obj.currenttenle [name];} else {retcomputedStyle（obj、obj、false）[name];}}; OnClick = cancelAnimationFrame（タイマー）= '0'） .OffsetWidth + 10 + 'px';} else {cancelAnimationFrame（Timer）;}}}} </script> </head> <body> 0％</div> <p > <入力タイプ=ボタン値= go> </p> </body> </html>