summerwind

HTTP/2 extension for HTTP Archive (HAR)

目的

パフォーマンス情報の出力に広く使われている HTTP Archive (HAR) 形式を独自に拡張し、HTTP/2 フレーミングレイヤーの情報を追加できる拡張仕様を検討する。

これは、HTTP/2 ではパフォーマンス面での改善を目的とした様々な機能が盛り込まれているが、既存のブラウザにおいては HTTP/2 のフレーミングレイヤーの情報 (例: HTTP/2 フレームや優先度情報) を取得できないため、パフォーマンスチューニングが難しくなっているためである。

拡張

summerwind

var firstPaint = 0, firstPaintTime, paint;
function paintHandler() {
  paint = window.performance.now()
  if (firstPaint === 0) {
    firstPaint = paint;
    firstPaintTime = firstPaint + window.performance.timing.navigationStart;
    window.performance.timing.firstPaint = firstPaint;
    window.performance.timing.firstPaintTime = firstPaintTime;
  }
};

summerwind

HTTP/2 over TLS の通信をダンプする方法

全体の流れ

• 環境変数 SSLKEYLOGFILE に TLS の鍵をダンプするファイルを指定します
• ブラウザを起動します
• Wireshark や tshark に環境変数 SSLKEYLOGFILE に指定したファイルを設定します
• ブラウザで HTTP/2 通信をおこないます
• Wireshark や tshark で通信のダンプ内容を確認します

summerwind

HTTP/2 Server Push に関する一考察 (続き)

このスライドで話したことの続き。レンダリングのパフォーマンスを計測するのに DOMContentLoaded は妥当ではない、という話があったので、First Paint による時間を計測する。First Paint については以下のページが詳しい。

• Webページ遷移時間のパフォーマンス「First Paint」を計測する方法

計測方法

Chrome の Console 上で以下を実行し、First Paint の時間を計測する。出力される値の単位は秒になる。 サーバーやブラウザといった計測環境はスライドに記載されている環境の通り。

summerwind

(function(d) {
  var resources = {};
  var re = /url\(([^)]+)\)/;
	
  // 画面の左下の座標を取得
  var maxWidth = window.innerWidth;
  var maxHeight = window.innerHeight;

  [].forEach.call(d.getElementsByTagName('*'), function(elem) {
    var rect = elem.getClientRects()[0];

summerwind

var net = require('net'),
    hpack = require('./hpack');

var FRAME_HEADER_LEN = 9;

function createSettingsFrame(ack) {
  var flag = ack ? 0x1 : 0x0;

  var frameHeader = new Buffer(FRAME_HEADER_LEN);
  frameHeader.writeUInt32BE(0x0, 0);

summerwind

BLOCKED frame should be added #362

• GitHub Issue
• httpwg/http2-spec#362
• MLでの議論
• http://lists.w3.org/Archives/Public/ietf-http-wg/2014JanMar/0223.html
• http://lists.w3.org/Archives/Public/ietf-http-wg/2014AprJun/0109.html

背景

• フロー制御の実装におけるバグを見つけることは非常に難しい
• なぜクライアントやサーバーはデータの送信をやめたのか

summerwind

// ==============================================
// ハフマン圧縮アルゴリズムの実装
// ==============================================

// ツリーの生成
function create_tree(str) {
  // 登場回数を算出
  var count = {};
  str.split('').forEach(function(word){
    if (!(word in count)) {