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

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 版權所有:匯仁智杰

主站蜘蛛池模板: 网带输送机_皮带_滚筒_链板输送机_不锈钢输送链条生产厂家-宁津县鸿昶机械设备有限公司 | 七评-爱美儿信息科技有限公司〖官网〗? | 兰州沙盘模型公司_兰州模型公司_兰州沙盘模型厂家_地形沙盘制作_兰州沙盘模型制作公司 | 在线腐蚀率仪,在线污垢热阻仪,靶式光源仪-北京同德创业科技有限公司 | 水环式真空泵-旋片式真空泵-上海飞鲁泵业科技有限公司 | 上海汽车音响_上海汽车隔音降噪_上海汽车音响改装店_上海音豪 | 乌兰察布市集宁牧田饲料科技有限公司-乌兰察布奶牛饲料|饲料原料加工|精品羊料 | 联系我们果博东方公司福布斯客服电话| 欧洲_西班牙进口_燃木真火壁炉集成服务商_燃木壁炉官方网站.hergom | 康拓威技术(深圳)有限公司|Theia镜头代理商|安讯士AXIS摄像机|安讯士监控系统|博世BOSCH监控|博世会议系统|索尼SONY监控|松下PANASONIC监控|三星韩华SAMSUNG监控|霍尼韦尔Honeywell|海康|大华|华为监控|Theia无畸变镜头|AXIS监控|安讯视摄像机 | 振动筛_直线振动筛_超声波振动筛-新乡市大汉振动机械有限公司 | 塑木地板-木塑地板厂家「云南昆明楚雄曲靖玉溪塑木地板」云南云冶中信塑木新型材料有限公司 | 上海联锐精密机械有限公司-【官网】 | 长沙变频器维修,变频器维修,ABB变频器维修,西门子变频器维修,施耐德变频器维修,伺服驱动器维修,工业机器人维修,20年专业工控电气维修,长沙文铖电气设备有限公司_长沙文铖电气设备有限公司 | 锂电池破碎生产线|大型电池粉碎机|锂电池分离设备|电池破碎打粉设备-河南鑫恒岩重工科技有限公司 | 网站主页 - 河北天成药业股份有限公司 | 联塑管代理,联塑管厂家批发,中财管总代理,康泰管代理,康泰管厂家批发-邯郸市中枢贸易有限公司 | 压力变送器,差压变送器,液位变送器,温度变送器生产厂家价格-西安仕乐克仪表科技有限公司 | 济南手板_山东快速成型-山东嘉瑞杰机械科技有限公司 | 面粉加工设备-面粉加工机械-面粉机组-面粉磨粉机-面粉机成套设备-河南粮院机械制造有限公司 | 橡皮艇_冲锋舟_充气钓鱼船_橡皮艇价格_海威龙橡皮艇生产厂家-首页 | 山东向阳电子科技有限公司-多用户集中式电能表生产厂家,NB物联网水表,刷卡水电表生产厂家,泰安智能水电表价格 | 陕西筱润智能科技有限公司 干部人事智能档案柜 智能密集架 智能档案柜 部队选层文件智能柜 智能枪弹柜 财务智能档案柜 边防武警智能密集架 医院智能档案柜 部队选层文件智能柜智能枪弹柜 学校医院文件柜 企事业单位公检法智能文件柜 生产厂家-筱润智能科技有限公司 RFID射频智能密集架 全自动智能选层档案柜 智能密保柜 枪柜部队营房营具床桌椅办公家具 办公用品档案盒设备货架 全自动智能选层柜生产厂家-筱润智能科技有限公司 | 小程序开发,网站建设,APP开发,商城系统开发,社区团购系统开发,区块链溯源,互联网资质办理-软多信息技术有限公司_河南软多信息技术有限公司 | 尾矿干排_机制砂尾矿干排_带式压滤机|山东森鹏环保科技有限公司 潍坊卓瑞机械有限公司,输送设备,石灰消化设备,餐厨垃圾设备,化机浆设备,污泥脱水 | 小型环境空气质量连续监测系统-烟气排放连续监测仪(碳排放)-青岛明德环保仪器有限公司 | 转炉挡渣机构,转炉滑板挡渣,滑动水口生产厂家-河北瑞华冶金科技有限公司 | 中华收藏网-中藏网-藏品拍卖|字画拍卖|艺术品拍卖|古玩城|收藏资讯|古玩交易|书画定制 | 金属网帘|金属帘|装饰网帘|金属环网|金属幕墙网|金属垂帘|金属扣帘-安平县名图金属丝网制品有限公司 | 智能电磁流量计-超声波流量计-涡街流量计-液体涡轮流量计-大连计测机器有限公司 | 聚氨酯碰头,聚氨酯托辊,聚氨酯地辊/地滚轮/地轮/托绳轮-济宁卓力聚氨酯制品有限公司 | 拉丝模|高晶异形拉丝模|联合拉拔机模具|钼丝拉丝模|金刚石纳米涂层模|焊丝拉丝模|钨钢拉丝模|聚晶拉丝模_河北恩泰利嘉金属制品有限公司 | 万级无菌室-阳性对照室-干细胞实验室-广州沃霖实验室设备有限公司 | 铜排,异型紫棒,紫铜棒,紫铜微孔管,异型黄管,黄铜管,异形紫管,紫铜管,焊接铜管,散热器铜管,电力铜管_河间市通海铜业有限公司 | 宁波刑事辩护律师-建设工程律师-工程款合同律师-喻明辉律师 | 聚焦吉林-城市晚报官方网站| 浙江世杰阀门有限公司 | 驾驶洗地机|手推洗地车|天津洗地机|扫地车|仓库工厂扫地机|工业吸尘器|扫雪机|耐洁思 | 宁夏密集型母线槽厂家-封闭式母线槽-电力工程安装-天地经纬电力 宁波允泰仪器有限公司-硬度计、拉力试验机、盐雾试验箱、影像测量仪、气动量仪 | 全自动烫金机-全自动移印机-全自动丝印机-全自动平面机-东莞联昌实业供应各种丝印机和移印机 | 济宁山银煤矿机械有限公司,钻采工具,防爆电器,凿岩机械,风动工具,矿山机械,建筑机械,支护设备,通风防尘,铁路设备,仪器仪表,大型设备,矿用泵,钎具类,消防类,矿车类,配件区类 |