最新Chromium内核探究

chromium

2018-10-26

Chromium内核团队以每个月一个版本的速度稳定的更新内核,最新的Chromium内核版本已经更新到71版本(发布于2018年10月25日)。那么,目前国内安卓市场上最常用的内核版本是哪些,相比这些版本的内核,新版本的Chromium内核又有哪些重要的新特性?小编在此带为读者分享新版本内核的独特之处。

# 国内市场现状

谈到国内安卓市场Chromium内核版本的占有率情况,通过分析以下几个方向可以拿到一个大致的数据:

  • 微信及腾讯系应用 微信及腾讯系应用使用的内核版本是57。
  • 阿里系应用 阿里系应用基于U4 2.0内核构建,内核版本是57。
  • 安卓系统版本 系统占比.png 图片来自腾讯移动分析 在国内市场中,安卓系统版本对应的Chromium内核主要是5x版本。

因此,本文主要为读者介绍的是Chromium内核58版本至内核69版本的新特性。

# 更新功能介绍

# 功能增强

功能 说明
支持WebGL 2.0 WebGL JavaScript API 使Web具备了硬件加速的3D图形处理能力。WebGL 2.0使构建3D Web应用程序变得更加容易,实时渲染速度更快,纹理和着色器类型更新,视频内存消耗更少。现在可以有效地实现包括延迟着色,色调映射,体积效果和粒子效果的技术。U4 2.0 已支持。
IndexedDB 2.0 在Web上处理大数据更简单了,同时也更高效。IDB 2.0具有新的模式管理,批量操作方法和更标准化的故障处理功能。
PointerEvents.getCoalescedEvents() 能够绘制更平滑的曲线。
ControlsList API 页端可定制播放控制栏,例如是否显示下载,全屏和远程播放按钮。除此之外,在U4 3.0中,我们会提供完善的视频播放控制能力。
AudioContextLatencyCategory Web Audio APIs 新的播放类型AudioContextLatencyCategory 使开发者能够轻松地在延迟,功耗和CPU效率之间进行有意识的权衡。
The Image Capture API 可以进行高分辨率拍照,能够完全控制相机设置,如缩放,ISO和白平衡。
Presentation Receiver API 允许页面访问投影设备,并把网页内容投射到投影设备上。
Paint Timing API 页面可以获取First Paint and First Contentful Paint信息。
JavaScript modules 支持ES6 Module。模块化有很多好处,可以使程序设计更清晰;改善性能 - 浏览器可以并行获取粒度依赖关系,利用缓存,避免整个页面的重复,并确保脚本以正确的顺序执行。
Web Share API 现在,网站可以在Android上使用新的navigator.share API来触发native Android共享对话框,从而允许用户轻松与任何已安装的原生应用共享文本或链接。在将来的版本中,此API还可以共享到已安装的Web应用程序。
WebUSB Chrome现在支持WebUSB API,允许Web应用在用户同意的情况下与外围设备进行通信
Device RAM API 页面可获取设备的RAM信息,以优化Web应用的整体性能。
Clear-Site-Data header 站点现在可以使用 Clear-Site-Data header删除自己的客户端数据,例如cookie,service worker,存储和缓存条目。
Network Information API 为开发人员提供客户实际体验到的网络性能指标。有了这些网络质量信息,开发人员可以根据网络情况定制内容。例如,在非常慢的连接上,开发人员可以提供页面的简化版本以改善页面加载时间。
OpenType可变字体 OpenType可变字体能让网站设计者和应用开发人员在使用少量带宽和小字体文件的情况下,获得丰富多彩的排版体验。可变字体也将为文档创建者提供多样化的排版选项,而无需管理上百个字体文件。可变字体将起到事半功倍的效果。
Resize Observer 用于监听Element size的变化。
Media Capabilities,Decoding Info API 基于历史统计数据,反馈给开发者某个视频,或音频是否能够流畅,高效的播放。使开发者可以更好的选择合适的媒体流。避免选择了基于目前设备的带宽,屏幕分辨率,设备能力不能流畅播放的高分辨率视频。
CSS Paint API CSS Paint API,也称为“CSS Custom Paint”,允许开发人员在CSS属性需要时以编程方式生成图像。开发人员现在可以使用新的paint()函数来引用将绘制图像的paint worklet,而不是引用图像资源。此API可用于许多方面,包括使DOM树更小,显著减少数据传输(与传输图像相比)。例如,如果要画一个可以放大缩小的棋盘,这效果就很明显了。
AudioWorklet 传统的ScriptProcessorNode是异步的,需要线程切换,这可能会产生不稳定的音频输出。AudioWorklet对象提供了一个新的同步JavaScript执行上下文,允许开发人员以编程方式控制音频,而无需额外的延迟并能更稳定的输出音频。
通用传感器 传感器数据被用于许多native应用,以实现沉浸式游戏、健身追踪、增强或虚拟现实等体验。现在,此Web应用通过Generic Sensor API,也可以使用这些数据。
创建自定义元素 借助自定义元素,网络开发者可以创建新的 HTML 标记、扩展现有 HTML 标记,或者扩展其他开发者编写的组件。API 是网络组件的基础。它提供了基于网络标准来使用原生 JS/HTML/CSS 创建可重用组件的方法。其结果是代码更精简且模块化,并且在我们的应用中的可重用性更好。
The Page Lifecycle API 现在,Web应用也有了生命周期。开发者可以使用freeze和resume监听Web应用的状态,做相应的处理。以节约设备资源,改善引用的性能。
OffscreenCanvas OffscreenCanvas是一个新的接口,允许在Workers中使用2D and WebGL canvas rendering contexts。可以提高Web应用的并发性,改善多核系统的性能。

# 安全性

安全性对于Chrome来说是至关重要的,许多功能致力于在浏览网页时保护Chrome用户。谷歌安全浏览警告用户远离那些被认为是危险的网站。Chrome的沙盒和多进程架 构通过帮助阻止恶意软件安装和降低漏洞的严重性提供了额外的防御层。

功能 说明
连接安全性 chome会把收集隐私数据的HTTP页面标记为不安全。最终目标是把所有的HTTP页面标记为不安全。促使web都迁移到HTTPS。

# 性能改善

功能 说明
降低后台标签功耗 限制后台标签timer的启动频率,CPU的使用。前端可以通过Page visibility API 检测页面是否处于后台,并停止那些不必要的操作。从长远看,理想的做法是后台标签被完全挂起,通过service workers的API在后台执行必要的操作。
JS性能 在做JS优化时,更多的基于真实网站测试,而不是传统的基准测试,从而更好地优化对用户和开发人员最重要的JavaScript模式。
Service Worker预加载 The Service Worker navigation preload API使浏览器在Service worker启动时进行预加载。在需要这些资源的时候,就可以直接从缓存读取,从而加快浏览速度。
WebAssembly WebAssembly能够提供构建浏览器内视频编辑器或以高帧率运行Unity游戏所需的速度,是一种高性能代码的跨浏览器解决方案。WebAssembly现状与实战。
CSS-font display Chrome现在支持CSS font-face 描述符以及相应的 font-display property,使开发人员可以指定Chrome在下载字体时显示文本内容的方式和时间,不必等到字体下载完成才开始渲染文本。
pointermove, mousemove events 为了提高性能和可预测性,现在每个AnimationFrame都会传递一次指针移动和mousemove事件,与scroll和TouchEvents的当前功能相匹配。
提高缓存命中率 为了提高浏览器的缓存命中率,URLSearchParams新增了sort()函数。
统一自动播放 只有不播放声音或者用户点击过的视频才会自动播放。还可以通过设置项设置站点不播放音频。
Dynamic module imports import(说明符)语法现在允许开发人员在运行时动态地将代码加载到模块和脚本中。这可以仅在需要时用于延迟加载脚本,从而提高应用程序的性能。
<canvas>的ImageBitmap渲染上下文 一种新的渲染上下文,可简化ImageBitmap对象的显示。 这个新的渲染上下文使用传输语义来获取ImageBitmap对象的像素,从而避免了内存重复和光栅化开销。

# 用户体验

功能 说明
改进iframe导航 可用把iframe放在sandbox中防止滥用重定向。支持新的iframe sandbox关键词allow-top-by-user-activation,允许通过用户交互触发的跳转。
PWA沉浸式全屏 通过在web app manifest设置display: fullscreen, 支持从主屏以全屏方式启动PWA。
滚动锚点(Scroll Anchoring) Scroll Anchoring这个功能是为了改善页面乱跳的问题。当我们快速滚动屏幕的时候通常会遇到这个问题,表现是当我们滚动停止之后,由于页面的加载重排版,页面可能继续滚动,甚至来回跳动。为了避免这种情况,我们可能只能等待页面完全加载出来,当然这会很慢,用户也不可能这样操作。
改善Web广告体验 滥用广告威胁到Web生态的可持续发展。广告又是Web生态的重要组成部分。Chrome通过屏蔽不兼容 Better Ads Standards的方式,促使页面改善广告体验。
滚动优化 开发人员现在可以通过现有Scroll APIs 中的新可选参数或滚动行为CSS property指定滚动平滑度。CSSOM View Smooth Scroll API通过scroll-behavior:smooth CSS属性或使用window.scrollTo() DOM scroll方法是Web具备native的滚动平滑度,在这之前需使用JavaScript实现此行为。
阻止滥用跳转、弹窗、打开新标签的行为 现在的处理一般是给用户一个提示,需要用户进一步的操作才能继续跳转、弹窗。总之就是避免直接打开用户未预期的页面。
CSS Scroll Snap Points 滚动可以停止在预置点,改善用户体验。

# 开发环境

功能 说明
Headless Chromium Headless browser是自动化测试和服务器环境的绝佳工具,这种场景我们不需要可见的UI。例如,测试一个真实的Web页面,把Web页面转换为PDF,或者检查浏览器如何渲染一个URL。
AMP Accelerated Mobile Pages,AMP 是一个开源项目,旨在为所有人打造更好的Web体验。通俗讲,AMP是提升页面加载速度的技术。采用 AMP 技术的网页之所以可以打开的这么快,这主要得益于它剔除了网页代码中各种可能会拖慢速度的部分,比如第三方的脚本文件、一些 HTML 标签、广告追踪器等等。对于交互性要求不强的页面比较适合。
Lighthouse Lighthouse是一个用于衡量Web体验质量的新型自动化工具。 它针对你的Web应用运行近100项检查,覆盖从页面性能到字节效率到可访问性的所有内容,并为您提供摘要评分。 现在集成进Chrome的DevTools中,意味着您无需离开浏览器即可运行Lighthouse审核。
统一Web开放文档 Mozilla Developer Network (MDN) Web Docs。
用户体验报告 建立Web上top 站点的关键用户体验指标的公共数据集。通过查询数据,开发人员可以了解真实的Chrome用户通过在各种硬件,软件和野外使用的不同网络在Web上的体验。分析网络上的其它站点的数据,将有助于网站开发人员和网络社区了解他们在哪些方面做得很好,确定需要改进的地方,并观察用户体验随时间推移的变化。
Abusive Experiences Report 网站可以据此检查是否有影响用户体验的滥用行为。

# Chromium理念

以广告过滤为例,各种各样滥用广告行为给用户带来糟糕的Web体验,这会促使Web用户流失。另一方面,各种广告拦截因应而生,这又降低了生产者制作更多免费内容的积极性。最终影响到Web生态的可持续发展。Chromium通过过滤,拦截那些不符合更好广告标准的广告,引导站点改进他们的广告体验,优化用户体验与维护广告生态并存,使所有Web用户都受益,保持Web生态的可持续发展。理想目标是迈向不需要广告过滤技术的未来。维护Web生态的平衡是Chromium一个非常重要的理念。毫无疑问,Google是促进Web发展的最主要的推动者。

# 总结

Chromium旨在为用户构建更安全,更快速,更稳定的Web体验。Chromium的发展也主要是围绕着安全,性能,用户体验这些点进行。纵观Chromium的发展历史,我们可以看到如下的趋势:

  • Web越来越像Native,包括更好的性能,更多的能力,更强大的开发调试环境。
  • 对前端的要求也越来越高,不再简单的实现功能,要考虑性能效率,自适应性。
  • 借助于Web平台,能做的事情越来越多,以后可能比通过native能做的事情还多。
  • 简化开发,更容易实现更多功能,更复杂的功能。把一些以前需要复杂的JS实现的能力变成容易使用的内置能力。
  • 为用户带来更好的体验,同时也在通过一些措施规范页面的行为,改善整体Web的体验。
  • 注重维护Web生态平衡。Web生态的一个关键特点是"free",维护生态的平衡,才能促进Web不断发展。

因此,U4 3.0内核已经升级到Chromium的69内核,正在紧张的测试灰度中。升级后的U4内核不但拥有Chromium新版本的优势,同样还会针对国内特定环境进行优化与定制,努力为用户及开发者打造最好的平台。敬请期待!