麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 幀動畫requestAnimationFrame

幀動畫requestAnimationFrame

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

  requestAnimationFrame

  來看一個小例子

<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>

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

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

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

  啥叫掉幀?

圖片1

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

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

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

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

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

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

  這就是俗稱的掉幀現(xià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, 只不過它不需要設定延遲時間

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

圖片2

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

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

  1. 避免了計算 1000/60 ≈ 16, 瀏覽器會自動處理

  2. 當標簽頁運行在后臺的時候, 它會自動暫停運行以節(jié)省CPU資源

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

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

  又由于setTimeout是異步任務, 所以實際當中的時間間隔往往是大于實際值的

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

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

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

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

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

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

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

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

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

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

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

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

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

2023-10-14 12:34:11
主站蜘蛛池模板: 一区二区三区午夜| 亚洲欧美中文字幕| 国产影片中文字幕| 污网站视频在线观看| 美妇又紧又嫩又多水好爽| 欧美最猛黑人xxxx黑人猛交黄| 99精品久久久中文字幕| 好大好硬好爽免费视频| 日本三级电影网址| 欧美一级免费观看| 欧美乱大交| 里番acg全彩本子| 乱人伦老妇女东北| 日韩在线视频线视频免费网站| 无遮挡h肉动漫在线观看日本| 久久亚洲伊人中字综合精品| 日韩精品武藤兰视频在线| 久久综合九色综合欧美播| 久re这里只有精品最新地址| 免费看黄网站在线看| 青草国产在线| 蜜桃99| 日韩一卡2卡3卡4卡| 国产成人精品亚洲一区| www.爱情岛论坛| 黑人巨大战冲田杏梨| 小兔子被蛇用两根是什么小说| 久久精品国产99国产精品澳门| 亚洲成a人片在线观看中文| 成人精品一区二区三区中文字幕| 久久国产加勒比精品无码 | 国产乱码精品一区二区三区四川人 | 一区二区三区中文字幕| 羞羞漫画在线成人漫画阅读免费| 国产精品jvid在线观看| 亚洲骚片| 日韩在线一区二区三区免费视频 | 一本岛一区在线观看不卡| 午夜羞羞影院| 亚洲aⅴ男人的天堂在线观看| 岛国片在线免费观看|