- ベストアンサー
DOMContentLoaded以前に書く処理は？
onload、DOMContentLoaded、headタグ内、bodyタグ直前など、いつもどこに何を書くか迷うのですが、 ■Q1 ・HTML描画を待たずに開始して良い処理は、DOMContentLoaded内ではなく、<script>タグ直下階層に書いても良いのでしょうか？ ■Q2 ・HTML描画を待たずに開始して良い処理、とは具体的にどのような処理でしょうか？ ・DOMが絡まない処理は全て、<script>タグ直下に直接書いても良い？ ■Q3 ・例えば、.alertは、DOMContentLoaded内ではなく、<script>タグ直下に書いても動作しますが、なぜでしょうか？ ・windowオブジェクトはDOMではない？
- re97
- お礼率80% (601/744)
- JavaScript
- 回答数1
- ありがとう数9
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> ・HTML描画を待たずに開始して良い処理は、DOMContentLoaded内ではなく、<script>タグ直下階層に書いても良いのでしょうか？ 良い。 > ・HTML描画を待たずに開始して良い処理、とは具体的にどのような処理でしょうか？ その時点で読み込まれているDOMに対しての処理、もしくはDOM以外の処理です。 > ・DOMが絡まない処理は全て、<script>タグ直下に直接書いても良い？ 複数のWebページで共通処理なら外部JavaScriptにすべきです。 > ・例えば、.alertは、DOMContentLoaded内ではなく、<script>タグ直下に書いても動作しますが、なぜでしょうか？ > ・windowオブジェクトはDOMではない？ script要素が読み込まれた時点では window が既に読み込まれているからです。 window は HTML5 からイベントバブリングの対象となり、正式に DOM となりました。 # Re: re97さん
関連するQ&A
- イベントハンドラに処理を追加するには？
例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか？ 例） ・rei.htm <html> <script language="JavaScript" type="text/javascript"> function hoge(){ alert("hogeです"); } function foo(){ alert("fooです"); } </script> <body onload="hoge();"> </body> <script language="JavaScript" type="text/javascript"> document.body.onload += foo(); </script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな？」と思って上記のようにやってみたのですがうまくいきませんでした。 （結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥） また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行 ↓ ・javascriptエラー ↓ ・hoge()の実行 となりました。（これもなぜこうなるのかよくわかりせん） 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。
- ベストアンサー
- JavaScript
- 数千行HTML 画面表示の性能改善
Webシステムを作成しております。1画面の情報量が肥大化してきており、8000行ぐらいの物になっております。(JS含む) リクエストから画面表示が終わるまでに、4～5秒ほどかかってしまうのです。 JSのonload処理で、0.5msぐらいの処理がかかっていることは確認できております。 どうやら、それ以外の箇所で時間がかかっているようです。 HTMLのヘッダ部にnew Date()を利用して、JS処理の開始時間を採取 <script ****>var st = new Date(); ****</script>・・・(a) (onload時ではなく、global領域に記載)して計測したところ、 (a)からonload処理が開始されるまでに1秒強かかっております。 試験的に、画面に表示されるTAGを削除すると、1秒強から700msになります。 さらに、hiddenを削除すると150ms程度まで高速になります。（ほとんどタグ無しなので当然なのですが、、、） このことから、HTMLのbodyの多さが大きな原因となっていると考えています。 いくつかの不明点があります。 １．HTMLタグの最適化（？）を行う手法 今まで、HTMLの最適化を意識したことが無く、このあたり無知な状況です。レイアウトにTABLを多用しているのが悪い？また、HDDENなどは、あまり性能的に良くない？など、なにか、性能改善がまとめられているWebサイトや書籍はありませんでしょうか？ ２．遅くなる原因を細分化するために、リクエストから、サーバ処理（Apache）、通信（読込）時間、JS開始時間、画面描画時間、を採取したいところですが、各時間の計測方法はありますでしょうか？ 特に、クライアントの読込終わって画面描画にかかる時間を調査したいです。 対象プラットフォームは、 Apache,IE6を利用しています。
- ベストアンサー
- ネットワーク
- JS イベント処理が完了するタイミングについて
JavaScriptで、DOMContentLoadedイベントリスナの処理が完了するタイミングについての質問です。 <script> window.addEventListener('DOMContentLoaded', function() { //処理A }); </script> 上記のように、処理Aを記述した場合、 処理Aは、必ず画面が表示される前(loadの前)に完了しますか。・・・質問(1) 画面が表示される前に処理Aを完了させておきたいのですが、 処理Aと非同期でloadが開始されるのであれば、 処理Aが完了する前に画面が表示されてしまう事を懸念しての質問です。 また、上記<script>の記述位置は、 <head>内に記述しても、</body>の直前に記述しても、挙動に違いはありませんか。 ・・・質問(2) お手数ですが、上記質問(1)(2)について 理由も含めてお教えいただけますと幸いです。
- ベストアンサー
- JavaScript
- <body onload=""> と window.onload
JavaScriptのonload処理についての質問です。 現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、 bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。 （こんな感じで記述 <body onload="hoge();hogehoge();"> hogehoge()がたまに呼ばれないことがある・・・） これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」 という話を聞きました。 （こんな感じで記述 <script> window.onload = function(){ hoge();hogehoge(); } </script> ） 「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」 なんてことがあるのでしょうか？ 「２つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。 知識として知っている方がいれば是非教えていただきたいです。 よろしくお願い致します。 ※ブラウザはIEを使用 バージョンは IE → 6.0 JavaScript → 1.1 です。
- 締切済み
- JavaScript
- window.onload = alertでエラー
window.onload = alert('テスト');とやると、 テストと表示された後、 「実装されていません」というエラーになります。 window.onload = function(){ alert('テスト'); } とやればうまくいくのですが、 window.onload = alert('テスト');では、なぜダメなのでしょうか？ また、表示された後、「実装されていません」というエラーが出ることについて、 中でどういう処理が走って、こういう結果になるのでしょうか？
- ベストアンサー
- JavaScript
- onloadイベント発火条件
window.onload <body onload="function(){}"> <img src="hoge.jpg" onload="function(){}"> <script src="hoge" onload="funct" でも <div>や<p>ではonloadイベントは無いですよね？ どういう場合にonloadイベントは発火するんでしょうか？ window , body ,その他ｓｒｃがあるdom でしょうか？ ブラウザ依存もあるでしょうが、仕様的なものはどうなってますでしょうか？
- ベストアンサー
- JavaScript
- window.onLoad について
<body> タグに、onload=関数名・・・ と記述するとなぜかオブジェクトがありませんとかで 実行されない時があるため、 <head>タグ内に <script type="text/javascript"> window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。 ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。 原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは？ と思い、 </body>の直前に <script type="text/javascript"> 関数名 ← onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。 この記述方法って正しいのでしょうか？ 環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているので ホントに困っています。 アドバイスお願いします。 #何故 window.onLoad=function(){ 関数名 } ではまったく動かなかったのでしょう。。。
- 締切済み
- JavaScript
- ページ読み込み時に自動でスクロール
<body>にonloadを記述する方法以外で あるページを読み込んだ時に、自動的にページ最下部へ スクロールさせたいのですが 以下コードを記述してもエラーも起こらず、何も起きませんでした。 <script type="text/javascript" language="javascript"> <!-- window.onload = new function(){ window.scrollBy(0,300) }; window.onload = new function(){ alert("aaa") }; // --> </script> ちなみに、下側のalertは問題なく動作しております。 scrollby以外でのスクロールでもいいので、ご存じの方教えて下さい。 （できれば一瞬でスクロールする方がいいです。）
- ベストアンサー
- JavaScript
- HTMLページ内のタグに対してのイベント
HTMLページ内のタグに対してのイベント getElementsByTagNameで指定したタグの部分（画像やリンク）をクリックすると関数を呼び出すという動作をやりたいのですが、どうも上手くいきません。 試しに下記のようなプログラムを作ってみたのですが、ページを表示した後すぐにalert関数が呼び出されてしまいます。 あるタグの部分を押したときに関数を呼び出すというやり方を知っている方がおられましたら、ご教授願います。 ひとつひとつにIDを割り当てるというやり方でなくて、タグ別にイベントを判定するやり方を考えています。 <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script type="text/javascript"> window.onload = function ini(){ document.getElementsByTagName("img").onClick = alert("これは画像です"); } </script> </head> <body> <img src="..." /> <img src="..." /> <img src="..." /> <img src="..." /> </body> </html>
- ベストアンサー
- JavaScript
- window.onload=の関数呼出で()が不要
window.onload=の関数呼び出しで()が不要なのはどうしてでしょうか？ ・windowオブジェクトのonloadイベントハンドラだから？ ・例えば、imageオブジェクトだったらどうなるでしょうか？ hoge = new Image(); hogeに対して何か処理; hoge.onload = kansu; or hoge.onload = kansu(); http://www5e.biglobe.ne.jp/~purest/javascript/zakki/onload.html
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。 参考になりましたー