• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

[复制链接]
菜鸟教程小白 发表于 2022-12-12 15:56:21 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我正在使用 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 和图像优化来加快速度,如果可行,我会发布解决方案。



Best Answer-推荐答案


您有多少观看次数?如果在您实例化可能是一个缓慢的功能的 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/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap