感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptの動的ロードの利点。

スポンサーリンク

JavaScript実行のタイミング

DOMツリーが構築された時点でJavaScriptを実行することで、ユーザにとっての待ち時間を減らすことができる。
scriptタグにJavaScriptを記述するという単純な方法もあるが、JavaScriptが実行されるのはscriptタグが解析された直後であることに注意しなければならない。
つまり、scriptタグ以降のDOM要素を操作することができないということだ。
だって、ブラウザはJavaScriptを実行した後にそれ以降のDOMツリーを構築することになるんだから。

このような事態を回避するためのシンプルな方法として、bodyの閉じタグの直前にscriptタグを記述するという方法がある。
ただし、body閉じタグのところにscriptを書いたとしても、body自体の操作は望ましくはない。
bodyに対する操作をしたいときは、onloadのタイミングを狙う。

実際のアプリケーションの開発では上記のような単純な方法を取ることはあまりない。
以下のように、外部のJavaScriptを読み込むのが主流だ。

<head>
    <script src="js/hoge.js"></script>
</head>

scriptタグに指定することのできる属性に以下のようなものがある。
defer属性:そのscriptタグの評価をすべてのscriptタグの評価終了後に遅延させる
async属性:非同期で外部ファイルを読み込み、読み込み完了後に逐次実行する。

動的ロードという知恵

さすがパーフェクトシリーズというか、この知恵を初めて見た!動的ロードという考え方。

var script = document.createElement('script');
script.src = 'other-script.js';
document.getElementsByTagName('head')[0].appendChild(scirpt);

この動的ロードを使うと、JavaScriptファイルのダウンロードから実行が開始されるまではその他の処理をブロックしない。

console

consoleの使い方は単なる

console.log();

だけではなく、スタックトレースを表示したり、

consolo.trace();

時間を測ったりできる。

consolse.time('hoge');
//
console.timeEnd('hoge');

その他

ユーザエージェントとは、クライアントアプリケーションを特定するための文字列。

読んだ本(参考文献)

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)


やっぱりこの本すごい!
全くの初学者のときは、ちょっと難しすぎたけれど、一回違う本で基礎を学んだ後に読むと発見の連続だ。

感謝のプログラミング

今回で感謝のプログラミングは【426時間目】
10000時間まで、あと【9574時間】