Raphael.js导致“强制同步布局”瓶颈

Question

我在chrome中监控了我的网站的页面加载时间（使用时间轴），并且有数百条警告表示＆＃34;强制同步布局是一个可能的性能瓶颈＆＃34;对于所有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

<强> 问题 ：

这个问题被称为“布局抖动”并且正在发生，因为浏览器试图在每次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

Soultion ：

解决此问题的一种方法（一种非常快速和肮脏的方式）是隐藏（）您要绘制的div，然后，当您完成时， show（）它。我和拉斐尔在这方面有过一次成功和失败的结果，而且这种方式一直很奇怪。 然而 更快......

“当一个元素的显示样式设置为无时，它不需要重新绘制，即使它的内容被更改，因为它没有被显示。这可以作为一个优点。如果需要进行多项更改对元素或其内容进行制作，并且无法将这些更改组合到单个重绘中，可以将元素设置为display：none，可以进行更改，然后可以将元素设置回其正常显示。 “

结果如下：

这种方式对我有用！