ruby-on-rails – Rails,JSON和加载时间
发布时间:2020-12-17 02:24:22 所属栏目:百科 来源:网络整理
导读:我的rails应用程序遇到了一些加载时间问题,并从URL源加载 JSON数据,然后使用lazy_high_charts gem将其解析为图形.目前,每次加载页面需要7到10秒. 我有三个JSON数据url(@ dat,@ forecast,@ echo),它们使用Oj gem进行解析,因为有人建议它会加快这个过程. 我正
我的rails应用程序遇到了一些加载时间问题,并从URL源加载
JSON数据,然后使用lazy_high_charts gem将其解析为图形.目前,每次加载页面需要7到10秒.
我有三个JSON数据url(@ dat,@ forecast,@ echo),它们使用Oj gem进行解析,因为有人建议它会加快这个过程. 我正在寻找一种方法来加速这个过程,如果可能的话. JSON数据结构如下: {"status"=>"ok","data"=>[{"2014-08-11 11:00:00"=>14.9},{"2014-08-11 11:30:00"=>15.1}]} 调节器 @temperature = Temperature.find(params[:id]) @temps = Temperature.find(:all,:conditions => ["id != ?",params[:id]]) @hash = Gmaps4rails.build_markers(@temperature) do |data,marker| marker.lat data.lat marker.lng data.long end @data = Oj.load(open(@temperature.url).read) @forecast = Oj.load(open(@temperature.air_forecast).read) @moisture = Oj.load(open(@temperature.moisture).read) data = [] moisture = [] forecast = [] @data['data'].flatten.each do |d| data << [DateTime.parse(d.keys.first).to_i * 1000,d.values.first] end @moisture['data'].each do |d| moisture << [DateTime.parse(d.keys.first).to_i * 1000,d.values.first] end @sevendays = LazyHighCharts::HighChart.new('graph') do |f| f.chart(:height => '400',width: '860',plotBackgroundImage: ActionController::Base.helpers.asset_path("chartbg.png")) f.yAxis [:title => {:text => "Soil Temperature (u00B0C)",:margin => 20,style: { color: '#333'}},min: 0,plotLines: [{ color: '#b20838',width: 2,value: 28 }],] f.series(:type => 'line',:name => 'Soil Temperature',data: data,marker: {enabled: false},:color => '#00463f' ) f.xAxis(:type => 'datetime',tickInterval: 1.day.to_i * 1000,:dateTimeLabelFormats => { day: "%b %e"},:tickmarkPlacement => 'on',:startOnTick => true,min: 1.weeks.ago.at_midnight.to_i * 1000,labels: { y: 20 } ) f.legend({:align => 'center',:verticalAlign => 'top',:y => 0,:borderWidth => 0,style: {color: "#333"}}) end @day = LazyHighCharts::HighChart.new('graph') do |f| f.chart(:height => '400',value: 28 }]] f.series(:type => 'line',tickInterval: 5.hour.to_i * 1000,min: 1.day.ago.at_midnight.to_i * 1000,style: {color: "#333"}}) end @month = LazyHighCharts::HighChart.new('graph') do |f| f.chart(:height => '400',tickInterval: 2.day.to_i * 1000,min: 1.month.ago.at_midnight.to_i * 1000,labels: { rotation: 90,y:20 }) f.legend({:align => 'center',style: {color: "#333"}}) f.plotOptions({line: {turboThreshold: 1500}}) end @moisture_graph = LazyHighCharts::HighChart.new('graph') do |f| f.chart(:height => '400',plotBackgroundImage: ActionController::Base.helpers.asset_path("chartbg.png")) f.yAxis [:title => {:text => "Litres of Water Per Litre of Soil",style: { color: '#333'}}] f.series(:type => 'line',:name => 'Surface Moisture Volume',pointInterval: 1.day * 1000,data: moisture,style: {color: "#333"}}) end respond_to do |format| format.html # show.html.erb format.json { render json: @temperature } end end 视图 <ul class="nav nav-pills"> <li class="active"><a href="#seven" data-toggle="tab">Last 7 Days</a></li> <li><a href="#forecast" data-toggle="tab">7 Day Forecast Temperature</a></li> <li><a href="#day" data-toggle="tab">Last 24 Hours</a></li> <li><a href="#month" data-toggle="tab">Last 30 Days</a></li> <li><a href="#moisture" data-toggle="tab">Surface Moisture Volume</a></li> <li><a href="#location" data-toggle="tab">Location of <%= @soil_temperature.property %></a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="seven" style="width: 100%;"> <%= high_chart("chart",@sevendays) %> </div> <div class="tab-pane" id="forecast" style="width: 100%;"> <table class="table table-bordered table_forecast" width="100%"> <th></th> <% Time.use_zone('Sydney'){(0.day.from_now.to_date..6.day.from_now.to_date)}.each do |d| %> <th><%= d.strftime("%a %d,%b") %></th> <% end %> <tr> <td width="12.5%"><b>Maximum</b></td> <% Time.use_zone('Sydney'){(0.day.from_now.to_date..6.day.from_now.to_date)}.each do |d| %> <% if @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.max { |a,b| a[1] <=> b[1] }[1] > 20 %> <td width="12.5%" bgcolor="#ed1c24"><font color="#ffffff"> <% elsif @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.max { |a,b| a[1] <=> b[1] }[1] > 14 %> <td width="12.5%" bgcolor="#f58233"><font color="#fff"> <% elsif @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.min { |a,b| a[1] <=> b[1] }[1] < 14 %> <td width="12.5%" bgcolor="#00a1e4"><font color="#fff"> <% else %> <td width="12.5%"><font color="#333333"> <% end %> <%= @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.max { |a,b| a[1] <=> b[1] }[1] %>°C</font></td> <% end %> </tr> <tr> <td width="12.5%"><b>Minimum</b></td> <% Time.use_zone('Sydney'){(0.day.from_now.to_date..6.day.from_now.to_date)}.each do |d| %> <% if @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.min { |a,b| a[1] <=> b[1] }[1] > 20 %> <td width="12.5%" bgcolor="#ed1c24"><font color="#ffffff"> <% elsif @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.min { |a,b| a[1] <=> b[1] }[1] < 14 %> <td width="12.5%" bgcolor="#00a1e4"><font color="#fff"> <% else %> <td width="12.5%"><font color="#333333"> <% end %> <%= @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.min { |a,b| a[1] <=> b[1] }[1] %>°C</td> <% end %> </tr> <tr> <td width="12.5%"><b>Average</b></td> <% Time.use_zone('Sydney'){(0.day.from_now.to_date..6.day.from_now.to_date)}.each do |d| %> <% if (@forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.sum { |sum| sum[1] } / @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.count) > 20 %> <td width="12.5%" bgcolor="#ed1c24"><font color="#ffffff"> <% elsif (@forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.sum { |sum| sum[1] } / @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.count) > 14 %> <td width="12.5%" bgcolor="#f58233"><font color="#fff"> <% elsif (@forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.sum { |sum| sum[1] } / @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.count) < 14 %> <td width="12.5%" bgcolor="#00a1e4"><font color="#fff"> <% else %> <td width="12.5%"><font color="#333333"> <% end %> <%= "%.1f" % (@forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.sum { |sum| sum[1] } / @forecast['data']['temperatures'].select { |temp| temp[0].to_date == d }.count) %>°C</td> <% end %> </tr> </table> </div> <div class="tab-pane" id="day" style="width: 100%;"> <%= high_chart("chart2",@day) %> </div> <div class="tab-pane" id="month" style="width: 100%;"> <%= high_chart("chart3",@month) %> </div> <div class="tab-pane" id="moisture" style="width: 100%;"> <%= high_chart("chart4",@moisture_graph) %> </div> <div class="tab-pane" id="location" style="width: 100%;"> <div id="map" style='width: 100%; height: 600px;'></div> </div> <hr> </div> <script type="text/javascript"> $('a[href="#location"]').on('shown',function(e) { var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID,Zoom: 9 }; handler = Gmaps.build('Google'); handler.buildMap({ provider: mapOptions,internal: {id: 'map'}},function(){ markers = handler.addMarkers(<%= raw @hash.to_json %>); handler.map.centerOn(markers[0]); handler.getMap().setZoom(9); google.maps.event.trigger(map,"resize"); }); }); </script> 解决方法
听起来好像“URL源”正在从第三方站点提供天气预报信息.网址本身需要7到10秒才能加载吗?如果是这样,你可以做的很少,以加快他们的速度.即使并行请求也只能与最快的请求一样快.相反,您可以尝试移动延迟,以便最终用户不会遇到它.
据推测,这些信息每分钟都不会发生显着变化.如果您的潜在预测位置数量有限,则可以尝试预先加载和存储数据.特别是,您可以使用cron作业每隔X分钟提取数据并将其存储在数据库中,您可以在页面加载时查询它. 或者,您可以加载没有数据的页面(显示简单的“正在加载…”文本),然后通过Ajax将数据填充到数据中.这不会使查看数据变得更快,但它会提供比盯着空白页7-10秒更好的用户体验. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |