組織選択ウィンドウのレンダリングを遅延させて表示速度改善
組織選択ウィンドウやグループ選択ウィンドウは、組織選択ボタンとかを押したらすぐに使えるように、
一番最初(mainとか)でレンダリングしておく必要があるが普通にやろうとすると、
組織選択ウィンドウをレンダリングするまで全体も描画されず非常に表示が遅かった。
そこで、組織選択ウィンドウのレンダリングをAjaxUpdaterで非同期に実施するようにしたところ
初期画面表示に約5秒かかっていたところ、1秒程度に改善された。
(修正前) main.rhtmlにそのまま記述
c<div id="search_result_area"></div> <script type="text/javascript"> <%# 初期表示用検索実行 %> <%= remote_function( :url => {:controller => '/sample/hoge', :action => 'search'}, :update => 'search_result_area') %> </script> <%# 組織選択ウィンドウ %> <%= render_organization_select_window({ :element_id => 'hoge_organization_select_window', :options => { :prefix => 'hoge_org_select_', }, :title => '組織選択', :variable => 'rubricks.sample.hoge_org_select_window', }) %> ・・(以下略)・・
(修正後) main.rhtmlから別rhtmlに切り出して、Ajaxで読み込み
=== main.rhtml === <div id="search_result_area"></div> <script type="text/javascript"> <%# 初期表示用検索実行 %> <%= remote_function( :url => {:controller => '/sample/hoge', :action => 'search'}, :update => 'search_result_area') %> </script> <%# 組織選択ウィンドウ用 %> <div id="hoge_window_org_select_area"></div> <script type="text/javascript"> new Ajax.Updater($("hoge_window_org_select_area"), "<%= url_for(:controller => "/sample/hoge", :action => "main_window_org_select") %>", {evalScripts: true} ); </script> === main_window_org_select.rhtml === <%# 組織選択ウィンドウ %> <%= render_organization_select_window({ :element_id => 'hoge_organization_select_window', :options => { :prefix => 'hoge_org_select_', }, :title => '組織選択', :variable => 'rubricks.sample.hoge_org_select_window', }) %> ・・(以下略)・・
初期画面での検索処理が終わるとすぐその画面は表示されて、
組織選択ウィンドウのレンダリングは非同期で裏で実行される。
勿論、非同期でレンダリングしている最中は組織選択ウィンドウは使えないが
初期画面表示直後に組織選択ボタンを使わせるようなケースでなければ有効と思う。
ちなみに、非同期レンダリング中に組織選択ボタンを押した場合、モーダル状態+ウィンドウなしになるが、レンダリングが終わるとモーダルが解けるので、もう一度組織選択ボタンを押せばOKであった。