1 of 55

BlinkOn 11

\o/

2 of 55

State of the web

Rick Byers <rbyers@chromium.org>

Director of Engineering, Blink team, Google

3 of 55

4 of 55

https://bit.ly/blinkon-values

5 of 55

Data

6 of 55

January

February

March

April

May

June

July

August

September

October

Engagement declining as the month goes by

Number of page loads per users on a device capable of 4G

Chrome metrics 2018

7 of 55

January

February

March

April

May

June

July

August

September

October

PLT

Increasing as the month goes by

etc.

Page Load time for devices capable of 4G

Chrome metrics 2018

8 of 55

Shipped Stale-while-revalidate resulting in οΏ½0.5%↑ publisher revenue*

*Based on 2 weeks of metrics logged from 5.2B Google display ad impressions within Chrome's holdback experiment on 1% of all Chrome 75+ traffic.

9 of 55

State of mobile web performance - FCP

10 of 55

State of mobile web performance - LCP

P95: 8s

11 of 55

State of mobile web performance - FID

P95: 300ms

12 of 55

Web-platform-tests

13 of 55

14 of 55

Blink is becoming more diverse

Contributors:

2018: 761

2019: 861

15 of 55

Blink is becoming more diverse

2019 Commits:

Igalia: 1782

Microsoft: 636

Opera: 352

Intel: 235

Samsung: 108

Facebook: 30

LG: 23

Misc non-google: 229

16 of 55

Chromium:οΏ½The past 6 months

Ian Kilpatrick <ikilpatrick@chromium.org>

Random Blink Engineer, Layout Team, Google

17 of 55

Intent to Implement Prototype πŸ› 

  • SMS OTP Retriever API
  • PaymentRequestEvent.changePaymentMethod()
  • WebXR plane detection API
  • Blink Editing Rearchitecture with TextCursor
  • Picture-in-Picture for arbitrary content
  • JS Self-Profiling API
  • Periodic Background Sync
  • IFrame execution/freezing feature policy
  • High-risk insecure download blocking in secure contexts
  • (meta): Bundled HTTP Exchanges
  • Intl.DisplayNames API Proposal
  • CSS Color Adjust: color-scheme property

18 of 55

Intent to Implement Prototype πŸ› 

  • Pause Worklets and Dedicated Workers Execution on document freeze
  • Intl.NumberFormat Unified API Proposal
  • Add quarter option for Intl.DateTimeFormat
  • Add dayPeriod option for Intl.DateTimeFormat
  • Cross-Origin-Resource-Policy-Policy (the name will be changed)
  • Add millisecondDigits option to Intl.DateTimeFormat
  • Largest contentful paint
  • Cross-Origin-Opener-Policy
  • PushSubscriptionChangeEvent & PushManager.refreshSubscription
  • Toggle switch control element
  • Toast UI element

19 of 55

Intent to Implement Prototype πŸ› 

  • JavaScript Memory API
  • @property
  • Content Index API
  • Dynamic Delegation of Autoplay Capability
  • JSON Modules
  • WebSocketStream
  • Seeking for Media Session
  • Position State for Media Session
  • WebRTC SVC extensions
  • Secure context restriction for external requests.
  • Storage Access API
  • document-access feature policy

20 of 55

Intent to Implement Prototype πŸ› 

  • Prefetch Request Changes for Double-Keyed Cache
  • Partition the HTTP Cache
  • Main thread Scheduling APIs: Prioritized scheduler.postTask
  • JavaScript Optional Chaining
  • Top Level Await
  • WebXR Anchors
  • Default Accessibility Semantics for Custom Elements
  • CSS Modules V1
  • More restrictive hasEnrolledInstrument() for autofill data
  • Document Policy
  • More restrictive show() for autofill instruments
  • Element Reflection

21 of 55

Intent to Implement Prototype πŸ› 

  • Font Table Access
  • Font Enumeration
  • PointerLock unadjustedMovement
  • CSS content-size
  • CompressStream
  • window.isFramePending
  • IndexedDB relaxed durability transactions
  • EditContext API
  • Compute img/video aspect ratio from width and height HTML attributes
  • Navigation to Bundled Exchanges (Web Packaging)
  • WebXR DOM Overlay for Handheld AR

22 of 55

Intent to Implement Prototype πŸ› 

  • Screen Enumeration
  • Navigation-controls media query
  • rendersubtree attribute.
  • Autofill Re-Authentication
  • [Payments] shipping address and contact info delegation
  • Adaptive Audio Frame Length
  • [Intervention] Heavy Ad Intervention
  • Percent-based scrolling
  • WebRTC Insertable Streams
  • CSS ::marker pseudo-element
  • QuicTransport
  • Raw Clipboard Access

23 of 55

Intent to Implement Prototype πŸ› 

  • Custom state pseudo class
  • HTMLVideoElement.requestAnimationFrame()
  • MathML Core
  • Trust Token API
  • Conversion Measurement API

24 of 55

Intent to Experiment 🧨

  • MediaCapabilities: encrypted (EME) decodingInfo()
  • Scroll To Text Fragment
  • Dynamic Delegation of Autoplay Capability
  • Contact API
  • Periodic Background Sync
  • JS Self-Profiling API
  • Badging API V2
  • Origin Trial Opt-Out/In for Page Freezing (desktop)
  • rendersubtree attribute + CSS content-size
  • Serial API
  • Native File System API
  • WebSocketStream

25 of 55

Intent to Experiment 🧨

  • Notification Triggers
  • SMS Receiver API
  • Screen Wake Lock API
  • Subresource prefetching+loading via Signed HTTP Exchange
  • Support ARIA Annotation roles in Automation API, ChromeVox screen reader

26 of 55

Intent to Ship 🚒

  • Entering fullscreen consumes user activation
  • Add charLength Attribute to SpeechSynthesisEvent
  • Support step timing functions jump-start|end|both|none
  • New TextMetrics API in Canvas
  • Intl.NumberFormat Unified API Proposal
  • Let all early errors be SyntaxErrors
  • Limit `Referer` header's length to 4k.
  • Throw on invalid 'basic-card' data
  • Stop action for Media Session
  • CSS font-size: xxx-large
  • RTCPeerConnection::onicecandidateerror
  • Web Bluetooth getAvailability()

27 of 55

Intent to Ship 🚒

  • SRI support for link preloads
  • Error structured serialization
  • Overscroll Behavior logical longhands
  • CSS min(), max() and clamp()
  • Alternative Text for CSS Generated Content
  • Largest Contentful Paint
  • Element Timing
  • PerformanceObserverInit buffered flag
  • Layout Instability API
  • WebRTC Perfect Negotiation APIs
  • Percentage opacity
  • Barcode Detection API

28 of 55

Intent to Ship 🚒

  • Async Clipboard read/write with image support
  • Storage Quota Usage Details
  • 'white-space: break-spaces'
  • Promise.allSettled
  • CSS containment: Remove style from strict and content
  • Promise.{all, race, allSettled} optimization
  • IndexedDB transaction explicit commit API call
  • Escape key is not a user activation
  • Animation.pending
  • Media Queries: prefers-color-scheme feature
  • IDBCursor request
  • Scroll Snap Stop

29 of 55

Intent to Ship 🚒

  • Animation.updatePlaybackRate
  • Redact address in PaymentRequest.onshippingaddresschange event
  • pointerrawupdate
  • Add formatRange / formatRangeToParts to DateTimeFormat
  • RTCRtpSender.setStreams()
  • changePaymentMethod() and payment method change event
  • Adding ImageBitmapRenderingContext to OffscreenCanvas
  • Form-associated custom elements
  • 'formdata' event
  • form.requestSubmit()
  • PaymentResponse.retry() and payerdetailchange event
  • Enter Key Hint

30 of 55

Intent to Ship 🚒

  • Seeking for Media Session
  • Position State for Media Session
  • Restrict history navigations if navigation occurs from a sandboxed iframe
  • Inline WebVTT Styling
  • Display alerts for SameSite cookie changes in the developer console
  • Autofocus support for any focusable HTML/SVG element
  • Do not resurrect uninstalled service workers
  • mixed content autoupgrading for audio and video
  • ontransition{run, start, cancel} event handler attributes
  • ServiceWorkerGlobalScope#serviceWoker to get a service worker object corresponding to a worker itself

31 of 55

Intent to Ship 🚒

  • WebXR Gamepad Module
  • WebXR Device API
  • line-break: anywhere
  • overflow-wrap: anywhere
  • Compute img/video aspect ratio from width and height HTML attributes
  • list-style-type: <string>
  • Add calendar options/patterns and other calendars
  • CSS Backdrop Filter

32 of 55

Intent to Remove 🧯

  • β€œ-webkit-appearance” keywords for arbitrary elements
  • β€œ-webkit-appearance: button” for arbitrary elements
  • XSSAuditor
  • volume property
  • '_current' special window name
  • Stop evaluating scripts moved between Documents during fetching

33 of 55

crbug.com/1000000

34 of 55

Code Health

  • Mojoification is 93% done
  • Onion Soup is 87% done
  • Large code health improvements by Igalia!
    • 1500+ patches.
    • Removed WTF::CString
    • Removed WTF::Timer
    • Switch(ing) the new Mojo syntax!

Abhijeet Kandalkar

Alexander Dunaev

Antonio Gomes

Cathie Chen

FrΓ©dΓ©ric Wang

Gyuyoung Kim

Henrique Ferreiro

Jacobo Aragunde PΓ©rez

Javier Fernandez

Jessica Tallon

Joanmarie Diggs

Julie Jeongeun Kim

Maksim Sisov

Manuel Rego Casasnovas

Mario Sanchez Prada

Martin Robinson

Miyoung Shin

Nick Diego Yamane

Oriol Brufau

Rob Buis

Sergio Villar Senin

35 of 55

Fugu - Mobile Apps 🐑

Origin Trial 🧨

  • Contact Picker API
  • Periodic Background Sync
  • SMS Receiver API
  • getInstalledRelatedApps API
  • Scheduled Notifications API

Flag 🚩

  • Shape Detection

Ship 🚒

  • Expanded storage quota

fugu-dev@chromium

36 of 55

Fugu - Desktop Apps 🐑

Origin Trial 🧨

  • Native File System API
  • WebSocketStream with Backpressure
  • App Icon Badge API

Flag 🚩

  • Web Serial API
  • Web HID API
  • Idle Detection
  • File Type Handling

Ship 🚒

  • Image support for Async Clipboard API

fugu-dev@chromium

37 of 55

Fugu - Hardware Capabilities 🐑

Flag 🚩

  • Screen Wake Lock
  • Web NFC
  • Camera Pan/Tilt/Zoom
  • Ambient Light Sensors

Kenneth Christiansen@intel

Leon Han@intelοΏ½Raphael Kubo Da Costa@intel

Rijubrata Bhaumik@intel

38 of 55

V8 - Pointer Compression πŸ—œ

  • Ships in M80 on Arm64
  • Reduced V8 heap size by ~35%
  • Reduced renderer memory size by ~10% for 64-bit
  • x64 data: on real-world websites ~4% faster, on high-performance benchmarks ~3% slower (see notes)
  • Arm64 perf: 2% improvement in high-performance benchmarks

ishell@chromium

solanes@chromium

sigurds@chromium

verwaest@chromium

39 of 55

V8 - Lite!

  • Shipped all V8 Lite memory optimizations in M78
  • Reduced V8 heap size by ~18% with no performance penalty
  • Landed optimizations include:
    • Lazy feedback allocation
    • Lazy source positions
    • Bytecode flushing

40 of 55

V8 - Unified Heap & Concurrent Oilpan Sweeping

Unified Heap

  • Unified GC scheduling mechanisms which reduces main thread GC time by 20% (Windows Dev finch)
  • New design not prone to 99%ile cases where stand-alone GC scheduling would cause ping pongs (V8->Blink->V8->Blink).

Concurrent Oilpan Sweeping

  • Shipped in M78!
  • Time spent in sweeping (reclaiming) objects on the main thread on average by 50%

41 of 55

WebAssembly

  • Added support for standard C API in V8 7.8
  • M76 - Reduced memory by discarding baseline code
  • M78 - Improved startup time by parallelizing wrapper creation
  • M78 - Improved scalability of background compilation

clemensb@chromium

jkummerow@chromium

thibaudm@chromium

42 of 55

Loading / Network

  • WebSocket is fastest across browsers
    • It has become 4x to 8x faster since M75
    • Removed redundant memory copy, optimized IPC
    • For workers removed the main thread dependency
  • Navigation Loader in browser process
    • (Almost) No thread hops during navigation in the browser process!

43 of 55

Memory

  • User-level memory pressure signals
    • 99%-tile PrivateMemoryFootprint -2.9% (2 GB Android)
    • 99%-tile PageLoad.InteractiveTiming.InputDelay3 -2.9% (2 GB Android)
  • Identified that many detached windows are leaking in real-world apps!
    • 20% of 99%-tile high-memory cases have 32+ leaking windows
    • 3% of 99%-tile high-memory cases have 256+ leaking windows

tasak@chromium

keishi@chromium

bartekn@chromium

44 of 55

BFCache!

45 of 55

46 of 55

Rendering

  • LayoutNG (the β€œbig first bit”) shipped in M77
    • Paint time reduced by ~5%
    • 10-15% of open layout bugs fixed
    • Improved quality, and performance for complex scripts

  • BlinkGenPropertyTrees shipped in M75
    • Unified property tree generation code between blink and cc.
    • Removed -13,000 lines of code
    • Fixed difficult bugs related to clipping, scrolling, and positioning (50 stars)

layout-dev@chromium

paint-dev@chromium

47 of 55

Rendering

  • Custom element improvements
    • Form-associated custom elements
    • Custom states
    • Default accessibility semantics customization
    • Focus technical-debt cleanup paving the way for default focus behavior customization
  • Form Controls visual refresh
    • Collaboration between Google & Microsoft contributors!
    • Stylability improvements
    • Launching β€œsoon”

dom-dev@chromium

48 of 55

Graphics - Compositing

  • 30+% power reduction in video presentation on Windows
  • HDR video playback improvements on Windows
  • 20% scroll latency improvement at 99th percentile on Windows
  • 8% power reduction from implementing SurfaceControl on Android Q.
  • 60%+ improvement in vsync jitter on Windows
  • Significant progress on Viz architecture
    • OOP-R & OOP-D projects launched on ChromeOS with wins
    • SkiaRenderer in trials.

49 of 55

Graphics - Canvas / WebGPU / WebGL

  • Canvas
    • Shipped Vector Printing of 2D Canvas
    • 70% reduction in Canvas CPU usage on Main thread
    • 2~5% reduction in Canvas memory usage
    • Preparing for a Canvas 2.0 spec update
    • Low-latency canvas shipped on ChromeOS and coming soon to Windows

  • WebGL / WebGPU
    • Hard at work to get ubiquitous WebGL 2.0 by contributing ANGLE implementation in WebKit
    • Google Earth on WebGPU + WASM at CDS

50 of 55

Media

  • AV1 codec
    • >5B hours of AV1 served on YT
  • WebVTT improvement (inline styling & settings styling)

51 of 55

Accessibility

  • Microsoft Contributions!
    • UI Automation Support (Chrome/Edge will be able to support Narrator)
    • PDF accessibility improvements
    • General performance improvements
    • Ability to expose hidden nodes in accessibility tree
    • 4+ committers / 3+ owners so far from this work!

  • β€œGet Image Descriptions from Google” Feature

  • ATK support for Linux users using the Orca screen reader

52 of 55

Devtools

  • Accessibility Improvements
    • Keyboard navigation
    • Code coverage uses Color Vision Deficiency compatible colouring scheme
  • Moved into a separate repository for quicker turn-around
  • REPL mode (experimental)
  • Emulation of dark mode!

53 of 55

  • 43 PRs to Next.js
  • scheduler.postTask behind a flag

54 of 55

Security

  • Site isolation has been brought to Android!

55 of 55

Thankyou!

\o/