《WebKit技术内幕》学习之十五(2):Web前端的未来

news2024/10/7 4:27:36

2 嵌入式应用模式

2.1 嵌入式模式

        读者可能会奇怪本章重点表达的是Web应用和Web运行平台,为什么会介绍嵌入式模式(Embedded Mode)呢?这是因为很多Web运行平台是基于嵌入式模式的接口开发出来的,所以这里先解释一下什么叫做是嵌入式模式,并了解一些典型的案例。

        因为通常来讲浏览器是一个本地应用程序,当用户打开一个网页时,它提供可视化界面。但是,很多其他本地应用程序(如邮件客户端使用该接口来打开邮件,因为有些邮件是使用HTML格式来编写的)希望使用网页渲染和HTML5的功能,同时又不需要浏览器的某些功能(如标签管理等),这时它们希望渲染引擎能够提供一组接口,本地应用程序能够使用这些接口来渲染网页,同时又能使用本地代码编写其他一些能力,这就是嵌入式应用模式。所谓的嵌入式模式是指,在渲染引擎之上提供一层本地(如C++或者Java)接口,这些接口提供了渲染网页的能力,渲染的结果被绘制到一个控件或者子窗口中,本地应用通过本地接口来获得渲染网页的能力。

        目前嵌入式应用模式被广泛地使用,很多本地应用都需要有能力渲染网页,下面介绍两个非常典型的基于Webkit渲染引擎的嵌入式接口或者说是框架。

15.2.2 CEF

        CEF全称Chromium Embedded Framework,它是一个开源项目,目的是提供一套嵌入式的本地代码(C/C++等)编程接口,最初的版本是基于早期的Chromium开源项目中的RendererHost类和很多其他内部接口开发而来的,这些内部接口变化很大,而且是单进程架构。在新的CEF3中,它主要依赖于相对稳定的Content API来实现的。

        CEF之所以选择Chromium项目作为基础,是因为Chromium对HTML5能力提供了非常好的支持,并且Chromium支持Windows、MacOS和Linux等操作系统,所以CEF项目被众多用户所使用。

        为了清晰地了解WebKit、Chromium和CEF之间的关系,图15-1描述了WebKit、content API、浏览器、Content Shell和CEF3的层次关系。Chrome浏览器、Content Shell和CEF3三者都是基于Content API开发的,它们只是有些不同的实现,服务于不同的应用场景而已。

                        图15-1 CEF在Chromium层次结构中的位置

        早在Content API出现之前,CEF便已出现,它能够提供嵌入式的框架,可以让渲染网页的功能方便地嵌入到应用程序中。CEF依赖于Chromium开源项目,所以Chromium对HTML5的支持和性能上的优势,都得以继续在CEF中体现出来。但是,根据实际测试的结果来看,对于最初的版本,情况可能并非如此。首先,它对GPU硬件加速的支持不是很好,这是因为它会把GPU内存读回到CPU内存,速度非常慢。再次,因为基于Chromium的接口经常变化,所以CEF经常需要发生变化,这对维护人员来说是件很头痛的事。

        得益于Content API的出现,CEF的作者也基于该接口开发了CEF3。CEF3在保持其提供的接口基本不变的情况下,借助Content API的能力,对HTML5和GPU硬件加速提供了较好的支持。它的核心变为调用Content API的接口和实现Content API的回调接口,来组织和包装成CEF3自己的接口以被其他开发者所使用。其好处是,CEF3的接口相对比较简单,使用起来方便,同时不需要实现很多Content API的回调接口,缺点就是,如果需要使用Content API的很多功能,CEF3的接口可能做不到,或者说只能通过直接调用Content API接口来完成。下面简单介绍一下CEF3的接口类。

  • CefClient :它是一个回调管理类,包含5个接口类,用于创建其他的回调类的对象。CefLifeSpanHandler回调类,用于控制弹出对话框的创建和关闭等操作。CefLoadHandler回调类,可以用来监听frame的加载开始、完成、错误等信息。CefRequestHandler回调类,用于监听资源加载、重定向等信息。CefDisplayHandler回调类,用于监听页面加载状态、地址变化、标题等信息。CefGeolocationHandler回调类,用于CEF3向嵌入者申请地理位置等权限。
  • CefApp :与进程、命令行参数、代理、资源管理相关的回调类,用于让CEF3的调用者们定制自己的逻辑。
  • CefBrowser :它是Renderer进程中执行浏览相关的类,如网页的前进、后退等。
  • CefBrowserHost :Browser进程中的执行浏览相关的类,它会把请求发送给CefBrowser类。
  • CefFrame :该类表示的是页面中的一个网页框(Frame),可以加载特定URL,在该运行环境下执行JavaScript代码等。
  • V8 :CEF3提供支持V8 扩展的接口,但是这里有两个限制。第一,V8 扩展仅在Renderer进程使用;第二,仅在沙箱模型关闭时才使用。

        CEF项目虽然不是特别复杂,但是因为带来了好处,使得它受到了开发者的欢迎,特别是在桌面系统中使用它来渲染HTML5网页。

2.3 Android WebView

        熟悉Android系统和HTML编程的开发者可能听说过Android提供的一个重要类android.webkit.WebView,它继承于View类(一个视图控件类),这是它同其他很多控件的相似之处。不同之处在于,它能够用来渲染网页。WebView是一个典型的嵌入式模式的接口。当前(也就是Android 4.3以前的版本),WebView本身只是一个编程接口,它的内部实现是基于现有的默认WebKit内核(Android默认浏览器是基于WebView构建),虽然它们都叫WebKit,但不同于Chromium所使用的WebKit内核。

        目前,WebView被广泛应用在众多的Android本地应用程序中,通常笔者称之为混合应用程序。遗憾的是,它对HTML5的支持不是特别好,而且也没有新的功能被加入进来,同时,Chromium的Android版正在积极向前发展,更多针对该平台的HTML5能力和优化已经逐步被实现和采用,那么是否也可以使用Chrome的内核来实现该WebView呢?答案当然是肯定的。

        目前,该项目已经启动并取得了良好进展,核心思想在于保持WebView的接口兼容性,同时将内部的实现从当前默认WebKit内核变成了Chromium的内核,但是原有的WebViewAPI保持不变,这样对于WebView的用户来说,调试代码时不需要做任何改变,便可以使用功能更多性能更好的渲染内核了。在Android KitKat 4.4版本后,Google公司已经使用Chromium项目来实现WebView接口,不过它仍然同Chrome的Android版浏览器存在比较大的区别,如进程模型(Chromium的WebView使用单进程)、不同绘图模型、功能支持(Chromium的WebView在Android 4.4中不支持WebGL、WebRTC和WebAudio等)等方面存在比较大的差异,而且性能也不是很好。

        开发者可以通过编译目标“android_webview_apk”来尝试一下它的功能,这也是基于WebView的一个简单的应用程序实例,就如同Content模块和Content Shell的关系。不过这不是真正的WebView的实现,因为Chromium的WebView仍然要求同Android的系统代码一起编译,这里只是一个简单的测试APK。

        初看一下,目前的代码结构如下图所示,在Content API之上,Chromium的WebView实现了封装一个新类AwContents,该类主要基于ContentViewCore类的实现。

        AwContents提供的不是WebView的接口,所以,需要一层桥接部分,将AwContents桥接到WebView,这就是图15-2中的桥接模块,该模块位于Android源代码中,目前已经开源(Android 4.4代码树),开发者可以尝试自行编译。

                                图15-2 基于Chromium的WebView层次结构图

        AwContents同样也是基于Content API开发的,在这点上,它同Content Shell和Chromium浏览器没有大的不同,区别在于它们对很多Content API接口中的回调类实现不同,这是Content API用于让使用者参与内部逻辑和实现的过程。具体来说,它主要有以下三个方面的不同。

  • 第一是渲染机制 :因为WebView提供的是一个View控件,那么View控件所在的容器可能需要该View控件将渲染结果保存在内存中(如位图),或者是保存在显存中(如Surface对象),所以,WebView需要提供两种不同的渲染输出结果。那么是否意味着WebView提供软件渲染和GPU硬件渲染两种方式呢?答案是否定的。目前,Chromium的Android版不提供网页软件渲染,只有GPU硬件渲染一种方式,其渲染的结果由合成器生成。那么,如何生成位图呢?最初是通过OpenGL图形库提供的回读(Readback)方式生成。当合成器每合成一帧的时候,AwContents类将该帧保存在一个存放在CPU内存中的链表中,当用户界面需要重新绘制的时候,便把当前的图片取出,绘制在当前控件的Canvas对象中。不过,这样做会导致其性能低效,所以这只是一个临时方案。在最新的代码中,Chromium即将引入一种新机制,能够支持输出到CPU内存中。
  • 第二是进程模型 :目前WebView只支持单进程方式,未来应该也不会支持多进程方式。单进程意味着没有办法使用Android的isolated UID机制,因此,某种程度上来讲,其安全性降低了,而且页面的渲染崩溃会导致使用WebView的应用程序崩溃。
  • 第三对系统库和内部接口的依赖 :目前Chromium WebView使用了Android系统的一些内部库,典型的如Skia图形库(通常系统中的Skia图形库版本较旧,性能没有最新的好),这使得性能方面存在某些问题。同时,Chromium WebView还依赖一些系统内部的接口,这些接口使得它不能用Android SDK和NDK来编译。

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

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

相关文章

3ds Max宣传片怎么提升渲染速度?从硬件升级到云渲染,全面提升你的渲染速度!

在3ds Max中,渲染是一项耗时的任务,尤其是对于大型场景和复杂的动画。然而,通过一些优化策略和技巧,你可以显著加速渲染过程。以下是一些建议和技巧,帮助你提高3ds Max的渲染速度: 1.升级硬件: …

Caused by: com.mongodb.MongoTimeoutException: Timed out after 30000 ms

报错 Caused by: com.mongodb.MongoTimeoutException: Timed out after 30000 ms while waiting to connect. Client view of cluster state is {typeUNKNOWN, servers[{addressmangodb-m.cc.com:3717, typeUNKNOWN, stateCONNECTING, exception{com.mongodb.MongoSocketReadE…

H.264与H.265的主要差异

H.265仍然采用混合编解码,编解码结构域H.264基本一致, H.265与H.264的主要不同 编码块划分结构:采用CU (CodingUnit)、PU(PredictionUnit)和TU(TransformUnit)的递归结构。 并行工具:增加了Tile以及WPP等并行工具集以提高编码速…

梦百合2024经销商大会:优结构、强终端、提质量,深化同频与赋能

2024年1月24日-25日,以“优结构强终端提质量”为主题的梦百合2024年经销商大会在江苏如皋圆满召开,汇聚来自全国各地的400余名经销商代表,总结回顾了梦百合2023年发展成果,描绘2024年发展蓝图,表彰优秀经销商,加强品牌与经销伙伴的同频共振,为2024年的携手共进开好头、起好步。…

赋能未来社区:数据中台智慧园区的全方位解决方案_光点科技

在信息技术与互联网快速发展的今天,传统的园区管理方式已无法满足时代对效率与智能化的追求。数据中台作为企业数字化转型的核心,正引领着智慧园区的发展趋势。一个集成了数据中台的智慧园区,不仅能有效地整合资源,优化管理流程&a…

【 HTML 】引入 favicon 图标、SEO 优化

生命是一本精彩的书,每一天都是一页,每一次努力都是一个章节。用心书写,创造属于自己的绚丽篇章。 1. 网站制作流程 开发一个网站,我们先要熟悉一下网站制作流程 原型图: 页面的布局,告知我们开发人员&…

保险箱(第十四届蓝桥杯省赛PythonB组)

小蓝有一个保险箱,保险箱上共有 n 位数字。 小蓝可以任意调整保险箱上的每个数字,每一次操作可以将其中一位增加 1 或减少 1。 当某位原本为 9 或 0 时可能会向前(左边)进位/退位,当最高位(左边第一位&am…

视频美颜SDK详解:动态贴纸技术的前沿探索

当下,美颜SDK的动态贴纸技术作为视频美颜的独特亮点,吸引了越来越多开发者和用户的关注。 一、技术详解 动态贴纸技术是视频美颜SDK中的一项创新性功能,它通过在实时视频中添加各种动态效果,为用户提供更加生动有趣的拍摄体验。…

米贸搜|点燃Facebook广告的七大秘诀

一、巧用步步为营的广告投放策略 如果你是每天小预算的广告主,而广告目标是转化时,循序渐进的策略就很重要了。首先,不要过度关注购买转化,而是考虑在广告投放的初期,为浏览你的网站或者使用你的应用的用户创造一种愉…

[docker] Docker的数据卷、数据卷容器,容器互联

一、数据卷(容器与宿主机之间数据共享) 数据卷是一个供容器使用的特殊目录,位于容器中。可将宿主机的目录挂载到数据卷上,对数据卷的修改操作立刻可见,并且更新数据不会影响镜像,从而实现数据在宿主机与容…

GC26E31S国产芯片可替代AM26LV31E/TI,适用于马达编码等产品上

众所周知AM26LV31E是一款具有三态输出的四路差分线路驱动器。该驱动器具有15kV ESD(HBM和IEC61000-4-2,气隙放电)和8kV ESD(IEC61000-4-2,接触放电)保护。该器件旨在满足TIA /EIA-422-B和ITU建议V.11驱动器…

C#,数据检索算法之线性检索(Linear Search)的源代码

数据检索算法是指从数据集合(数组、表、哈希表等)中检索指定的数据项。 数据检索算法是所有算法的基础算法之一。 线性?听起来就“高大上”,其实,只不过就是挨个比较呗。 本文发布(听起来很正式 &#x…

文件操作---C++

文件操作目录 1.文本文件1.1写文件1.2读文件1.2.1第一种方式:流输入方式1.2.2第二种方式:getline成员函数1.2.3第三种方式:getline全局函数1.2.4第四种方式:按一个一个字符读取 2.二进制文件2.1写文件2.2读文件 程序运行时产生的数…

城市建筑白模数据

数据是GIS的血液。 水经注除了可以为你提供光学卫星影像和SAR影像外,还可以为你提供城市建筑白模数据,但目前仅覆盖全国各大重点城市。 那么,城市建筑白模数据覆盖了哪些城市呢? 城市建筑白模数据分布 城市建筑白模覆盖了全国…

便捷接口调测:API 开发工具大比拼 | 开源专题 No.62

hoppscotch/hoppscotch Stars: 56.1k License: MIT Hoppscotch 是一个开源的 API 开发生态系统,主要功能包括发送请求和获取实时响应。该项目具有以下核心优势: 轻量级:采用简约的 UI 设计。快速:实时发送请求并获得响应。支持多…

机器学习_集成学习之偏差和方差

文章目录 介绍偏差和方差——机器学习性能优化的风向标目标:降低偏差与方差数据集大小对偏差和方差的影响预测空间的变化带来偏差和方差的变化 介绍 集成学习,就是机器学习里面的协同作战。 如果训练出一个模型比较弱,又训练出一个模型还是…

【LIBS】交叉编译TCPDUMP

目录 1. 安装编译工具2. 设置环境变量3. 编译libpcap3.1 安装依赖3.2 交叉编译 4. 编译TCPDUMP4.1 克隆仓库与生成构建环境4.2 静态链接LIBPCAP4.3 动态链接LIBPCAP4.4 构建与安装 5. 查看交叉编译结果5.1 文件布局 1. 安装编译工具 sudo apt-get install -y autoconf automak…

【云原生】Docker如何构建镜像

目录 前言 一、基于已有的镜像创建 步骤一:先基于现有的镜像创建一个容器,然后进入容器去完成修改 步骤二:将该容器作为一个模板提交创建为一个新的镜像 步骤三:基于新的镜像,docker run创建一个容器,进…

2024年PMP备考学习资料整合汇总!!

你是否也有过类似的经历? 为了获取备考资料,有的同学在论坛、知乎或者相关垂直类网站下载了很多的资料,这些资料大部分是机构进行获客引流的资料,没有真正的干货。 经常会看到10G、20G的资料包,感觉内容很丰富&#xf…

当项目遭遇资源冲突时,如何巧妙化解?

在项目管理中,资源冲突是一个常见且棘手的问题。当多个项目争夺有限的资源时,如何妥善分配并确保项目顺利进行,成为每个项目经理必须面对的挑战。今天,我们就来探讨几个实用的行动方案,帮助你化解资源冲突,…