页面渲染合成(补充)

简介: 在上一篇文章老生常谈之从输入URL到页面呈现的过程中描述了页面渲染流程,其中涉及页面的布局(Layout)和绘制(Painting),实际在绘制之后还有一个步骤叫做合成(Compositing)。

在上一篇文章老生常谈之从输入URL到页面呈现的过程中描述了页面渲染流程,其中涉及页面的布局(Layout)和绘制(Painting),实际在绘制之后还有一个步骤叫做合成(Compositing)。


Compositing


在其它大佬的文章中将这一步说的非常清楚,当然还是很难懂,因为比较抽象,平常在工作中完全没有接触。这里我归纳下我的理解。


  1. 在合成前的渲染过程将 DOM 树转化为渲染层

110.png


  1. 合成这步将渲染层合并为合成层,有很多方法会产生新的合成层,这些方法也是常说的 css 硬件加速的方法

  • 3D transforms:translate3d、translateZ 等

  • video、canvas、iframe 等元素

  • 通过 Element.animate() 实现的 opacity 动画转换

  • 通过 СSS 动画实现的 opacity 动画转换

  • position: fixed

  • 具有 will-change 属性

  • 对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition

  1. 合成之后会有不同的合成层,合成层将独立在 GPU 渲染

  2. 在有 GPU 的时候其实渲染都是在 GPU 进行的,但是页面的布局(Layout) 和 绘制(Painting),渲染层计算这些都是在 CPU 进行计算的,会消耗 CPU。

  3. GPU加速的原理是,将元素提升为单独的合成层,在处理合成层动画时,直接在

  4. GPU 进行动画计算渲染,无需再重新走重绘(Repaint)的流程而耗费 CPU,速度也更快更流畅。

  5. 合成层也并不是没有缺点,每个合成层在 GPU 单独渲染都要占用额外内容,过多的

  6. 合成层会导致内存占用过高(层爆炸)

后话

以上内容是在阅读其它大佬博客后总结的,可能会有不少理解错误的地方,欢迎指正。


参考





相关实践学习
在云上部署ChatGLM2-6B大模型(GPU版)
ChatGLM2-6B是由智谱AI及清华KEG实验室于2023年6月发布的中英双语对话开源大模型。通过本实验,可以学习如何配置AIGC开发环境,如何部署ChatGLM2-6B大模型。
相关文章
|
7月前
|
搜索推荐 小程序 数据安全/隐私保护
【01】支付宝支付商户申请下户到配置完整流程-申请支付宝商户账户-提交资料审核-申请+配置完整流程-优雅草卓伊凡
【01】支付宝支付商户申请下户到配置完整流程-申请支付宝商户账户-提交资料审核-申请+配置完整流程-优雅草卓伊凡
646 1
【01】支付宝支付商户申请下户到配置完整流程-申请支付宝商户账户-提交资料审核-申请+配置完整流程-优雅草卓伊凡
|
8月前
|
人工智能 供应链 搜索推荐
如何降低酒店运营成本?管理者不可不知的优化策略
在竞争激烈的酒店行业,提升管理效率、优化服务质量和客户满意度至关重要。本文探讨如何通过精准市场定位、高效运营管理、智能化管理系统及数字化工具,实现精细化管理,提供个性化服务,有效处理客户反馈,以提升酒店竞争力和客户体验。未来,智能化与个性化将成为行业发展的重要趋势。
317 21
|
12月前
|
机器学习/深度学习 算法 Java
通过 Java Vector API 利用 SIMD 的强大功能
通过 Java Vector API 利用 SIMD 的强大功能
509 10
|
Web App开发 JavaScript 前端开发
[译] 深入理解 Node.js 中的 Worker 线程
[译] 深入理解 Node.js 中的 Worker 线程
|
Java 数据库连接 Apache
JavaWeb基础第二章(Maven项目与MyBatis 的快速入门与配置)
JavaWeb基础第二章(Maven项目与MyBatis 的快速入门与配置)
|
Java Nacos 开发者
解决Spring Cloud整合Nacos与Gateway的探险之旅
解决Spring Cloud整合Nacos与Gateway的探险之旅
623 0
|
设计模式 Java
Java源码中经常出现的for (;;) {}:理解无限循环
我们平常都会去阅读Java的源码,经常可以在源码中看到for (;;) {}的结构,本文将带你去理解无限循环。虽然无限循环可以在某些情况下很有用,例如在需要一直监听用户输入或执行某些后台任务的情况下,但它们也可能会导致程序变得不可响应或崩溃。因此,在使用无限循环时需要谨慎,确保有适当的退出条件或逻辑,以避免程序陷入死循环。
316 1
|
关系型数据库 MySQL 数据库
MySQL避免索引失效
MySQL避免索引失效
|
存储 关系型数据库 MySQL
认真学习MySQL中锁机制(一)
认真学习MySQL中锁机制(一)
524 0