私的良スレ書庫

不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterで
ログインするとレス評価できます。登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。

元スレ+ JavaScript の質問用スレッド vol.139 +

JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニュー

みんなの評価 :
レスフィルター : (試験中)

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ

/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで

651 : Name_Not - 2019/05/09(木) 13:21:59.07 ID:???.net (-1,-29,-33)

>>649
そりゃ、scriptタグで・・あ！そのscriptタグを
どこで書くかの話をしてるんだった！
MutationObserverを使うなら、headかな！

652 : Name_Not - 2019/05/09(木) 14:53:28.90 ID:???.net (+51,-30,-98)

>>633
JSの処理でずっと止まってたら、そもそも画面が更新できないから、
無限に出力どころか一文字も表示できないだろ
計算及び表示はsetTimeoutあたりで再帰的に非同期で実行されるだろうから
いつまでもHTMLのパースが終わらないわけではない
ちなみにこのページの場合、DOMContentLoadedは、読み込み直後におこってたよ

http://3.141592653589793238462643383279502884197169399375105820974944592.jp/

653 : Name_Not - 2019/05/09(木) 15:08:35.23 ID:???.net (+94,+29,-95)

ブラウザの画面のレンダリングって

ダウンロード
↓パース　　　　　　←DOM構築はここ
↓スクリプティング
↓スタイル計算
↓レイアウト
↓ペイント
↓ラスタライズ

の順よね？
円周率サイトみたいにhtmlの内容が限りなくドバドバ流れ続ける場合
パースより先に進めるのはなぜ？

654 : Name_Not - 2019/05/09(木) 15:22:50.64 ID:???.net (+18,+29,-115)

>>652
> JSの処理でずっと止まってたら、そもそも画面が更新できないから、
> 無限に出力どころか一文字も表示できないだろ

お前さんは基礎を勉強したほうが良いぞｗ

JavaScriptの処理で止めることができるのは、alertやconfirmといった
一部のダイアログ表示関数と無限ループだけだ

HTMLが無限に出力されるという話にJavaScriptなんか関わってこない。
正直お前が、なんで画面が更新できないと思ってるのかわからん。

655 : Name_Not - 2019/05/09(木) 15:30:02.48 ID:???.net (+99,+20,-165)

>>653
JavaScriptは一旦忘れろ。

ブラウザはHTMLを受け取ると同時に並行してレンダリングしていく
パースが完了してからレンダリングではなく
パースしながらレンダリングだ。

途中でCSSファイルを読み込むなど、
最初から再レンダリングが必要な場合は、再度レンダリングされる。
スタイル計算も同じ。後からやり直しが必要になったらやり直すだけで
パースと同時にレンダリングしている。

DOM全体の構築が完了してからレンダリングではなく
DOM一部分の構築が完了するとすぐにレンダリングするんだよ

657 : Name_Not - 2019/05/09(木) 16:47:43.24 ID:0tRUWYco.net (-2,-29,+0)

>>654
http://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=ja
・JavaScript では、DOM と CSSOM のクエリと変更が可能です。
・JavaScript の実行は CSSOM をブロックします。
・JavaScript は非同期であると明示的に宣言されていない場合、DOM の構築をブロックします。
HTMLのパース中にscriptタグが出てきたら、それにasync/deferが付いてない限り、JSの読み込みと実行が終わるまでパーザは止まるよ
だからscriptタグはなるべく（DOMツリーの構築がほぼ終了している）bodyのケツに書けってセオリーが生まれたんだろ

あと無限のHTMLってなんだ？
ファイルサイズが無限のHTMLファイルがサーバーからひたすら送られてつづけてくるのか？
httpヘッダのcontent-lengthにはなんて書いてあるんだ？
HTMLパーザはとりあえずメモリ上にテキストを展開しないといけないが、どのくらいメモリを確保すればいいんだ？
JSを使ってDOMツリーに無限に要素を追加していくことはできるけど、無限のHTMLなんてものは実現不可能じゃないの？
詳しくは知らんが、多分ブラクラ扱いで受け取り拒否で終わるんじゃないか？

>>656
そのコードは見てるけどなにか？
http://pastebin.com/92ayEsQT
ちょっと手を加えたこれをローカルで実行しただけなんだが

658 : Name_Not - 2019/05/09(木) 17:12:53.76 ID:???.net (+70,+29,+0)

>>655
なるほどー
勉強になりましたありがとう

659 : Name_Not - 2019/05/09(木) 18:47:26.34 ID:???.net (+62,+29,-3)

>>650
そんな勘違いをするわけないだろ

660 : Name_Not - 2019/05/09(木) 19:27:03.37 ID:???.net (+62,+29,-91)

おマヌケな解答者が多すぎて笑える
DOMContentLoadedが発生しない状態なんて現実的なコンテンツだとありえないから
一度もイベントループを回さないって、それ操作も効かないしフリーズしてるのと同じだから

661 : Name_Not - 2019/05/09(木) 19:58:40.83 ID:???.net (+4,-28,-61)

> DOMContentLoadedが発生しない状態なんて現実的なコンテンツだとありえないから

HTMLが大きいまたは回線が遅くて
DOMContentLoadedが発生してないが
ページは表示されてるって状態なら普通にある
時間が短いだけで、ほとんどのサイトはそういう状態が発生してる

誰もイベントループの話なんかしてない。

662 : Name_Not - 2019/05/09(木) 20:00:04.11 ID:???.net (+52,+29,-52)

>>657
だからなにかって、このサイトはHTMLがすごく短いんだから
今話をしてる、ずーっと円周率が表示され続ける
「ページの読み込みが完了しない」サイトではない。

663 : Name_Not - 2019/05/09(木) 20:00:54.62 ID:???.net (-1,-29,-53)

>>657
> あと無限のHTMLってなんだ？
> ファイルサイズが無限のHTMLファイルがサーバーからひたすら送られてつづけてくるのか？
そういう話をしてるだろ。

> httpヘッダのcontent-lengthにはなんて書いてあるんだ？
必須じゃない。書く必要がない。

664 : Name_Not - 2019/05/09(木) 20:01:35.36 ID:???.net (-1,-29,-40)

> JSを使ってDOMツリーに無限に要素を追加していくことはできるけど、無限のHTMLなんてものは実現不可能じゃないの？

PHPで無限ループでechoするサイトでも書けば？

665 : Name_Not - 2019/05/09(木) 20:03:12.36 ID:???.net (+62,+29,-80)

> 詳しくは知らんが、多分ブラクラ扱いで受け取り拒否で終わるんじゃないか？

アホかｗ

どうやって、無限に表示され続けるかどうかを
クライアントで判断するんだよｗ

1TB読み込んで終わらなくても、もしかしたら1TB+1バイトで終了するかもしれんだろ

666 : Name_Not - 2019/05/09(木) 20:08:07.29 ID:???.net (+53,+21,-105)

>>657
> HTMLのパース中にscriptタグが出てきたら、それにasync/deferが付いてない限り、JSの読み込みと実行が終わるまでパーザは止まるよ
> だからscriptタグはなるべく（DOMツリーの構築がほぼ終了している）bodyのケツに書けってセオリーが生まれたんだろ

お前はこの言葉の意味がわかってないな。

今話しをしてるのは、パーサーが止まるかどうかじゃなくて、
画面は表示されるのかどうかだ。

画面はいつ表示される？
body終了タグ直前になるJavaScriptの実行が
終わらないと表示されないと思うか？

667 : Name_Not - 2019/05/09(木) 20:18:18.69 ID:???.net (+3,-30,-286)

「JavaScriptが実行されなくても画面は表示される」から、
bodyの終了タグの直前に書けってセオリーができたんだろ（呆）

で、bodyの終了タグの直前だと
「JavaScriptが実行されなくても画面は表示される」
ページが重くなればなるほど、コンテンツ表示からjs実行時までのタイムラグが発生する。

だから

> コンテンツ表示からjs実行までのタイムラグを減らすなら、
headに入れたほうが良いって話をしてる。

bodyの終了タグの直前にいれるのは、デメリットが一切ない完璧な解決策ではなく
コンテンツ表示からjs実行時までのタイムラグは短ければ十分許容できるだろうという
判断があって使う方法。どうせ何も考えてないんだろうけどなｗ

大抵の場合はタイムラグは許容できるんだろうが、タイムラグを許容したくないという理由で
headでJavaScriptを読み込むってのもありなんだよ。
その場合は重くならないように必要最小限のことだけをする。

要素がまだ表示されてないから、$('#id').on('click'・・・とかじゃなくて
$(document).on('click', '#id'・・・みたいな書き方をしてな。
要素ごとにイベントハンドラを設定しないから、この方法は軽い方法になる。

668 : Name_Not - 2019/05/09(木) 20:46:41.02 ID:???.net (-1,-29,-9)

つかなんでonload嫌いなの？
個人的にbody内scriptのほうが嫌い

669 : Name_Not - 2019/05/09(木) 21:10:52.54 ID:???.net (+57,-30,-105)

頭の固い俺にはチンプンカンプンなので状況を整理させて

A. <head>でDOMContentLoaded
B. <head>でload
C. </body>手前で<script>
D. コンテンツ直後に<script>
E. MutationObserver

>>635はどれとどれを比較して、優位性を主張してるの？
どういう理屈でそれがいいの？
何にそんなに怒ってるの？(枝葉かもしれないけど、主張に関係してそうだから)

特に「永遠に円周率を表示するサイトっていうのは、</body>が永遠に来ない」のところが意味わかんない

670 : Name_Not - 2019/05/09(木) 21:51:52.68 ID:???.net (-1,-29,-19)

setTimeout(callback,0)やっとるだけ
</body>来とるがな

671 : Name_Not - 2019/05/09(木) 22:13:41.63 ID:???.net (+0,-29,-70)

>>669
俺が言ってる円周率を表示するサイトっていうのは、
HTMLではなくテキストとして返してくるサイトだよ
content-type: text/plain で返してくるんだよ

672 : Name_Not - 2019/05/09(木) 22:19:38.40 ID:???.net (+52,+24,-63)

俺が昔見たのとは違うが、こことか永遠と円周率を表示するサイトだな
http://314.uw.hu/index.html

さてDOMContentLoadedは一体いつ発生するんだい？ｗ

673 : Name_Not - 2019/05/09(木) 22:19:48.99 ID:???.net (+31,-30,-11)

content-type: text/plainなら</body>は永遠に来ないでしょうね
<head>もありませんけど

674 : Name_Not - 2019/05/09(木) 22:23:30.41 ID:???.net (+107,+29,-99)

>>669

> コンテンツ表示からjs実行までのタイムラグを減らす

という話をしてる。

コンテンツ表示までの時間を減らすという話じゃない
コンテンツ表示からjs実行までのタイムラグを減らす話だ

表示されてるけどJavaScriptは動かないから
この間に画面に触ったらJavaScriptは反応しないという状態だ

675 : Name_Not - 2019/05/09(木) 22:24:30.07 ID:???.net (+61,+29,-23)

>>673
そこで重要なのは、同じことをHTMLでもできるってことだよ
</body>が永遠に来ないサイトを作ることはできる

676 : Name_Not - 2019/05/09(木) 22:34:02.55 ID:???.net (+37,-29,-123)

勘で書くけど、

setTimeout(g,0) に、0 を渡しても、最小単位の数ミリ秒、空くからだろ。
その間に、レンダリングするのだろう

setTimeout は非同期だから、キューに、callback 関数を入れるだけで、即リターンする。
その後に、キューから関数を取り出して実行するので、
その間、最小単位の時間が空くのだろう

677 : Name_Not - 2019/05/09(木) 22:34:35.49 ID:???.net (+89,+29,-23)

>>674
ありがとうだけど、答えてくれてない…

> >>635はどれとどれを比較して、優位性を主張してるの？
> どういう理屈でそれがいいの？
> 何にそんなに怒ってるの？(枝葉かもしれないけど、主張に関係してそうだから)

678 : Name_Not - 2019/05/09(木) 22:35:37.61 ID:???.net (+62,+29,-14)

>>676
お前はずれてるから答えなくていい。

誰もお前がレスしてるサイトの話なんかしてないんだから

679 : Name_Not - 2019/05/09(木) 22:45:06.18 ID:???.net (+3,-30,-92)

jQuery なら、同じ要素で、メソッドチェーンで、2つのイベントも設定できる。
例えば、mouseover, mouseout で画像を切り替える

$( '#foo' ).mouseover( function( ) {
$(this).attr('src', 'a.gif');

}).mouseout( function( ) {
$(this).attr('src', 'b.gif');
});

681 : Name_Not - 2019/05/09(木) 22:57:28.28 ID:???.net (+62,+29,-55)

>>680
なるほどね
理解できたけど、「やっぱりheadに入れるのがいいんじゃないの？」で$(document).on('click', selectorをエスパー出来る人はいないと思った
文脈的にはあなたの主張はBだと思ってたし、あなたに反論していた人もおそらくBの体で反論してたと思うよ
余計な争いを防ぐ為にも、投稿前に重要な情報が抜け落ちていないかを注意した方が良いように思う

682 : Name_Not - 2019/05/09(木) 23:03:12.49 ID:???.net (+11,-30,-238)

AとBのはどちらもDOMContentLoadedはコンテンツ表示から64秒後に発生する
正確にはJavaScriptファイル + HTML の両方のダウンロードが終わってから発生するが

AはJavaScriptファイルのダウンロードが終わってから、HTMLをダウンロードするのでコンテンツ表示が遅いが
BはHTMLからダウンロードしてから、あとでJavaScriptファイルをダウンロードのでコンテンツ表示が速い

ただし、どちらもJavaScriptファイルのダウンロードが終わるまでは
JavaScriptファイルが機能しないので、コンテンツ表示からJavaScript実行のタイムラグがある

> コンテンツ表示からjs実行までのタイムラグを減らす
には

JavaScriptを先にダウンロードし（この間読み込んでないコンテンツは当然表示されない）
DOMContentLoadedを待たずにJavaScriptを実行（ここがAとの違い）する。
こうすることでコンテンツが表示される時点ではすでにJavaScriptが実行されている。

683 : Name_Not - 2019/05/09(木) 23:04:12.02 ID:???.net (-1,-29,-46)

> AとBのはどちらもDOMContentLoadedはコンテンツ表示から64秒後に発生する

>>682はAとCの間違い

684 : 641 - 2019/05/09(木) 23:08:13.20 ID:???.net (-1,-29,-31)

エスパー出来てなかったし、$(document).on('click'と書かれていたなら反論しなかった

685 : Name_Not - 2019/05/09(木) 23:11:08.52 ID:???.net (+209,+29,-31)

わざと欠けてる情報で相手を釣る。
おちょくり回して遊ぶ。
最後にマウントする

これが目的なのに何を言ってるんだ？ｗ

686 : Name_Not - 2019/05/09(木) 23:12:35.79 ID:???.net (+94,+29,-40)

お前ら盛り上がってるところすまんが
jQueryは使わない場合結局どうすればいいんだよ？教えてくれよ

687 : Name_Not - 2019/05/09(木) 23:13:28.13 ID:???.net (+57,+29,-17)

jQuery相当のことを自力でやればいいだけ
まあ頑張れｗ

688 : Name_Not - 2019/05/09(木) 23:15:16.00 ID:???.net (+24,-24,-32)

>>635はDOMContentLoadedの回答を得て「やっぱりheadに入れるのがいい」といってたから、Bと勘違いするのも無理ないな

689 : Name_Not - 2019/05/09(木) 23:17:10.12 ID:???.net (+70,+29,-1)

>>685
それ最後にマウント取られて終わるやつ

690 : Name_Not - 2019/05/09(木) 23:18:27.07 ID:???.net (+3,-30,-117)

無限に円周率を表示するページで
DOMContentLoadedっていつ発動するの？
→永久に発動しないんだ
→じゃあDOMContentLoadedを使うのは良くないね
→</body>もこないしね
→（DOMContentLoadedは使わず）<head>に入れよう。

691 : Name_Not - 2019/05/09(木) 23:20:12.66 ID:???.net (+109,+29,-13)

>>686
http://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
jQueryなんかと違ってバブリングしなくても親ノードで待てるので、お勧め

692 : Name_Not - 2019/05/09(木) 23:25:42.91 ID:???.net (+54,+29,-13)

>>691
バグリングと親ノードの関係は？
親ノードで受け取ってから処理を振り分けすんの？

693 : Name_Not - 2019/05/09(木) 23:26:29.72 ID:???.net (+53,+27,-17)

このスレは>>685みたいなのが常駐していて実に糞だな

694 : Name_Not - 2019/05/09(木) 23:27:23.27 ID:???.net (+5,-30,-77)

>>622に話が戻ってきたな

window.addEventListener("click", function(evt){
　if (evt.target.id == "foo")...
　if (evt.target.id == "bar")...
},false);

jQueryを使わないってことは、こんな感じのコードを書かないといけない

695 : Name_Not - 2019/05/09(木) 23:30:10.54 ID:???.net (+102,+26,-1)

>>692
イベントバブリングでぐぐれ

696 : Name_Not - 2019/05/09(木) 23:31:24.43 ID:???.net (+102,+29,-10)

>>695
いやだから、親ノードで持てるのは
ずっと前からじゃんって話なんだが？

697 : Name_Not - 2019/05/09(木) 23:32:23.88 ID:???.net (+99,+29,+0)

>>696
いつからかは関係ない

698 : Name_Not - 2019/05/09(木) 23:34:12.29 ID:???.net (+105,+29,-10)

>>697
だから親ノードで持てるのは、バブリングと何の関係もないよね。
バブリングじゃないと親ノードで持てないとでも？

699 : Name_Not - 2019/05/09(木) 23:36:08.58 ID:???.net (+106,+29,-18)

>>698
> バブリングじゃないと親ノードで持てないとでも？
バブリングフェーズなら当然そうだ
いい加減、ぐぐれ

700 : Name_Not - 2019/05/09(木) 23:38:59.74 ID:???.net (+56,+29,-27)

>>699
バブリングの反対ってなにか知ってる？
バグリングでもキャプチャリングでも親ノードで持てるんだが？