谷歌地图加载时间过长

Question

我在页面加载时打开谷歌地图，并根据从数据库中获取的数据添加指向它的指针。但这里的问题是加载大约需要 3-4 分钟，cpu 利用率达到 100%，而且 RAM 也消耗很多。下面是代码：

<div class="col-md-12">
     <div class="row">
        <div class="col-md-10">
          <div id="map" style='height: 85vh;'></div>
        </div>
      
     </div>
</div>

<script>

  
  var infowindows = [];
  var notification_location, cirle_area_for_notification = null;
  function initMap() {
    var geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      // center: {lat: markers[0].lat, lng: markers[0].lng},
      center: {lat: -33.826668, lng: 151.231526},
       type:['(regions)'],
       componentRestrictions: {
        country: ['aus']
      }
    });
    var icon, content = '';
    <% @users.find_in_batches(batch_size: 200) do |users| %>

      <% users.each do |user| %>

          <% if user.staff? %>

            icon = "<%= image_url 'blue.svg' %>";
            content = ''
                + 'Name: <b><a href = "<%= admin_staff_path(user.staff_profile.id)+"?path="+request.original_url %>" target = "_blank"></a></b></br>'
                + 'Role: <b>staff</b></br>'
                + 'Phone Number: <b><%= user.phone_number %></b></br>'
                + 'Qualification: <b><%= user.qualification_levels&.last&.name %></b></br>'
                + 'Radius: <b><%= user.address.radius %></b></br>'
                + 'Centers in same zone: <b><%= user.staff_active_centers_in_same_zones.pluck(:user_id) %></b></br>';


          <% else %>

            icon = "<%= image_url 'orange.svg' %>";
            content = ''
                + 'Name: <b><a href = "<%= admin_show_center_path(user.center_profile)+"?path="+request.original_url %>" target = "_blank"><%= user.user_name %></a></b></br>'
                + 'Role: <b>center</b></br>'
                + 'Phone Number: <b><%= user.phone_number %></b></br>'
                + 'Staffs in same zone: <b><%= user.center_active_staffs_in_same_zones.size %></b></br>';
          <% end %>

      var infowindow = new google.maps.InfoWindow({
          content: content
      });
      infowindows.push(infowindow);
      var marker = new google.maps.Marker(
          {
              position: {lat: <%= user.address.latitude %>, lng: <%= user.address.longitude %>},
              map: map,
              title: '<%= user.user_name %>',
              animation: google.maps.Animation.DROP,
              icon: new google.maps.MarkerImage(icon),
              id: '<%= user.id %>',
              users_in_same_zone: '<%= user.center_active_staffs_in_same_zones.pluck(:staff_user_id) %>'
          }
      );

      //Click event on marker
      marker.addListener('click', function() {
          close_map_info_windows();
          infowindow.open(map, marker);
      });

        <% end %>

    <% end %>


  // Close map infowindow
  function close_map_info_windows(){
    for (var i = 0; i < infowindows.length; i++) {
      infowindows[i].close();
    }
  }


</script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.secrets.google_api_key %>&libraries=places&callback=initMap">
</script>

下面是控制器代码

@users = User.active.accepted.joins(:address)
              .includes(:address, :qualification_levels, :staff_profile, :center_profile, :center_active_staffs_in_same_zones, :staff_active_centers_in_same_zones)

如果我增加的批大小超过200，响应时间会增加。我正在循环查看，因为我需要将值分配给 javascript 函数

我正在使用RAILS5。

有什么优化这个页面的建议吗？

Answer 1

首先，您似乎拥有a N+1 issue。
尝试为 staff_profile、qualification_levels、address 或 staff_active_centers_in_same_zones 等模型添加 .includes 以供用户查询。
bullet gem 可以帮助您识别这些模型。

在任何情况下，您的代码都可能有问题，因为您可能会在地图中加载超过 200 个用户点（因为您的查询中的 batch_size: 200），但只有您知道应该做什么页面。

和不相关的，还要把查询逻辑移到控制器上。在视图中看起来使用 MVC 方法调用它的位置错误。