【问题标题】:Optimizing Front-end code优化前端代码
【发布时间】:2016-07-13 11:45:29
【问题描述】:

我对 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 个与此相同的选项卡,我觉得加载需要一段时间的原因是,每次加载该页面时,它会加载所有内容,而不是我当前所在的选项卡.这成为一个大问题,尤其是当我想对数据进行分页并且每个页面都加载所有选项卡时。有没有办法更好地优化这段代码?谢谢。

【问题讨论】:

标签: ruby-on-rails ruby optimization


【解决方案1】:

对此的最佳解决方案是为每个选项卡制作部分内容,并在您单击该选项卡时通过 ajax 加载这些部分内容。

首先,渲染主页并将remote: true 添加到标签链接。当你点击标签链接时,通过js渲染部分。

希望对你有所帮助。

【讨论】:

    【解决方案2】:

    创建一个名为 _tab.html.erb 的部分并使用

    remote: true
    

    使用实际工作的 ajax 来呈现 JS 代码,您可以在其中执行任何实际工作流程。

    如果你想调用你的部分,只需渲染它

    render "tab.html.erb"
    

    【讨论】:

      猜你喜欢
      • 2023-01-29
      • 1970-01-01
      • 1970-01-01
      • 2022-11-23
      • 1970-01-01
      相关资源
      最近更新 更多