#navi_header|JavaScript|
勉強中のメモです。
HTML開発でAjaxなどJavaScriptを活用しようとすると、コールバックを使った非同期処理が活躍します。
ここで一つ疑問に思ったのが、「内部実装としてはイベント処理ってどうしてるんだろう？」という点です。
Win32API開発経験者としては、「やっぱりイベントメッセージのループとかあるのかなぁ・・・」とか、「Ajaxとか非同期I/Oが発生すると、そこだけ別スレッドで処理して、処理が終わるなどのイベントが発生したら、元スレッドのイベントキューにpostしたりしてやりとりしてんのかなぁ」とか。
ということで、調査中の参考リンク、簡単なデモコードなどの仮置き場です。
* 参考リンク
JavaScriptのDOMイベントの分かりやすい概説
- JavaScript DOM & event
-- http://www.slideshare.net/boreydev/java-script-dom-event
JavaScriptからDOMノードに任意のイベントハンドラを設定し、イベントを発生させるサンプルの解説
- How to trigger event in JavaScript? - Stack Overflow
-- http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
JavaScriptのイベントループの内部実装の解説系
- 6 Web application APIs — HTML5
-- http://www.w3.org/TR/html5/webappapis.html#event-loops
- Events and timing in-depth | JavaScript Tutorial
-- http://javascript.info/tutorial/events-and-timing-depth
--- "DOM mutation events are synchronous." と "Nested DOM events are synchronous." のサンプルのalert順序が記事の説明順序と違う(chrome34)
- John Resig - How JavaScript Timers Work
-- http://ejohn.org/blog/how-javascript-timers-work/
- xmlhttp - How does JavaScript handle AJAX responses in the background? - Stack Overflow
-- http://stackoverflow.com/questions/7575589/how-does-javascript-handle-ajax-responses-in-the-background/7575649
html5rocksより：
- ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
-- http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
- 非同期JavaScriptプログラミング - HTML5アプリケーションの為の$.Deferredのパワー - HTML5 Rocks
-- http://www.html5rocks.com/ja/tutorials/async/deferred/
SpiderMonkeyのThreadSafetyメモ
- SpiderMonkey Internals: Thread Safety - Mozilla | MDN
-- https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Internals/Thread_Safety
Javaでコールバック地獄を解決するためのアプローチ：
- TypeScript - コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
-- http://qiita.com/KDKTN/items/4c6986049d204f0645d8
- 仮想パネル: JavaScriptで非同期プログラミングを乗り切る方法
-- http://www.infoq.com/jp/articles/surviving-asynchronous-programming-in-javascript
Javaでのマルチスレッドプログラミング
- JavaScriptへのマルチスレッド・プログラミングの導入
-- http://www.infoq.com/jp/articles/js_multithread
* サンプルコード1
#code|html|>
||<
Firefox30での実行結果：
- &image(yb://images/20140714_js_domnode_event_demo/custom-dom-event-listener-on-firefox30.png)
- 最初に"Example of an event"と表示され、カスタムイベントのテストに成功している。
- 2行目～5行目までは、"click"をクリックした際に、p1 -> div3 -> div2 -> div1 の順序で順次、イベントが伝播していることを表している。
- 6行目～8行目は、"stop at div2" をクリックした後 "click" をクリックした様子。div2のところで "stopPropagation()" が呼ばれ、div1のイベントリスナーが動作していない。
Chrome34での実行結果：
- &image(yb://images/20140714_js_domnode_event_demo/custom-dom-event-listener-on-chrome34.png)
- Firefox30での実行結果と同じ。
IE11での実行結果：
- &image(yb://images/20140714_js_domnode_event_demo/custom-dom-event-listener-on-ie11.png)
- 最初のカスタムイベントについては、IE用ではないAPIを使っていたためエラーとなってる。
- p1の"click", "stop at div2" クリック後のイベント伝播の様子は、Firefox30と同じ。
* 整理メモ
- ちょっと古めのサイトによると、JavaScriptはシングルスレッドで動作してるっぽい。
-- そのため、イベント処理はメッセージループでやってる。Win32APIなどのGUIアプリケーションと同じモデル。
- ただ、HTML5になってDOM構築などのイベントも統合され、最低一つのイベントループ + 1つ以上のタスクキューで処理するようになった。
-- また、ブラウザによってはタスクの種類とブロッキングの特性、順序付などで変更あるらしく、古めの記事のイベントハンドラ処理のサンプルコードが、記事の解説通りの順序ではイベントが発火してないケースも見られた。
#navi_footer|JavaScript|