Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
ウェブのスクロール パフォーマンスを改善する新しい API のご紹介
2016年6月3日金曜日
[この記事は Rick Byers、Stefan Zager、”低品質撲滅の専門家”による Chromium Blog の記事 "
New APIs to help developers improve scroll performance
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
Chrome の最初のリリース以来、スピードは最優先事項であり、デベロッパーがインタラクティブなウェブ エクスペリエンスの限界を次々に超えるなか、その重要度は増すばかりです。デベロッパーが関与しなくても Chrome が自動で行うパフォーマンス最適化も多くありますが、ときに、Chrome が高速に実行されるには、より多くの情報が必要な場合があります。
Chrome 51
では、
パッシブ イベント リスナー
と
Intersection Observer
のサポートが導入されました。この 2 つは、デベロッパーが魅力的で効果的なエクスペリエンスをを支援する新しいウェブ標準です。
タッチ イベント リスナーは、多くの場合、カスタマイズしたスクロール体験や、ユーザー エンゲージメントの分析を目的として使用されます。これらのリスナーにより、ユーザーが画面にタッチしたときに実行する JavaScript を登録し、スクロールを完全にキャンセルすることができるようになります。ウェブ アプリがスクロールをキャンセルするかどうかを事前に知らされていない場合、Chrome はこの JavaScript が終了するのを待ってからページ自体をスクロールする必要があります。問題は、80% 以上のタッチ リスナーが実際にはスクロールをキャンセルせず、最大数秒間スクロールを遅らせてしまうことです。これにより、ページがユーザーの指について来ないように感じ、品質が大幅に低下してしまいます。
Chrome 51 では、イベント リスナーがスクロールを阻止しないことを事前に宣言できるようになります。デベロッパーは、長時間実行するスクリプトを避けることで、
あらゆる品質低下を防ぐ
必要がありますが、この変更により、JavaScript の実行が完了するまでスクロールを遅らせる必要がなくなります。パッシブ イベント リスナーの詳細およびその使用方法については、
EventListenerOptions の詳細な説明
を参照してください。
変更なしの場合の cnn.com のスクロール(左)とタッチリスナーをパッシブにアップデートした今後のサイト(右)
ウェブ プラットフォームの改善により遅延を削減する方法がもう 1 つあります。JavaScript で効率的に実装できない共通の操作を、ブラウザが代わりにネイティブに構築することです。例えば、ある要素がドキュメントのビューポート内で表示可能か、別のスクロール コンテナにあるかの計算に使用されている大規模な JavaScript です。これは、特定の要素が表示されていたか、ページの下部に動的に追加コンテンツを読み込むかを知るために役立ちますが、ユーザーの操作で頻繁に実行されると、品質低下や不必要なバッテリー消費の原因となります。
Chrome 51 には、より効率が良く可視性情報を提供する新しい API、Intersection Observer が含まれています。この API を使えば、任意の要素が監視対象の要素またはその子要素と交差したら、コールバックを受け取ることができ、今後は独自の JavaScript で実装することなく、ページ読み込みやスクロール パフォーマンスの改善を実現することができるようになります。詳細情報と実装の詳細は、
Intersection Observer の説明
を参照してください。
調査
に
よると
、パフォーマンスが向上するとユーザーの満足度が上がり、ユーザーはそのサイトに繰り返しアクセスするようになります。パフォーマンスは、ブラウザ実装者だけではなく、ウェブ製作者も含めたウェブ エコシステムのすべての人々が気にかける必要のあることです。トップレベルのサイトと埋め込みコンテンツの両方のデベロッパーがこれらの新しい API を使用すれば、すべてのユーザーに対する高速なウェブが実現します。
Posted by
Eiji Kitamura - Developer Relations Team
コメントを投稿
ラベル
#hack4jp
3
Addy Osmani
1
ADK
2
AdMob
1
ALPN
1
AMP
3
Analytics
4
Andorid
6
Android
147
Android Auto
1
Android Design Support Library
1
Android Developer Story
2
Android N
2
Android Studio
12
Android Support Library
3
Android TV
7
Android Wear
20
androidmarket
3
AngularJS
2
API
20
APIExpert
45
app engine
21
App Indexing
5
App Invites
5
AppCompat
2
Apps Script
6
aprilfool
3
ArtTech
1
Audio
2
Auth Code
1
Authentication
2
AuthSub
2
Autotrack
1
Beacons
5
BigQuery
6
BLE
4
Blink
1
blogger
1
Brillo
1
Brotli
1
Calendar
1
Cardboard
3
Career
1
Case Study
1
chrome
53
Chrome Custom Tab
1
chrome extension
2
Chrome for Android
1
Chrome for iOS
1
Chromecast
6
chromewebstore
6
Chromium
4
ClientLogin
3
Cloud
8
Cloud Test Lab
1
CocoaPods
1
codejam
5
codelab
2
compute engine
3
Dart
2
DataCenter
1
Deep Learning
1
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
3
Developer Preview
2
Developer Relations
2
DevFest
6
DevFestX
3
devtools
3
DirectShare
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
2
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
8
font
2
game
14
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
10
Geo
22
Gingerbread
1
GLIDE
5
Gmail
1
Go
1
golang
4
goo.gl
1
Google
5
Google Apps
1
Google Cast
6
Google Cloud Messaging
8
Google Cloud Platform
6
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
1
Google Drive
2
Google Fit
2
Google for Work
1
Google Maps
27
Google Play
27
Google Play Game Services
6
Google Play Services
18
Google Plus
14
Google Search
3
Google Sign-In
8
Google+
1
Googleapps
10
GoogleGames
1
GoogleI/O
26
GoogleLabs
1
GoogleTV
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
5
HTML5
17
HTML5Rocks
1
HTTP/2
3
HTTPS
2
ID Token
1
Identity
10
Identity Toolkit
1
Ignite
4
IME
10
intern
2
iOS
8
IoT
1
IPv6
1
JavaScript
4
K-12
1
Knowledge Graph
1
l10n
8
Lollipop
10
Machine Learning
1
Marshmallow
10
Material
1
Material Design
17
MDL
1
MIDI
1
Mobile
8
Mobile Bootcamp
4
Mobile Vision
3
mod_pagespeed
1
monetize
3
Mozc
14
Music
1
NativeDriver
2
Nearby
3
Nexus
1
Nexus S
1
NFC
1
NPAPI
2
NPN
1
oauth
6
OpenGL
3
OpenID
3
OpenID Connect
2
OpenSocial
1
opensource
11
Payment
1
People API
1
Performance
6
PersonFinder
1
Physical Web
2
Place Picker
1
Player Analytics
4
Policy
2
Polymer
6
Progressive Web Apps
4
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
publicdata
1
Push API
1
Push Notification
1
QUIC
1
RAIL
1
Remote Display API
1
Runtime Permission
1
Sample Code
2
schema.org
1
security
8
Service Worker
3
sketchup
1
SmartLock for Passwords
4
social
4
SPDY
3
speak2tweet
1
startup
3
streetview
3
Study Jams
3
techtalk
12
TensorFlow
1
test
2
ToS
1
Transliteration
1
Twitter
1
Udacity
14
Unity
2
UX
1
V8
2
VP9
1
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
2
Web Animations
1
Web Components
4
Web Manifest
1
WebAssembly
1
WebMusic
3
WTM
2
YouTube
14
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2016
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
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"