SlideShare une entreprise Scribd logo
1  sur  6
requestAnimateFrame初探 ——洪珊珊
使用方法 requestAnimateFrame([callback]) 回调函数的第一个参数timestamp,为当前时间
示例 requestAnimateFrame示例 setInterval /setTimeout示例
据说 多个定时器之间的调度会对性能有轻微的影响 对于一个帧中对DOM的所有操作,只进行一次Layout和Paint 如果发生动画的元素被隐藏了,那么就不再去Paint
兼容性 requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||  window.oRequestAnimationFrame ||     function(callback) { setInterval(callback, 1000 / 60); };
参阅资料 https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame http://www.chromium.org/developers/design-documents/requestanimationframe-implementation http://webstuff.nfshost.com/anim-timing/Overview.html

Contenu connexe

Plus de fangdeng

Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成
fangdeng
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验
fangdeng
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
fangdeng
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
fangdeng
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
fangdeng
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
fangdeng
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
fangdeng
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
fangdeng
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
 
Datalazyload
DatalazyloadDatalazyload
Datalazyload
fangdeng
 
简鲜侠Websocket
简鲜侠Websocket简鲜侠Websocket
简鲜侠Websocket
fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
 
方凳激励体系(试行)
方凳激励体系(试行)方凳激励体系(试行)
方凳激励体系(试行)
fangdeng
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascript
fangdeng
 

Plus de fangdeng (20)

Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
 
Websocket
WebsocketWebsocket
Websocket
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
Datalazyload
DatalazyloadDatalazyload
Datalazyload
 
简鲜侠Websocket
简鲜侠Websocket简鲜侠Websocket
简鲜侠Websocket
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
方凳激励体系(试行)
方凳激励体系(试行)方凳激励体系(试行)
方凳激励体系(试行)
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascript
 

Dernier

10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
PUAXINYEEMoe
 
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
PUAXINYEEMoe
 
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
michaelell902
 

Dernier (9)

10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
 
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdftaibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
 
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
 
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
 
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
 
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade SixMath Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
 
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdftaibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
 
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
 
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
 

Request animateframe初探