1

ページの読み込み速度を上げるために、AJAX を介して作成コメントを実装しました。シンプルで重くありません。コントローラーアクションには次のものがあります。

def create
    @comment = @commentable.comments.new(params_comment)
    respond_to do |format|
      if @comment.save
        flash.now[:notice] = "Your comment added."
        @response = {comment: @comment, model: @commentable}
        format.js { @response }
        format.html { redirect_to @commentable  }
      else
        format.js { render nothing: :true, status: :not_acceptable }
        format.html { redirect_to @commentable, status: :not_acceptable  }
      end
    end
  end

および js ファイル:

$("<%= escape_javascript( render 'comments/comment', @response)%>").appendTo(".comments").hide().fadeIn(500)
$('.notice-wrapper').html("<%= j(render partial: 'shared/notice') %>")
$('.alert').fadeOut(3000)

if $(".no-comments").css("display") is 'block'
  $(".no-comments").hide()
$(".new_answer").hide()
$(".open").show()

しかし、パフォーマンスを高速化する代わりに、逆の効果がありました。JavaScript による応答時間は 100 ～ 200 ミリ秒 (合計で 300 ミリ秒以下) 増加しました。これは正常な動作ですか、それとも何か間違ったことをしていますか? 速度を少し改善する方法はありますか？

私のパフォーマンステスト:

ここに画像の説明を入力

UPD: JS ファイルのみを使用したパフォーマンス テスト。

ここに画像の説明を入力

4

3 に答える 3

5

CoffeeScript に ERB を埋め込むのは非常に面倒であり、保守も不可能であるという私の意見はひとまず脇に置いておきます。リクエストごとに CoffeeScript を生成してコンパイルすると、パフォーマンスに大きな影響があることは疑いの余地がありません。

また、HTTP キャッシングの可能性も失います。

私の最初の提案は、CoffeeScript を ERB から分離することです。ERB の隠しフィールドに必要なデータを入力し、CoffeeScript でそれらのフィールドをマイニングします。

しかし、ERB を静的ファイルに埋め込む必要がある場合は、代わりに純粋な JavaScript に ERB タグを埋め込み、コンパイルされた CoffeeScript にそれらを使用させます。

于 2013-11-05T02:24:05.400 に答える
0

私の提案は、フォームリクエストにフックし、成功したら新しいコメントをレンダリングするか、エラーのあるフォームを再レンダリングすることです。例：

# app/javascripts/comments.coffee

$('#comment-form').bind 'ajax:complete', (data, status, xhr) ->
  // psuedo code
  1. if status is success
       append comment -- $('#comments').append(data.comment)
  2. else
       re-render form with errors -- $('#comment-form').html(data.form)
  1. コメント テンプレート (コメント/コメント) を返し、コメントに追加する
  2. not_acceptable の場合に JS 応答でフォームを返すようにコントローラーを更新します。
  3. ファイルは app/javascripts/comments.coffee にあります。
于 2013-11-05T07:17:54.460 に答える