标签: reflow

我对reflow + repaint之间的区别有点不清楚(如果有什么不同的话)

似乎reflow可能会改变各种DOM元素的位置,其中重绘只是渲染一个新对象.例如,在移除元素时会发生重排,并且在更改其颜色时会发生重新绘制.

这是真的？

我正在阅读两个css属性之间的区别display:none,visibility:hidden并遇到了DOM reflow term.

声明是

display: none导致DOM重排哪里visibility: hidden没有.

所以我的问题是:

什么是DOM回流及其工作原理？

什么类型的活动会触发带有DOM的网页重排？

似乎有不同的观点.根据http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/,它发生了

• 添加或删除DOM节点时.
• 动态应用样式时(例如element.style.width ="10px").
• 当您检索必须计算的度量时,例如访问offsetWidth,clientHeight或任何计算的CSS值(通过DOM兼容浏览器中的getComputedStyle()或IE中的currentStyle).

但是,根据http://dev.opera.com/articles/view/efficient-javascript/?page=3,只有当已经排队的重排操作时,测量才会触发重排.

有没有人有更多的想法？

我正在清理别人的代码并使用vim.我想重新发表评论,以便他们的格式一致.

例如:

    # one two three four five six seven
    # eight nine
    # ten eleven twelve thirteen fourteen
    # fifteen sixteen seventeen 
    # eighteen
    # nineteen

会成为:

    # one two three four five six seven eight nine ten eleven 
    # twelve thirteen fourteen fifteen sixteen seventeen
    # eighteen nineteen

因此,一个可以轻松取消注释代码的工作流,重新生成段落,然后在保留缩进的情况下重新注释代码.如果有一个现有的插件可以做到这一点,那就太好了.

对于反应时间研究(如果您感兴趣,请参阅此问题)我们希望控制和测量图像的显示时间.我们想说明在不同用户的机器上重绘所需的时间.

编辑:最初,我只使用内联执行进行计时,并认为我不能相信它可以准确地测量图片在用户屏幕上可见的时间,因为绘画需要一些时间.

后来,我发现了事件" MozAfterPaint ".它需要在用户的计算机上运行配置更改,并且相应的WebkitAfterPaint没有成功.这意味着我无法在用户的计算机上使用它,但我将它用于我自己的测试.我粘贴了相关的代码片段和我下面的测试结果.
我还在Chrome中使用SpeedTracer手动检查了结果.

// from the loop pre-rendering images for faster display
var imgdiv = $('<div class="trial_images" id="trial_images_'+i+'" style="display:none"><img class="top" src="' + toppath + '"><br><img class="bottom" src="'+ botpath + '"></div>');
Session.imgs[i] = imgdiv.append(botimg);
$('#trial').append(Session.imgs);

// in Trial.showImages
$(window).one('MozAfterPaint', function () {
    Trial.FixationHidden = performance.now();
});
$('#trial_images_'+Trial.current).show(); // this would cause reflows, but I've since changed it to use the visibility property and absolutely positioned images, to minimise reflows
Trial.ImagesShown = …

我正在构建基于CSS3过渡的非jQuery响应式图像滑块.

结构很简单:视口和内部相对定位的UL,左浮动LI.

在这种情况下我遇到了一个问题:

1. 用户点击"上一步"箭头.
2. JS在当前显示的LI节点之前附加适当的LI.
3. 目前,UL已设置CSS转换none 0s linear以防止动画更改.在这一刻,我通过滑块宽度减去UL CSS左值(比方说:从0px到-1200px),使视图与原来相同.
4. 现在我正在将UL的过渡属性更改为all 0.2s ease-out.
5. 现在我正在改变UL的左侧属性以触发CSS3动画.(比方说:从-1200px到0px).

问题是什么？浏览器简化了更改,不会制作任何动画.

斯托扬斯特凡在他的博客中写了一篇关于回流的问题在这里,但在这种情况下,试图迫使元件上的回流不起作用.

这是一段代码(为了简化,我跳过了浏览器前缀):

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

这里有一个小问题,看看行动中的问题:http://jsfiddle.net/9WX5b/1/

我遇到了一个反应良好的ReactJS Boilerplate,并且是社区驱动的.样式部分更多地强调了样式化组件CSS,但从未停止过切换到传统的CSS样式方法.虽然这引起了我的兴趣,但是什么使得Styled-Component CSS脱颖而出,为什么需要采用它.

我对Styled组件CSS的理解:

1. 组件驱动的思想.您的CSS现在也是一个组件.- 这很酷!
2. 加载你需要的东西,当你需要时,有点懒惰的CSS
3. 主题提供者,皮肤,模块化和动态 - 这也可以通过其他库来实现
4. 组件DOM的服务器端构造及其样式.

我的问题是:

1. 浏览器的发展是为了解析CSS与Javascript解析分开,为什么我们试图偏离这个并适合所有Javascript？

2. Styled-component CSS将其javascript库发送到客户端,它实际上在运行时解析样式,并<style />在每个组件按需加载时放入内部标记.这意味着额外的负载和逻辑最终会导致浏览器的执行周期.为什么需要这个？

   (通过上面的问题,我的意思是每个组件加载相应的CSS计算和创建并通过style标签/多个样式标签插入头部- 重新发明CSS解释器)

3. <style />在head标记中连续计算的样式文本是否导致浏览器重排/重绘？

4. 我从中获得了哪些性能优势？

社区,请为我清空或纠正我,如果我错了.

一些关于重绘或DOM的好文章重新介绍了修改CSS样式时浏览器的性能代价.

• https://developers.google.com/speed/articles/reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
• https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

我有一个页面,用户可以动态添加文件上传框.添加框会改变它们所处的div的高度,但是它下面的div的某些元素保持在同一个位置,因此它们开始与新的DOM元素重叠.

这在IE8,Firefox,Chrome中正常工作.如何强制IE7使用新的DHTML重排页面？

我制定的最佳解决方案是:

window.resizeBy(1, 0); 
setTimeout(UndoResize, 0);

但它不适用于最大化窗口(它恢复窗口).

您可以使用以下方法检测任意元素上的浏览器滚动事件:

element.addEventListener('scroll', function (event) {
    // do something
});

我希望能够区分垂直滚动和水平滚动,并独立执行它们的操作.

我目前正在通过存储element.scrollTop和element.scrollLeft的值,然后在事件侦听器中比较它们来做到这一点.例如

var scrollLeft, scrollTop;
element.addEventListener('scroll', function (event) {
    if (scrollLeft !== element.scrollLeft) {
        // horizontally scrolled

        scrollLeft = element.scrollLeft;
    }

    if (scrollTop !== element.scrollTop) {
        // vertically scrolled

        scrollTop = element.scrollTop;
    }
});

这很好,但是从https://gist.github.com/paulirish/5d52fb081b3570c81e3a我读到读取scrollLeft或scrollTop值会导致重排.

有没有更好的方法来做到这一点,而不会导致滚动浏览器重排？

我需要能够对基于webkit的浏览器的特定构建进行基准测试,并且正在测量执行某些操作(如DOM操作,内存限制等)所需的时间.

我在下面有一个测试记录了同时加载10个相当重的PNG图形所需的时间长度.在代码中,我需要能够计算负载完成所需的时间.我已经尝试在动态Image对象上设置onLoad函数以产生以ms为单位的时间.然而,正如下面的上限所示,它给出了一个不准确的读数,因为它给出的读数很小,因为它只记录了负载的数据传输部分,然后有相当大的(3000 + ms)延迟时间.图像是可见的 - 以蓝色循环,这是浏览器重排循环.

我是否可以使用webkit中的某些事件来记录浏览器何时完成重排,以便我可以对此进行基准测试？我必须能够在代码中记录时间(以毫秒为单位),因为我正在测试的webkit的构建没有开发人员工具.我能够观察到Chrome中的差异,但两个版本之间的性能差异很大,我需要能够准确地量化它以进行比较.