久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 幀動(dòng)畫requestAnimationFrame

        幀動(dòng)畫requestAnimationFrame

        來源:千鋒教育
        發(fā)布人:qyf
        時(shí)間: 2022-08-25 16:04:00 1661414640

          requestAnimationFrame

          來看一個(gè)小例子

        <body>

        <div id="box"></div>

        </body>

        <script type="text/javascript">

        var box = document.getElementById("box");

        function run(){

        box.innerHTML = new Date().getTime();

        setTimeout(run, 16);

        }

        setTimeout(run, 16);

        </script>

          這個(gè)例子當(dāng)中, 我們通過setTimeout讓run函數(shù)每秒執(zhí)行60次.

          想要按照瀏覽器的刷新頻率來執(zhí)行函數(shù), 其實(shí)不需要這么麻煩.

          另外, 如果瀏覽器的刷新頻率不是60, 甚至低于60, 那么我們的動(dòng)畫就可能出現(xiàn)掉幀情況.

          啥叫掉幀?

        圖片1

          一般情況下, 瀏覽器的幀率跟屏幕幀率一致, 基本都是60, 也就是16ms左右會(huì)刷新一次

          如果, 你的定時(shí)器時(shí)間過短, 就會(huì)出現(xiàn)上圖的現(xiàn)象.

          在瀏覽器兩次刷新畫面中間, 定時(shí)器函數(shù)執(zhí)行了2次

          而這2次操作都是在內(nèi)存完成的動(dòng)作, 瀏覽器只有刷新才能看到效果

          也就是說, 用戶本該看到的兩幀畫面, 丟了一幀.

          畫面會(huì)顯得不流暢, 甚至一定程度上出現(xiàn) "卡頓"

          這就是俗稱的掉幀現(xiàn)象.

          解決這個(gè)問題, 直觀的辦法就是把延遲時(shí)間寫的長(zhǎng)一點(diǎn).

          這里我們引入更簡(jiǎn)單的方法

        <body>

        <div id="box"></div>

        </body>

        <script type="text/javascript">

        var box = document.getElementById("box");

        function run(){

        box.innerHTML = new Date().getTime();

        requestAnimationFrame(run);

        }

        requestAnimationFrame(run);

        </script>

          requestAnimationFrame 類似于 setTimeout, 只不過它不需要設(shè)定延遲時(shí)間

          時(shí)間會(huì)根據(jù)瀏覽器的幀率自動(dòng)調(diào)節(jié). 也就是在瀏覽器下一次刷新前調(diào)用這個(gè)函數(shù)

        圖片2

          每次刷新前, 調(diào)用1次函數(shù), 確保函數(shù)的執(zhí)行頻率跟刷新頻率一致.

          由于是每一幀畫面執(zhí)行1次函數(shù), 因此requestAnimationFrame又叫 "幀動(dòng)畫" 函數(shù),它會(huì)帶來兩個(gè)好處:

          1. 避免了計(jì)算 1000/60 ≈ 16, 瀏覽器會(huì)自動(dòng)處理

          2. 當(dāng)標(biāo)簽頁(yè)運(yùn)行在后臺(tái)的時(shí)候, 它會(huì)自動(dòng)暫停運(yùn)行以節(jié)省CPU資源

          經(jīng)過我的實(shí)際測(cè)試, chrome\firefox\360\ie11, 幀率都是60

          也就是說, 除非你把延遲時(shí)間 設(shè)定的 小于 16, 才有可能在理論上出現(xiàn)掉幀

          又由于setTimeout是異步任務(wù), 所以實(shí)際當(dāng)中的時(shí)間間隔往往是大于實(shí)際值的

          因此, 掉幀的情況是很難發(fā)生的.

          所以, requestAnimationFrame方法的主要好處來源于第2條.

          更多關(guān)于web前端培訓(xùn)的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        軟件開發(fā)管理流程中會(huì)出現(xiàn)哪些問題?

        一、需求不清需求不明確是導(dǎo)致項(xiàng)目失敗的主要原因之一。如果需求沒有清晰定義,開發(fā)人員可能會(huì)開發(fā)出不符合用戶期望的產(chǎn)品。二、通信不足溝通問...詳情>>

        2023-10-14 13:43:21
        軟件定制開發(fā)中的敏捷開發(fā)是什么?

        軟件定制開發(fā)中的敏捷開發(fā)是什么軟件定制開發(fā)中的敏捷開發(fā),從宏觀上看,是一個(gè)高度關(guān)注人員交互,持續(xù)開發(fā)與交付,接受需求變更并適應(yīng)環(huán)境變化...詳情>>

        2023-10-14 13:24:57
        什么是PlatformIo?

        PlatformIO是什么PlatformIO是一個(gè)全面的物聯(lián)網(wǎng)開發(fā)平臺(tái),它為眾多硬件平臺(tái)和開發(fā)環(huán)境提供了統(tǒng)一的工作流程,有效簡(jiǎn)化了開發(fā)過程,并能兼容各種...詳情>>

        2023-10-14 12:55:06
        云快照與自動(dòng)備份有什么區(qū)別?

        1、定義和目標(biāo)不同云快照的主要目標(biāo)是提供一種快速恢復(fù)數(shù)據(jù)的方法,它只記錄在快照時(shí)間點(diǎn)后的數(shù)據(jù)變化,而不是所有的數(shù)據(jù)。自動(dòng)備份的主要目標(biāo)...詳情>>

        2023-10-14 12:48:59
        服務(wù)器為什么要用Linux?

        服務(wù)器為什么要用Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,Linux在眾多選擇中脫穎而出。Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,有其獨(dú)特的優(yōu)勢(shì)和特點(diǎn)。包括其...詳情>>

        2023-10-14 12:34:11
        快速通道
        出国| 香河县| 射阳县| 盘锦市| 峨眉山市| 宁德市| 泾源县| 定西市| 佛坪县| 上饶县| 嫩江县| 武威市| 页游| 日喀则市| 腾冲县| 时尚| 营山县| 华坪县| 浦北县| 鹤山市| 南岸区| 巴林右旗| 南川市| 公主岭市| 雷波县| 达尔| 满洲里市| 灵石县| 临清市| 喀喇沁旗| 鹤岗市| 岳阳县| 铁岭市| 苏州市| 桐庐县| 桓台县| 资中县| 沅陵县| 乐清市| 黄平县| 宜宾县|