我正在使用 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.03s，但浏览器仍然需要将近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 和图像优化来加快速度，如果可行，我会发布解决方案。
您有多少观看次数？如果在您实例化可能是一个缓慢的功能的 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? .
关于javascript - BackboneJS View 渲染延迟，在 iPhone 4s (iOS 8) 上，2015，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31854403/
| 欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) | Powered by Discuz! X3.4 |