javascript - Raphael.js 导致 "Forced synchronous layout"瓶颈

Question

我在 chrome(使用时间轴)中监控我网站的页面加载时间，并收到数百条警告，指出所有 Raphael.js 调用“强制同步布局可能是性能瓶颈”:

我不知道如何解决这个问题:/

关于去哪里看有什么想法吗？

以下是我通常如何在页面上创建文本:

currentPaper.text(width,height,"text")
            .attr({opacity:.8, fill: "#333", 'font-size':10})
            .id = "someId";

//Or, to be exact:

currentPaper.text(x_pos+(width/2), 
                  y_pos-height/8, 
                  lopaLayoutArray.x[s].y1[r].y2[x])
            .attr({opacity:.8, fill: "#333", 'font-size':(10*size)})
            .id = seatName+"-textLabel";

谢谢!

Answer 1

问题:

这个问题叫做“Layout Thrashing”，它的发生是因为浏览器试图在每次 Raphael 绘图后立即刷新/重绘。

例如，这会导致布局抖动:

var a = document.getElementById('element-a');
var b = document.getElementById('element-b');

a.clientWidth = 100;
var aWidth = a.clientWidth;

b.clientWidth = 200;
var bWidth = b.clientWidth;

“在这个简单的例子中，浏览器将更新整个布局两次。这是因为在设置第一个元素的宽度后，您要求检索元素的宽度。当检索 css 属性时，浏览器知道它需要更新数据, 所以它会去更新内存中的整个 DOM 树。只有这样，它才会继续到下一行，由于同样的原因，它很快就会引起另一次更新。”

这可以简单地通过改变代码的顺序来解决，如下所示:

var a = document.getElementById('element-a');
var b = document.getElementById('element-b');

a.clientWidth = 100;
b.clientWidth = 200;

var aWidth = a.clientWidth;
var bWidth = b.clientWidth;

“现在，浏览器将在不更新树的情况下一个接一个地更新这两个属性。”

来源:

https://blog.idrsolutions.com/2014/08/beware-javascript-layout-thrashing/

http://www.codeproject.com/Articles/758790/Debugging-and-solving-the-Forced-Synchronous-Layou

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

https://dev.opera.com/articles/efficient-javascript/?page=3#reflow

灵魂:

解决这个问题的一种方法(一种非常快速和肮脏的方法)是隐藏()你正在绘制的div，然后，当你完成时，show() 它。我在拉斐尔的作品中遇到过失败的结果，而且这种方式一直很奇怪。 但是它更快...

"当一个元素的显示样式设置为none时，它不需要重新绘制，即使它的内容发生变化，因为它没有被显示。这可以作为一个优势。如果需要多次更改对元素或其内容进行更改，并且不可能将这些更改组合成单个重绘，可以将元素设置为显示:无，可以进行更改，然后可以将元素设置回其正常显示。 "

结果如下:

这种方式对我有用!