Question

我目前正在开发一个Web应用程序，该应用程序使用Backbone基于从服务器下载的模型数据来呈现模板。下面是我的样板代码（在CoffeeScript中），用于基于模型的模板渲染。我的问题是，当服务器响应时间很慢时，渲染会在等待AJAX调用（fetch）完成时挂起。

我希望加载大部分模板，但需要从model.fetch（）调用中获取数据的部分除外。我的模板在很大程度上依赖于模型数据，因此我想知道是否有一种干净或标准的方法来解决模板代码的模型依赖和独立部分，以最大限度地减少不稳定的用户体验？我有一个想法是首先加载模板的模型独立部分，然后是模型依赖部分，但这似乎效率低下。

model = new Model  # Create model
model.fetch().done ->  # Load model data from server
  view = _.template ViewTemplate,  # Fill template w/ model data
    model: model
  $('#view').html view  # Update DOM w/ newly rendered template

Answer 1

由于您的视图严重依赖于来自服务器的模型数据，因此实际上没有办法加快渲染速度。虽然，您可以提高渲染视图的感知效果。

提高感知性能的方法是通过2遍渲染。首先渲染视图您拥有的缓存数据并显示一个小微调器，以便用户知道您正在获取更多内容。您的ajax调用完成的那一刻，只需使用更新的数据重新渲染整个视图。这在启动时似乎效率低下，但它可以工作并覆盖90％的用例而不会造成任何性能损失。如果您发现这是性能问题，请稍后对其进行优化。

在Backbone中渲染模型相关模板时隔离AJAX依赖项

1 个答案: