填充嵌套表单时呈现性能 - Rails 4 - OmniContacts

时间:2015-06-18 18:34:03

标签: ruby-on-rails forms ruby-on-rails-4 omnicontacts-gem

在我的应用程序中,我使用OmniContacts gem来允许用户导入他们的联系人。这有效。获取Gmail的联系人大约需要3到500毫秒。

为了允许导入联系人,我将它们放在嵌套的表单中。现在,每个联系人的呈现需要175-300毫秒,乘以1000,这很糟糕。

我希望有一个针对这个问题的rails解决方案。否则我猜测使用AJAX和JS表单可能会工作。感谢您的想法和时间。

导入控制器:

  def import
    @user = current_user
    @import = request.env['omnicontacts.contacts']
    @contacts = @import.map do |contact_info|
      Contact.new(
        first_name: contact_info[:first_name],
        last_name:  contact_info[:last_name],
        email_home: contact_info[:email],
        phone_home: contact_info[:phone]
      )
    end

    respond_to do |format|
      format.html
    end
  end

导入视图

<div class="row">
  <div class="small-12">
    <%= simple_form_for(@user, url: import_path) do |f| %>
        <%= f.simple_fields_for :contacts, @contacts do |contact| %>
            <%= render 'contact_fields', f: contact %>
        <% end %>
        <div class="actions" align="right">
          <%= f.submit class:"button tiny" %>
        </div>
    <% end %>
  </div>
</div>

嵌套表单部分:

<div class='nested-fields'>
  <fieldset>
  <div class="row">
    <div class="small-2 columns">
      <%= f.input :import, as: :boolean %>
    </div>
    <div class="small-2 columns">
      <%= f.input :first_name %>
    </div>
    <div class="small-2 columns">
      <%= f.input :last_name %>
    </div>
    <div class="small-4 columns">
      <%= f.input :email_home %>
    </div>
    <div class="small-2 columns">
      <%= f.input :phone_home %>
    </div>
  </div>
  </fieldset>
</div>

毁灭日志:(闭上眼睛,想象添加了1000多条渲染线)

Started GET "/oauth2callback?code=4/XzHDNPJ8RgRb7SFStQ3tVM-ff2q5WolrVHTsokI0egg" for ::1 at 2015-06-18 12:16:09 -0500
Processing by ImportsController#import as HTML
  Parameters: {"code"=>"4/XzHDNPJ8RgRb7SFStQ3tVM-ff2q5WolrVHTsokI0egg"}
  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
  Rendered imports/_contact_fields.html.erb (301.0ms)
  Rendered imports/_contact_fields.html.erb (233.9ms)
  Rendered imports/_contact_fields.html.erb (276.8ms)
  Rendered imports/_contact_fields.html.erb (180.3ms)
  Rendered imports/import.html.erb within layouts/application (1001.0ms)
  Rendered layouts/_header.html.erb (2.8ms)
  Rendered layouts/_footer.html.erb (3.8ms)
Completed 200 OK in 1548ms (Views: 1540.0ms | ActiveRecord: 0.5ms)

1 个答案:

答案 0 :(得分:0)

原来问题很简单。将表格部分更改为:

<div class='nested-fields'>
  <fieldset>
  <div class="row">
    <div class="small-1 columns">
      <%= f.label "Import" %>
      <%= f.check_box :import %>
    </div>
    <div class="small-2 columns">
      <%= f.label :firs_name %>
      <%= f.text_field :first_name %>
    </div>
    <div class="small-2 columns">
      <%= f.label :last_name %>
      <%= f.text_field :last_name %>
    </div>
    <div class="small-4 columns">
      <%= f.label :email_home %>
      <%= f.text_field :email_home %>
    </div>
    <div class="small-3 columns">
      <%= f.label :phone_home %>
      <%= f.text_field :phone_home %>
    </div>
  </div>
  </fieldset>
</div>

性能提升:

  Rendered imports/_contact_fields.html.erb (43.5ms)
  Rendered imports/_contact_fields.html.erb (1.0ms)
  Rendered imports/_contact_fields.html.erb (0.7ms)
  Rendered imports/_contact_fields.html.erb (0.7ms)
  Rendered imports/import.html.erb within layouts/application (407.4ms)