硬件加速下webview切换闪屏_网页渲染性能优化 —— 性能优化下

8a864336b770272534083db9429f3c7f.png

博客 有更多精品文章哟。

Composite 的优化

终于,我们到了像素管道的末尾。对于这一部分的优化策略,我们可以从为什么需要 Composited Layer(Graphics Layer)来入手。这个问题我们在构建 Graphics Layer Tree 的时候,已经说明过,现在简单回顾一下:

  1. 避免不必要的重绘。
  2. 利用硬件加速高效实现某些 UI 特性。

根据 Composited Layer 的这两个特点,可以总结出以下几点优化措施。

使用 transform 和 opacity 属性来实现动画

上文我们说过像素管道的 Layout 和 Paint 部分是可以略过,只进行 Composite 的。实现这种渲染方式的方法很简单,就是使用只会触发 Composite 的 CSS 属性;目前,满足这个条件的 CSS 属性,只有 transform 和 opacity。

712295dc20abc5f7d7440457e0904a85.png

使用 transform 和 opacity 需要注意的是:元素必须是 Composited Layer;如果不是,Paint 还是会照常触发(Layout 要看情况,一般 transform 会触发)。来看一个例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>.div {width: 100px;height: 100px;background-color: #f00;/* will-change: transform; */}</style><title>性能优化</title>
</head><body><div class="div"></div><script>const div = document.querySelector(".div");const run = () => {div.style.transform = "translate(0, 100px)";};setTimeout(run, 2000);</script>
</body>
</html>

我们将使用 transform 来向下位移,开始我们先不把 div 节点提升为 Composited Layer;通过下图可以看到:还是会触发 Layout 和 Paint 的。

78801b80cccc129dceff14a22f346cac.png

这时,把 div 节点提升为 Composited Layer,我们发现 Layout 和 Paint 已经被略过了,符合我们的预期。

84219ec408873af309bb4b38e677bd1a.png

减少绘制的区域

如果不能避免绘制,我们就应该尽可能减少需要重绘的区域。例如,页面顶部有一块固定区域,当页面某个其他区域需要重绘的时候,很可能整块屏幕都要重绘,这时,固定区域也会被波及到。像这种情况,我们就可以把需要重绘或者受到影响的区域提升为 Composited Layer,避免不必要的绘制。

提升成 Composited Layer 的最佳方式是使用 CSS 的 will-change 属性,它的详细说明可以查看 MDN 的文档。

.element {will-change: transform;
}

对于不支持的浏览器,最简单的 hack 方法,莫过于使用 3D 变形来提升为 Composited Layer 了。

.element {transform: translateZ(0);
}

根据上文所讲的例子,我们尝试使用 will-change 属性来让固定区域避免重绘。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>.div {width: 100px;height: 100px;background-color: #f00;}.header {position: fixed;z-index: 9999;width: 100%;height: 50px;background-color: #ff0;/* will-change: transform; */}</style><title>性能优化</title>
</head><body><header class="header">固定区域</header><div class="div">变动区域</div><script>const div = document.querySelector(".div");const run = () => {div.style.opacity = 0.5;};setTimeout(run, 2000);</script>
</body>
</html>

首先,我们来看下没有经过优化的情况;顺带说明查看浏览器一帧绘制详情的过程。

  1. 打开控制台的 Performance 界面。
  2. 点击设置(标记 1),开启绘制分析仪(标记 2)。
  3. 启动 Record(标记 3),获取到想要的信息后,点击 Stop(标记 4), 停止 Record。
  4. 点击这一帧的 Paint(标记 5)查看绘制详情。
  5. 切换到 Paint Profiler 选项卡(标记 6),查看绘制的步骤。

cb1ad283a2da11663c3bd433a3249b06.png

c97b065e1980382b179c5e7e597edc61.png

998014f3cfa0f0ba407ef804fb7e26bc.png

通过上面的图片(标记 7 和标记 8)可以看到,固定区域的确被波及到,并且触发重绘了。我们再对比使用 will-change 属性优化过的情况,发现固定区域没有触发重绘。

c59be7c759b753270e568039b6a87e2b.png

并且,我们也可以通过一帧(标记 1)的布局详情(标记 2),查看固定区域(标记 3)是不是提升成 Composited Layer(标记 4),才避免的不必要绘制。

37bb244c74aa5b705c7092be073b6928.png

合理管理 Composited Layer

提升成 Composited Layer 的确会优化性能;但是,要知道创建一个新的 Composited Layer 必须要额外的内存和管理,这是非常昂贵的代价。所以,在内存资源有限的设备上,Composited Layer 带来的性能提升,很可能远远抵不上创建多个 Composited Layer 的代价。同时,由于每一个 Composited Layer 的位图都需要上传到 GPU;所以,不免需要考虑 CPU 和 GPU 之间的带宽以及用多大内存处理 GPU 纹理的问题。

我们通过 1000 个 div 节点,来对比普通图层与提升成 Composited Layer 之后的内存使用情况。可以发现差距还是比较明显的。

98485c9a86031535c21b798c9736f6f9.png

1f723bb5b5dd43b152cb8b673b2a9f1e.png

最小化提升

通过上文的说明,我们知道 Composited Layer 并不是越多越好。尤其是,千万不要通过下面的代码提升页面的所有元素,这样的资源消耗将是异常恐怖的。

* {/* or transform: translateZ(0) */will-change: transform;
}

最小化提升,就是要尽量降低页面 Composited Layer 的数量。为了做到这一点,我们可以不把像 will-change 这样能够提升节点为 Composited Layer 的属性写在默认状态中。至于这样做的原因,我会在下面讲解。

看这个例子,我们先把 will-change 属性写在默认状态里;然后,再对比去掉这个属性后渲染的情况。

.box {width: 100ox;height: 100px;background-color: #f00;will-change: transform;transition: transform 0.3s;
}
.box:hover {transform: scale(1.5);
}

使用 will-change 属性提升的 Composited Layer:

59a74016ec2cb30d503ff4795c5099a2.png

f0917523b0fde23f3d8a1956a250de26.png

2b1ff104242eb8850640d35797c47877.png

普通图层:

ee790a1f34ed2aaa6ccfe30beda11426.png

310292b713d0d6477e9cc68be4652fab.png

443189d4373b5b7314813da03f34be20.png

我们发现区别仅在于,动画的开始和结束,会触发重绘;而动画运行的时候,删除或使用 will-change 是没有任何分别的。

我们在构建 Graphics Layer Tree 的时候讲到过这样一条理由:

对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition(需要是 active 的 animation 或者 transition,当 animation 或者 transition 效果未开始或结束后,提升的 Composited Layer 会恢复成普通图层)。

这条理由赐予了我们动态提升 Composited Layer 的权利;因此我们应该多利用这一点,来减少不必要的 Composited Layer 的数量。

防止层爆炸

我们在 Graphics Layer Tree 中介绍过层爆炸,它指的是由于重叠而导致的大量额外 Composited Layer 的问题。浏览器的层压缩可以在很大程度上解决这个问题,但是,有很多特殊的情况,会导致 Composited Layer 无法被压缩;这就很可能产生一些不在我们预期中的 Composited Layer,也就是说还是会出现大量额外的 Composited Layer。

在层压缩这一节,我们已经给出了使用层压缩优化的例子,这里就不再重复了。下面再通过解决一个无法被层压缩的例子,来更为深入的了解如何防止层爆炸。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>.animating {width: 300px;height: 30px;line-height: 30px;background-color: #ff0;will-change: transform;transition: transform 3s;}.animating:hover {transform: translateX(100px);}ul {padding: 0;border: 1px solid #000;}.box {position: relative;display: block;width: auto;background-color: #00f;color: #fff;margin: 5px;overflow: hidden;}.inner {position: relative;margin: 5px;}</style><title>性能优化</title>
</head><body><div class="animating">动画</div><ul><li class="box"><p class="inner">提升成合成层</p></li><li class="box"><p class="inner">提升成合成层</p></li><li class="box"><p class="inner">提升成合成层</p></li><li class="box"><p class="inner">提升成合成层</p></li><li class="box"><p class="inner">提升成合成层</p></li></ul>
</body>
</html>

当我们的鼠标移入 .animating 元素的时候,通过查看 Layers 面板,可以很清晰的看到出现的大量 Composited Layer。

12fcabede7356142a2933bc00609a5e0.png

这个例子虽然表面上看起来没有发生重叠;但是,因为在运行动画的时候,很可能与其他元素造成重叠,所以 .animating 元素会假设兄弟元素在一个 Composited Layer 之上。这时,又因为 .box 元素设置了 overflow: hidden; 导致自己与 .animating 元素有了不同的裁剪容器(Clipping Container),所以就出现了层爆炸的现象。

解决这个问题的办法也很简单,就是让 .animating 元素的 z-index 比其他兄弟元素高。因为 Composited Layer 在普通元素之上,所以也就没有必要提升普通元素,修正渲染顺序了。这里我在顺便多说一句,默认情况下 Composited Layer 渲染顺序的优先级是比普通元素高的;但是在普通元素设置 position: relative; 之后,因为层叠上下文,并且在文档流后面的原因,所以会比 Composited Layer 的优先级高。

.animating {position: relative;z-index: 1;...
}

ecea9110f663214e2147519ac0aa6711.png

当然,如果兄弟元素一定要覆盖在 Composited Layer 之上,那我们也可以把 overflow: hidden; 或者 position: relative; 去掉,来优化 Composited Layer 创建的数量或者直接就不创建 Composited Layer。

参考资料

  1. 无线性能优化:Composite
  2. 坚持仅合成器的属性和管理层计数
  3. 简化绘制的复杂度、减小绘制区域
  4. CSS Animation性能优化
  5. 使用CSS3 will-change提高页面滚动、动画等渲染性能
  6. CSS3硬件加速也有坑
  7. 深入理解CSS中的层叠上下文和层叠顺序

总结

本文首先讲了渲染需要构建的一些树,然后通过这些树与像管道各部分的紧密联系,整理了一些优化措施。例如,我们对合成所进行的优化措施,就是通过 Graphics Layer Tree 来入手的。

优化也不能盲目去做,例如,提升普通图层为 Composite Layer 来说,使用不当,反而会造成非常严重的内存消耗。应当善加利用 Google 浏览器的调试控制台,帮助我们更加详尽的了解网页各方面的情况;从而有针对性的优化网页。

文章参考了很多资料,这些资料都在每一节的末尾给出。它们具有非常大的价值,有一些细节,本文可能并没有整理,可以通过查看它们来更为深入的了解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机和网络邻居都不见 了,网上邻居看不到自己和别人电脑怎么办

不少网友都试过&#xff0c;在局域网里面&#xff0c;打开网上邻居&#xff0c;结果里面一台电脑都没有&#xff0c;或者只能看到自己的&#xff0c;看不到其他人的&#xff0c;这是怎么回事呢&#xff1f;学习啦小编在这里教大家如何解决这个问题&#xff0c;希望能帮到大家。…

Python 开发者的 6 个必备库

无论你是正在使用 Python 进行快速开发&#xff0c;还是在为 Python 桌面应用制作原生 UI &#xff0c;或者是在优化现有的 Python 代码&#xff0c;以下这些 Python 项目都是应该使用的。 Python 凭借其易用的特点&#xff0c;已经被工业界和学术界广泛采用。另一方面&#x…

如何在注册表里计算机用户名,可以通过注册表修改电脑的密码 ?怎么做的?

可以通过注册表修改电脑的密码 ?怎么做的?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;可以通过注册表修改电脑的密码 ?怎么做的?不用怎么麻烦的运行输入cmd在这里输入 user 用户名 密…

c++游戏代码大全_还在学少儿编程?不如来玩工厂编程师,免费学编程逻辑的小游戏...

40000游戏爱好者已加入我们&#xff01;每天推荐好玩游戏&#xff01;加入我们&#xff0c;沐沐带你发现好游戏&#xff01;《工厂编程师》游戏小程序好玩吗&#xff1f;《工厂编程师》小游戏怎么玩&#xff1f;只有你想不到&#xff0c;没有我找不到的好游戏&#xff01;「良心…

Istio 1.9 发布——重点改善 Istio 的 Day2 操作

本文译自 Istio 官方博客&#xff0c;原文地址&#xff1a;https://istio.io/latest/news/releases/1.9.x/announcing-1.9/Istio 1.9 版本的重点是改善用户在生产中运行 Istio 的 Day2 操作。在用户体验工作组收集到的反馈意见的基础上&#xff0c;我们希望改善用户的稳定性和整…

Windows漏洞利用开发——利用ROP绕过DEP保护

实验6 Windows漏洞利用开发 6.1实验名称 Windows漏洞利用开发 6.2实验目的 学习windows漏洞利用开发&#xff0c;使用kali linux相关工具对windows内目标程序进行漏洞利用 6.3实验步骤及内容 第三阶段&#xff1a;利用ROP绕过DEP保护 了解DEP保护理解构造ROP链从而绕过DEP…

技术人必备的碎片化时间学习工具

工作、生活节奏超快的今天&#xff0c;想要不断提升自我&#xff0c;碎片化阅读学习是你最佳的选择&#xff0c;如果你有一颗学习的心&#xff0c;那这些学习型的公众号&#xff0c;绝对会让你受益匪浅。 小编为你精选了技术领域几个精品微信订阅号&#xff0c;涵盖了时下最热门…

微型计算机键盘上的shift键 汉语译为,PC计算机键盘上的Shift键称为什么键

满意答案shuzhongle2014.02.25采纳率&#xff1a;56% 等级&#xff1a;12已帮助&#xff1a;7306人朋友&#xff0c;下面是我的答案&#xff0c;希望可以帮得到你!Shift键:上档转换键&#xff0c;也可用于中英文转换。当然Shift键并不仅仅只是这些作用&#xff0c;下面介绍下…

华为的型号命名规则_华为最实惠5G手机来了!畅享Z 5G宣布:5月24日发

5月18日消息&#xff0c;华为宣布畅享系列首款5G手机畅享Z 5G将于5月24日发布。畅享Z系列的到来将使华为在千元市场实现5G覆盖&#xff0c;这也将成为华为价格最低的5G手机系列&#xff0c;值得期待。目前关于畅享Z的细节还很少&#xff0c;有消息称代号为Teller的5G新机隶属于…

程序员又背锅了!虾米音乐代码注释惊现“穷逼vip”

11 月 19 日&#xff0c;在 V2EX 社区的技术版一名网友发布了一篇名为《虾米 mac 客户端发现个好玩的注释》的帖子&#xff0c;文中贴出了阿里巴巴旗下虾米音乐 Mac 版客户端的代码&#xff0c;引发了网友争议。发帖人称&#xff0c;虾米音乐客户端的程序员竟然称一些短期VIP客…

计算机无法安装小丸工具箱,小丸工具箱电脑版

小丸工具箱电脑版是一款可以压制H264AAC视频的图形界面工具&#xff0c;内核是x264、neroaac、mp4box等开源软件。小丸工具箱电脑版能够封装mp4或抽取mp4的音频或视频&#xff0c;压制视频中的音频。它的功能非常丰富&#xff0c;是属于实用的视频压制器!小丸工具箱&#xff0c…

一个简单的dotnet tool

dotnet tool对应的工具&#xff0c;本质上是一个控制台应用&#xff0c;在调用这个应用时&#xff0c;会根据传入的参数&#xff0c;执行应用内部的逻辑。关于dotnet tool命令使用&#xff0c;参照https://docs.microsoft.com/zh-cn/dotnet/core/tools/dotnet-tool-install下面…

内存和显存_【硬件资讯】显存再升级?Nvidia新卡实锤GDDR6X!显存大升级能否带来性能提升??...

新闻1&#xff1a;美光泄密 RTX 3090显卡用上GDDR6X显存&#xff1a;带宽堪比HBM2NVIDIA新一代显卡越来越近了&#xff0c;8月31日就有可能公布重大消息&#xff0c;安培GPU核心的RTX 30系列最快下个月就能买到。首发的第一波肯定是高端卡&#xff0c;除了RTX 3080、RTX 3080 T…

神舟笔记本电源管理软件_笔记本电脑长期不用充不上电了?原来问题就出在这儿...

也许有很多使用笔记本电脑的用户&#xff0c;都会遇到这样一种情况&#xff1a;笔记本电脑长期没有使用&#xff0c;导致电池充不了电的现象。遇到这样一种情况该如何进行解决呢&#xff1f;这确实有点难倒很多用户了&#xff0c;难道电池坏了&#xff0c;需要重新更换新的笔记…

浅析PageRank算法

机器学习很早就对Google的PageRank算法很感兴趣&#xff0c;但一直没有深究&#xff0c;只有个轮廓性的概念。前几天趁团队outing的机会&#xff0c;在动车上看了一些相关的资料&#xff08;PS&#xff1a;在动车上看看书真是一种享受&#xff09;&#xff0c;趁热打铁&#xf…

小学计算机课教学设计,小学信息技术教学设计三篇

【导语】教案是教师为顺利而有效地开展教学活动&#xff0c;根据课程标准&#xff0c;教学大纲和教科书要求及学生的实际情况&#xff0c;以课时或课题为单位&#xff0c;对教学内容、教学步骤、教学方法等进行的具体设计和安排的一种实用性教学文书。无忧考网准备了以下内容&a…

Happy 牛 Year!牛年dotnet云原生技术趋势

首先给大家拜个年&#xff0c;祝大家&#xff1a;新年快乐&#xff0c;牛年大吉&#xff0c;牛转乾坤&#xff0c;一往无前&#xff01;2020年的春节&#xff0c;新冠疫情使得全球业务停滞不前&#xff0c;那时候&#xff0c;没有人知道会发生什么&#xff0c;因此会议被取消&a…

windows传真和扫描由于不能访问您的文档_扫描识别工具Dynamic Web TWAIN全年最低价来了!错过再等一年...

Dynamic Web TWAIN是一个专为Web应用程序设计的TWAIN扫描识别控件。你只需在TWAIN接口写几行代码&#xff0c;就可以用兼容TWAIN的扫描仪扫描文档或从数码相机/采集卡中获取图像。然后用户可以编辑图像并将图像保存为多种格式&#xff0c;用户可保存图像到远程数据库或者ShareP…

程序员新人怎样在复杂代码中找 bug?

我曾经做了两年大型软件的维护工作&#xff0c;那个项目有 10 多年了&#xff0c;大约 3000 万行以上的代码&#xff0c;参与过开发的有数千人&#xff0c;代码 checkout 出来有大约 5 个 GB&#xff0c;而且 bug 特别多&#xff0c;open 的有上千&#xff0c;即使最高优先级的…

谈到云原生, 绕不开容器化

传送门什么是云原生&#xff1f;云原生设计理念.NET微服务Containers现在谈到云原生&#xff0c; 绕不开“容器”。在《Cloud Native Patterns》一书中&#xff0c;作者Cornelia Davis指出&#xff1a;“容器是云原生应用的基石”&#xff1b;云原生基金会将微服务容器化作为云…