Javascript Rails网页的网页加载时间很长
我正在使用RubyonRails开发一个网页。 我发现我的一个页面加载时间很长。 我使用pingdom对其进行测试,结果如下: 然后,我将参考本报告和Yslow报告 一些F级选项: 1.F级上的HTTP请求更少 此页面有78个外部Javascript脚本。试着把它们合在一起。 减少页面上组件的数量可以减少呈现页面所需的HTTP请求数量,从而加快页面加载速度。减少组件数量的一些方法包括:组合文件、将多个脚本组合成一个脚本、将多个CSS文件组合成一个样式表以及使用CSS精灵和图像映射 2.添加页眉时为F级 有82个静态组件没有很长的过期日期 3.使用无cookie域的F级 有81个组件不是无cookie的 4.F级,将JavaScript放在底部 在文档的开头找到了78个JavaScript脚本 我觉得最主要的原因是凌乱的java脚本或CSS导致了长时间的等待。 建议将java脚本放在页面末尾 问题是:对于RubyonRails,我的Javascript文件是:app\assets\javascripts\custom.js 当我的查看页面处于以下位置时:app/view/sth.html.erb 我不知道最后该怎么说 附件是我在app/view/sth.html.erb中的代码Javascript Rails网页的网页加载时间很长,javascript,html,ruby-on-rails,yslow,Javascript,Html,Ruby On Rails,Yslow,我正在使用RubyonRails开发一个网页。 我发现我的一个页面加载时间很长。 我使用pingdom对其进行测试,结果如下: 然后,我将参考本报告和Yslow报告 一些F级选项: 1.F级上的HTTP请求更少 此页面有78个外部Javascript脚本。试着把它们合在一起。 减少页面上组件的数量可以减少呈现页面所需的HTTP请求数量,从而加快页面加载速度。减少组件数量的一些方法包括:组合文件、将多个脚本组合成一个脚本、将多个CSS文件组合成一个样式表以及使用CSS精灵和图像映射 2.添加页眉
<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>
项目信息
PJO编号
客户端
位置
联系人
名称
任命
电子邮件
短讯服务
传真
仪器类型
全部的
安装
活跃的
评论
第一米
查看数据1
查看数据2
生成报告
0) %>
第一设备
挑选
设备ID
烙印
地址
此项目没有第一台设备
0) %>
第二设备
挑选
设备ID
地址
此项目没有第二台设备
报告类型
“选择报告”%>
假%>
假%>
任何人都可以提供一些建议?在默认的
app/views/layouts/
目录中,应该有一个名为application.html.erb的文件。此文件包含头中的以下行
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
true%>
如果您将其移动到关闭正文
标记的正下方,则每次页面加载时,您的所有JS都将位于页面底部。这是不阻塞页面客户端呈现的最有效方法
最后,您的所有文件都将通过编译的application.js
包含进来
编辑1
正如你在YSLOW结果中看到的,你有很多——我的意思是说有很多JS。所有这些文件都会执行缓存(它们将被缓存,但仍会频繁更新)。每n次dns查找都会受到惩罚,因为缓存的dns查找最多只存在一天。减少请求数量是使应用程序更快的关键
您可能需要查看这些,以获取有关资产管道和/或如何压缩资产的更多信息。我已经移动了这一行,但等待时间仍然在10秒左右。我需要重新启动才能获得此功能吗?或者可能是它的另一个原因导致了这个问题:发出一些http请求/添加expires头/缩小Javascript和CSSYeah看到JS列表吓得我魂不附体,我不知道为什么我没有在我的答案中添加任何关于它的内容。我将补充一些信息。