麻豆黑色丝袜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
主站蜘蛛池模板: 欧美一区二区三区精华液| 欧美妈妈的朋友| 日韩视频中文字幕| 西西人体44rt大胆高清日韩| 中文天堂最新版www| 野花视频在线观看免费观看最新| 精品一区二区三区水蜜桃| 免费观看四虎精品国产永久 | 免费一级做a爰片久久毛片潮喷| 性感女邻居| 日韩免费三级电影| 日本高清二三四本2021第九页| 国产精品亚洲精品日韩电影| 东方美女大战黑人mp4| 美女把腿扒开让男人桶爽国产| 欧美日韩国产高清| 国产高清在线不卡| 亚洲国产成人久久精品app| 伊甸园在线观看国产| 三上悠亚日韩精品一区在线| 国产最新凸凹视频免费| 日本韩国欧美在线观看| 欧美日韩亚洲视频| 草莓视频黄色在线观看| 久久天天躁夜夜躁狠狠85台湾 | 国产视频中文字幕| 男人扒开女人下面狂躁动漫版| 欧美性大战久久久久久久| 成人3d黄动漫无尽视频网站| 国产色秀视频在线观看| 中日韩国语视频在线观看| 护士在办公室里被躁视频| 国产小视频网站| 青青青青青免精品视频| 蜜柚视频影院在线播放| 亚洲欧美国产另类视频| 美国式禁忌免费| 久久精品视频亚洲| 欧美超清videos1080p| 女生张开腿让男生通| 娃娃脸中文字幕1080p|