Веб-страница Время загрузки Длинные для Rails веб-страницы

Question

Я занимаюсь разработкой веб-страницы с использованием рубинов на рельсах. Я нашел, что время загрузки моей страницы очень длинное. Я использую Pingdom, чтобы проверить его, и вот результат:

Тогда я имею в виду это и доклад YSlow

некоторые из вариантов F класса:

1.Grade F на сделать меньше HTTP запросы На этой странице имеется 78 внешних скриптов Javascript. Попробуйте объединить их в одну. Уменьшение количества компонентов на странице уменьшает количество HTTP-запросов, необходимых для визуализации страницы, что приводит к более быстрой загрузке страницы. Некоторые способы сокращения количества компонентов включают: объединение файлов, объединение нескольких сценариев в один скрипт, объединение нескольких файлов CSS в одну таблицу стилей и использование CSS-спрайтов и карт изображений.

2.Grade F on Add Истекает заголовки Есть 82 статических компонента без даты истечения будущего срока.

3.Grade F на использование куки свободных доменов Есть 81 компонентов, которые не печенья бесплатно

4.Grade F на Put JavaScript в нижней Есть 78 JavaScript скрипты, найденные в голову из document

Я чувствую, что в основном это грязный сценарий java или CSS, вызывающий длительное время ожидания. Предложение поместит java-скрипт в конец страницы.

проблема заключается в: рубин на рельсах, мой Javascript в файле: приложение \ активы \ JavaScripts \ custom.js в то время как мой вид страницы находится в: приложение/просмотр/sth.html.erb Я не знаю, как поставить его в конце.

прилагается мой код в приложение/просмотр/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 будет в нижней части страницы, на каждой PageLoad. Это самый эффективный способ не блокировать рендеринг клиентской стороны страницы.

Все ваши файлы будут включены через скомпилированный application.js в конце.

EDIT 1

Как вы уже видели в результатах YSlow, у вас есть много - и что я имею в виду много из JS. Все эти файлы выполняют dns lookup (они будут кэшироваться, но все же часто обновляются). Каждый из n запросов dns поставляется с штрафом из-за того, что поиск в кэше dns существует только для чего-то до дня. Сокращение количества запросов является ключевым фактором для ускорения вашего приложения.

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

Вы можете посмотреть на них для получения дополнительной информации о трубопроводе активов и/или что делать, чтобы сжать свои активы.