javascript - BackboneJS View 渲染延迟，在 iPhone 4s (iOS 8) 上，2015 年

Question

我正在使用 BackboneJS(jQuery + Underscore)制作一个单页 Web 应用程序，并且我正在各种浏览器和各种设备上对其进行测试。最终它将成为 Phonegap 应用程序。

效果很好，但在 iPhone 4s (iOS 8) 上，我的所有路线渲染速度都非常慢(大约一秒左右)。我还没有解决 300 毫秒的点击延迟问题，但稍后我会担心这个问题。我的一条路线使问题变得更加严重，该路线具有特别大量的 View (约 30)，并且在此设备上可能需要长达5 秒的渲染时间。

这是我的路线示例:

'some_route': function(){
  if(APP.controller) APP.controller.destruct();
  APP.controller = new SomeController();
},

所有 View 都在 Controller 实例化期间实例化和渲染(并且应该单独更新 DOM)。以下是 View 渲染函数的示例，当此路由加载时，该函数会为多个 View 调用:

render: function() {
  var modelData = this.model.toJSON();
  this.$el.html(this.template(modelData));
},

有趣的是，如果我在路由中的 Controller 实例化下添加警报，它会在 UI 更改出现之前(3-4 秒前)发生。而且，所有 UI 更改都会立即出现。鉴于 JavaScript 是单线程的，这没有多大意义。除非 jQuery 以某种方式异步处理 .html() 调用，或者浏览器对可视 DOM 更新应用延迟...

我在模板末尾附加了一个时间戳(因此每个 View 在末尾都会呈现一个时间戳)，以查看每个 View 的执行时间。第一个和最后一个之间的差异仅 0.03 秒，但浏览器仍然需要近5 秒才能将更改实际呈现到屏幕上(在此期间，它没有反应)。

我研究了渲染函数，发现执行以下操作大大提高了性能，但并没有解决我的问题:

render: function() {
  var modelData = this.model.toJSON();
  this.template(modelData); //call anyway to gauge performance impact
  this.$el.html('');        //call anyway, but with nothing
},

这可能是内存问题吗？与主干导航(URL 更改)有关吗？还有其他人遇到过这个吗？我四处寻找，但我真的没有找到有同样问题的人。

更新

简单地为 View 元素添加 display:none 实际上也可以大大加快速度。显然并不能解决问题，但它开始看起来更像是内存问题而不是其他问题。我将尝试通过 CSS 和图像优化来加速这一过程，如果有效，我将发布一个解决方案。

Answer 1

您有多少浏览量？如果在实例化 Controller 时呈现所有 View ，这可能是一个缓慢的函数，请尝试添加类似的内容来检查所需的时间

    var timeStart = performance.now();
    APP.controller = new SomeController();
    var timeEnd = performance.now();
    console.log('time ' + (timeEnd - timeStart) + ' ms');

JavaScript确实是单线程的，但是你必须记住浏览器是如何执行所有任务的，请看这个问题的第二个答案Why is setTimeout(fn, 0) sometimes useful? .