21 | UI 优化（下）：如何优化 UI 渲染？
张绍文
该思维导图由 AI 生成，仅供参考
孔子曰：“温故而知新”，在学习如何优化 UI 渲染之前，我们先来回顾一下在“卡顿优化”中学到的知识。关于卡顿优化，我们学习了 4 种本地排查卡顿的工具，以及多种线上监控卡顿、帧率的方法。为什么要回顾卡顿优化呢？那是因为 UI 渲染也会造成卡顿，并且肯定会有同学疑惑卡顿优化和 UI 优化的区别是什么。
在 Android 系统的 VSYNC 信号到达时，如果 UI 线程被某个耗时任务堵塞，长时间无法对 UI 进行渲染，这时就会出现卡顿。但是这种情形并不是我们今天讨论的重点，UI 优化要解决的核心是由于渲染性能本身造成用户感知的卡顿，它可以认为是卡顿优化的一个子集。
从设计师和产品的角度，他们希望应用可以用丰富的图形元素、更炫酷的动画来实现流畅的用户体验。但是 Android 系统很有可能无法及时完成这些复杂的界面渲染操作，这个时候就会出现掉帧。也正因如此我才希望做 UI 优化，因为我们有更高的要求，希望它能达到流畅画面所需要的 60 fps。这里需要说的是，即使 40 fps 用户可能不会感到明显的卡顿，但我们也仍需要去做进一步的优化。
那么接下来我们就来看看，如何让我们的 UI 渲染达到 60 fps？有哪些方法可以帮助我们优化 UI 渲染性能？
UI 渲染测量
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了UI渲染性能优化的重要性以及多种工具和方法，如Profile GPU Rendering、Show GPU Overdraw、Systrace等，以及自动化测试工具gfxinfo和SurfaceFlinger，帮助读者测量UI渲染性能、定位问题并进行优化。此外，还介绍了View创建、measure/layout优化等方面的优化方法，以及异步进行measure和layout的技术。文章还介绍了Facebook的开源库Litho和Google开源的Flutter，分别探讨了它们的优化方法和特点。另外，还提到了Android 5.0增加的RenderThread和RenderScript对UI渲染的优化。总体而言，本文内容全面涵盖了UI渲染性能优化的方方面面，为读者提供了深入的指导和工具支持。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Android 开发高手课》，新⼈⾸单¥59
《Android 开发高手课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(15)
- 最新
- 精选
刘伟老师你好，有个问题想要请教一下 你在这篇文章里面提到了 异步创建 我尝试在子线程调用了如下代码，没按照文中的说法替换子线程 Looper的MessageQueue View v = new View(MainActivity.this); v.invalidate(); v.setLayoutParams(new ViewGroup.MarginLayoutParams(200, 200)); v.setBackgroundColor(Color.RED); 然后在主线程中添加到LinearLayout ！代码正常运行，界面也正常显示。 查看源码之后，检查线程是在ViewRootImpl中做的，而这个方法会在view invalidate 以后调用，我在子线程中调用的时候，因为还没有添加到 LinearLayout 中，所以不会触发ViewRootImpl 中方法的调用。 (翻了一下 5.0 和 8.0 的源码) 那么你在文章中提到的 替换子线程的消息队列作用是什么呢？ 分割线--------------- 但是上面不替换消息队列的情况对WebView 不起作用，子线程创建WebView的时候必须替换。 替换成之后，WebView 可以正常创建的了 然而在主线程中添加到布局容器时候还是提示在非UI线程操作了View. 不知道老师使用这种方法的时候有没有遇到类似的问题。 再割----------------- 关于这个问题在stackoverflow上也有个类似的提问~ https://stackoverflow.com/questions/5284513/constructing-views-in-a-non-ui-thread-and-consuming-in-the-ui-thread作者回复: 如果不替换，是某一些情况会报错
2019-03-0144
Carlo用flutter痛苦啊。还不如开发native app。各种坑。就一个facebook integration就产生了很多bug。作者回复: 随着flutter框架的成熟和各大公司的配套实践方案，后面应该会好很多
2019-03-251
瑞你好，目前应用碰到进入主界面卡顿黑屏现象比较严重，需要怎么定位问题吗，本人已根据排除法去定位相关代码，但是定位到结果存在概率性，需要怎么去定位到真正的问题呢？麻烦帮忙说下处理方案作者回复: 如果本地可以复现，利用卡顿优化中的traceview或者systrace定位是最高效的
2019-02-071- 刘伟开拓眼界~每一个点深入都是一个大领域
作者回复: 对的，由于边幅有限，大家都需要结合课后资料进一步学习
2019-02-19 
哈珀朋友老哥RenderScript说得太简单了，原本以为会针对后端编译器LLVM做分析呢作者回复: 主要受边幅限制，这块大家在课后可以扩展阅读即可
2019-02-072
syz美团关于Litho的一篇文章，推给大家做参考。作为小白觉得看的清晰https://tech.meituan.com/2019/03/14/litho-use-and-principle-analysis.html2019-05-2115
vencialleeAndroid RenderScript 简单高效实现图片的高斯模糊效果的链接被劫持跳到Huang色网站了。。2021-02-0732
EdwdChen请教一下，文中提及 flutter 是使用 skia 来进行渲染的，但是前一篇文章提到 skia 是软件渲染，这是不是意味着 flutter 虽然方便但是 ui 渲染上性能还是没有原声组件好呢？2019-09-0931
程序员小跃存储优化、网络优化、耗电优化到现在的UI优化，深深的把我刺激到了。以前搞的Android都只是为了实现而实现，以后我一定要好好规划规划，把这些优化都用起来。2019-04-301
魏全运怎么没提AsyncInflate 呀？2021-12-13
收起评论