Speculation Rules API によるプリレンダリングのためのメトリクス設計
本記事では Speculation Rules API を使ったプリレンダリングの性能評価を行うためのメトリクスについて紹介します。 はじめに ウェブページの読み込みは本質的に時間のかかる処理です。ウェブブラウザは HTML ファイルを解析することでページ表示に必要なリソースを特定・収集・処理し、それらを組み合わせてページの描画（レンダリング）を行います。 ページ読み込みを高速化するアプローチの一つとして投機実行が知られています。投機実行はページ読み込みに必要な処理をあらかじめ実行しておくことで、実際にページを描画するときの処理を減らします。ウェブブラウザにはこのような投機実行を行うための API が多数実装されています。若干情報が古くなっていますが「リソースの読み込みを助けるウェブブラウザ API の世界」という記事に投機実行のための API をまとめたので詳しくはそちらを見てください。
リソースの読み込みを助けるウェブブラウザ API の世界
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やその処理を最適化するための API を提供しています。本記事ではそれらを網羅的に紹介し、ウェブアプリの性能改善を図る上でどのようなブラウザ機能が使えるのかを知ってもらうことを目的としています。各機能の具体的な適用事例については他の記事に委ねます。 本記事の内容は記事公開時点での情報に基づいており、閲覧時点では既に古くなっている可能性があります。最新の正確な情報は一次情報源を参照してください。また特定のブラウザ実装について言及する場合は、断りがない限り Chrome を想定しています。誤りや補足、質問な
crossorigin 属性の仕様を読み解く
本記事では HTML タグに指定可能な crossorigin 属性について仕様を参照しながら詳しく解説します。crossorigin 属性は複数の意味を表しており、またそれを指定するタグの他の属性値によって振る舞いが変わってしまうことから、その挙動を正確に理解するのがなかなか難しい属性です。 HTML 仕様は日々進化しています。本記事で説明している内容は記事執筆時点のものであり、閲覧時点では古くなっている可能性があります。正確な情報を知りたい方は必ず最新の仕様を確認するようお願いします。 要点だけを知りたい方は最後の「まとめ」を読んでください。 目次 crossorigin 属性はどこで使われている？ crossorigin 属性は何を意味するのか？ request mode credentials mode crossorigin 属性の意味のまとめ crossorigin 属性の振る
Resource Timing と HTTP ステータスコード 1xx
要約：Resource Timing の定義する responseStart イベントは informational response (1xx) をレスポンスの開始点として扱うので、1xx を返すアプリケーションで responseStart を記録する場合は注意が必要。 Resource Timing Resource Timing 仕様はリソース読み込みに関する様々なイベントのタイムスタンプを取得するための JavaScript API を定義している。本記事執筆時点では以下のイベントが定義されている。各イベントの詳細は MDN などを見てください。 [Exposed=(Window,Worker)] interface PerformanceResourceTiming : PerformanceEntry { readonly attribute DOMString initia
Chromium の HttpStreamParser によるヘッダ処理
Chromium の net スタックにある HttpStreamParser というクラスの挙動についてのメモです。Chromium のネットワーキング周りの開発に関わっていない人には全く役に立たない知識です・・・ Chromium の実装に関するメモをなるべく外出ししていきたいと思っていて、本記事はその一環です。自分用メモなので細かいことは説明しません。ブログ記事が最近読書メモばかりなので、こういうニッチなメモを小出ししていくことでソフトウェア関係の記事の比重を高めていきたい・・・ はじめに 最近 Chromium の net スタック周りのコード、特に HTTP の header parsing 周りのコードを眺めている。それで今回は HTTP/1.1 で使われている HttpStreamParser というクラスの挙動を調べた。net スタックのコードは Chromium リポジト
Service Worker 上での未インストールスクリプトに対する importScripts()
Chrome 69 時点での Service Worker は、InstallEvent 後にインストールされていないスクリプトに対して importScripts() を呼ぶことができますが、これは仕様に沿っていません。そこで、これを修正しようという提案が Blink の開発者メーリングリストに出されています。 Intent to Deprecate and Remove: importScripts() of new scripts after service worker installation Firefox と Edge は既に仕様通りに実装されており、未インストールスクリプトに対する importScripts() はエラーを返すようになっています。一方、Safari は Chrome と同じ挙動をしています (Bug Issue)。 本記事では、この変更がどのような背景で行
JavaScript のスクリプトインポートを正しく使い分けようという話
JavaScript の文脈で「スクリプトをインポートする」といった場合、色々な可能性が考えられます。現場での混乱を避けるためにも用語を正しく使い分ける必要があります。そこで本記事では JavaScript のスクリプトインポートについて整理します。 更新履歴 2019/12/05 Dedicated Worker の ES Modules サポートについて追記しました。 2018/09/08 Worklet の type とその上での dynamic import について追記しました。 Service Worker 上での importScripts について追記しました。 Classic Script と Module Script スクリプトインポートを理解するには、スクリプトについて正確に理解する必要があります。HTML の仕様では、スクリプトには Classic Script
ウェブブラウザの off-the-main-thread API の話
ウェブブラウザにおいてメインスレッドはとても重要なリソースです。なるべくメインスレッドを使える状態にしておくことが滑らかな UI/UX を実現する上で重要になります。しかし、実際には多くの処理が実装上の理由やブラウザ仕様の不足によりメインスレッドでしか動かせないため、メインスレッドは忙しくなりがちです。特にページロード時は JavaScript の実行やリソース読み込みなどでとても忙しくなります。 とあるページの perf プロファイル。メインスレッドでせわしなく処理が行われている様子が分かる。 これを解消するために、ブラウザの処理をメインスレッド以外 (off-the-main-thread) でも実行できるようにする試みが行われています。 1. Off-the-main-thread とは メインスレッド以外のスレッドに処理を委譲することを off-the-main-thread と呼
就職して 6 年過ぎた
新卒のソフトウェアエンジニアとして Google に入社して丸 6 年が過ぎました。「若者は 3 年で辞める」という話があるけど、その二倍も働いていることになります。当時の気持ちを忘れないうちに今までの振り返りをしてみようと思います。 (2019/04/04 追記) 入社までの話を「新卒のソフトウェアエンジニアになるまで」という記事に書きました。 なお、すべて個人的な体験談であって会社の見解等を表しているわけではありません。 きっかけ Google を意識したきっかけは大学一年生の頃に読んだ梅田望夫さんの『ウェブ進化論』でした。多分同世代の多くの人がこの本に影響を受けたんじゃないかと思います。私も「これからネットの世界はどんどん変わっていくんだ！」と興奮し、その中心的な会社だった Google に憧れを持ったことを覚えています1 。 直接的なきっかけは修士一年生の頃。そろそろ就活に向けて動
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
Chromium のソースコードの歩き方
これは Chromium Browser アドベントカレンダーの一日目の記事です。初日ということで、本記事では Chromium のソースコードを読む上で役に立つであろう、プロジェクトのディレクトリ構成やファイル構成を紹介します。 (2018/04/09) “The Great Blink mv”1 プロジェクトによってついに WebKit ディレクトリが blink ディレクトリにリネームされました。それに伴い本記事の内容を更新しました。差分は以下の通りです。 third_party/WebKit/Source を third_party/blink/renderer に置換。 blink/ 内のファイル名の命名規約を Bar.{cpp,h} から bar.{cc,h} に置換。 置換に伴う説明文の修正。 (2017/12/01) ディレクトリ構成について追記しました。 Chromium
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
