javascript - 从 Javascript 类生成多个 HTML 模板时对速度/性能的影响

Question

我正在使用 Ruby on Rails 4 构建一个旅游网站，该网站在 Google map 和其他 API 中大量使用 Javascript(或 Coffeescript)。这涉及到对服务器进行一次调用，使用结果创建一个 javascript 对象，然后立即呈现一些 HTML。稍后，我需要使用相同的数据呈现不同的 HTML。

典型的用例可能是:

1. 用户搜索两个不同目的地之间的交通
2. Coffeescript 向 Rails 服务器发送 ajax post 请求
3. Rails 服务器返回带有结果的 JSON 对象。我们称之为 searchResults，它是一个路由数组(例如 searchResults['routes'][0]['path'] 或 searchResults['routes' ][0]['价格'])
4. 应用程序立即将此搜索结果呈现为 HTML(格式 1)
5. 随后，根据用户操作，应用程序必须在搜索结果中呈现有关其中一条路线的数据。此操作需要呈现与步骤 4(格式 2)不同的 HTML。

目前，在步骤 3 中，我正在 Coffeescript 中创建 SearchResults 类的实例:

#holds all of the information for a single the transporation search call
class TransportationSearch
  constructor: (oLat, oLng, dLat, dLng, oName, dName) ->
    @origin = oName
    @destination = dName
    response = @search(oLat, oLng, dLat, dLng).responseJSON
    @longestRoute = response.longestRoute #in minutes
    @routes = response.routes

我创建 Coffeescript 类的原因是因为我试图避免再次访问服务器。这很慢，而且我需要考虑 API 限制。我的问题是关于步骤 4 和 5。我遇到了两种不同的方法来完成我需要的事情，并想知道每种方法对速度/性能的影响是什么。

方法一:克隆隐藏Div

我在 TransportationSearch 中有一些方法可以克隆隐藏的 div、设置属性并将其插入到 DOM 中:

renderFormatOne: ->
    for route in routes
      content = $('.div-one-template').clone().removeClass('hidden')

      #...sets content for template. For example:
      content.find('.price').html(route['price'])

      #Insert template into Dom
      $('#results-one').append(content)

renderFormatTwo: ->
    ...

方法2:使用AJAX/Rails渲染HTML

另一种方法是将 HTML 模板放置在 Rails 部分中，然后使用 AJAX 将数据发送到 Controller 并呈现结果。

CoffeeScript :

  #sets the content of the side-menu with the HTML from transportation call
  showTransportation: (searchResults) =>
    #first, get HTML
    $.ajax '/segments/side_menu_transportation',
      type: 'post'
      data:
        searchResults: JSON.stringify(searchResults)
      success: (data) ->
        $('#add-transport-box').html(data)
        return true
      error: ->
        alert 'passDestinationToTransportation Unsuccessful'
        return

    @show()

Controller :

def side_menu_transportation
  @searchResults = JSON.parse(params[:searchResults])
  render partial: 'trips/transport_search'
end

方法 1 对我来说似乎有点草率，因为它在 Coffeescript 中放置了很多 HTML 结构。然而，速度是我的首要任务，并且可能会决定我的决定。我更喜欢使用方法 2，但我想知道即使我没有访问 Rails 服务器，AJAX POST 请求是否很慢。

请让我知道这些方法的速度/性能影响，或者如果我遗漏了一些完全明显的东西:D。

提前致谢!

Answer 1

我认为您不应该将数据发送回服务器来生成一些 HTML - 如果您这样做，那不是会在后端生成前端吗？对我来说听起来有点奇怪。从用户体验的 Angular 来看，这是一个禁忌，因为用户界面的响应能力较低。

Javascript 的速度不应该是您关心的问题。例如，Angular 始终渲染 HTML，除非开发人员真的很马虎，否则对浏览器的影响不会那么大。

Javascript 中的 HTML。嗯...再说一次，这是前端，你无法避免太多。但对您来说可能有用的是使用插值模板，而不是复制、遍历和修改 DOM 节点。就像这样:<some><markup> #{route.price} </markup><some> 。采用这种方式(可能)会减少 DOM 操作的数量(尤其是昂贵的遍历和查找)，并且还会定义模板的主体，因此您会看到它们完整，因为它们位于一个位置。 顺便说一句，看起来我在这一段中描述了 Angular 指令是什么 - 你尝试调查它吗？

如果你确实需要渲染 HTML 服务器端(我建议你不要，但也许我遗漏了一些东西)，请不要让用户等待 - 如何同时渲染两个/几个模板第一次通话？

最后一个提示:

class TransportationSearch constructor: (oLat, oLng, dLat, dLng, oName, dName) -> @origin = oName @destination = dName

等于

class TransportationSearch constructor: (oLat, oLng, dLat, dLng, @origin, @destination) ->