フロントエンドコードの最適化

Question

私はRuby on Railsのビューを持っていますが、うまくいきますが、私の問題はページが読み込まれるまでにかなりの時間がかかることです。これは、コードの一部です：

メインタブ

<div class="tab-content"> 
       <div class="tab-pane fade in active" id="tabconstituent"> 
        <h3>Constituent Database</h3> 
        <ul class="nav nav-tabs"> 
         <li class="active"><a href="#tabconstinbox" data-toggle="tab">Inbox</a></li> 
         <li><a href="#tabconstsent" data-toggle="tab">Sent</a></li> 

        </ul> 

        <div class="tab-content"> 
         <div role="presentation" class="tab-pane fade in active" id="tabconstinbox"> 
          <div class="container-fluid"> 
           <br /> 
           <div class="col-lg-6 pull-right"> 
           <div class="input-group pull-right" id="searchDrafts"> 
            <input type="text" class="form-control" placeholder="Search for"> 
            <span class="input-group-btn"> 
            <button class="btn btn-default" type="button"> 
             <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
            </button> 
            </span> 
           </div><!-- /input-group --> 

           <div class="dropdown"> 
            <button class="btn btn-default dropdown-toggle pull-right" type="button" id="dropdownDrafts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
             Filter by 
             <span class="caret"></span> 
            </button> 
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
            <li><a href="#">Sent to</a></li> 
            <li><a href="#">Subject</a></li> 
            <li><a href="#">Date</a></li> 
            </ul> 
           </div> 
          </div><!-- /.col-lg-6 --> 
          <%= will_paginate @received_messages %> 
           <%= form_tag destroy_many_received_messages_path, method: :post do %> 
          <table class="table table-striped"> 
           <thead> 
            <tr> 
             <th><input type="checkbox" id="checkbox_all" /></th> 
             <th data-field="sender" data-sortable="true">Sender</th> 
             <th data-field="complaint" data-sortable="true">Complaint</th> 
             <th data-field="location" data-sortable="true">Location</th> 
             <th data-field="subject" data-sortable="true">Subject</th> 
             <th data-field="department" data-sortable="true">Department</th> 
             <th data-field="action_taken" data-sortable="true">Action Taken</th> 
             <th data-field="status" data-sortable="true">Status</th> 
             <th data-field="date" data-sortable="true">Date</th> 
            </tr> 
           </thead> 
           <tbody> 

            <% @received_messages.each do |received_message| %> 
             <tr> 
             <td><%= check_box_tag "message_ids[]", received_message.id%></td> 
             <td><%= received_message.name%></td> 
             <td><%= received_message.message %></td> 
             <td><%= received_message.district %> <%= received_message.barangay %></td> 
             <td><%= received_message.subject %></td> 
             <td><% received_message.departments.uniq.each do |department|%> 
               <%= department.name %> 
              <% end -%></td> 
             <td><%= received_message.action_taken %></td> 
             <td><%= received_message.status %></td> 
             <td><%= received_message.created_at %></td> 
             </tr> 
            <% end %> 
           </tbody> 
          </table> 

          <%= submit_tag "Delete", id:"buttonConstInbox_Delete", :class =>"btn btn-primary"%> 
          <%= submit_tag "Update", id:"buttonConstInbox_Update", :class =>"btn btn-primary", remote: true, 'data-toggle' => "modal", 'data-target' => "#constSentModal" %> 
          <%= submit_tag "Attach", id:"buttonConstInbox_Attach", :class =>"btn btn-primary" %> 
          <% end %> 

         </div><!-- /.container-fluid --> 
         </div> 
         <div role="presentation" class="tab-pane fade" id="tabconstsent"> 
          <div class="container-fluid"> 
           <br /> 
           <div class="col-lg-6 pull-right"> 
           <div class="input-group pull-right" id="searchDrafts"> 
            <input type="text" class="form-control" placeholder="Search for"> 
            <span class="input-group-btn"> 
            <button class="btn btn-default" type="button"> 
             <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
            </button> 
            </span> 
           </div><!-- /input-group --> 

           <div class="dropdown"> 
            <button class="btn btn-default dropdown-toggle pull-right" type="button" id="dropdownDrafts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
             Filter by 
             <span class="caret"></span> 
            </button> 
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
            <li><a href="#">Sent to</a></li> 
            <li><a href="#">Subject</a></li> 
            <li><a href="#">Date</a></li> 
            </ul> 
           </div> 
          </div><!-- /.col-lg-6 --> 
          <%= will_paginate @send_messages %> 
          <%= form_tag destroy_many_received_messages_path, method: :post do %> 
          <table class="table table-striped"> 
           <thead> 
            <tr> 
             <th><input type="checkbox" id="checkbox_all" /></th> 
             <th data-field="sent_to" data-sortable="true">Sent To</th> 
             <th data-field="message" data-sortable="true">Message</th> 
             <th data-field="status" data-sortable="true">Status</th> 
             <th data-field="date" data-sortable="true">Date</th> 
            </tr> 
           </thead> 

            <tbody> 
            <% @send_messages.each do |send_message| %> 
             <tr> 
             <td><%= check_box_tag "message_ids[]", send_message.id%></td> 
             <td><%= send_message.mobile_number%></td> 
             <td><%= send_message.message %></td> 
             <td><%= send_message.status %></td> 
             <td><%= send_message.created_at %></td> 
             </tr> 
            <% end %> 
           </tbody> 

          </table>  
          <% end %> 
          <button type = "button" id="buttonConstSent_Delete" class = "btn btn-primary">Delete</button> 
         </div><!-- /.container-fluid --> 
         </div> 
        </div><!-- /.tab-content inbox/sent/trash--> 

ありと同一であり、5つの複数のタブがあり、私はそれがロードに時間がかかる理由を感じている理由は、それぞれの時間ですそのページをロードすると、現在ロード中のタブではなく、すべてがロードされます。これは特にデータにページを設定し、各ページがすべてのタブを読み込むときに大きな問題になります。このコードをよりよく最適化する方法はありますか？ありがとうございました。

Answer 1

この最適な解決策は、各タブに対して部分的に行い、そのタブをクリックすると、その部分をajaxで読み込むことです。

まず、メインページをレンダリングし、remote: trueをタブリンクに追加します。あなたがタブリンクをクリックすると、部分的にjsをレンダリングします。

私はこれがあなたに役立つことを願っています。

Answer 2

は、名前_tab.html.erbで部分を作成し、実際にはそれが実際のワークフローであるものは何でも行うことができますJSコードをレンダリングするために働き、AJAXを使用するには

remote: true 

を使用しています。

あなたはちょうどあなたがそれを必要とするときあなたは、その後、Ajaxですべてのタブを読み込むことができ

render "tab.html.erb"