Local blog for Japanese speaking developers
Windows 版 Chrome のパフォーマンス改善とネイティブ ウィンドウ オクルージョンの導入
2022年1月17日月曜日
この記事は Chrome デベロッパー、David Bienvenu による Chromium Blog の記事 "
Chrome on Windows performance improvements and the journey of Native Window Occlusion
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
ブラウザを
タブグループ
で整理している方でも、
ウィンドウに名前を付けている
方でも、
タブ検索
やその他の方法を使っている方でも、目的のタブにたどり着くためにたくさんの機能を使うことができます。
速さと好奇心
の今回の投稿では、どのウィンドウが表示されているかを利用してどのように Chrome を最適化したかについて説明します。その結果、
起動が 25.8% 速くなり、クラッシュは 4.5% 減少しました。
背景
Chrome では、数年間にわたるユーザー エクスペリエンス改善の取り組みの中で、バックグラウンド タブの優先度を下げてきました
[1]
。たとえばバックグラウンド タブでは、JavaScript の速度を制限したり、ウェブ コンテンツの
レンダリング
を抑制したりしています。これにより、CPU や GPU、メモリの使用量が減少し、実際にユーザーに表示されるフォアグラウンド タブで利用できるメモリや CPU、GPU が増加します。一方で、このロジックの対象になるのは、ウィンドウでフォーカスが当たっていないタブ、最小化されているウィンドウ、画面外のウィンドウのみです。
実験を通して、Chrome のウィンドウの 20% 近くが、完全に別のウィンドウのうしろに隠れている(オクルージョンされている)ことがわかりました。私たちは、こういったオクルージョンされているウィンドウをバックグラウンド タブと同じように扱うことができれば、パフォーマンスは大幅に向上するに違いないという仮説を立てました。そこで、今から 3 年ほど前に、各 Chrome ウィンドウのオクルージョン状態をリアルタイムに追跡し、オクルージョン対象のウィンドウのタブの優先度を下げるというプロジェクトを始めました。このプロジェクトを行うには、ユーザーの画面に表示されている Chrome 以外のウィンドウのネイティブ位置を知る必要があります。そこで、プロジェクトをネイティブ ウィンドウ オクルージョンと名付けました(位置情報は、オクルージョンの計算に使った後、即座に破棄しています)。
ネイティブ ウィンドウ オクルージョンの計算
Windows OS では、あるウィンドウが完全に他のウィンドウに隠れているかどうかを直接的に知る方法は提供されていません。そのため、Chrome は独自に検知する必要があります。他の Chrome ウィンドウだけを考えればよいのなら、これは簡単です。Chrome のウィンドウがどこにあるかはわかっているからです。しかしここでは、ユーザーが開いているかもしれない Chrome 以外のウィンドウをすべて考慮し、Chrome のウィンドウのオクルージョン状態が変わるかもしれないイベントをすべて検知する必要があります。
どの Chrome ウィンドウがオクルージョン対象かを継続的に追跡するには、主に 2 つのことが必要です。1 つ目はオクルージョンの計算です。ここでは、デスクトップで開いているウィンドウについて
z-order
順(前から後)に反復処理を行い、そのウィンドウが Chrome ウィンドウを完全に隠しているかどうかを確認します。2 つ目は、そのオクルージョンの計算をいつ行うかを決めることです。
オクルージョンの計算
理論的には、どのウィンドウがオクルージョン対象かを判断するのは簡単です。しかし実際には、
マルチモニタ環境
、
仮想デスクトップ
、
透過ウィンドウ
、
クロークされたウィンドウ
など、複雑な要素がたくさん存在します。この点には、慎重に対処しなければなりません。実際にユーザーに表示されているウィンドウをオクルージョン対象と判断してしまうと、ウェブ コンテンツが表示されるはずの場所が白くなってしまうからです。また、オクルージョンの計算をしている間に UI スレッドをブロックすることは、Chrome の応答性とユーザー エクスペリエンスが悪化する可能性があるため、避けなければなりません。そこで、次のようにして別のスレッドでオクルージョンの計算をしています。
最小化されたウィンドウは表示されないので、無視する。
別の仮想デスクトップ上にある Chrome ウィンドウはオクルージョン対象とマークする。
ディスプレイのモニターを組み合わせた仮想画面の矩形を計算する。これがオクルージョンされていない画面の矩形になります。
デスクトップで開いているウィンドウについて、前から後の順番に反復処理を行う。見えないウィンドウ、透明なウィンドウ、フローティング ウィンドウ(スタイルが
WS_EX_TOOLBAR
であるウィンドウ)、クロークされたウィンドウ、他の仮想デスクトップのウィンドウ、非矩形ウィンドウ
[2]
などは無視する。重要な点として、このようなウィンドウを無視すると、オクルージョン対象のウィンドウの一部が表示されているものと見なされる(偽陰性)可能性がありますが、表示されているウィンドウがオクルージョン対象と見なされる(偽陽性)ことはありません。各ウィンドウについて以下を行います。
オクルージョンされていない画面の矩形から対象のウィンドウの領域を引く。
対象のウィンドウが Chrome ウィンドウである場合は、その領域がオクルージョンされていない領域と重なっているかどうかを確認する。重なっていない場合、その Chrome ウィンドウは前にあるウィンドウによって完全に覆われているため、オクルージョン対象になります。
すべての Chrome ウィンドウの計算が終わるまで繰り返す。
この時点で、オクルージョン対象とマークされていない Chrome ウィンドウは表示されていることになり、オクルージョンの計算は終了する。ここで、UI スレッドにタスクをポストし、Chrome ウィンドウの表示状態を更新します。
この操作は、すべて同期ロックを使わずに行われるので、オクルージョンの計算は UI スレッドに最低限の影響しか与えない。たとえば、UI スレッドをブロックしてユーザー エクスペリエンスを悪化させることはありません。
実装についてさらに詳しく知りたい方は、
ドキュメント
をご覧ください。
オクルージョンの計算タイミングの決定
オクルージョンの計算をし続けると、Chrome のパフォーマンスが低下することになるので、それは避けたいことです。つまり、ウィンドウが表示対象またはオクルージョン対象になるタイミングを検知する必要があります。ありがたいことに Windows では、ウィンドウの移動、リサイズ、最大化、最小化などのさまざまなシステム イベントをトラッキングできます。オクルージョン計算スレッドは、これらのイベントを追跡したいことを Windows に伝えます。そしてイベントが通知されると、イベントを精査して新たにオクルージョン計算を行うかどうかを決定します。非常に短い時間内に複数のイベントを受け取る可能性があるため、オクルージョンの計算は 16 ミリ秒に 1 回を超える頻度では行いません。この時間は、フレームレートが 1 秒あたり 60 フレーム(fps)である場合に 1 フレームが表示される時間に対応します。
リッスンするイベントは、ウィンドウのアクティブ化や非アクティブ化、ウィンドウの移動やリサイズ、ユーザーの画面ロックやロック解除、モニターの電源オフなどです。オクルージョンの計算は必要以上に行いたくありませんが、ウィンドウが表示されるイベントを見逃すわけにはいきません。見逃してしまうと、ウェブ コンテンツが表示されるはずの場所が白くなってしまうからです。これは絶妙なバランスです
[3]
。
リッスンするイベントは、Chrome ウィンドウがオクルージョンされるかどうかに関わるものです。たとえば、マウスを動かすとたくさんのイベントが発生し、カーソルも点滅するたびにイベントを発行しています。そういったイベントはウィンドウ オブジェクトとは関係ないので、無視します。また、ツールチップの表示によってオクルージョンの計算がトリガーされることはないので、大半のポップアップ ウィンドウのイベントも無視します。
オクルージョン スレッドは、さまざまな Windows イベントを検知したいことを Windows に伝えます。UI スレッドは、主要な状態変化(モニターの電源オフ、ユーザーによる画面ロック)が発生した場合にそれを検知したいことを Windows に伝えます。
結果
この機能は、効果を測定する
実験
と合わせて開発され、2020 年 10 月に M86 リリースの一部としてすべての Chrome Windows ユーザーにロールアウトされました。指標から、この機能をオンにした場合にパフォーマンスが大幅に改善されることがわかります。
起動時間が 8.5% から 25.8% 短縮
GPU メモリ使用量を 3.1% 削減
レンダラー全体の描画フレーム数を 20.4% 削減
レンダラーのクラッシュが発生したクライアントが 4.5% 減少
First Input Delay
(初回入力までの遅延時間)が 3.0% 向上
First Contentful Paint
(視覚コンテンツの初期表示時間)と
Largest Contentful Paint
(最大視覚コンテンツの表示時間)が 6.7% 向上
起動時間と初回入力までの遅延時間が改善したのは、Chrome が起動時に 2 つ以上の全画面ウィンドウを復元する場合、いずれかのウィンドウがオクルージョンされる可能性が高いためです。Chrome はそのウィンドウに関する大半の作業を省略できるので、より重要なフォアグラウンド ウィンドウのためにリソースを節約できます。
すべての統計情報の出典 : Chrome クライアントから匿名で集計した
実データ
。
[1] 音声や動画を再生しているタブなど、一部のタブは優先度が下がりません。
[2] 非矩形ウィンドウの計算は複雑です。これはあまり使われないと考えられていましたが、Windows 7 のデフォルト テーマの特性上、Windows 7 では一般的に使われています。
[3] 最初にこれをリリースしたとき、Citrix で別のユーザーが画面をロックすると、Windows が現在のセッションではないセッションの変化通知を送信してくるため、白いウィンドウが表示されることがすぐにわかりました。詳細は
こちら
をご覧ください。
Reviewed by
Eiji Kitamura - Developer Relations Team
ラベル
.app
1
.dev
1
#11WeeksOfAndroid
13
#11WeeksOfAndroid Android TV
1
#Android11
3
#DevFest16
1
#DevFest17
1
#DevFest18
1
#DevFest19
1
#DevFest20
1
#DevFest21
1
#DevFest22
1
#DevFest23
1
#hack4jp
3
11 weeks of Android
2
A MESSAGE FROM OUR CEO
1
A/B Testing
1
A4A
4
Accelerator
6
Accessibility
1
accuracy
1
Actions on Google
16
Activation Atlas
1
address validation API
1
Addy Osmani
1
ADK
2
AdMob
32
Ads
73
Ads API
143
ads query language
2
ads scripts
2
ads search
1
advanced markers
1
Advanced Protection Program
3
AdWords API
25
adwords scripts
2
aerial view api
1
Agency
1
AI
22
AI Agent Summit
1
AIY
3
AIY Vision Kit
2
ALPN
1
AMP
120
AMP Cache
9
AMP Camp
2
AMP CSS
1
AMP Extension
1
AMP Fest
1
AMP for Email
4
AMP Optimizer
1
AMP Packager
1
AMP Playground
1
AMP Plugin
1
AMP SSR
1
AMP Story
4
AMP Toolbox
1
amp-bind
1
amp.dev
1
AMPHTML Ads
1
Analytics
9
Andorid
12
Android
403
Android 10
1
Android 11
20
Android 11 Compatibility
1
Android 11 final release
1
Android 11 meetups
1
Android 9
1
android api
1
Android App Bundle
1
Android App Development
23
Android Architecture
1
Android Architecture Components
1
Android Auto
1
Android Design Support Library
1
Android Developer
14
Android Developer Story
4
Android Developers
13
Android Enterprise
6
Android for cars
2
Android Go
1
Android Jetpack
6
Android N
18
Android O
14
Android Open Source Project
1
Android P
7
Android Pay
1
android privacy
1
Android Q
13
Android Ready SE Alliance
1
android security
6
Android Security Year in Review
1
Android StrongBox
1
Android Studio
47
Android Studio 4.1
1
android study jam
1
Android Support Library
6
Android Things
15
Android Tools
2
Android TV
11
Android Vitals
4
Android Wear
29
android11
6
androidmarket
3
androidstudio
1
AndroidX
6
Angular
2
Angular 2
2
AngularJS
2
Announcements
2
Anthos
2
antmicro
1
AoG
1
aosp
1
API
28
APIExpert
45
apk
2
APM
1
app
3
App Action
1
App Bundle
2
app check
1
app engine
24
App Indexing
7
App Invites
6
App Maker
2
App modernization
1
AppCompat
2
Apps Flutter eBay
1
Apps Script
12
AppSheet
1
aprilfool
4
AR
3
Architecture Components
7
ARCore
3
ArtTech
1
asset-based extensions
2
assets
1
Associate Android Developer Certificate
1
Attribution Reporting
1
Audio
7
Auth Code
1
Authentication
9
AuthSub
2
Autofill
5
AutoML
1
Autotrack
2
award
1
Awareness API
1
basemap
1
basic-card
1
Beacons
6
bento
2
BERT
1
Best Practices
1
beta
4
Better Ads Standards
3
BigQuery
10
Billing
1
Biometrics
1
BLE
4
Blink
1
Blockly
1
blogger
1
BodyPix
1
bootcamp
1
Brillo
1
Brotli
2
Budou
1
budoux
1
Buildbetterapps
2
Business and Leadership
1
C++
1
Calendar
3
call ads
1
campaign
2
campaignsharedset
1
Campus
1
Canvas
1
Cardboard
4
Career
1
Case Studies
1
Case Study
3
CCPA
1
CDS 2020
3
CDS Recap 2020
3
Certificate
8
changestatus
1
chrome
261
chrome 98
1
Chrome Apps
1
Chrome Custom Tab
4
Chrome Dev Summit
5
chrome extension
14
Chrome for Android
2
Chrome for iOS
3
Chrome OS
10
Chrome Root Program
1
Chrome Root Store
1
Chrome Tech Talk Night
4
chrome103
1
chrome104
1
chrome108
1
chrome90
1
Chromebook
5
Chromecast
7
chromewebstore
9
Chromium
20
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
29
Cloud AI Platform
2
Cloud Firestore
5
Cloud Functions
9
Cloud IoT Device SDK
1
cloud messaging
1
Cloud ML Summit
1
Cloud Next
19
Cloud OnAir
5
Cloud OnBoard
4
Cloud PubSub
1
Cloud Run
1
Cloud Storage
1
Cloud Study Jams
3
Cloud Summit
1
Cloud Test Lab
2
Cloudflare
1
CNN
1
Coalition for Better Ads
2
CocoaPods
1
code review
1
codejam
5
codelab
5
Codepen
1
Colaboratory
1
Common Criteria
1
Community
7
compatibility
1
Compose
1
compose camp
1
compute engine
3
consent
1
Contests
1
Context
1
controls
1
Conversation API
1
conversations
2
conversion
1
Cookie
10
Coral
3
core web vitals
1
COVID-19
2
Crash Reporting
2
Crashlytics
3
cryptography
1
Custom Element
1
Custom Model
1
CWV
2
dark theme
1
Dart
2
data retention
1
DataCenter
1
datacloudsummit
1
Daydream
4
deck.gl
2
Deep Learning
4
Delegation
1
Demo Party
1
Design Patterns
1
Design Sprint
3
DesignBytes
1
Designer
1
DevArt
3
DevBytes
6
Developer
15
Developer Console
4
Developer Library
1
Developer Preview
6