くまちゃを飲もう2.6

ブラウザの挙動が少しずつ違う事にハマる。

Work | 14:58 |

ブログを書くのに時間が空いてしまいましたが前回のエントリで記述した通り、Responseが「200」と「304」で食い違う事で画面の崩れが起こる事までは調べる事が出来た。

そこで各ブラウザのRequestの出し方、およびResponseについて調査をする。

調査は、IE=ieHTTPHeaders／Firefox=Firebug／Opera=DragonFly／Chrome、Safari=Webkitで実施。

結果を「正常系」「異常系」「しょうもない系」に分類する。

結果だけをみると、以下の通り分類することができた。

ブラウザ	HTML	CSS	JavaScript	画像	想定される結果
IE/Opera	×	×	○	×	古い画面が表示される(しょうもない系)、ただしJavaScriptが画像を呼ぶ場合は別
Firefox	○	×	○	×	画面が崩れる(異常系)
Chrome/Safari	○	○	○	○	新しい画面が表示される(正常系)

調査中に気付いた点、と疑問が発生

気付いた事　＝　同一ブラウザでもURLへアクセスする方法によってRequestの出し方が若干異なる事。

疑問　　　　＝　今回の問題提起が、safariに起因していることを忘れるべからず！！

という事。

そこで改めて（さらに細かい）調査をする事にした。

２度目はロード時のRequestの発行回数およびファイル種類を重点的に調査。

同一ブラウザでもURLへアクセスする方法によってRequestの出し方が若干異なる点については、果てしなく面倒だけど両方とも調べる。

具体的には

• 空のWindow(ないしTAB)からブックマークで開く(もしくはURLを入力する)
• どこかのサイトを開いているWindow(ないしTAB)からブックマークから開く(もしくはURLを入力する)

の掛け合わせで１ブラウザ4回調査。

結果としては最初の調査より大きな変化がなく、やはりSafariでは問題が起きてないとなる。

これはもはや端末とか設定の固有な問題なんだろうか。何か見落としてないか悩む。

WebkitのResource Consoleを眺めながら悩む事３０分ぐらい。ふとある事に気付いた。

CSSや画像のResponseに含まれる時刻が古い。

ぇ？いやいや。そんなバカなと思い、もう一度リロードしてみる

やはり古い。強制リロードしてみたら、ほぼ同じ時間に変わった。

少し時間をおいて試す。

同じ時刻にRequestを出した(はずの)ファイルに対する、Responseの結果。

HTMLに対するもの

CSSに対するもの

WebkitのResource ConsoleってRequest出してない時でも、過去に200を取った結果を表示するのか？？？？

ものすごい脱力感に見舞われて急激にやる気が減退(誰か求む追試)

改めて全部再調査の結果、以下の通りであることが分かった。

○＝リクエストが出る。△＝パラメーター付きだとRequestが出る。×＝でません。

ブラウザ	状態	動作	HTML	CSS	JavaScript	画像	想定される結果
IE8	空Window(タブ)	ブックマーク	○	○	○	○	新しい画面が表示される(正常系)
		ＵＲＬ直打	○	○	○	○	新しい画面が表示される(正常系)
	利用中Window	ブックマーク	×	×	△	×	古い画面が表示される(しょうもない系)
		ＵＲＬ直打	×	×	△	×	古い画面が表示される(しょうもない系)
Firefox3	空Window(タブ)	ブックマーク	○	×	△	×	画面が崩れる(異常系)
		ＵＲＬ直打	○	×	△	×	画面が崩れる(異常系)
	利用中Window	ブックマーク	×	×	△	×	古い画面が表示される(しょうもない系)
		ＵＲＬ直打	×	×	△	×	古い画面が表示される(しょうもない系)
Opera／safari／Chrome	空Window(タブ)	ブックマーク	○	×	△	×	画面が崩れる(異常系)
		ＵＲＬ直打	○	×	△	×	画面が崩れる(異常系)
	利用中Window	ブックマーク	○	×	△	×	画面が崩れる(異常系)
		ＵＲＬ直打	○	×	△	×	画面が崩れる(異常系)

ついでに開発用のサーバをお借りして、再現テストを一通りやっておく。

今までの調査結果をPPTにまとめてレポートを提出。

結果、最初に調べてた

Pumpkin Moonshine JavaScriptやCSSの更新時にキャッシュから読ませないと同じようにスタイルシートの名前を変える方法が採用されそうです。

まぁ　最初からそれがゲフンゲフン　なんでもないでござるよ。

運用方法まとめて展開しないとなぁ。とか考えてた時に、自動で出来ねーかなとか考えてしまう。

暇つぶしの楽しみにそれは取っておこう。

参考

調査のついでにブラウザ毎のRequestにのる内容を調べてまとめた。

ブラウザ	動作	If-Modified-Since	If-None-Match	Cache-Control	Pragma	備考
IE8	ロード	―	―	―	―
	リロード	○	○	―	？*1
	強制リロード	―	―	no-cache	？*2
Firefox3	ロード	―	―	―	―
	リロード	○	○	max-age=0	―
	強制リロード	―	―	no-cache	no-cache
Opera10	ロード	―	―	―	―
	リロード	○	○	―	―
	強制リロード	○	○	―	―	強制リロード＝リロード
Safari5(Win)	ロード	―	―	―	―
	リロード	○	○	max-age=0	―
	強制リロード	○	○	max-age=0	―	Windows版だと、リロードと同じ？
Chrome	ロード	―	―	―	―
	リロード	○	○	max-age=0	―
	強制リロード	―	―	no-cache	no-cache	―