当使用具有潜在大型JS库、View模板、验证、ajax、动画等的非常动态的UI(想想单页应用程序)时......有哪些策略可以帮助最大程度地减少或减少浏览器花费的时间回流焊？例如，我们知道有很多方法可以完成DIV大小的更改，但是是否有应该避免的技术(从回流的Angular来看)以及浏览器之间的结果有何不同？这是一个具体的例子:给出了一个简单的示例，其中包含3种不同的方法来在调整窗口大小时控制DIV的大小，应该使用哪种方法来最大程度地减少回流？http://jsfiddle.net/xDaevax/v7ex7m6v///Method1:PureJavascriptfunctionresi
有人可以向我证明给出的建议here(在下面复制)关于在更改dom元素之前删除它们然后重新插入它们的速度更快。通过证明，我希望看到一些数字。他们研究这个很好，但我认为这篇文章非常薄弱，没有包括关于“问题”到底是什么以及解决方案如何在速度方面修复的细节(如文章标题加速JavaScript)文章....流外DOM操作这个模式让我们可以创建多个元素并将它们插入到DOM中触发单次回流。它使用一种称为DocumentFragment的东西。我们在DOM之外创建一个DocumentFragment(因此它是流外的)。然后我们创建并向其添加多个元素。最后，我们将DocumentFragment中的所有
我想知道使用Javascript动画滚动条是否会触发浏览器重排。不同浏览器实现之间有什么不同吗？window.pageXOffset&window.pageYOffsetdocument.documentElement.scrollLeft&document.documentElement.scrollTopdocument.body.scrollLeft&document.body.scrollTop谢谢! 最佳答案 我深入挖掘，发现这个链接说它确实会导致回流:http://www.phpied.com/rendering-rep
如果我有一个具有绝对位置的元素，并且我更改了它的左侧和顶部位置，会回流到它的父子元素吗？如果它自己的child不受影响怎么办，因为他们也被左轴和上轴绝对定位？如果我更改元素的宽度/高度但对父元素及其子元素都不重要？ 最佳答案 具有绝对位置的对象不会影响页面的布局。页面的布局不考虑绝对定位的对象。移动绝对定位的对象不会引起其他对象的任何回流。移动具有绝对定位的对象将导致其子对象随之移动。它不会回流它们，它们只会与它们的父容器一起移动。 关于javascript-如果元素的位置是绝对的，浏览
我试图在缓慢的UI中修复一些性能缓慢的javascript，我已经将主要原因缩小到jQuery.width()用于查看width:100%的实际像素大小的调用响应式布局中的元素，在一个需要经常响应用户操作的过程中。我添加了基于时间戳的测量，它们表明仅它就占了大约33%的延迟时间，这使得UI感觉清晰和UI感觉迟钝之间存在差异。删除这一行，用户界面感觉很快-但是，它把东西放在了错误的地方......好像wellestablishedthat.width()isrelativelyslowinjQuery>1.8主要有两个原因:Itforcesreflowwhilecalculatingth
我有几百个像这样的“行”元素:我需要在它们已经呈现在页面上之后获取它们的clientHeight。我知道“clientHeight”属性强制回流，这会影响我的性能，因为它们太多了。但是-它们已经被渲染并且我知道它们的大小在它们被渲染的时间和我查询它们的高度的时间之间没有变化。有没有办法告诉浏览器在查询高度时不要重排？此外-webkit检查员说:Layouttreesize5901LayoutscopeWholedocument而且div位于绝对定位的祖先中-难道不应该只回流绝对定位的元素吗？编辑:所以提供的答案是正确的。我实际上弄脏了布局，因为我有这个循环:rows.each(func
当我们使用JavaScript对单个元素应用大量样式更改时，phpied&WritingEfficientJavaScript(幻灯片87)建议:insteadofapplyingstylesonebyoneusingstyle.stylename,applyeverythinginonegousingcssTextorchangingclassnameasit'llreducereflows/repaints当只有一个单一样式改变时哪个更好？document.getElementById('myid').style.cssText+=";color:#999;";或document.
我需要能够对基于webkit的浏览器的特定构建进行基准测试，并测量执行某些操作(如DOM操作、内存限制等)所需的时间长度。下面我有一个测试记录了同时加载10个相当重的PNG图形所花费的时间。在代码中，我需要能够计算完成加载所需的时间。我试过设置动态图像对象上的onLoad函数以产生以毫秒为单位的时间。然而，如下图所示，它给出的读数不准确，因为它给出的读数很小，因为它只记录负载的数据传输部分，然后当图片可见-以蓝色循环，这是浏览器重排周期。我可以使用webkit中的某些事件来记录浏览器何时完成回流，以便我可以对其进行基准测试？我必须能够以毫秒为单位记录时间在代码中，因为我正在测试的web
我在页面中添加了视差效果。现在我遇到了性能和FPS方面的问题以及许多问题:-)我使用transform3d和requestAnimationFrame来实现它(像这样推荐http://www.html5rocks.com/en/tutorials/speed/animations/)。我的代码是这样的:window.addEventListener('scroll',function(){latestKnownScrollY=window.scrollY;});functionupdateParallax(){vary=latestKnownScrollY*0.4;element.st
我在CPU和WebKit较弱的嵌入式硬件上设计一个JavaScript/HTML驱动的用户界面。性能并不理想，我想分析应用程序，特别是对回流和重绘事件进行计时，以获得有关实际性能的硬数据，而不是主观和不断变化的意见。在前后使用常规“getTime()”计时不起作用，因为WebKit将回流和重绘推迟到事件处理程序之后。我已尝试在SpeedTracer下分析应用程序，但计算成本太低，以至于回流事件甚至不会出现在PC硬件上。我想一些更专注于回流/重绘的工具可能仍然有用。关于如何为此获取硬数据的任何提示？ 最佳答案 这些链接可能会有帮助。J
