現代のWebに、今もっとも「不要」な技術、HTTP Clock 。
なんと、JavaScript無しで現在時刻を表示しています！
一体何が起きているのでしょうか。
コアアイデア ¶
私は、「とあるROM Writerのサポート済み製品一覧ページ 」を眺めていました。
.txt なのに、「じわじわと」読み込まれていくではありませんか。
これ自体はサーバーが遅すぎる事による残念な現象ですが、Webブラウザがレスポンス完了前にレンダリングを開始することを思い出しました。
そこで、「HTMLをストリーミングする」ことを思いつきました。
「HTMLをストリーミングする」とは？ ¶
まず、以下のHTMLを見てください。
<!DOCTYPE HTML>
<html>
<body>
<h1>Hello</h1>
<!-- CUT LINE -->
<style>h1 { display: none; }</style>
</body>
</html>
何も表示されないと思いきや…はい！フロントエンド屋さん！早かった。
「これは <style> が <body> 末尾にあり、 †バッドプラクティス† とされています！」
CSSの †バッドプラクティス† ¶
なぜ †バッドプラクティス† なのでしょうか。
<!-- CUT LINE --> より手前を見てみましょう。
この時点では、「Helloを描画するべき」であり、<!-- CUT LINE --> 後の <style> によって非表示にされるわけですね。
運悪く、Webサーバーが、<!-- CUT LINE --> まで配送した挙げ句、仕事をサボり、ヤニを吸いに行ってしまうと？
Webブラウザは「その間に」「気を利かせて」「Helloを描画してしまう」わけです。
例えば、フォント色・要素の大きさでも同様で、画面のチラつきなどの要因になるため、「CSSはコンテンツの手前にあるべき」だとされています。
意図したサボタージュ ¶
以上のことにより…
実は！ JavaScriptが無くても「HTMLのロードが完了しない」ことにより、動的なWebページが作れるわけです！
例えば、以下の様にストリーミングすると、時計になるわけです！
<!DOCTYPE HTML>
<html>
<head>
<title>HTTP Clock (JST)</title>
</head>
<body>
<div id=div0>1970-01-01 09:00:00</div>
<!-- 1秒のサボタージュ -->
<style>#div0 { display: none; }</style>
<div id=div1>1970-01-01 09:00:01</div>
<!-- 1秒のサボタージュ -->
<style>#div1 { display: none; }</style>
<div id=div2>1970-01-01 09:00:02</div>
...
これでHTTP Clockのトップページが完成しました！
でも、CSSが使われていて美しくありません…。
CSSも使えない環境の人はがっかりするしかないのでしょうか…？
次回！HTTP Clock ACT.2！ ¶
少しの工夫により、CSSも不要になりました！
JavaScript, CSS無しのHTTP Clock「HTTP Clock ACT.2 」。
お楽しみに！