ホームページ  >  記事  >  ウェブフロントエンド  >  html と javascript の読み込み順序については、browser_javascript スキルで説明します。

html と javascript の読み込み順序については、browser_javascript スキルで説明します。

WBOY
WBOYオリジナル
2016-05-16 17:12:111066ブラウズ

私は少し前に JavaScript を徹底的に勉強しましたが、その時は自分自身に満足していました。今思うと何でもないような気がします。今日の課題は、asp.net ajax のクライアント ページのライフ サイクルに関する章を学習することです。ただし、この章の内容には少し戸惑いました。本書ではこうした疑問については一切言及されていない。

1. HTML ページの詳細な読み込みプロセスとは何ですか?読み込み時のページ要素の優先順位は何ですか?

2. JavaScript のスコープ、変数のスコープ、および異なるスクリプト セグメント間の関係?

3. HTML ページのライフサイクル?

これらの質問は私にとって本当に心に刺さりました。これらを理解していなければ、asp.net ajax フレームワークを通じて基礎となる原則を理解することはできません。わかるだけで、なぜそうなるのかはわかりません。

オンラインで情報に広範囲にアクセスできる。いくつかの答えが得られました。

HTMLの読み込みについて:

一般的に、HTML は上から下の順にロードされ、解析されながら dom オブジェクトが生成されます。HTML に何が混在しているかについては、次のとおりです。

document.write("xxxx");

など、その順番は何ですか?それでも同じですが、HTML の解析中にこれらの現象が発生した場合は、解析を停止し、生成されたステートメントを実行します。外部リンクが途中に挿入されている場合は、外部リンクに対応する js を解析して実行します。次のステートメントはブラウザごとに異なる結果になります:

すなわち。 aaa.js がダウンロードされて解析されるまで待機せず、それを処理する別のスレッドが作成され、メイン スレッドが渡されます。でもFFでは。 aaa.js がダウンロード、解析、実行されるまで待機します。

JavaScript の実行については、この記事の最後に添付されている参考資料に詳しく説明されていますので、ご参照ください。

HTML のページのライフサイクルについて:

最も重要な 2 つのイベントは、onLoad と onUnLoad です。 onLoad は、ページが読み込まれるときにトリガーされます。 onUnLoad は、ページの DOM が破棄された後にトリガーされます。ただし、onLoad は少し特殊です。この記事の最後に添付されている参考資料も参照してください。必ず注目を集めてください。

いくつかのサイトの HTML ソース コードを調べたところ、次のコードが見つかりました:

これは、Web サイトがページ上に広告を表示するためのコードです。国内の Web サイトでは、通常、ディスプレイ広告は iframe を使用してサードパーティのページを紹介しますが、ここでは JavaScript セグメントを使用して直接生成されます。後で、163ブログが生成したHTMLコードを見てみると、異常でした。 HTML コード全体にはシェルフが 1 つだけあり、すべてのページは js を通じて生成されます。ページの背後にいくつかの js ファイルが導入され、最後にページの最後に initAll 関数の呼び出しがあることがわかりました。私はその js コードを注意深く調べていませんが、プレゼンテーション層のすべての機能がクライアントの js ファイルに組み込まれているのではないかと思います。サーバー側はほんの数個のページ ラックと多くの Web サービスです。本当に息を呑むほどです。

複数の応答関数をトリガーする 1 つのイベントについて:

私はかつて、C# でデリゲートに似たものを実装することを考えていました。 JavaScript イベントは複数の関数に関連付けることができます。イベントのリストを一度にトリガーできます。私は最近 asp.net ajax を勉強していて、これ用のパッケージがあります。

asp.net ajax では、dom 要素を asp.net ajax の Sys.UI.DomElement オブジェクトにカプセル化できます。その後、そのメソッド addHandler()、addHandlers()、removeHander() を使用してイベント リストを操作できます。なんて便利なんでしょう。当時の私はこの原理をよく理解していませんでした。今日、以下の参考資料の 2 つのコードを見て、詳細を完全に理解できました。

1. dom 2 のインターフェースを使用します:

コードをコピーします コードは次のとおりです。 :
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
……
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
....
}

この概念は DOM にすでに存在していることがわかりました。そのとき初めて私は知りました。ドムについてはまだまだ分からないことが多いようです。

2. このメソッドは純粋に手動で実装されます。以下のコードを参照してください:

コードをコピーします コードは次のとおりです:

関数 addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != '関数') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}


この関数は非常に巧妙に書かれています。それを実現するには、匿名関数を使用してください。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。