Optimierung der Front-End-Code

Question

Ich habe eine Sicht auf Ruby on Rails, und es funktioniert gut, aber mein Problem ist, dass es einige Zeit dauert, bevor die Seite geladen wird. Dies ist ein Teil des Codes:

Registerkarte Haupt

<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--> 

Es gibt 5 weitere Registerkarten, die identisch sind, und ich habe den Grund für ein Gefühl, warum es eine Weile dauert, ist zu laden, weil jedes Mal, Wenn Sie diese Seite laden, lädt sie alles, nicht die Registerkarte, auf der ich gerade bin. Dies wird zu einem großen Problem, besonders wenn ich die Daten paginieren möchte und jede Seite alle Tabs lädt. Gibt es eine Möglichkeit, diesen Code besser zu optimieren? Vielen Dank.

Answer 1

Die beste Lösung hierfür ist es, für jeden Reiter eine Partialansicht zu erstellen und diese Teiltöne durch Ajax zu laden, wenn Sie auf diesen Tab klicken.

Rendern Sie zuerst die Hauptseite und fügen Sie remote: true Tab-Verknüpfungen hinzu. Wenn Sie auf den Tab Link klicken, partiell durch js rendern.

Ich hoffe, das wird Ihnen helfen.

Answer 2

eine teilweise mit dem Namen _tab.html.erb erstellen und verwenden

remote: true 

Ajax zu verwenden, die tatsächlich funktioniert das JS-Code zu machen, wo Sie alles, was Sie, dass ist die eigentliche Workflow tun können.

Wenn Sie wollen, dass es Ihre Teil rufen Sie einfach machen, indem

render "tab.html.erb"