Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
Chrome のレンダリング パイプラインにおけるパフォーマンス向上について
2017年2月9日木曜日
この記事は Chris Harrelson、描画プロフェッショナルによる Chromium Blog の記事 "
Performance improvements in Chrome's rendering pipeline
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
スピードは Chrome の中核をなす 4 原則の 1 つです。ウェブ デベロッパーは、このスピードを活かして、高速で魅力的なウェブ エクスペリエンスを提供することができます。ブラウザの高速化は多数のコンポーネントによって実現されていますが、レンダリング パイプラインは主に、ユーザーにとって高速で応答性が高いと感じられる毎秒 60 フレーム(fps)でウェブサイトを表示する要を担っています。我々はここ数か月で Chrome のレンダリング パイプラインに多数の改善を行っており、さらに効率的な処理を実現しています。現在の Chrome は、余分なタスクを賢くスキップしたり、最適なレンダリング アルゴリズムを選択したり、システム ハードウェアを効率的に活用したりできるようになったおかげで、少ない消費電力でウェブサイトを高速に読み込んだり、スムーズに実行したりできるようになりました。
コンテンツを 60fps で表示するには、
各フレームを 16 ミリ秒でレンダリング
しなければなりません。これには、JavaScript の実行、スタイル、レイアウト、描画や、結果のピクセルをユーザーの画面にプッシュする処理も含まれます。Chrome がこの 16 ミリ秒という時間の予算を節約するほど、ウェブ デベロッパーがスクリプトを実行してコンテンツを読み込み、ユーザーを楽しませるための時間が増えます。最近のレンダリング パイプラインの改善の多くは、Chrome の実際のスピードを上げることではなく、フレームごとのワークロードの削減に焦点を合わせています。
たとえば、Chrome が画面にピクセルを描画する前には、まずページのどの要素を再描画する必要があるか、どの要素は前のフレームのキャッシュからコピーできるかを判断する必要があります。頻繁に DOM が変更される非常に動的なページでは、このパフォーマンス コストが急速に積み上がります。このタスクをシンプルにするため、Chrome は各要素に対して生成される描画コマンドをトラッキングし、視覚的に重複しないサブセットを識別するようになりました。変更されていないサブセットに対しては、直接ブロック全体をキャッシュからコピーするだけでよく、他に何もする必要はありません。この最適化によって、画面に新しいフレームを描画する際にかかる時間を最大 35% 削減できます。
また、Chrome はピクセルをいくつかのタイルにグループ化することによって、画面のアップデートを小さくして高速化しています。以前は、DOM のアップデートによって変更されたすべてのタイルを再描画していました。しかし、この処理が最適と言えるのは、タイルの大半を再描画する必要がある場合のみです。一部のピクセルのみが変更された場合は、前のフレームから
タイル全体をコピー
し、新しいピクセルをアップデートする方が高速です。高速な再描画パイプラインをインテリジェントに選択することにより、タイルの再描画にかかる時間が最大 40% 削減されます。
以前は、入力カーソルの点滅といったあらゆる画面のアップデートによって、タイル全体が再レンダリングされていました(左)。現在は、一部のピクセルのみが変更された場合、変更された領域のみを再描画します(右)。
インテリジェントなワークロードの最適化に加え、基盤となるハードウェアをうまく選択して処理効率をあげる仕組みも導入されています。video 要素や canvas 要素は
昔から GPU によって高速化されてきました
が、さらに高度なレンダリング タスクにも GPU を活用できるような改善が続けられています。Android、Mac、Windows の Chrome では、複雑なサイトのコンテンツをレンダリングする際にも GPU による高速化をうまく活用できるようになっています。これによって、最新の SVG ページや HTML5 ページでのアニメーションのパフォーマンス、入力の遅延が改善され、スクロールがスムーズになりました。
スピードにはさまざまな側面があります。私たちは引き続き、デベロッパーの皆さんがユーザー エクスペリエンスを最適化して 60fps を実現できるように、Chrome のパフォーマンス向上に取り組んでいきます。レンダリング パイプラインはパズルの 1 ピースにすぎません。この先には、まだ多くのなすべきことがあります。私たちは、すべての Chrome ユーザーが常に高速で反応の早いウェブを使えるようにするため、パフォーマンスについて深く探求し続けています。今後もご期待ください。
Posted by
Eiji Kitamura - Developer Relations Team
コメントを投稿
ラベル
#DevFest16
1
#hack4jp
3
A4A
1
Action on Google
1
Addy Osmani
1
ADK
2
AdMob
14
Ads
8
Agency
1
ALPN
1
AMP
25
AMP Cache
2
Analytics
9
Andorid
9
Android
198
Android Auto
1
Android Design Support Library
1
Android Developer Story
3
Android N
18
Android Pay
1
Android Studio
17
Android Support Library
3
Android Things
1
Android TV
8
Android Wear
23
androidmarket
3
Angular 2
2
AngularJS
2
API
22
APIExpert
45
apk
2
app engine
21
App Indexing
7
App Invites
6
AppCompat
2
Apps Script
6
aprilfool
3
ArtTech
1
Audio
3
Auth Code
1
Authentication
7
AuthSub
2
Autotrack
2
Awareness API
1
Beacons
6
BigQuery
9
Billing
1
BLE
4
Blink
1
blogger
1
Brillo
1
Brotli
1
Budou
1
Calendar
1
Cardboard
4
Career
1
Case Study
1
chrome
67
Chrome Custom Tab
1
Chrome Dev Summit
1
chrome extension
4
Chrome for Android
2
Chrome for iOS
1
Chrome OS
2
Chromebook
2
Chromecast
7
chromewebstore
6
Chromium
5
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
8
Cloud Test Lab
2
CocoaPods
1
codejam
5
codelab
2
compute engine
3
Context
1
Crash Reporting
1
Dart
2
DataCenter
1
Daydream
4
Deep Learning
1
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
4
Developer Preview
4
Developer Relations
2
DevFest
7
DevFestX
3
devtools
3
DirectShare
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
Dynamic Links
1
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
59
Firebase Admin SDK
1
Firebase Analytics
3
Firebase Cloud Messaging
3
Firebase Database
4
Firebase Libraries
1
Firebase Remote Config
3
Flash
1
font
3
G Suite
3
game
17
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
11
Geo
35
Gingerbread
1
GLIDE
5
Gmail
1
Gmail API
1
Go
1
golang
4
goo.gl
1
Google
5
Google Apps
6
Google Apps Script
3
Google Assistant
1
Google Cast
8
Google Cloud Messaging
10
Google Cloud Platform
6
Google Code-in
1
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
1
Google Drive
3
Google Fit
2
Google for Mobile
1
Google for Work
1
Google Maps
41
Google Play
39
Google Play Game Services
7
Google Play Services
19
Google Plus
14
Google Search
5
Google Sheets API
1
Google Sign-In
12
Google Slides API
2
Google Summer of Code
1
Google Tag Manager
1
Google Trust Services
1
Google+
2
Googleapps
10
GoogleGames
1
GoogleI/O
27
GoogleLabs
1
GoogleTV
1
Gradle
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
6
Hosting
2
HTML5
17
HTML5Rocks
1
HTTP/2
4
HTTPS
7
ID Token
1
Identity
12
Identity Toolkit
1
Ignite
4
IME
10
Instant Apps
1
intern
2
Invites
1
iOS
14
IoT
2
IPv6
1
Japanese Input
1
JavaScript
5
K-12
1
Key Transparency
1
Knowledge Graph
1
l10n
8
LINE
1
Lollipop
10
Machine Learning
1
Marshmallow
10
Material
1
Material Design
19
MDL
1
MIDI
2
Mobile
11
Mobile Bootcamp
4
Mobile Vision
3
mod_pagespeed
1
monetize
3
Mozc
14
Music
1
NativeDriver
2
NativeScript
1
Nearby
4
Nexus
2
Nexus S
1
NFC
1
Node.js
1
NPAPI
2
NPN
1
oauth
8
OpenGL
4
OpenID
3
OpenID Connect
2
OpenSocial
1
opensource
13
Optimization
1
Payment
2
People API
1
Performance
8
PersonFinder
1
Physical Web
3
Place Picker
1
Player Analytics
4
Policy
2
Polymer
7
Progressive Web Apps
8
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
publicdata
1
Push API
1
Push Notification
3
QUIC
1
RAIL
1
React
1
React Native
2
Realtime Database
2
Redux
1
Remote Config
3
Remote Display API
1
Runtime Permission
1
Sample Code
2
schema.org
1
security
20
Service Worker
3
sketchup
1
SmartLock for Passwords
4
social
4
SPDY
3
speak2tweet
1
Spreadsheet
1
startup
3
Storage
2
streetview
3
Study Jams
3
Swift
1
SwiftShader
1
Task
4
techtalk
12
TensorFlow
2
test
3
Test Lab
3
ToS
1
Transliteration
1
Twitter
1
Udacity
16
Unity
3
UX
1
V8
2
VP9
1
VR
7
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
7
Web Animations
1
Web Components
5
Web Manifest
1
WebAssembly
1
WebMusic
4
WTM
2
Xcode
1
YouTube
15
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2017
2
1
2016
12
11
10
9
8
7
6
5
4
3
2
1
2015
12
11
10
9
8
7
6
5
4
3
2
2014
12
11
10
9
8
7
6
5
4
3
2
1
2013
12
11
10
9
8
7
6
5
4
3
2
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
7
6
5
4
3
2
1
2010
12
11
Feed
Google
on
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"