Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
Chrome 52 ベータ版: CSS Containment、よりシンプルなパフォーマンス評価、Service Worker からのレスポンスのストリーミング、豊富な Web Push オプション
2016年7月1日金曜日
[この記事は Shubhie Panicker、Performance Powerhouse による Chromium Blog の記事 "
Chrome 52 Beta: CSS containment, simpler performance measurement, streamable responses from service workers, and more options for web push
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
特に記載のない限り、下記の変更は Android、Chrome OS、Linux、Mac、Windows 向けの最新の Chrome
ベータ版
に適用されます。
CSS Containment
リッチでインタラクティブなエクスペリエンスはウェブの要ですが、その複雑さのためにレンダリングに長い時間がかかる場合があります。現在 Chrome では、ヒューリスティックを利用し、ページの変更箇所を特定することで、レンダリングの性能を向上しています。ページ全体を 1 秒に 60 回レンダリングするのではなく、変更箇所のみが更新されます。しかし、要素は親要素の範囲を超えて表示される可能性があるので、ある要素への変更は、同ドキュメント内のあらゆる要素に影響する場合があります。そのため、レンダリング実行中に Chrome が考慮しなければならない要素の数が大幅に増加します。
今回のリリースの新機能として提供される CSS
contain
プロパティを使えば、デベロッパーは、
子要素が範囲外に表示されることを防止することができます
。要素が更新された場合に、Chrome は親ノードの範囲外の要素をすべて無視できるため、レンダリングにかかる時間を短縮することができます。
Performance Observer
正確な RUM(real-user measurement)データの収集は、サイトのユーザー エクスペリエンスを損なうようなパフォーマンスの問題や低下を検知する上で非常に重要です。Chrome の DevTools で、ローカルサイトのテストは実施できますが、多種多様なデバイスを使う現実のユーザーに対するサイトのパフォーマンスを測定することは容易ではありません。Chrome の最新バージョンでサポートされる
Performance Observer
API を使えば、動作中の RUM データを
簡単、効率的に収集することができます
。更新に対するポーリングの代わりに、
各サイトが興味のあるメトリクスを指定することが可能です
。該当メトリクスのデータポイントが新たに利用可能となると、ブラウザがその旨をサイトに通知します。
ReadableStreams による Service Worker のレスポンス向上
HTTP レスポンスをストリーミングすることで、ブラウザは、データ量の大きな HTML ドキュメントを、レスポンス全体が利用可能となる前に順次レンダリングすることができます。最新バージョンの Chrome では、
ストリーミングのサポートを追加することにより、Service Workder の動作を向上します。
サイトは、Response コンストラクタに
ReadableStream
を渡すことにより、
Streams API
を使ってストリーミング可能な
Response
オブジェクトを構築できます。
オフライン Wikipedia クライアント
で Readable Streams による速度向上を確認できます。
Web Push プロトコルと VAPID のサポート
プッシュ通知
は、ウェブアプリとの関わり方を新たなレベルに押し上げましたが、これまでデベロッパーは、異なるブラウザに対し異なる API と特定のプッシュ メッセージ配信サービスを使う必要がありました。Chrome は今回のリリースで、プッシュ サービスを提供するサイトのサーバーを認証するための標準である
VAPID
のサポートを開始しました。VAPID を使うと、サイトに
Firebase Cloud Messaging
エンドポイントが与えられ、これにより、異なるブラウザ間の
Web Push プロトコル
がサポートされます。
今回のリリースに追加されたその他の機能
モーダル ダイアログ ボックス表示中のアニメーション停止
HTTP
代替サービス
により、サイトが特定のリソースに達するために使われるオリジンを追加で指定可能。これにより、プロトコルのアップグレードおよび負荷バランスの均等化がより簡単に
ImageBitmapOptions
を使って構築に関する設定を指定できるため、
ImageBitmaps
の作成がより簡単に
ImageBitmap.close()
を使うことで、ImageBitmap が占めていたメモリ領域を別の用途に利用可能に
OpenType
スモールキャピタルや数字のスタイリングを新たにサポート。
font-variant-caps
、
font-variant-numeric
プロパティが使用可能に
クロスオリジン iframe 内の
タッチ ジェスチャ
がタップ操作に対応しない限りポップアップを表示しなくなったため、スクロール中の意図しないポップアップ表示を防止
Android 向け Chrome では、
セキュアな Cookie の作成および削除を
セキュアなオリジンのみに制限
最新バージョンは
-webkit-appearance:none
をサポートしており、HTML5 の
meter
要素のデフォルト レンダリングが無効化され、カスタム CSS スタイリングがより簡単に
コンテンツ セキュリティ ポリシーのエクスプレッション
unsafe-dynamic
により、サイトがシングルユースまたはハッシュベースのホワイトリストを用いてスクリプトのソースを確認でき、
クロスオリジンのスクリプト攻撃に対する防御
が容易に
Fetch API を利用し
、
request
に応じた
リファラ ポリシー
のプログラム設定が可能に
CanvasRenderingContext2D
が
filter
属性をサポートしているため、キャンバスに描かれたプリミティブにエフェクトを適用可に
IDBKeyRange.includes()
を利用し、
IDBKeyRange
の範囲内にキーが存在するかのテストが実行可能に
HTMLMediaElement.srcObject
属性により、
MediaStream
とメディアコンテンツとの関連付けが容易に
AudioParam
が、読み取り専用の
min および max 属性
をサポートするため、イントロスペクションが容易に
RTCCertificates
を IndexedDB に格納可能
PannerNode
と
AudioListener
が自動化メソッドをサポートするため、スムーズなオーディオ切り替えが可能
Stylesheets による色のアルファ値の指定が、冗長な
rgba()
シンタックスではなく、
8 ビットおよび 4 ビットの 16 進数
を使って実行可能に
サイトが、
オリジン トライアル
として
永続ストレージ
の
実験
を実行でき、ブックマーク時のストレージ自動クリアの無効化が可能に
マルチプル WebVTT トラックが、デフォルトのメディア コントロールにおいて
ユーザー オプション
として表示されるため、キャプションおよびサブタイトルの言語選択が可能に
postMessage(message,transferables,targetOrigin)
の形での
postMessage
のオーバーライドを廃止
MediaStream
の
ended
イベントと、それに対応する
onended
属性を廃止
ウェブ アプリ マニフェスト
の
icons
エントリによる、
density
プロパティのサポートを停止
DynamicsCompressorNode.reduction
属性が、
AudioParam
ではなく読み取り専用フロートに
flexbox
の子要素で、
position:absolute
と指定している場合、
両端揃えに配置
。ただし、要素の
left:
、
right:
、
top:
、
bottom:
の位置が指定されている場合を除く
利用数が少ないため、
requestAutocomplete()
の
廃止および削除
を実施
よりセキュアな実装をサポートするため、
meta
タグ上での
X-Frame-Option
のサポートを終了
より古いユーザー エージェントにおけるメディア ビヘイビアを向上するため、
track-kind
の無効値は
subtitles
ではなく
metadata
として処理
Posted by
Eiji Kitamura - Developer Relations Team
コメントを投稿
ラベル
#hack4jp
3
Addy Osmani
1
ADK
2
AdMob
4
ALPN
1
AMP
5
Analytics
4
Andorid
6
Android
156
Android Auto
1
Android Design Support Library
1
Android Developer Story
2
Android N
6
Android Pay
1
Android Studio
13
Android Support Library
3
Android TV
7
Android Wear
20
androidmarket
3
AngularJS
2
API
20
APIExpert
45
app engine
21
App Indexing
6
App Invites
5
AppCompat
2
Apps Script
6
aprilfool
3
ArtTech
1
Audio
3
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
54
Chrome Custom Tab
1
chrome extension
2
Chrome for Android
1
Chrome for iOS
1
Chrome OS
1
Chromebook
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
Daydream
2
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
Dynamic Links
1
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
2
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
14
font
2
game
14
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
10
Geo
23
Gingerbread
1
GLIDE
5
Gmail
1
Go
1
golang
4
goo.gl
1
Google
5
Google Apps
1
Google Cast
6
Google Cloud Messaging
10
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
28
Google Play
30
Google Play Game Services
6
Google Play Services
18
Google Plus
14
Google Search
3
Google Sign-In
9
Google Tag Manager
1
Google+
1
Googleapps
10
GoogleGames
1
GoogleI/O
27
GoogleLabs
1
GoogleTV
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
6
HTML5
17
HTML5Rocks
1
HTTP/2
3
HTTPS
2
ID Token
1
Identity
11
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
2
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
5
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
publicdata
1
Push API
1
Push Notification
2
QUIC
1
RAIL
1
Remote Config
1
Remote Display API
1
Runtime Permission
1
Sample Code
2
schema.org
1
security
9
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
VR
2
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
2
Web Animations
1
Web Components
4
Web Manifest
1
WebAssembly
1
WebMusic
4
WTM
2
YouTube
14
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2016
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
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"