专业网站建设_企业品牌营销 · 北京汇仁智杰科技有限公司

Web前端知識

首頁 > 免費 > Web前端知識 >

使用rAF(requestAnimationFrame)觸發滾動事件

來源:北京匯仁智杰科技有限公司   時間:2016-05-18   點擊:

  抖動與節流實現的方式都是借助了定時器setTimeout,但是如果頁面只需要兼容高版本瀏覽器或應用在移動端,又或者頁面需要追求高精度的效果,那么可以使用瀏覽器的原生方法rAF(requestAnimationFrame)。
  requestAnimationFrame
  window.requestAnimationFrame() 這個方法是用來在頁面重繪之前,通知瀏覽器調用一個指定的函數。這個方法接受一個函數為參,該函數會在重繪前調用。
  rAF常用于web動畫的制作,用于準確控制頁面的幀刷新渲染,讓動畫效果更加流暢,當然它的作用不僅僅局限于動畫制作,因為同時它也是一個定時器。
  通常來說,rAF被調用的頻率是每秒60次,也就是1000/60,觸發頻率大概是16.7ms。
  簡單而言,使用 requestAnimationFrame 來觸發滾動事件,相當于上面的:
  throttle(func, xx, 16.7) //xx 代表 xx ms內不會重復觸發事件 handler
  簡單的示例如下:
var ticking = false; // rAF 觸發鎖
function onScroll(){
  if(!ticking) {
  requestAnimationFrame(realFunc);
 ticking = true;
  }
}
function realFunc(){
// do something...
  console.log("Success");
  ticking = false;
}
// 滾動事件監聽
window.addEventListener('scroll', onScroll, false);
  上面簡單的使用rAF的例子可以拿到瀏覽器下試一下,大概功能就是在滾動的過程中,保持以16.7ms的頻率觸發事件handler。
  使用requestAnimationFrame優缺點并存,首先我們不得不考慮它的兼容問題,其次因為它只能實現以16.7ms的頻率來觸發,代表它的可調節性十分差。但是相比throttle(func, xx, 16.7),用于更復雜的場景時,rAF可能效果更佳,性能更好。
  總結一下
  防抖動:防抖技術即是可以把多個順序地調用合并成一次,也就是在一定時間內,規定事件被觸發的次數。
  節流函數:只允許一個函數在 X 毫秒內執行一次,只有當上一次函數執行后過了你規定的時間間隔,才能進行下一次該函數的調用。
  rAF:16.7ms觸發一次handler,降低了可控性,但是提升了性能和精確度。
  簡化scroll內的操作
  上面介紹的方法都是如何去優化scroll事件的觸發,避免scroll事件過度消耗資源的。
  但是從本質上而言,我們應該盡量去精簡scroll事件的handler,將一些變量的初始化、不依賴于滾動位置變化的計算等都應當在scroll事件外提前就緒。
  建議如下:
  避免在scroll事件中修改樣式屬性 / 將樣式操作從scroll事件中剝離
6.jpg  輸入事件處理函數,比如scroll/touch事件的處理,都會在requestAnimationFrame之前被調用執行。
  因此,如果你在scroll事件的處理函數中做了修改樣式屬性的操作,那么這些操作會被瀏覽器暫存起來。然后在調用requestAnimationFrame的時候,如果你在一開始做了讀取樣式屬性的操作,那么這將會導致觸發瀏覽器的強制同步布局。

網絡營銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區回龍觀龍冠大廈5層
咨詢:13370157521
業務QQ:373002979
E - mail:sales @ huirenzhijie.com
企業網站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網絡推廣經驗
  • 有網站建站隊伍
  • 有大型網站建設經驗
  • 致力于營銷型網站建設
  • 始終堅持技術和服務同樣重要
查看PC版網站
備案號:京ICP備15021091號-1 版權所有:匯仁智杰

主站蜘蛛池模板: 思为网络_成都百度优化快照排名-成都网站建设优化_成都网页设计_成都SEO公司 | 温州冰顺制冷科技有限公司| 食用油灌装机-油类食用油灌装设备-液体灌装机_青州市惠联灌装机械 | 塞伯罗斯官网|二维码门禁|景区验票主板|扫码门禁|扫码开门厂家 | 铨盛国际供应链-PC增韧剂/硅系增韧剂/耐寒增韧剂/耐化学增韧剂 | 环保除尘设备_燃气/燃油热水锅炉_光氧空气净化器_蒸汽玉米压片机_压片设备_烘干设备-山东金盾节能环保设备有限公司 | 塑胶篮球场施工|塑胶网球场施工|幼儿园塑胶施工|石家庄亚强体育公司 | 义乌供需网-义乌外发加工来料加工,义乌采购信息供求对接平台(yiwugongxu.com) | 泊头市特种油泵阀制造有限公司 - 渣油泵,重油泵,沥青泵,高压齿轮泵,煤焦油泵,导热油泵,三螺杆泵,圆弧齿轮泵,不锈钢齿轮泵, | 辽宁正业集团云顶钢结构有限公司_葫芦岛云顶钢结构_葫芦岛轻钢彩板_葫芦岛钢结构工程 | 箱式电炉,箱式烧结炉,箱式马弗炉,箱式实验炉,高温箱式电阻炉,箱式加热炉,箱式退火炉,箱式真空气氛炉洛阳研博炉业有限公司 | 立式/卧式/暖气/管道泵,管道离心泵选型,管道增压泵型号 - 安平鼎千泵业制造厂 | 玉米加工机械_玉米深加工机械_玉米加工设备--河南工粮机械设备有限公司 | 天天生活网_实用的生活常识网站、有趣的生活点滴小妙招分享 | 猪粪烘干机|小型鸡粪烘干机|猪粪烘干机价格|小型鸡粪烘干机价格 - 河南宏科重工干燥机设备生产厂家 | 消防水电施工,消防水电安装,消防水电施工公司,消防水电改造-亿杰北京消防工程公司 | 噪声治理_噪音治理公司「杭州创雅环境科技」 | 葡萄糖酸钠_食用葡萄糖_精萘-安徽鹏腾实业有限公司 | 松下PLC经销商-松下传感器-放大器-电磁阀-光电开关-金器[东莞均钛]品牌气动元件及工控产品一站式供应商 | 小程序开发,网站建设,APP开发,商城系统开发,社区团购系统开发,区块链溯源,互联网资质办理-软多信息技术有限公司_河南软多信息技术有限公司 | 九江市东鸿气体有限公司| 亚洲一区日韩一区欧美一区a,中文字幕乱妇无码AV在线,欧美日韩免费在线观看,国产精品一区二区三区免费,日韩精品免费一线在线观看,日韩一本在线,国产呦精品一区二区三区下载,国产日韩精品一区二区在线观看,欧美日韩高清一区二区三区,日韩在线免费观看视频,欧美日韩一区在线观看 | 箱包定制_广州箱包厂_双肩电脑背包_双肩旅行包_拉杆箱包_商务公文包_包包批发,深圳爱自由,礼品箱包定制,电话:400-0061-690 | 塑料模具公司,塑料包装桶厂家,PET打包带厂家,缠绕膜厂家-新疆福吉亚工贸有限公司 | 铱金供应-上海钌合金-氯铱酸厂家-上海庞势新材料科技有限公司 | 太阳能路灯-庭院灯-太阳能灯生产厂家-北京日月升太阳能科技公司 太阳能路灯生产厂家-郑州太阳能高杆灯价格-道路照明智能路灯-河南坤德照明 | 厦门海为科技有限公司 - 工业物联网|国产PLC|HMI|SCADA | 深圳市桃子自动化科技有限公司-点胶机_灌胶机_焊锡机_螺丝机_SCARA机器人 | 青岛家政网【家政港】青岛家政保姆网络服务平台!| 配电箱自动生产线-配电箱生产线设备-山东炜桦智能 | 华网,华网资讯,华网头条,华人网络家园 | 上海钧尚电器有限公司 - Faulhaber电机 AMETEK pittman电机 AMETEK ROTRON军用航空风机 Exlar电动缸 MAE电机 MCG电机 CP电动工具 马头工具 AMCI驱动器 直流电机 减速箱 直流伺服电机,无刷电机,直线电机 直流防爆电机 防爆电机 汽车助力转向电机 EPS电机 faulhaber motor faulhaber gearbox NANOTEC电机 ELWOOD电机 PHYTRON电机 EXLAR伺服电动缸 高力矩、高性能直流电机,音圈电机,风机,直流风机,航空风机 | 山东德曼医疗设备集团有限公司 | 康拓威技术(深圳)有限公司|Theia镜头代理商|安讯士AXIS摄像机|安讯士监控系统|博世BOSCH监控|博世会议系统|索尼SONY监控|松下PANASONIC监控|三星韩华SAMSUNG监控|霍尼韦尔Honeywell|海康|大华|华为监控|Theia无畸变镜头|AXIS监控|安讯视摄像机 | 石英砂过滤器_砂滤器_石家庄工泉水处理科技有限公司 | 种植槽系统,移动苗床,多层种植货架,潮汐苗床,物流苗床,潮汐面板,立体旋转育秧床,河北博超温室设备有限公司 | 上海纳美鞋业有限公司 | 江苏苏仪集团有限公司 江苏红光仪表厂有限公司 | 江阴市海顺机械设备制造有限公司 | 兰州沙盘模型公司_兰州模型公司_兰州沙盘模型厂家_地形沙盘制作_兰州沙盘模型制作公司 | 康复支具-医用颈托-辅助固定矫形器-骨折固定带生产厂家-安平县康信医疗器械有限公司 |