聚焦未来技术发展！BlinkOn 10 技术盛会观感

本文是发表在 U4 内核技术 公众号的一篇旧文。文章虽然是去年发布的，可是文中提到的技术仍然可以给读者带来帮助。

2019年4月9～10日，UC 内核团队前往加拿大多伦多参与 Chromium 一年一度的技术盛会：BlinkOn。短短两天时间，干货满满，收获良多，感受颇深，也希望借此文章将一些重要的技术分享给读者。

发展演进方向

此届大会上，Chromium 团队也宣告了未来的发展方向，重点围绕着三个方面：

• Web Contents
  • 极速加载（Load instantly）、离线运行（work offline）、无缝运行（run seamlessly）、容易交易（transact easily，包括安全、认证等等）
• Web Apps
  • 目标：成为最好的 app platform
  • 从去年开始，Fugu 项目中已不断在 Web 中补全 APP 应用开发所需要的各种能力，以对齐 Native APP 应用
  • 不断完善 PWA
• Developer Success
  • 帮助开发者以最小的成本，更快的速度构造出更加高质量，更好体验的 Web APP 应用，包括提供各种开发工具、各类功能及反馈 API、各种数据指标、鼓励 Framework 建设等等

影响力代表

• 众多 base Chromium 的浏览器代表：在全球范围内拥有众多用户，具备良好的口碑

• 微软：
  经过长时间的思考，IE 浏览器决定全面拥抱 Chromium，不仅会将IE浏览器内核全面替换为 Chromium 内核，也将会在 Chromium 社区上贡献力量。目前基于 Chromium 内核的 IE 浏览器版本已经推出 canary 版本，计划于下个 IE 浏览器正式版本中上线 Chromium 内核。IE 浏览器选择 Chromium 内核其中一个重要的原因是认为：不同内核实现及标准不完全一致导致的碎片化问题会严重增加开发者的开发难度，而通过与 Chromium 社区合作并保持同步，即可减少 Web 标准及实现的碎片化问题，也使得 IE 浏览器有机会提供更新、更优秀、更安全的技术给开发者。
• 三星：
  有 200+ 工程师，20+ 的 commitor，过去几年贡献了 7100+ 个 commits，其中，去年提交了 500+ 次，三星对于 Web 引擎的运用很广泛，涉及众多产品线，具体如下图：

• LG：
  基于 Chromium 的 WebOS 平台，目前已经应用在众多智能产品上，如智能电视、智能手表、智能冰箱，此外还应用于智能机器人、智能汽车等创新产品中，甚至是基于 H5 技术构建一套内容丰富的车载信息娱乐系统。LG 的开发工程师们认为，Web 技术是交付内容的最佳解决方案，它能够简单快速地解决复杂的体验问题。

技术分享

低端机优化

Chromium 近些年来也一直在关注低端机的性能及稳定性问题，也做了不少研究及探索，今年的 BlinkOn 上，也在不少分享中提及相关的优化改进技术，如：

• v8-lite: 其目标是期望减少 V8 在低端机中的内存开销。对于特低端机器来讲，需要优先保障的是内核可用性，为了减少 OOM（out-of-memory），会尽可能得减少内核的内存开销，当然这可能会影响到网页的打开及运行速度。v8-lite 同时期望通过进一步优化，能将对性能的影响降到最低。
• OOM Intervention：Chromium 团队重点关注的是渲染进程的 OOM 情况。主要是认为该进程直接与页面打交道，用户网页运行时的绝大部分状态及页面信息都保存在渲染进程中，假如该进程出现崩溃，不仅进程恢复成本大，同时对用户所造成的体验冲击也更大。
• 三星对于 Chromium 的应用非常广泛。在其众多产品线中，也有很多低内存设备，如智能手表等。在这类设备中，三星的研发工程师将 Chromium 内核对于页面的解析排版等实现（主要是渲染进程中相关实现）放到了远程服务端，本地设备主要负责页面渲染及一些特定功能实现，以此来降低内存开销。

排版 & 渲染引擎优化

Web 发展了几十年，存在着大量的老旧标准及过时实现，很多早期的设计依然保留至今，这些过时的渲染引擎设计满足不了越来越丰富的 Web Platform/App Platform 的诉求，也阻碍了渲染引擎的快速发展。Chromium 团队早在几年前已意识到这个问题，为解决该问题已投入大量研究，持续对排版及渲染引擎进行大规模重写优化（LayoutNG + Slimming Paint），并有不少优秀的成果产出，大幅提升 Web 渲染引擎的性能。Chromium 团队除了在渲染引擎上进行架构改造优化以外，也在更多地关注 Web 环境中所碰上的实际问题，提出一些新的 API 及监控指标，并持续完善各类开发者辅助工具，以帮助开发者更好的解决实际问题。 本次 BlinkOn 中与渲染技术相关的分享有：

• Off Main Thread CSS Paint：Blink 主线程的负载直接影响到页面的渲染性能及操作流畅度，为其减负是一个持续多年的研究课题。CSS Paint API 自从上线后，受到大量关注。该特性提供了一条通道，让开发者拥有了更进一步参与到 DOM 的绘制渲染流程中来。在以往的实现中，CSS Paint API 大部分实现依然保留在主线程中。通过今年 Chromium 团队的努力，其越来越多的实现将从主线程剥离，更加充分的利用多核 CPU，进一步提升整体的性能体验。
• Impact of current & future rendering projects：介绍了 LayoutNG 及 Slimming Paint 的进一步进展及过去一年的一些优化改进成果。该项目对于 Web 渲染引擎来讲意义重大。除了抛弃一些不合理的旧设计外，在设计上更多考虑了现代化的 Web 标准实现，更加充分地利用起多核 CPU，并且也从根本设计上更多地考虑如何为主线程减负。
• Chromium on Arm: Faster and Furiouser：ARM 团队在 Chromium 渲染性能上也持续多了大量优化。今年在文字排版(文字排版在整个排版计算中占据重要位置，其性能提升对于整个排版引擎性能的提升有很大帮助)、图片解码（图片在渲染前必须经过非常耗时的解码环节，解码速度直接影响到图片在屏幕上的显示速度）、64位等方面的性能依然有很不错的提升。
• Display Locking：提供了一些新的 API，使开发者有机会对页面元素排版进行优先级调优，让开发者能够锁住某些页面元素的排版工作（特别是当前屏幕不可见元素的排版工作），从而优先保证页面可见部分的排版和渲染性能，优先保证用户操作的及时性，避免卡顿问题的产生。
• New Speed Metrics：如何准确度量一个页面的性能及操作体验一直是 Chromium 团队研究的重点。今年的 BlinkOn 上重点分享了：First Input Delay、Layout Stability、Largest Contentful Paint 等几个指标。其中：
  • First Input Delay：反映了用户的操作体感。快速响应用户事件非常重要，特别当用户打开页面后的首次操作尤为重要。严重的响应延迟将会给用户留下深刻的负体验印象。首次可操作体验需引起开发者重视。该指标定义为：FID = Time 2 (browser ready to handle input) - Time 1 (browser receives input)
  • Layout Stability：反映了页面排版的稳定性。当用户打开页面后看到页面中关键元素在不断跳动，这也是一种负体验。Chromium 团队希望通过该指标反映页面关键元素排版区域的稳定性，借此监控并发现页面排版中的负体验问题。
  • Largest Contentful Paint：与 First Contentful Paint、First Meaningful Paint 类似，该指标用来反映首屏的渲染时间。与其他指标不同的是，Largest Contentful Paint 是通过找寻页面可见范围内的最大元素来进行度量的。
• Cooperative Scheduling in Blink：虽然 Chromium 是多进程架构，具备多个渲染进程，但还是存在一些场景中多个页面同时运行在同一个渲染进程中。这样就会产生这种问题：假如后台不可见页面中有一个超级任务正在运行，必然会影响前台页面的运行效率及操作体验。在该分享中，Chromium 工程师期望前台网页的任务的执行优先级能尽可能高，并且在需要时能及时暂停后台页面任务并插入运行前台页面任务，以保证页面的渲染性能及操作流程度。
• Worker/Worklet Event Delegation：Chromium 在渲染性能上，有很多并行化的优化实现，以此来减少主线程开销，如：Audio Worklet、Worker + Offscreen Canvas、Animation Worklet 等等。这些技术在互动游戏场景下很有用，它在一定程度上解决了渲染输出的性能问题。然而用户事件输入目前为止一直都只能在主线程实现，例如：用户点击了下屏幕，内核需要进行 hittest，之外再进行具体的事件处理，假如是采用了 Animation Worklet 等异步渲染技术，这时候可能还需要将事件抛到相应的 Worklet 线程，再更新渲染实现。整个流程下来，即产生了多余的主线程开销，又延缓了 Worklet 线程更新渲染的时机。Worker/Worklet Event Delegation 正是为了解决此类问题而提出，它可以在子线程直接处理事件而无需阻塞主线程，即增加了主线程的流畅性，由保证了子线程的及时输出。
• Moving rendering work off main thread ：尚在构思中，Chromium 对于整个渲染架构有过很多思考。

V8引擎技术

• LLVM Builtin Code Generator：UC 内核团队带来的分享。重点介绍了面向真实 Web 环境所做的重点优化改进方案，用以提升真实场景中的 JavaScript 运行效率。
• Parsing JavaScript in zero* time：大幅降低 JavaScript 解析时间。对首屏加载的提升非常重要，从 V8 工程师给的结果来看，确实有不错的提升：

U4 内核实现了自己的 JavaScript 解析优化方案，但提升不会如上图动图对比那么大。

• Oilpan - Now and beyond：重点介绍了 Unified Heap，可以减少 10% 的主线程 GC 次数。

• Electron & the Web：一套 APP 级别的开发解决方案，融合了 Web + Node.js，扩展了很多可直接与系统进行交互的 API ，使得 Web + JavaScript 技术开发 APP 成为可能。
• PWA：APP Platform 的真实落地技术方案。Chromium 这些年来一直在不断完善 PWA，目前已覆盖多个核心主流平台，体验上在持续提升，同时通过 "Fugu" 项目也在快速补全 APP 级开发能力。