开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

requestAnimationFrame的行为很奇怪，图像在屏幕外移动

requestAnimationFrame是一种用于优化动画效果的浏览器API。它的行为可能会让人感到奇怪，特别是当图像在屏幕外移动时。

requestAnimationFrame的作用是在浏览器的下一次重绘之前执行指定的回调函数。它会根据浏览器的刷新率自动调整回调函数的执行时间，以保证动画的流畅性和性能。

当图像在屏幕外移动时，requestAnimationFrame的行为可能会导致一些问题。由于浏览器会自动优化性能，当图像在屏幕外时，浏览器可能会暂停或减少对该图像的渲染，以节省资源。这可能会导致图像在屏幕外移动时出现闪烁或卡顿的情况。

为了解决这个问题，可以采取以下几种方法：

使用硬件加速：通过将图像的CSS属性设置为transform: translateZ(0)或transform: translate3d(0, 0, 0)，可以将图像强制使用硬件加速，从而避免闪烁和卡顿。
预加载图像：在图像移动到屏幕外之前，提前加载图像资源，以确保在需要时能够立即显示。
使用缓存技术：将已经渲染过的图像缓存起来，当图像再次移动到屏幕内时，直接使用缓存的图像，避免重新渲染。
优化动画逻辑：检查动画的代码逻辑，确保没有不必要的计算或重复操作，以提高动画的性能和流畅度。

腾讯云相关产品中，可以使用腾讯云的CDN加速服务来提高图像加载速度和性能。CDN加速服务可以将图像资源缓存到全球分布的节点上，使用户可以更快地获取图像内容。具体产品介绍和链接地址请参考腾讯云CDN加速服务官方文档：https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

深入理解 RequestAnimationFrame

屏幕刷新频率即图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)，对于一般笔记本电脑，这个频率大概是60Hz，可以在桌面上右键 —屏幕分辨率 — 高级设置 — 监视器...刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px，这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动，由于我们人眼的视觉停留效应...，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画。...第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， SetTinterval 未执行，继续等待中； D....第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了3px， SetTinterval 未执行，继续等待中；从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了

1K1 0

requestAnimationFrame & 定时器

屏幕刷新频率：屏幕刷新频率即图像在屏幕上更新的速度，即每秒图像更新的次数，它的单位是赫兹（Hz）。一般笔记本的值是60Hz。这个值受屏幕分辨率、屏幕尺寸、显卡影响。...举个例子：刷新频率为60Hz的屏幕每16.7ms刷新一次，在屏幕刷新前将图像的位置向左移动1px，这样的话，每次屏幕刷新之后的位置都和原来差1px，因此我们就看到图像在动了。...由于人眼的视觉停留效应，当前位置的图像停留在大脑中的印象还没有消失，紧接着图像又移动到下一个位置，因此看到图像是在流畅的移动，这就形成了视觉上的动画。...开始执行并设置图像属性left= 1px; 第16.7ms：屏幕开始刷新，屏幕上的图像向左移动1px; 第20ms： setTimeout开始执行并设置图像属性left= 2px 第30ms： setTimeout...开始执行并设置图像属性left= 3px; 第33.4ms：屏幕开始刷新，屏幕上的图像向左移动3px; ......

1.1K1 0

requestAnimationFrame的使用

为了深入理解 rAF 背后的原理（后文的 rAF 均指的是 requestAnimationFrame），我们首先需要了解一下与之相关的几个概念：屏幕绘制频率即图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数...60Hz 的屏幕每 16.7ms 绘制一次，如果在屏幕每次绘制前，将元素的位置向左移动一个像素，即1px，这样一来，屏幕每次绘制出来的图像位置都比前一个要差1px，你就会看到图像在移动；而由于人眼的视觉停留效应...，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，这样你所看到的效果就是，图像在流畅的移动。...，等待中；第 10 ms：屏幕未绘制，等待中，setTimeout 开始执行并设置元素属性 left=1px；第 16.7 ms：屏幕开始绘制，屏幕上的元素向左移动了 1px， setTimeout...=3px; 第33.4 ms：屏幕开始绘制，屏幕上的元素向左移动了 3px， setTimeout 未执行，继续等待中； … 从上面的绘制过程中可以看出，屏幕没有更新 left=2px 的那一帧画面，元素直接从

9642 0

JavaScript定时器与执行机制详细介绍

JS定时器非常实用，做动画的肯定都用到过，也是最常用的异步模型之一。有时候一些奇奇怪怪的问题，加一个setTimeout(fn, 0)（以下简写setTimeout(0)）就解决了。...不过，如果对定时器本身不熟悉，也会产生一些奇奇怪怪的问题。 setTimeout setTimeout(fn, x)表示延迟x毫秒之后执行fn。...其他常用异步模型 requestAnimationFrame requestAnimationFrame并不是定时器，但和setTimeout很相似，在没有requestAnimationFrame的浏览器一般都是用...requestAnimationFrame跟屏幕刷新同步，大多数屏幕的刷新频率都是60Hz，对应的requestAnimationFrame大概每隔16.7ms触发一次，如果屏幕刷新频率更高，requestAnimationFrame...Promise Promise是很常用的一种异步模型，如果我们想让代码在下一个事件循环执行，可以选择使用setTimeout(0)、setImmediate、requestAnimationFrame(

8401 0

提高JavaScript动画的性能

在本文中，我收集了一些开发技巧，以帮助您解决JavaScript动画的性能问题，并使您更容易实现在web上实现流畅移动的60fps(每秒帧数)目标。...事实上，浏览器创建的每个层都需要内存和管理，这可能会很昂贵。在Nick Salloum的CSS will-change属性介绍中，您可以了解如何使用will-change的细节、它的优点和缺点。...将处理诸如滚动、调整大小、鼠标事件等事件的代码与使用requestAnimationFrame()处理屏幕更新的代码分离开来，是优化动画代码以提高性能的好方法。...7、使用屏幕外的画布进行复杂的绘图操作这个技巧与优化HTML5 Canvas的代码有关。...如果您的框架涉及复杂的绘图操作，那么一个好主意是创建一个屏幕外的画布，您在其中执行所有的绘图操作一次或仅当发生更改时，然后在每个框架上绘制屏幕外的画布。

2K2 0

2020已经过去五分之四了，你确定还不来了解一下JS的rAF?

这也是rAF的最大优势–它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘，从而避免setTimeout通过时间定义动画频率，与屏幕刷新频率不一致导致的丢帧。...(step); } } window.requestAnimationFrame(step); 上述代码的作用在每一次屏幕显示图像的更新中，都将元素向左移动1px，停在200px位置上。...的实现方式「从setTimeout切换到 requestAnimationFrame很容易，因为它们都安排了一个回调。...setTimeout通过设定一个时间间隔来不断的更新屏幕图像，从而完成动图。它的优点是可控性高，可以进行编码式的动画效果实现。...requestAnimationFrame的好处相比于setTimeout的在固定时间后执行对应的动画函数，requestAnimationFrame用于指示浏览器在下一次重新绘制屏幕图像时, 执行其提供的回调函数

1.1K3 0

JavaScript各种定时器总结

这个时候就是使用requestAnimationFrame的时候，首先requestAnimationFrame是不需要传入时间的，他的触发时机是根据当前设备的屏幕刷新率来的，例如：如果屏幕刷新率是60Hz...requestAnimationFrame始终严格按照设备的屏幕刷新频率来设定触发时机的。...但是requestAnimationFrame就不一样了，当页面不是激活状态的情况下，那么该页面的屏幕刷新也会停止，从而requestAnimationFrame也会停止执行。...函数节流：因为requestAnimationFrame是固定以屏幕的刷新频率去触发的，所以不会存在在高频事件中重复触发函数的情况。...否则很容易出现一些不可预料的情况。

5662 0

深度剖析浏览器渲染性能原理，你到底知道多少

使用flexbox替代老的布局模型老的布局模型以相对/绝对/浮动的方式将元素定位到屏幕上。Floxbox 布局模型用流式布局的方式将元素定位到屏幕上。...提升移动或渐变元素的绘制层绘制并非总是在内存中的单层画面里完成的，实际上，浏览器在必要时会将一帧画面绘制成多层画面，然后将这若干层画面合并成一张图片显示到屏幕上。...，这样每当页面发生绘制的时候，屏幕就会闪现绿色的方框。....moving-element { will-change: transform; transform: translateZ(0); } 管理渲染层、避免过多数量的层尽管提升渲染层看起来很诱人...，表现出的行为就是滚动出现延迟或者卡顿。

1.3K2 0

对用户输入事件的处理去抖动

一．Summary 避免使用运行时间过长的输入事件处理函数，它们会阻塞页面的滚动避免在输入事件处理函数中修改样式属性对输入事件处理函数去抖动，存储事件对象的值，然后在requestAnimationFrame...回调函数中修改样式属性二．避免使用运行时间过长的输入事件处理函数在理想情况下，当用户在设备屏幕上触摸了页面上某个位置时，页面的渲染层合并线程将接收到这个触摸事件并作出响应，比如移动页面元素。...事实上，即便你没有在事件处理函数中调用preventDefault()，渲染层合并线程也依然会等待，也就是用户的滚动页面操作被阻塞了，表现出的行为就是滚动出现延迟或者卡顿（帧丢失）。 ?...然后在调用requestAnimationFrame的时候，如果你在一开始做了读取样式属性的操作，那么根据“避免大规模、复杂的布局”中所述，你将会触发浏览器的强制同步布局过程！ ?...这很关键，因为它能使包含复杂计算代码的页面也能快速响应scroll/touch事件！

8692 0

requestAnimationFrame 刨根问底

（事实上，jQuery 目前的默认 animate 行为是使用 setTimeout!） ? 什么是渲染帧? 这得从显示器的刷新频率说起，目前主流的LCD液晶显示器，刷新频率规格大多在60Hz。...60Hz什么概念呢，就是大约每16.66毫秒刷新一次屏幕，叫做一个渲染帧。你现在看到的屏幕，就是用这种高速在不断的做一次又一次的渲染。...现在我们来放慢它的速度，假装它扫描整个屏幕要用10秒，够长了吧~现在再来看刚刚的操作。我们一个动画小球在屏幕左边，接着我们执行了一行代码，它右移了一个像素。...而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时...从图中也看出除了IE外的其他浏览器兼容性还是很不错的，大家也可以看看这篇优雅降级方案： https://github.com/darius/requestAnimationFrame ?

5193 0

前端高性能滚动 scroll 及页面渲染优化

想了想，还是再简单的描述下，我发现每次 review 这些知识点都有新的收获，这次换一张图，以 chrome 为例子，一个 Web 页面的展示，简单来说可以认为经历了以下下几个步骤： ?...Layout：布局，上一步确定了每个 DOM 元素的样式规则，这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大小和位置。...显然，如果当你滚动时，像视差网站(戳我看看)这样有东西在移动时，有可能在多层导致大面积的内容调整，这会导致大量的绘制工作。...使用 rAF（requestAnimationFrame）触发滚动事件上面介绍的抖动与节流实现的方式都是借助了定时器 setTimeout ，但是如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果...但是从本质上而言，我们应该尽量去精简 scroll 事件的 handler ，将一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。

2.5K3 0

移动端滚动研究

移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll...特别是针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等）。...使用rAF（requestAnimationFrame）触发滚动事件如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果，那么可以使用浏览器的原生方法 rAF（requestAnimationFrame...从本质上而言，我们应该尽量去精简 scroll 事件的 handler ，将一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。...滑动过程中尝试使用 pointer-events: none 禁止鼠标事件 pointer-events 是一个 CSS 属性，可以有多个不同的值,大概的意思就是禁止鼠标行为，应用了该属性后，譬如鼠标点击

3.1K2 0

前端开发中web和移动端动画的常见实现方式

setTimeout 定时器通过 setTimout、setInterval 定时器不断更新元素的状态位置等来实现动画，要求画面的更新频率要达到大部分屏幕要求的每秒60次才能让肉眼看到比较流畅的，受不同屏幕和定时器执行时间影响...相比 setTimeout 有两点优势：跟屏幕刷新频率保持一致，不会出现像 setTimeout 丢帧的情况性能更好，运行在后台标签页或者隐藏的 iframe 里时，requestAnimationFrame...gif 动图设计师直接导出 gif 动图，适合一些简单的动画，直接利用 PS 里的动作就可以完成制作，基本没啥前端工作量，简单适配性好不过容易出现颜色失真或者边缘出现锯齿。...图片+位移模拟动画这个其实跟 gif 图类似，只不过把 gif 图的每一帧导出成单独的 png 图片再拼成雪碧图，前端利用 css 的 transition、animation 来做位移模拟实现动画的效果...，跟以前放电影有点类似，把静态的图片在一个固定的视窗内不断移动，让人看着就像动起来了一样。

4472 0

移动H5前端性能优化指南 - 腾讯ISUX

Mobile侧因手机配置原因，除加载外渲染速度也是优化重点 6. 基于第五点，要合理处理代码减少渲染损耗 7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置 8....将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量 PS：按需加载会导致大量重绘，影响渲染性能 a) LazyLoad b) 滚屏加载 c) 通过...但Loading时间过长，会造成用户流失对用户行为分析，可以在当前页加载下一页资源，提升速度 a) 可感知Loading(如进入空间游戏的Loading) b) 不可感知的Loading（如提前加载下一页...） · 压缩图片图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示 PS：过度压缩图片大小影响图片显示效果...a) 使用智图（ http://zhitu.tencent.com/ ） b) 使用其它方式代替图片(1.

2.1K1 1

手势魅力-设置一个触摸菜单

序言本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件...,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的正文从这里开始~ 最终代码实现效果图所示: ?...这取决于用户拖动了多少以及手指在屏幕上的速度你不知道你想知道的关于 - 是超级重要的部分我知道你想要了解移动触摸手势的有趣部分,但是我必须先介绍这一点,因为它会影响到你的代码。...意思是，在与手势相关的代码方面，行为本身应该是默认滚动。...总结对本文进行总结一下,首先这个效果在我们平日的手机应用里,非常的常见,实现这一效果,主要利用的是移动端三大事件touchstart,touchmove,touchend,以及它们的触摸属性,也就是手指在屏幕

1.8K4 0

旋转吧！徽章！

首先，我们至少要保证徽章是可拖动的。那么我们只需要计算屏幕触摸点横向移动的差值（delta X），按比例赋值给徽章饶 Y 轴旋转的角度（欧拉角 y）。 So easy?...此时还基本无需考虑动画的问题。因为手指移动是连续的，旋转就是连续的。...随后从屏幕看向徽章：（徽章的左半部分，且处于靠近屏幕外的位置时，简称为左半外。）...重力范围加速度方向数值左半外加速度向屏幕内 + 左半内加速度向屏幕外 - 右半外加速度向屏幕内 - 右半内加速度向屏幕外 + 同时我们需要做一些细节的处理，比如旋转角度大于 180 的时候...这时没有反馈是不大好的，且较小数值的移动距离和时间，容易出现边界计算的问题。当移动距离和时间小于一定数值时触发，并判断为左侧还是右侧。

4.4K3 1

移动端吸顶fixbar解决方案

需求背景经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。...在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。...问题 position：fixed给移动端带来的问题： IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。...部分低版本Android对支持不好，video poster属性设置的封面图会遮挡fixed元素。 QQ、UC浏览器滚动页面时footer定位错误，会往上偏移，是由于地址栏收起的缘故。...在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

2.9K3 0

APP上做热力图分析，难，但做得到！

那Appsee与我们常见的APP监测分析工具到底有什么区别？除了常规的监测，最吸引我的当然是热图功能和用户行为轨迹录像。...很多朋友可能会说热图也很常见啊，是的，网页端的热图是很常见（不管是电脑端的网站还是WAP站或者H5），基于网页的热图工具是不少，常见的有铂金分析（Ptengine）、Clicktale、Mouseflow...2.User Recordings 用户行为轨迹录像在网站端的热图工具中Clicktale等工具也具有用户行为录像的功能，然而在PC网站端的单个用户行为轨迹录像在数据分析中一直被诟病，因为从统计学的意义来讲...但是在移动端，用户交互行为多样且有些交互动作不易被察觉，这让用户行为轨迹录像有了发挥的余地。...，让你感觉就像在观看用户的操作一样。

2.9K6 1

第146天：移动H5前端性能优化

移动H5前端性能优化一、概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点，首屏加载3秒完成或使用Loading 4....Mobile侧因手机配置原因，除加载外渲染速度也是优化重点 6. 基于第五点，要合理处理代码减少渲染损耗 7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置 8....HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载 · 使用首屏加载首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化 · 按需加载将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载...但Loading时间过长，会造成用户流失对用户行为分析，可以在当前页加载下一页资源，提升速度 a) 可感知Loading(如进入空间游戏的Loading) b) 不可感知的Loading（如提前加载下一页...） · 压缩图片图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示 PS：过度压缩图片大小影响图片显示效果

1.3K4 0

浏览器渲染原理及流程

鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。...先放个熟悉的图~ ? 蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。...提升移动或渐变元素的绘制层绘制并非总是在内存中的单层画面里完成的，实际上，浏览器在必要时会将一帧画面绘制成多层画面，然后将这若干层画面合并成一张图片显示到屏幕上。...管理渲染层、避免过多数量的层尽管提升渲染层看起来很诱人，但不能滥用，因为更多的渲染层意味着更多的额外的内存和管理资源，所以当且仅当需要的时候才为元素创建渲染层。...，表现出的行为就是滚动出现延迟或者卡顿。

4.4K3 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭