webview 渲染机制:硬件加速方式渲染的Android Web
toyiye 2024-09-08 09:57 4 浏览 0 评论
webview 渲染是什么?
webview 渲染是用于展现web页面的控件; webview 可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于 webview 模式进行二次开发的
webview 可以直接使用 html 文件(网络上或本地 assets 中)作布局,可和 JavaScript 交互调用; webview 控件功能虽大,除了具有一般 View 的属性和设置外,还可以对 url 请求、页面加载、渲染、页面交互进行强大的处理
Android WebView作为App UI的一部分,当App UI以硬件加速方式渲染时,它也是以硬件加速方式渲染的; Android WebView的UI来自于网页,是通过Chromium渲染的;Chromium渲染网页UI的机制与Android App渲染UI的机制是不一样的;不过,它们会一起协作完成网页UI的渲染。本文接下来就详细分析Android WebView硬件加速渲染网页UI的过程
Android App在渲染UI一帧的过程中,经历以下三个阶段:
在UI线程中构建一个Display List,这个Display List包含了每一个View的绘制命令
将前面构建的Display List同步给Render Thread
Render Thread对同步得到的Display List进行渲染,也就是使用GPU执行Display List的绘制命令
上述三个阶段如果能够在16ms内完成,那么App的UI给用户的感受就是流畅的; 为了尽量地在16ms内渲染完成App的一帧UI,Android使用了以上方式对App的UI进行渲染
这种渲染机制的好处是UI线程和Render Thread可以并发执行,也就是Render Thread在渲染当前帧的Display List的时候,UI线程可以准备下一帧的Display List; 它们唯一需要同步的地方发生第二阶段;不过,这个阶段是可以很快完成的;因此,UI线程和Render Thread可以认为是并发执行的
Android WebView既然是App UI的一部分,也就是其中的一个View,它的渲染也是按照上述三个阶段进行的,如下所示:
在第一阶段
Android WebView会对Render端的CC Layer Tree进行绘制; 这个CC Layer Tree描述的就是网页的UI,它会通过一个Synchronous Compositor绘制在一个Synchronous Compositor Output Surface上,最终得到一个Compositor Frame;这个Compositor Frame会保存在一个SharedRendererState对象中
在第二阶段
保存在上述SharedRendererState对象中的Compositor Frame会同步给Android WebView会对Browser端的CC Layer Tree
Browser端的CC Layer Tree只有两个节点;一个是根节点,另一个是根节点的子节点,称为一个Delegated Renderer Layer;Render端绘制出来的Compositor Frame就是作为这个Delegated Renderer Layer的输入的
在第三阶段
Android WebView会通过一个Hardware Renderer将Browser端的CC Layer Tree渲染在一个Parent Output Surface上,实际上就是通过GPU命令将Render端绘制出来的UI合成显示在App的UI窗口中
按照以上三个阶段分析Android WebView硬件加速渲染网页UI的过程
App渲染UI的第一阶段,Android WebView的成员函数onDraw会被调用; 从前面Android WebView执行GPU命令的过程分析一文又可以知道,Android WebView在Native层有一个BrowserViewRenderer对象
当Android WebView的成员函数onDraw被调用时,并且App的UI以硬件加速方式渲染时,这个Native层BrowserViewRenderer对象的成员函数OnDrawHardware会被调用,如下所示:
这个函数定义在文件external/chromium_org/android_webview/browser/browser_view_renderer.cc中
BrowserViewRenderer类的成员变量compositor_指向的是一个SynchronousCompositorImpl对象; BrowserViewRenderer对象的成员函数OnDrawHardware会调用这个SynchronousCompositorImpl对象的成员函数DemandDrawHw对网页的UI进行绘制
绘制的结果是得到一个Compositor Frame,这个Compositor Frame会保存在一个DrawGLInput对象中; 这个DrawGLInput对象又会保存在BrowserViewRenderer类的成员变量shared_renderer_state_指向的一个SharedRendererState对象中;这是通过调用SharedRendererState类的成员函数SetDrawGLInput实现的
BrowserViewRenderer类的成员变量client_指向的是一个AwContents对象;BrowserViewRenderer对象的成员函数OnDrawHardware最后会调用这个AwContents对象的成员函数RequestDrawGL请求在参数java_canvas描述的一个Hardware Canvas中增加一个DrawFunctorOp操作;这个DrawFunctorOp操作最终会包含在App的UI线程构建的Display List中
接下来,我们首先分析SynchronousCompositorImpl类的成员函数DemandDrawHw绘制网页的UI的过程,如下所示:
这个函数定义在文件external/chromium_org/content/browser/android/in_process/synchronous_compositor_impl.cc中
SynchronousCompositorImpl类的成员变量output_surface_指向的是一个SynchronousCompositorOutputSurface对象; SynchronousCompositorImpl类的成员函数DemandDrawHw调用这个SynchronousCompositorOutputSurface对象的成员函数DemandDrawHw绘制网页的UI,如下所示:
这个函数定义在文件external/chromium_org/content/browser/android/in_process/synchronous_compositor_output_surface.cc中
SynchronousCompositorOutputSurface类的成员函数DemandDrawHw调用另外一个成员函数InvokeComposite绘制网页的UI。绘制完成后,就会得到一个Compositor Frame; 这个Compositor Frame保存在SynchronousCompositorOutputSurface类的成员变量frame_holder中;因此,SynchronousCompositorOutputSurface类的成员函数DemandDrawHw可以将这个成员变量frame_holder*指向的Compositor Frame返回给调用者
SynchronousCompositorOutputSurface类的成员函数InvokeComposite的实现如下所示:
这个函数定义在文件external/chromium_org/content/browser/android/in_process/synchronous_compositor_output_surface.cc中
SynchronousCompositorOutputSurface类的成员变量client_是从父类OutputSurface继承下来的,它指向的是一个LayerTreeHostImpl对象; SynchronousCompositorOutputSurface类的成员函数InvokeComposite调用这个LayerTreeHostImpl对象的成员函数BeginFrame绘制网页的UI
当LayerTreeHostImpl类的成员函数BeginFrame被调用时,它就会CC模块的调度器执行一个BEGIN_IMPL_FRAME操作,也就是对网页的CC Layer Tree进行绘制
由于Android WebView的Render端使用的是Synchronous Compositor,当前线程(也就是App的UI线程)会等待Render端的Compositor线程绘制完成网页的CC Layer Tree; Compositor线程在绘制完成网页的CC Layer Tree的时候,会调用网页的Output Surface的成员函数SwapBuffers
在我们这个情景中,网页的Output Surface是一个Synchronous Compositor Output Surface。这意味着当Compositor线程在绘制完成网页的CC Layer Tree时,会调用SynchronousCompositorOutputSurface类的成员函数SwapBuffers,如下所示:
这个函数定义在文件external/chromium_org/content/browser/android/in_process/synchronous_compositor_output_surface.cc中
参数frame指向的Compositor Frame描述的就是网页的绘制结果; 这个Compositor Frame包含了一系列的Render Pass。每一个Render Pass都包含了若干个纹理,以及每一个纹理的绘制参数
这些纹理是在Render端光栅化网页时产生的;Browser端的Hardware Renderer所要做的事情就是将这些纹理渲染在屏幕上;这个过程也就是Browser端合成网页UI的过程
SynchronousCompositorOutputSurface类的成员函数SwapBuffers会将参数frame描述的Compositor Frame的内容拷贝一份到一个新创建的Compositor Frame中去
这个新创建的Compositor Frame会保存在SynchronousCompositorOutputSurface类的成员变量frame_hodler_中;因此,前面分析的SynchronousCompositorOutputSurface类的成员函数InvokeComposite返回给调用者的就是当前绘制的网页的内容
这一步执行完成后,回到前面分析的BrowserViewRenderer类的成员函数OnDrawHardware中,这时候它就获得了一个Render端绘制网页的结果,也就是一个Compositor Frame
这个Compositor Frame会保存在一个DrawGLInput对象中。这个DrawGLInput对象又会保存在BrowserViewRenderer类的成员变量shared_renderer_state_指向的一个SharedRendererState对象中
这是通过调用SharedRendererState类的成员函数SetDrawGLInput实现的,如下所示:
这个函数定义在文件external/chromium_org/android_webview/browser/shared_renderer_state.cc中
SharedRendererState类的成员函数SetDrawGLInput将参数input指向的一个DrawGLInput对象保存成员变量draw_gl_input_中
这一步执行完成后,再回到前面分析的BrowserViewRenderer类的成员函数OnDrawHardware中,接下来它会调用成员变量client_指向的一个Native层AwContents对象的成员函数RequestDrawGL请求在参数java_canvas描述的一个Hardware Canvas中增加一个DrawFunctorOp操作,如下所示:
这个函数定义在文件external/chromium_org/android_webview/native/aw_contents.cc中
Native层AwContents类的成员函数RequestDrawGL的实现了,它主要就是调用Java层的AwContents类的成员函数requestDrawGL请求在参数canvas描述的Hardware Canvas中增加一个DrawFunctorOp操作
Java层的AwContents类的成员函数requestDrawGL最终会调用到DrawGLFunctor类的成员函数requestDrawGL在参数canvas描述的Hardware Canvas中增加一个DrawFunctorOp操作,如下所示:
这个函数定义在文件frameworks/webview/chromium/java/com/android/webview/chromium/DrawGLFunctor.java中
DrawGLFunctor类的成员函数requestDrawGL是在Render端光栅化网页UI的过程中调用的。这时候参数canvas的值等于null,因此DrawGLFunctor类的成员函数requestDrawGL会通过调用参数viewRootImpl指向的一个ViewRootImpl对象的成员函数invokeFunctor直接请求App的Render Thread执行GPU命令
现在,当DrawGLFunctor类的成员函数requestDrawGL被调用时,它的参数canvas的值不等于null,指向了一个Hardware Canvas
在这种情况下,DrawGLFunctor类的成员函数requestDrawGL将会调用这个Hardware Canvas的成员函数callDrawGLFunction,将一个Native层DrawGLFunctor对象封装成一个DrawFunctorOp操作,写入到它描述一个Display List中去
被封装的Native层DrawGLFunctor对象,保存在Java层DrawGLFunctor类的成员变量mDestroyRunnable指向的一个DestroyRunnable对象的成员变量mNativeDrawGLFunctor中
参数canvas描述的Hardware Canvas是通过一个GLES20Canvas对象描述的,因此接下来它的成员函数callDrawGLFunction会被调用,用来将一个Native层DrawGLFunctor对象封装成一个DrawFunctorOp操作写入它描述一个Display List中去,如下所示:
这个函数定义在文件frameworks/base/core/java/android/view/GLES20Canvas.java中
GLES20Canvas类的成员函数callDrawGLFunction调用另外一个成员函数nCallDrawGLFunction将参数drawGLFunction描述的一个Native层DrawGLFunctor对象封装成一个DrawFunctorOp操作写入到当前正在处理的GLES20Canvas对象描述一个Display List中去
GLES20Canvas类的成员函数nCallDrawGLFunction是一个JNI方法,它由C++层的函数android_view_GLES20Canvas_callDrawGLFunction实现,如下所示:
这个函数定义在文件frameworks/base/core/jni/android_view_GLES20Canvas.cpp中
参数rendererPtr描述的是一个Native层的DisplayListRenderer对象。这个DisplayListRenderer对象负责构造App UI的Display List
函数android_view_GLES20Canvas_callDrawGLFunction所做的事情就是调用这个DisplayListRenderer对象的成员函数callDrawFunction将参数functionPtr描述的一个Native层DrawGLFunctor对象封装成一个DrawFunctorOp操作写入到App UI的Display List中去,如下所示:
这个函数定义在文件frameworks/base/libs/hwui/DisplayListRenderer.cpp中
DisplayListRenderer类的成员变量mDisplayListData指向的是一个DisplayListData对象。这个DisplayListData对象描述的就是App UI的Display List
因此,DisplayListRenderer对象的成员函数callDrawFunction就会将参数functor描述的一个Native层DrawGLFunctor对象封装成一个DrawFunctorOp操作写入到它里面去
这一步执行完成后,Android WebView就在App渲染一个帧的第一个阶段通知Render端绘制完成了网页的UI,并且往App UI的Display List写入了一个DrawFunctorOp操作;在第二阶段,App UI的Display List就会从App的UI线程同步给App的Render Thread
SingleThreadProxy类的成员函数CompositeImmediately主要是调用另外一个成员函数DoComposite绘制Browser端的CC Layer Tree,如下所示:
这个函数定义在文件external/chromium_org/cc/trees/single_thread_proxy.cc中
SingleThreadProxy类的成员变量layer_tree_host_impl_指向的是一个LayerTreeHostImpl对象; SingleThreadProxy类的成员函数DoComposite主要是调用这个LayerTreeHostImpl对象的成员函数PrepareToDraw和DrawLayers绘制Browser端的CC Layer Tree
Chromium的Browser端在内部是通过一个Direct Renderer绘制CC Layer Tree的,而Render端是通过一个Delegated Renderer绘制CC Layer Tree的;Delegated Renderer并不是真的绘制CC Layer Tree,而只是将CC Layer Tree的绘制命令收集起来,放在一个Compositor Frame中。这个Compositor Frame最终会交给Browser端的Direct Renderer处理
Direct Renderer直接调用OpenGL函数执行保存在Compositor Frame的绘制命令。因此,当Browser端绘制完成自己的CC Layer Tree之后,加载在Android WebView中的网页UI就会合成显示在App的窗口中了
至此,我们就分析完成了Android WebView硬件加速渲染网页UI的过程,也完成了对Android基于Chromium实现的WebView的学习
有需要完整代码的同学 可以 私信 发送 “底层源码” 即可 免费获取
还可以 私信 发送 “进阶” 或者 “笔记” 即可 获得 更多《Android 学习笔记+源码解析+面试视频》
技术是无止境的,你需要对自己提交的每一行代码、使用的每一个工具负责,不断挖掘其底层原理,才能使自己的技术升华到更高的层面
Android 架构师之路还很漫长,与君共勉
PS:有问题欢迎指正,可以在评论区留下你的建议和感受;
欢迎大家点赞评论,觉得内容可以的话,可以转发分享一下
- 上一篇:制图师必备 专业修图电脑装机配置推荐
- 下一篇:一种在播放视频时,能够拖拽的方案
相关推荐
- # Python 3 # Python 3字典Dictionary(1)
-
Python3字典字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中,格式如...
- Python第八课:数据类型中的字典及其函数与方法
-
Python3字典字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值...
- Python中字典详解(python 中字典)
-
字典是Python中使用键进行索引的重要数据结构。它们是无序的项序列(键值对),这意味着顺序不被保留。键是不可变的。与列表一样,字典的值可以保存异构数据,即整数、浮点、字符串、NaN、布尔值、列表、数...
- Python3.9又更新了:dict内置新功能,正式版十月见面
-
机器之心报道参与:一鸣、JaminPython3.8的热乎劲还没过去,Python就又双叒叕要更新了。近日,3.9版本的第四个alpha版已经开源。从文档中,我们可以看到官方透露的对dic...
- Python3 基本数据类型详解(python三种基本数据类型)
-
文章来源:加米谷大数据Python中的变量不需要声明。每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建。在Python中,变量就是变量,它没有类型,我们所说的"类型"是变...
- 一文掌握Python的字典(python字典用法大全)
-
字典是Python中最强大、最灵活的内置数据结构之一。它们允许存储键值对,从而实现高效的数据检索、操作和组织。本文深入探讨了字典,涵盖了它们的创建、操作和高级用法,以帮助中级Python开发...
- 超级完整|Python字典详解(python字典的方法或操作)
-
一、字典概述01字典的格式Python字典是一种可变容器模型,且可存储任意类型对象,如字符串、数字、元组等其他容器模型。字典的每个键值key=>value对用冒号:分割,每个对之间用逗号,...
- Python3.9版本新特性:字典合并操作的详细解读
-
处于测试阶段的Python3.9版本中有一个新特性:我们在使用Python字典时,将能够编写出更可读、更紧凑的代码啦!Python版本你现在使用哪种版本的Python?3.7分?3.5分?还是2.7...
- python 自学,字典3(一些例子)(python字典有哪些基本操作)
-
例子11;如何批量复制字典里的内容2;如何批量修改字典的内容3;如何批量修改字典里某些指定的内容...
- Python3.9中的字典合并和更新,几乎影响了所有Python程序员
-
全文共2837字,预计学习时长9分钟Python3.9正在积极开发,并计划于今年10月发布。2月26日,开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符,这个新特性几乎...
- Python3大字典:《Python3自学速查手册.pdf》限时下载中
-
最近有人会想了,2022了,想学Python晚不晚,学习python有前途吗?IT行业行业薪资高,发展前景好,是很多求职群里严重的香饽饽,而要进入这个高薪行业,也不是那么轻而易举的,拿信工专业的大学生...
- python学习——字典(python字典基本操作)
-
字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包含的元素个数不限,值...
- 324页清华教授撰写【Python 3 菜鸟查询手册】火了,小白入门字典
-
如何入门学习python...
- Python3.9中的字典合并和更新,了解一下
-
全文共2837字,预计学习时长9分钟Python3.9正在积极开发,并计划于今年10月发布。2月26日,开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符,这个新特性几乎...
- python3基础之字典(python中字典的基本操作)
-
字典和列表一样,也是python内置的一种数据结构。字典的结构如下图:列表用中括号[]把元素包起来,而字典是用大括号{}把元素包起来,只不过字典的每一个元素都包含键和值两部分。键和值是一一对应的...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- # Python 3 # Python 3字典Dictionary(1)
- Python第八课:数据类型中的字典及其函数与方法
- Python中字典详解(python 中字典)
- Python3.9又更新了:dict内置新功能,正式版十月见面
- Python3 基本数据类型详解(python三种基本数据类型)
- 一文掌握Python的字典(python字典用法大全)
- 超级完整|Python字典详解(python字典的方法或操作)
- Python3.9版本新特性:字典合并操作的详细解读
- python 自学,字典3(一些例子)(python字典有哪些基本操作)
- Python3.9中的字典合并和更新,几乎影响了所有Python程序员
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)