文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么硬件加速的CSS动画在主线程中花费了太多的“合成层”时间？

硬件加速的CSS动画在主线程中花费了太多的“合成层”时间的原因是因为合成层的创建和维护需要消耗额外的计算资源和时间。

合成层是浏览器为了提高动画性能而引入的一种技术，它可以将动画元素单独绘制在一个独立的图层上，并利用硬件加速来进行渲染，从而提高动画的流畅度和响应速度。然而，创建和维护合成层需要进行额外的计算和内存操作，因此在某些情况下会导致性能问题。

其中一个可能的原因是合成层的创建过程中涉及到了复杂的计算和图层重排操作。当一个元素被标记为合成层时，浏览器需要计算该元素的位置、大小、透明度等属性，并将其绘制到一个独立的图层上。这个过程可能会消耗较多的计算资源和时间，特别是在动画元素较多或复杂的情况下。

另一个可能的原因是合成层的维护过程中涉及到了图层的合并和重绘操作。当多个合成层的元素需要在同一帧中进行渲染时，浏览器需要将这些图层合并成一个，并进行最终的绘制。这个过程可能会涉及到图层的重排和重绘操作，而这些操作通常比较耗时。

为了解决硬件加速的CSS动画在主线程中花费太多合成层时间的问题，可以考虑以下几点优化策略：

  1. 减少合成层的创建：避免过度使用合成层，只对需要进行动画的元素进行标记，减少不必要的计算和内存消耗。
  2. 合并合成层：将多个需要同时进行动画的元素放在同一个合成层中，减少合并和重绘操作的次数。
  3. 使用硬件加速的属性：只对需要进行动画的属性使用硬件加速，如transform和opacity等，避免对其他属性进行不必要的合成层操作。
  4. 减少图层重排和重绘：避免频繁改变元素的位置和大小，尽量使用transform属性进行动画变换，减少对布局的影响。
  5. 使用动画性能优化工具：可以使用一些性能优化工具来分析和优化动画性能，如Chrome DevTools中的Performance面板和Layers面板。

腾讯云相关产品和产品介绍链接地址：

  • 腾讯云CDN：https://cloud.tencent.com/product/cdn
  • 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
  • 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
  • 腾讯云音视频处理：https://cloud.tencent.com/product/mps
  • 腾讯云人工智能：https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发：https://cloud.tencent.com/product/mobile
  • 腾讯云对象存储COS：https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
  • 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关搜索:文本写html网页转html伪类 html吴超linux腾讯云linux完爆linux王浩linux韦 linux武汉linux文件对比c语言
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

CSS动画与GPU

Acceleration） 硬件加速在CSS动画上是指GPU合成（GPU compositing），浏览器不直接通过CPU生成图像数据显示出来，而是把相关层数据发送给GPU，而GPU在图像数据运算方面有天生优势...当然会，因为GPU能快速地进行亚像素级图层合成 但是这样做的前提是能够按照动的，不动的划分出前景背景层，如果动画元素或者受布局影响，或者动的过程中影响到了布局，就会打破前景背景的界限，这样简单分为2层就有问题...，如果复合层太多太大，内存会被迅速消耗，然后掉帧（卡顿、闪烁）现象，甚至浏览器/应用崩溃也就很合理了 P.S.详细见CSS3硬件加速也有坑！！！...还有很多，详细见CompositingReasons.h中定义的常量，分为几类： 这些大多是我们期望的，算是显式创建的复合层，而另一些情况也会创建复合层： 位于复合层之上的元素会被创建复合层（B的z-index...大于A，对A做动画，B也会被塞进独立的复合层） 很容易理解，A在动画过程中可能会与B产生重叠，被B遮住，那么GPU需要每帧对A图层做动画，然后再与B图层合成，才能得到正确结果，所以B无论如何都要被塞进复合层

2.4K30

    • CSS动画的性能优化

    众所周知，Chrome的特性之一是多进程，这样任何一个页面崩溃也不会影响到其他页面。每个页面标签都有一个独立的Render进程。Render进程中包含了主线程和合成线程。...主线程负责： Javascript的执行 CSS样式计算 计算Layout 将页面元素绘制成位图（paint） 发送位图给合成线程 合成线程则主要负责： 将位图发送给GPU 计算页面的可见部分和即将可见部分...那么所谓的translate3d硬件加速到底做了什么事情呢？在Chrome中当某个DOM元素开启硬件加速之后，浏览器会为此元素单独创建一个“层”。...上面已经说道主线程经常是满负荷运作的，所以首先我们需要做的是给主线程减负。尽量把工作移动到合成线程（GPU）去完成。layout和paint操作都在主线程中完成，故我们需要减少动画中这两种操作。...连接CPU和GPU之间的带宽是有限的，如果一次更新的层太多，则很容易就达到GPU的瓶颈，影响到动画的流畅度。所以我们需要控制层的数量和层paint的次数。

    1.7K20

    「一道面试题」输入URL到渲染全面梳理中-页面渲染篇

    异步http请求线程 渲染进程的各个线程之间关系及配合 之前写的一篇帖子 「硬核JS」一次搞懂JS运行机制 - 传送门 里有介绍到，下面我们还是重新来一遍吧，花不了多长时间，全当复习一遍，大家也可以自行去看下来了解了解...） 网页也有三种渲染方式 软件渲染（CPU内存） 使用软件绘图的合成化渲染（GPU内存）CSS3D、WebGL 硬件加速的合成化渲染（GPU内存） 当然，这些我们也不需要深入理解，知道它们的存在即可 软件渲染技术...GPU中，各个复合图层是单独绘制的，所以也互不影响，通过 硬件加速 的方式，会声明一个 新的复合图层 ，它会单独分配资源，当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响 默认复合层...到了这里，大家可能有些迷惑，我们不是常说 absolute 是脱离文档流吗，为什么上面复合图层或者说硬件加速中没有 absolute 呢 其实，absolute 虽然可以脱离普通文档流，但是无法脱离默认复合层...所以 absolute 中信息改变，仍会影响整个复合层的绘制，浏览器还是会重绘它，如果复合层中内容多，absolute 带来的绘制信息变化过大，资源消耗也非常严重 而我们上面说的硬件加速，那直接就是在另一个复合层了

    77320

    从浏览器渲染层面解析css3动效优化原理

    引言— 在h5开发中，我们经常会需要实现一些动效来让页面视觉效果更好，谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作，可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让...DOM脱离文档流，减少页面的重排(relayout) 使用CSS3 3D属性开启硬件加速 那么，CSS3与动效优化有什么关系呢，本文将从浏览器渲染层面讲述CSS3的动效优化原理 浏览器页面展示过程— 首页...Context 会负责将位图作为纹理上传到GPU中，再由GPU进行合成渲染。...相关信息可查看：css Triggers[1] 总结 提升为合成层简单说来有以下几点好处： 合成层的位图，会交由 GPU 合成，比 CPU 处理要快 当需要 repaint 时，只需要 repaint...本身，不会影响到其他的层 对于 transform 和 opacity 效果，部分浏览器不会触发 Layout 和 Paint， 相关信息可查看：css Triggers[1] 缺点： 创建一个新的合成层并不是免费的

    59520

    盒子端 CSS 动画性能提升研究

    经过对比，在盒子端 CSS 动画的性能要优于 Javascript 动画，而在 CSS 动画里，使用 GPU 硬件加速的动画性能要优于不使用硬件加速的性能。...原理是，正常而言 requestAnimationFrame 这个方法在一秒内会执行 60 次，也就是不掉帧的情况下。假设动画在时间 A 开始执行，在时间 B 结束，耗时 x ms。...在特定方式下可以触发生成一个合成层，合成层拥有单独的 GraphicsLayer。...从目前来说，满足以下任意情况便会创建层： 硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层） 硬件加速的插件，比如 flash 等等 使用加速视频解码的 元素 3D...而我们希望需要硬件加速的 .swiper 保持在最上方，每次动画过程中只会独立重绘这部分的区域。

    2.2K130

    【前端性能】Web 动画帧率（FPS）计算

    其中，主线程主要负责： Javascript 的计算与执行 CSS 样式计算 Layout 计算 将页面元素绘制成位图（paint），也就是光栅化（Raster） 将位图给合成线程 合成线程则主要负责：...JS 动画与 CSS 动画的细微区别 对于 JS 动画而言，它们运行时的帧率即是主线程和合成线程加起来消耗的时间。...对于流畅动画而言，我们希望它们每一帧的耗时保持在 16.67ms 之内; 而对于 CSS 动画而言，由于其流程不受主线程的影响，所以希望能得到合成线程的消耗的时间，而合成线程的绘制频率也反映了滚动和...Frame Timing API 示意 好的，终于可以回归正题，借助 Web Performance Timing API 中的 Frame Timing API，可以轻松的拿到每一帧中，主线程以及合成线程的时间...值得注意的是，这个方法计算的结果和真实的帧率肯定是存在误差的，因为它是将每两次主线程执行 javascript 的时间间隔当成一帧，而非上面说的主线程加合成线程所消耗的时间为一帧。

    1.6K90

    盒子端 CSS 动画性能提升研究

    经过对比，在盒子端 CSS 动画的性能要优于 Javascript 动画，而在 CSS 动画里，使用 GPU 硬件加速的动画性能要优于不使用硬件加速的性能。...假设动画在时间 A 开始执行，在时间 B 结束，耗时 x ms。而中间 requestAnimationFrame 一共执行了 n 次，则此段动画的帧率大致为：n / (B - A)。...它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个表面（通常称为层）上完成的。 合成。...简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层，合成层拥有单独的 GraphicsLayer。...从目前来说，满足以下任意情况便会创建层： 硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层） 硬件加速的插件，比如 flash 等等 使用加速视频解码的  元素 3D

    85160

    抖音三面：硬件加速中的“层”和层叠上下文中的“层”，是一个东西吗？

    这篇文章是关于浏览器渲染中“分层”与硬件加速的，我会讲清 : 什么是硬件加速？ 合成层的“层”与层叠上下文的“层”是一个东西吗？ 层爆炸、层压缩是什么？ 都说要减少回流、重绘，怎样利用硬件加速做到？...或者说，浏览器为什么要分层呢？答案是硬件加速。听起来很厉害，其实不过是给HTML元素加上某些CSS属性，比如3D变换，将其提升成一个合成层，独立渲染。...之所以叫硬件加速，就是因为合成层会交给GPU（显卡）去处理，在硬件层面上开外挂，比在主线程（CPU）上效率更高，。...就像在ipad上画画一样，画手都是在不同的图层绘制线稿、上色，这样才方便后期修改，不至于牵一发而动全身。提升成合成层的元素发生回流、重绘都只影响这一层，渲染效率得到提升。...对于前端来说，就是使用特定的CSS属性，把元素提升成合成层，交给GPU处理； 合成层中的“层”可以被认为是真正物理上的层，浏览器把它独立出来，单独拿给GPU处理，而层叠上下文的“层”则是指渲染层，更像是一个概念上的层

    81020

    【前端性能】Web 动画帧率（FPS）计算

    其中，主线程主要负责： Javascript 的计算与执行 CSS 样式计算 Layout 计算 将页面元素绘制成位图（paint），也就是光栅化（Raster） 将位图给合成线程 合成线程则主要负责：...JS 动画与 CSS 动画的细微区别 对于 JS 动画而言，它们运行时的帧率即是主线程和合成线程加起来消耗的时间。...对于流畅动画而言，我们希望它们每一帧的耗时保持在 16.67ms 之内; 而对于 CSS 动画而言，由于其流程不受主线程的影响，所以希望能得到合成线程的消耗的时间，而合成线程的绘制频率也反映了滚动和...Frame Timing API 示意 好的，终于可以回归正题，借助 Web Performance Timing API 中的 Frame Timing API，可以轻松的拿到每一帧中，主线程以及合成线程的时间...值得注意的是，这个方法计算的结果和真实的帧率肯定是存在误差的，因为它是将每两次主线程执行 javascript 的时间间隔当成一帧，而非上面说的主线程加合成线程所消耗的时间为一帧。

    2.8K31

    进阶|你的css经不住这层考验，就是失败...

    假设动画在时间 A 开始执行，在时间 B 结束，耗时 x ms。而中间 requestAnimationFrame 一共执行了 n 次，则此段动画的帧率大致为：n / (B - A)。...而每一帧，如果有必要，我们能控制的部分，也是像素至屏幕管道中的关键步骤如下： 完整的像素管道 JS / CSS > 样式 > 布局 > 绘制 > 合成： 1.JavaScript。...简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层，合成层拥有单独的GraphicsLayer。...那么一个元素什么时候会触发创建一个 Graphics Layer 层？从目前来说，满足以下任意情况便会创建层： 1. 硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层） 2....而我们希望需要硬件加速的 .swiper 保持在最上方，每次动画过程中只会独立重绘这部分的区域。

    65930

    盒子端 CSS 动画性能提升研究

    经过对比，在盒子端 CSS 动画的性能要优于 Javascript 动画，而在 CSS 动画里，使用 GPU 硬件加速的动画性能要优于不使用硬件加速的性能。...假设动画在时间 A 开始执行，在时间 B 结束，耗时 x ms。而中间 requestAnimationFrame 一共执行了 n 次，则此段动画的帧率大致为：n / (B - A)。...它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个表面（通常称为层）上完成的。 合成。...简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层，合成层拥有单独的 GraphicsLayer。...从目前来说，满足以下任意情况便会创建层： 硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层） 硬件加速的插件，比如 flash 等等 使用加速视频解码的  元素 3D

    74660

    从Webkit内部渲染机制出发，谈网站渲染性能优化

    每个进程的内部，都有很多的线程，多线程的主要目的就是为了保持用户界面的高响应度，保证UI线程（Browser进程中的主线程）不会被被其他费事的操作阻碍从而影响了对用户操作的响应。...就像我们平时所说的JS脚本解释执行，都是在独立的线程中的，这也是JS这门编程语言特立独行的地方，它是单线程脚本。...同触发RenderLayer条件相似，满足一定条件或CSS样式的RenderLayer会生成一个合成层： 根节点document，因为所有不会生成合成层的RenderLayer最终都会追溯到它 RenderLayer...↖(^ω^)↗ 不过这时候问题来了，为什么我们已经对RenderObject合成了一次RenderLayer，之后还需要再合成一次Compositing Layer呢，这难道不是多此一举吗？...并且，layout和paint往往占用了大量的时间，所以我们想要提高性能，就必须尽可能减少布局和绘制的时间，最佳的解决方案当然是在重新渲染时触发硬件加速而直接跳过重排和重绘的过程。 8.

    72810

    JavaScript·从浏览器解析 JS 运行机制

    然后，可以通过硬件加速的方式，声明一个新的复合图层，它会单独分配资源，当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘。...可以这么理解：GPU 中，各个复合图层是单独绘制的，所以互不影响。这也是为什么某些场景硬件加速效果一级棒。...将 DOM 元素变成复合图层（硬件加速）的方式有： translate3d、translateZ opacity 属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态...而硬件加速直接就是在另一个复合层了，所以它的信息改变不会影响默认复合层，只影响属于自己的复合层，仅仅是引发最后的合成（输出视图）。 虽然硬件加速看起来那么美妙，但是仍需要谨慎使用。...原因是在 webkit CSS3 中，如果元素添加了硬件加速，并且 index 层级比较低，那么在这个元素的后面其它元素会默认变为复合层渲染，如果处理不当会极大的影响性能。

    87220

    制作60fps的高性能动画

    ---- 这里需要区分一下CPU，GPU的工作： ? CPU工作比较多，还分主线程和合成线程。...主线程主要负责： Javascript 的计算与执行 CSS 样式计算 Layout 计算 将页面元素绘制成位图（paint），也就是光栅化（Raster） 将位图给合成线程 合成线程则主要负责： 将位图...(GraphicsLayer 层)以纹理(texture) 的形式上传给 GPU（GPC和CPU之间带宽） 计算页面的可见部分和即将可见部分（滚动） CSS 动画处理（CSS 动画而言，由于其流程不受主线程的影响...连接CPU和GPU之间的带宽是有限的，如果一次更新的层太多，则很容易就达到GPU的瓶颈，影响到动画的流畅度。所以我们需要控制层的数量和层paint的次数。...控制层的数量可以理解，因为层的创建和更新都会消耗内存。而控制层paint的次数，是为了减少位图更新的次数。每次位图更新，合成线程就需要提交新的位图给GPU。频繁地更新位图也会拖慢GPU的效率。

    2.8K40

    网站性能优化实战（二）

    每个进程的内部，都有很多的线程，多线程的主要目的就是为了保持用户界面的高响应度，保证UI线程（Browser进程中的主线程）不会被被其他费事的操作阻碍从而影响了对用户操作的响应。...在Activity字段中我们可以看到，我们的页面经历了重新计算样式→更新Layer树→绘制→合成合成层的过程，结合我们的Summary版块中的环形图，我们可以大致把页面渲染分为三个阶段： ?...同触发RenderLayer条件相似，满足一定条件或CSS样式的RenderLayer会生成一个合成层： 根节点document，因为所有不会生成合成层的RenderLayer最终都会追溯到它 RenderLayer...↖(^ω^)↗ 不过这时候问题来了，为什么我们已经对RenderObject合成了一次RenderLayer，之后还需要再合成一次Compositing Layer呢，这难道不是多此一举吗？...并且，layout和paint往往占用了大量的时间，所以我们想要提高性能，就必须尽可能减少布局和绘制的时间，最佳的解决方案当然是在重新渲染时触发硬件加速而直接跳过重排和重绘的过程。 8.

    56021

    你所不知道的 CSS 动画技巧与细节

    CodePen Demo -- Css正负旋转相消动画 动画相同，缓动不同 好的，继续下一个小技巧。...简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层，合成层拥有单独的 GraphicsLayer。...需要进行动画的元素包含在这个合成层之下，这样动画的每一帧只需要去重新绘制这个 Graphics Layer 即可，从而达到提升动画性能的目的。...从目前来说，满足以下任意情况便会创建层： 硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层） 硬件加速的插件，比如 flash 等等 使用加速视频解码的 元素 3D 或者 硬件加速的...此时，层级关系才是我们希望看到的，.list 元素没有触发生成 Graphics Layer 。而我们希望需要硬件加速的 .swiper 保持在最上方，每次动画过程中只会独立重绘这部分的区域。

    92831

    每天10个前端小知识 【Day 16】

    面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。 首先，我们先从 CPU 和 GPU 开始了解。...为每个图层生成绘制列表，并将其提交到合成线程。 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。 合成线程发送绘制图块命令DrawQuad给浏览器进程。...复合图层，它会单独分配资源（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘） 某些特殊的渲染层会被提升为复合成层（Compositing Layers），...每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成...常用的硬件加速方法有： 最常用的方式：translate3d、translateZ opacity 属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态） will-change

    15310

    你所不知道的 CSS 动画技巧与细节

    CodePen Demo -- Css正负旋转相消动画 动画相同，缓动不同 好的，继续下一个小技巧。...简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层，合成层拥有单独的 GraphicsLayer。...需要进行动画的元素包含在这个合成层之下，这样动画的每一帧只需要去重新绘制这个 Graphics Layer 即可，从而达到提升动画性能的目的。...从目前来说，满足以下任意情况便会创建层： 硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层） 硬件加速的插件，比如 flash 等等 使用加速视频解码的 元素 3D 或者 硬件加速的...此时，层级关系才是我们希望看到的，.list 元素没有触发生成 Graphics Layer 。而我们希望需要硬件加速的 .swiper 保持在最上方，每次动画过程中只会独立重绘这部分的区域。

    61230
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券