Rails 网页的网页加载时间长

Question

我正在使用 ruby​​ on rails 开发一个网页。 我发现我的一个页面加载时间很长。 我用 pingdom 测试了一下，结果如下：

那我参考这个和Yslow的报告

一些 F 级选项：

1. 减少 HTTP 请求的 F 级 此页面有 78 个外部 Javascript 脚本。尝试将它们合二为一。 减少页面上的组件数量会减少呈现页面所需的 HTTP 请求数量，从而加快页面加载速度。减少组件数量的一些方法包括：合并文件，将多个脚本合并为一个脚本，将多个 CSS 文件合并为一个样式表，以及使用 CSS Sprite 和图像映射。

2. 添加过期标题的 F 级 有 82 个静态组件没有遥远的到期日期。

3. 使用无 cookie 域的 F 级 有 81 个组件不是无 cookie 的

4. 将 JavaScript 放在底部的 F 级 文档头部有 78 个 JavaScript 脚本

我觉得主要是乱七八糟的 java 脚本或 CSS 导致了漫长的等待时间。 建议将 java 脚本放在页面末尾。

问题是：对于 ruby​​ on rails，我的 Javascript 在文件中：app\assets\javascripts\custom.js 而我的视图页面在：app/view/sth.html.erb 我不知道怎么把它放在最后。

附上我在 app/view/sth.html.erb 中的代码

    <h3>Project Information</h3>
<div class="project-report">
  <table class="content-table">
    <tr>
      <td><strong>PJO Number</strong></td>
      <td><%= @project.job_number %></td>
    </tr>
    <tr>
      <td><strong>Client</strong></td>
      <td><%= @project.client_name %></td>
    </tr>
    <tr>
      <td><strong>Location</strong></td>
      <td><%= @project.jobsite_location %></td>
    </tr>

    <br>
    <td>
    <tr>
      <td><strong>Contacts</strong></td>

    </tr>
        <br>
        <table class="yellow-header-table contact-table">
          <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Email</th>
            <th>SMS</th>
            <th>Fax</th>
          </tr>
          <% @project.contacts.each do |contact| %>
          <tr>
            <td><%= contact.contact_person_name %></td>
            <td><%= contact.designation %></td>
            <td><%= contact.email %></td>
            <td><%= contact.phone_number %></td>
            <td><%= contact.fax_number %></td>
          </tr>
          <% end %>
        </table>

    </td>
  </table>

  <table class="yellow-header-table">
    <tr>
      <th>Instrument Type</th>
      <th>Total</th>
      <th>Installed</th>
      <th>Active</th>
      <th>Remarks</th>
    </tr>
    <tr>
      <td>first Meter</td>
      <td><%= @project.quantity_active %></td>
      <td><%= @project.quantity_active %></td>
      <td><%= @project.quantity_active %></td>
      <td><%= @project.sound_remarks %></td>
    </tr>

  </table>
<div style='margin-left:50px;float:left;'>
  <button id="buttonN" class="btn btn-info" style="width:190px;">View Data1</button>
  <button id="buttonV" class="btn btn-info" style="margin-left:50px;width:190px;">View Data2</button>
  <button id="buttonR" class="btn btn-info" style="margin-left:50px;width:190px;">Generate Report</button>
</div>





<div id="report-reviewn" class="hidden" style='margin-top:55px;'>  
<% if (@devices.count > 0) %>
    <h4 style="width:100%">1st Devices</h4>

    <table id="tableselect" class="yellow-header-table">
    <tr>
      <th scope="Row">Select</th>
      <th>Device ID</th>
      <th>Brand</th>
      <th>Address</th>
    </tr>



    <%= form_tag viewdata_devices_path,class:"form-horizontal viewlist-form" do %>
    <% @project.first_devices.each do |first_device| %>
    <tr>
      <th scope='col'>
      <%= radio_button_tag(:deviceID, first_device.id ) %></th>
      <td><%= first_device.device_id %></td>
      <td><%= first_device.serial_number %></td>
      <td><%= first_device.brand %></td>
      <td><%= first_device.last_calibration_date %></td>
      <td><%= first_device.remarks %></td>
      <td><%= @project.project_type %></td>
      <td>
      <select style='border:none;'>
       <option><%= first_device.device_location %></option>
       <option><%= first_device.device_latlng %></option>
      </select>
     </td>
    </tr>
    </tr>
    <% end %>
  </table>

        <table class="table-row">

        <tr>

        <th> <%= text_field_tag 'startday', nil, placeholder: 'Start Date',style:'width:100px;', class: "date-picker" %></th>

        <th> <%= text_field_tag 'endday', nil, placeholder: 'End Date' ,style:'width:100px;',class: "date-picker" %><th>
          <%= hidden_field_tag "project_id", @project.id %>

        <th> <%= submit_tag "View Data",class: "btn" %></th>

    <% end %>
        </tr>
        </table>



    <% else %>
    <p style="width:100%;text-align:left;margin-left:50px;">There is no first device for this project </p>
    <% end %> 

</div>  










  <div id="report-reviewv" class="hidden" style='margin-top:55px;' >
      <% if (@vdevices.count > 0) %>

    <table class="yellow-header-table">
    <h4 style="width:100%">second Devices</h4>
    <tr>
      <th scope="Row">Select</th>
      <th>Device ID</th>
      <th>Address</th>
    </tr>

    <%= form_tag viewdata_second_devices_path,class:"form-horizontal viewlist-form" do %>
    <% @project.second_devices.each do |second_device| %>
    <tr>
      <th scope='col'>
      <%= radio_button_tag(:deviceID, second_device.id ) %></th>
      <td><%= second_device.device_id %></td>
      <td><%= second_device.serial_number %></td>
      <td><%= second_device.brand %></td>
      <td><%= second_device.current_trigger_value %></td>
      <td><%= second_device.last_calibration_date %></td>
      <td><%= second_device.remarks %></td>
      <td><%= @project.project_type %></td>
      <td>
      <select style='border:none;'>
       <option><%= second_device.device_location %></option>
       <option><%= second_device.device_latlng %></option>
      </select>
     </td>
    </tr>
    <% end %>

    </table>

       <table class="table-row">

        <tr>

        <th> <%= text_field_tag 'startday', nil, placeholder: 'Start Date',style:'width:100px;', class: "date-picker" %></th>

        <th> <%= text_field_tag 'endday', nil, placeholder: 'End Date' ,style:'width:100px;',class: "date-picker" %><th>
         <%= hidden_field_tag "project_id", @project.id %>
        <th> <%= submit_tag "View Data",class: "btn" %></th>

    <% end %>
        </tr>
        </table>

    <% else %>
    <p style="width:100%;text-align:left;margin-left:50px;">There is no second device for this project </p>
    <% end %> 
</div>




    <div id="report-reviewr" class="hidden" style='margin-top:100px;'>  

    <div class="report-forms report-left-align">
    <span><strong>Report Type</strong></span>
    <%= select_tag "report-type", options_for_select([["first", "first-report"], ["second", "second-report"]]), :prompt => "Choose Report" %>

    <div id="first-report" class="report-form hidden">
      <%= form_tag report_first_devices_path, class: "form-horizontal device-form", target: "_blank" do %>
      <div class="control-group">
        <%= label_tag "Choose Devices", nil, class: "control-label" %>
        <div class="controls">
          <% selected_first_device = @project.first_devices.blank? ? nil : @project.first_devices.first.id %>
          <%= select_tag "devices", options_from_collection_for_select(@project.first_devices, "id", "serial_number", selected_first_device), :multiple => false %>
        </div>
      </div>

      <div class="control-group">
        <%= label_tag "Choose Time", nil, class: "control-label" %>
        <div class="controls">
          <%= text_field_tag "time_range", nil, class: "input-large date-picker" %>
        </div>
      </div>

      <%= hidden_field_tag "project_id", @project.id %>
      <%= hidden_field_tag "device_type", "first" %>

      <div class="control-group">
        <div class="controls">
          <%= submit_tag "Generate Report", class: "btn" %>
        </div>
      </div>
      <% end %>
    </div>

    <div id="second-report" class="report-form hidden">
      <%= form_tag report_second_devices_path, class: "form-horizontal device-form", target: "_blank" do %>
      <div class="control-group">
        <%= label_tag "Choose Devices", nil, class: "control-label" %>
        <div class="controls">
          <% selected_second_device = @project.second_devices.blank? ? nil : @project.second_devices.first.id %>
          <%= select_tag "devices", options_from_collection_for_select(@project.second_devices, "id", "serial_number", selected_second_device), :multiple => false %>
        </div>
      </div>

      <div class="control-group">
        <%= label_tag "Choose Time", nil, class: "control-label" %>
        <div class="controls">
          <%= text_field_tag "time_range", nil, class: "input-large date-picker" %>
        </div>
      </div>

      <%= hidden_field_tag "project_id", @project.id %>
      <%= hidden_field_tag "device_type", "second" %>

      <div class="control-group">
        <div class="controls">
          <%= submit_tag "Generate Report", class: "btn" %>
        </div>
      </div>
      <% end %>
    </div>
  </div>



  </div>

</div>

谁能给点建议？

Answer 1

在默认的app/views/layouts/ 目录中应该有一个名为application.html.erb 的文件。该文件的头部包含以下行

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

如果您将其移至结束 body 标记的正下方，您的所有 JS 将在每​​次页面加载时位于页面底部。这是不阻塞页面客户端渲染的最有效方式。

你所有的文件最终都会通过编译后的application.js 包含进来。

编辑 1

正如您在 YSLOW 结果中所见，您拥有很多 - 我的意思是 很多 JS。所有这些文件都执行dns lookup（它们将被缓存但仍会经常更新）。每 n 次 dns 查找都会受到惩罚，因为缓存的 dns 查找最多只存在一天。减少请求数量是加快应用程序速度的关键。

• Info about the asset pipeline
• SO post of assets not being compiled into one file

您可能希望查看这些以获取有关资产管道和/或如何压缩资产的额外信息。