================================================================================= ローダー ================================================================================= 「readyState==="interactive"」や「DOMContentLoaded」のeventが発生した 時点では、まだページは表示されていない。これらのeventがreturnする前に、 DOMを変更できれば、変更はページと共に表示される。 難しいのは「readyState==="interactive"」や「DOMContentLoaded」のevent が発生する前にDOMの変更に必要なデータを準備しなければいけない点だ。 「readyState==="interactive"」や「DOMContentLoaded」のeventのスレッド内で $.ajaxやsetTimeoutを行えば、callback関数は、eventのスレッドの終了後に 実行されてしまう。それでは、DOMの変更をページと、同時に表示することはできない。 eventの発生前に、DOMの変更に必要なデータを準備するには、cn.phpにのせるしか無いだろう。 cn.phpはタグに埋め込まれたJavascriptである。これが終了しない限り, 「readyState==="interactive"」「DOMContentLoaded」eventは発生しない。 ================================================================================= 以下の<1>,<2>,<3>,<4>で、"ajax-iine"　classの数を計測できるのは、<2>"DOMContentLoaded"以降である。 <1>は"0"を表示する。 HTML上に書かれた設定項目を収集するには、<2>"DOMContentLoaded"を利用してもいいが、 設定項目の収集はかなり複雑なので、"app_main"がロードされていなければ無理のような気がする。 もし仮にこのローダーに、"app_main"をキャッシュとして含んでいた場合、 "DOMContentLoaded"で"app_main"を開始できるが <2>と<3>の終了時間にあまり違いがないことから、さして"app_main"の開始 が早くなることは期待できない。 <2>と<3>の終了時間にあまり違いがない原因は、"app_main"をに 埋め込んでいるせいだろう。に埋め込んだすべてのjavascriptが 実行された後に、"DOMContentLoaded"にeventが発生するからだ。 ------------------------------------------------------- これは、にjavascriptを挿入し続ける限り、"DOMContentLoaded"のevent を遅らせることができるということなのか？ ==> 答え：確かに DOMContentLoadedもreadystatechangeも、両方とも遅らすことができる。 しかし遅らせている間、DOMは完成せず、DOMを調べることはできない。 従って、やる意味はない。 ------------------------------------------------------- たとえ、データ(テンプレートや投票数)がすでにブラウザ側にあったとしても、 "DOMContentLoaded"前にボタンを挿入することはできない。 "DOMContentLoaded"と"app_main"の終了時間があまり変わらないことを 考慮にいれると、"app_main"をキャッシュとしてローダーに含めても、 ボタンの表示を早めることはできない。 結論としては、"app_main"がロードされた後に、データ(テンプレートや投票数)を サーバー側に取りにいくのではなく、データ(テンプレートや投票数)をキャッシュしておいて、 "app_main"がロードされた時点で、そのデータが使える状態しておくことが重要。 ================================================================================= var CTimeElpaseQ = { tx : {}, mark : function(name) { return this.tx[name] = Date.now(); }, dif : function(name_s,name_e) { var t2 = ( name_e ) ? this.mark(name_e) : Date.now(); var t = ( this.tx[name_s] ) ? (t2-this.tx[name_s]) : -1; return t / 1000; } }; CTimeElpaseQ.mark("start"); function n() { return document.getElementsByClassName("ajax-iine").length; } function t() { return CTimeElpaseQ.dif("start"); } function runApp(loader) { var b = (loader.jQuery && loader.app_main); if (b) { console.log(3,"two scripts loaded",n(),t()); window[loader.app_main](loader.jQuery,cfg.appcfg); } return b; }; function main() { /*-- load jQuery --*/ var url_js1 = shouldLoadJq(cfg) ? cfg.url_js1 : null; loadScript(url_js1,function(b_loaded){ loader.jQuery = window.jQuery; if (b_loaded) { window.jQuery.noConflict(true); } runApp(loader); }); /*-- load App --*/ loadScript(cfg.url_js2,function(b_loaded){ loader.app_main = cfg.app_main; runApp(loader); }); }; main(); console.log(1,"direct",n(),t()); window.onload=function(){ console.log(4,"onload",n(),t()); }; document.addEventListener("DOMContentLoaded", function(event) { console.log(2,"DOMContentLoaded",n(),t()); }); ================================================================================= 1 "direct" 0 0.004 2 "DOMContentLoaded" 66 1.028 3 "two scripts loaded" 66 1.05 4 "onload" 66 1.339 ================================================================================= 1 "direct" 0 0.017 2 "DOMContentLoaded" 66 0.816 3 "two scripts loaded" 66 0.839 4 "onload" 66 2.246 ================================================================================= 1 "direct" 0 0.004 2 "DOMContentLoaded" 66 0.569 3 "two scripts loaded" 66 0.732 4 "onload" 66 2.2 ================================================================================= 1 "direct" 0 0.012 2 "DOMContentLoaded" 66 0.486 3 "two scripts loaded" 66 0.517 4 "onload" 66 0.811 ================================================================================= 1 "direct" 0 0.007 2 "DOMContentLoaded" 66 0.453 3 "two scripts loaded" 66 0.464 4 "onload" 66 0.752 ================================================================================= 1 "direct" 0 0.017 3 "two scripts loaded" 66 0.564 2 "DOMContentLoaded" 66 0.875 4 "onload" 66 0.884 (時々、<2>と<3>が入れ替わる時がある) ================================================================================= 1 "direct" 0 0.009 2 "DOMContentLoaded" 66 0.743 3 "two scripts loaded" 66 0.888 4 "onload" 66 1.07 ================================================================================= ================================================================================= "two scripts loaded" get loaded FAST!!! ================================================================================= 以下のように、ローダーの下にwait.phpを置く。 --------------------------------------------------------------------------------- --------------------------------------------------------------------------------- wait.phpで以下のように１秒待たせる。 --------------------------------------------------------------------------------- --------------------------------------------------------------------------------- すると、"two scripts loaded"が、"readystatechange"より早くロードされるのである。 --------------------------------------------------------------------------------- 1 "direct" 0 0.003 window.runAjaxIineButton 3 "two scripts loaded" 0 0.107 1.5 "readystatechange" 60 1.354 2 "DOMContentLoaded" 60 1.563 --------------------------------------------------------------------------------- どうやら、の間のJavascriptの時間がかかると、プライオリティが変化するようである。 おそらく、一つのJavascriptの時間が多いと、他のJavascriptをプライオリティを高くして 終わらせようとするみたいである。 --------------------------------------------------------------------------------- sleep(0)の場合、"readystatechange"が優先される。 --------------------------------------------------------------------------------- 1 "direct" 0 0.005 1.5 "readystatechange" 60 0.561 2 "DOMContentLoaded" 60 0.796 window.runAjaxIineButton 3 "two scripts loaded" 60 0.931 --------------------------------------------------------------------------------- ================================================================================= jQuery Document Readyは"readystatechange"とほぼ同じ時刻にFireされる ================================================================================= "readystatechange" 60 0.808 Query(document).ready 60 0.837 "DOMContentLoaded" 60 0.911 =================================================================================