如何提高 rails 中咖啡脚本的执行速度？答案

【问题标题】：How to improve speed execution of coffeescript in rails?如何提高 rails 中咖啡脚本的执行速度？
【发布时间】：2013-11-05 17:42:38
【问题描述】：

为了提高页面加载速度，我通过 AJAX 实现了创建 cmets。它很简单而不是重量级。在控制器操作中我有：

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 毫秒）。这是正常行为还是我做错了什么？有什么办法可以提高一点速度吗？

我的性能测试：

更新： 我只使用 JS 文件进行性能测试。

【问题讨论】：

标签： javascript ruby-on-rails performance coffeescript

【解决方案1】：

让我们暂时搁置我的观点，即在 CoffeeScript 中嵌入 ERB 看起来非常恶心且无法维护。毫无疑问，当您针对每个请求生成和编译 CoffeeScript 时，会对性能产生巨大影响。

您也失去了 HTTP 缓存的任何机会。

我的第一个建议是将 CoffeeScript 与 ERB 分开。用您需要的数据填充 ERB 中的隐藏字段，然后在 CoffeeScript 中挖掘这些字段。

但是，如果您必须将 ERB 嵌入到静态文件中，请将 ERB 标签嵌入到纯 JavaScript 中，并让编译后的 CoffeeScript 使用这些标签。

【讨论】：

您能否详细说明一下为什么 CoffeeScript ERB 无法维护？谢谢！
它可能不是“不可维护的”，但在每个请求上编译 CoffeeScript 应该是不这样做的充分理由。
抱歉，@Billy，我不是有意忽略这个问题，但基于意见的话题并不是他们想在这里看到的。很高兴将对话带到 Twitter 或其他地方。
@Vidya，别担心，我根本不是想挑战你，而是真的想学点东西。 :) 由于您在索赔中排除了性能，我认为索赔还包括 javascript erb。我自己不喜欢这种风格，所以当你这么说时，我想深入了解你的意见。我无法通过个人资料访问您的 Twitter 页面，可能是那里拼写错误。当您写了一篇文章或对此进行讨论时，请随时通知我。谢谢。
@Billy，我并不是说你有任何想法，只是讨论一下。即使这是一个挑战，那也很酷。我刚刚更正了我个人资料上的链接，因此请随时发布推文。我也可以在 Vidya 网站上写博客。

【解决方案2】：

您编写的代码实际上不会加速请求，因为 Rails 仍然需要处理所有 ERB 等。您仍在返回呈现的 HTML 并将其发送到添加它的浏览器DOM。

如果你想让它“更快”，你可以简单地将@response 渲染为 json 并使用 jQuery 或前端框架在客户端上处理它。

不过，代码确实让用户感觉更好，因为它不会刷新整个页面。

【讨论】：

【解决方案3】：

我的建议是挂钩表单请求，并在成功时呈现新评论，否则重新呈现有错误的表单。一个例子：

# 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)

返回注释模板 (cmets/comment) 并附加到 cmets
如果 not_acceptable，请更新您的控制器以返回带有 JS 响应的表单。
请注意，该文件位于 app/javascripts/cmets.coffee 中

【讨论】：