javascript - BackboneJS View 渲染延迟，在 iPhone 4s (iOS 8) 上，2015
<p><p>我正在使用 BackboneJS(jQuery + Underscore)制作一个<strong>单页 Web 应用程序，并且我正在各种浏览器和各种设备上进行测试。最终它将成为 Phonegap 应用程序。</p>
<p>效果很好，但在 <strong>iPhone 4s (iOS 8)</strong> 上，我所有的路线渲染速度都很慢(大约一秒钟，大约)。我还没有解决 300 毫秒的点击延迟，但我稍后会担心。我的一条路线使问题变得更糟，该路线具有特别大量的 View(~30)，并且可能需要 <strong>5 秒才能在此设备上呈现</strong>。</p>
<p>这是我的路线示例:</p>
<pre><code>'some_route': function(){
if(APP.controller) APP.controller.destruct();
APP.controller = new SomeController();
},
</code></pre>
<p>所有 View 都在 Controller 实例化期间实例化和渲染(并且应该单独更新 DOM)。下面是一个 View 渲染函数的示例，该函数在此路由加载时为多个 View 调用:</p>
<pre><code>render: function() {
var modelData = this.model.toJSON();
this.$el.html(this.template(modelData));
},
</code></pre>
<p>有趣的是，如果我在路由中的 Controller 实例下添加警报，它会发生在 <strong></strong> UI 更改出现之前(3-4 秒前)。而且，所有 UI 更改都会立即出现。鉴于 JavaScript 是单线程的，这没有多大意义。除非 jQuery 以某种方式异步处理 .html() 调用，或者浏览器对可视 DOM 更新应用延迟...</p>
<p>我在模板的末尾附加了一个时间戳(因此每个 View 都在末尾带有一个时间戳)，以查看每个 View 的执行时间。第一个和最后一个相差<strong>只有0.03s</strong>，但浏览器仍然需要将近<strong>5秒</strong>才能真正将更改渲染到屏幕上(在此期间，它没有反应)。</p>
<p>我研究了渲染函数，发现执行以下操作<strong>大大提高了性能</strong>，但这并没有解决我的问题:</p>
<pre><code>render: function() {
var modelData = this.model.toJSON();
this.template(modelData); //call anyway to gauge performance impact
this.$el.html(''); //call anyway, but with nothing
},
</code></pre>
<p>这可能是内存问题吗？是否与主干导航(URL 更改)有关？有没有其他人遇到过这个？我四处寻找，但我真的没有找到任何有同样问题的人。</p>
<p><strong>更新</strong></p>
<p>简单地为 View 元素添加 <code>display:none</code> 实际上也大大加快了速度。显然不能解决问题，但它开始看起来更像是内存问题而不是其他任何问题。我将尝试通过 CSS 和图像优化来加快速度，如果可行，我会发布解决方案。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您有多少观看次数？如果在您实例化可能是一个缓慢的功能的 Controller 时呈现所有 View ，请尝试添加类似这样的内容来检查它所花费的时间</p>
<pre><code> var timeStart = performance.now();
APP.controller = new SomeController();
var timeEnd = performance.now();
console.log('time ' + (timeEnd - timeStart) + ' ms');
</code></pre>
<p>JavaScript 确实是单线程的，但是你必须记住浏览器是如何执行所有任务的，请看这个问题的第二个答案 <a href="https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful" rel="noreferrer noopener nofollow">Why is setTimeout(fn, 0) sometimes useful?</a> .</p></p>
<p style="font-size: 20px;">关于javascript - BackboneJSView 渲染延迟，在 iPhone 4s (iOS 8) 上，2015，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/31854403/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/31854403/
</a>
</p>
页:
[1]