flash网站模板免费下载,软件定制网,深圳网站建设罗湖,设计网站需要多少钱文章目录 介绍使用使用rAF前使用rAF后 介绍 在屏幕中#xff0c;浏览器通常都以60FPS#xff08;1/60 s#xff09;每帧更新屏幕#xff0c;但是当前端绑定了一些高频事件#xff0c;如鼠标移动#xff0c;屏幕滚动、触摸滑动等时#xff0c;在一帧的周期内#xff0c;… 文章目录 介绍使用使用rAF前使用rAF后 介绍 在屏幕中浏览器通常都以60FPS1/60 s每帧更新屏幕但是当前端绑定了一些高频事件如鼠标移动屏幕滚动、触摸滑动等时在一帧的周期内事件会多次触发但页面只刷新一次。这种情况就可能导致丢帧现象抑或者回调函数处理时间过长也会导致下一帧的重绘延迟出现卡顿效果。通过requestAnimationFramerAF保证在一帧的周期内函数只触发一次然后渲染就能有效的降低卡顿。 使用 记录一个标志变量判断是否有正在进行的rAM若有停止触发绑定事件否则将标志置为true在rAM周期内执行回调函数执行完成后将标志变量置为false 使用rAF前
!DOCTYPE html
html langenheadmeta charsetUTF-8titlewebgl/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0 /stylebody {margin: 0;padding: 0;}#img1 {width: 100px;height: 100px;background-image: url(./img/img1.jpg);background-repeat: no-repeat;background-size: 100% 100%;}#img2 {width: 100px;height: 100px;background-image: url(./img/img2.jpg);background-repeat: no-repeat;background-size: 100% 100%;}#img3 {width: 100px;height: 100px;background-image: url(./img/img1.jpg);background-repeat: no-repeat;background-size: 100% 100%;}/style
/headbodydiv idmaindiv classimg idimg1 /divdiv classimg idimg2 /divdiv classimg idimg2 /div/divscriptlet imgDiv document.getElementsByClassName(img)let flag false// 重绘操作function rePaint (pos) {for(let i 0; iimgDiv.length; i) {imgDiv[i].style.width (Math.sin(pos/1000) Math.PI / 2) * 100 pximgDiv[i].style.height (Math.sin(pos/1000) Math.PI / 2) * 100 px}}// 高频触发函数, window.addEventListener(pointermove,(e){rePaint(pos) })/script
/body/html
使用rAF后
!DOCTYPE html
html langenheadmeta charsetUTF-8titlewebgl/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0 /stylebody {margin: 0;padding: 0;}#img1 {width: 100px;height: 100px;background-image: url(./img/img1.jpg);background-repeat: no-repeat;background-size: 100% 100%;}#img2 {width: 100px;height: 100px;background-image: url(./img/img2.jpg);background-repeat: no-repeat;background-size: 100% 100%;}#img3 {width: 100px;height: 100px;background-image: url(./img/img1.jpg);background-repeat: no-repeat;background-size: 100% 100%;}/style
/headbodydiv idmaindiv classimg idimg1 /divdiv classimg idimg2 /divdiv classimg idimg2 /div/divscriptlet imgDiv document.getElementsByClassName(img)let flag false// 重绘操作function rePaint (pos) {for(let i 0; iimgDiv.length; i) {imgDiv[i].style.width (Math.sin(pos/1000) Math.PI / 2) * 100 pximgDiv[i].style.height (Math.sin(pos/1000) Math.PI / 2) * 100 px}}// 高频触发函数, window.addEventListener(pointermove,(e){let pos e.clientX;// 判断如果有一个正在进行的rAM停止继续触发否则将flag置为trueif(flag) return;flag true;window.requestAnimationFrame((){// 此帧执行结束后将flag重新置为falserePaint(pos)flag false;}) })/script
/body/html
