为什么这部动画在FireFox这么慢？ [英] Why is this animation so slow in FireFox?
问题描述
我使用D3.js操纵某些SVG元素。我学会（艰难地），火狐的更新版本没有真正处理D3的力量布局良好。所以，我切换到一个简单的旋转，它仍然在Firefox上运行蹩脚。在下面的code，组别1 是200数组＆LT;圈＆GT; ，我动态创建的svg元素
函数轨道（目标，第一）{ / *其他宽松这里选择：https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease * /
VAR便于=（第一次）？ 罪在'：'直线'; 目标
。过渡（）
.duration（40000）
.ease（放心）
.attrTween（改造，rotTween）
。每个（'端'，函数（）{轨道（组1，假）;}）; 功能rotTween（）{
VAR I = d3.interpolate（0，360）;
复位功能（T）{
返回旋转（+ I（T）+，+宽/ 2 +，+高度/ 2 +）;
};
}}轨道（组1，真）;
这是完美流畅的Chrome浏览器，但它沿一班班像在Firefox中乔乔列车。
根据要求，这里是如何组别1 选择：
VAR makeNode =功能（系数，X，Y）{
系数=系数|| 1;
返回{
半径：（的Math.random（）*系数）.toFixed（2），
CX：函数（）{返回X || Math.round（的Math.random（）*宽）}，
CY：功能（）{返回是|| Math.round（的Math.random（）*高）}
}
};VAR nodes1 = d3.range（300）.MAP（函数（）{返回makeNode（1.9）;}）;
VAR nodes2 = d3.range（700）.MAP（函数（）{返回makeNode（0.6）;}）;
//变种nodes2 = [];VAR SVG = d3.select（'＃sky_svg'）;
VAR组别1 = svg.append（'G'）ATTR（类，组1）。
VAR组2 = svg.append（'G'）ATTR（类，组2）;VAR addNodes =功能（组节点）{
对于（VAR I = 0; I＆LT; nodes.length;我++）{
VAR节点=节点[I]
VAR圈= group.append（'圈子'）;
圈
.attr（R，node.radius）
.attr（CX，node.cx）
.attr（CY，node.cy）
.attr（笔划宽度，8）
.attr（中风，透明）
.style（补，#FFFFFF）;
}
}addNodes（组1，nodes1）;
addNodes（组2，nodes2）;
我也一直在渲染SVG变换，IE浏览器/镀铬处理，没有问题与Firefox的问题。按照帖子：
谷歌搜索：寻找SVG这是/是在Firefox慢
您还可以搜索：Firefox的Gecko渲染引擎+ SVG和看到Firefox已经为响应SVG渲染一个贫穷的代表。
我的建议是保持对火狐pressure修复动态SVG这个可怜的性能。
I'm using D3.js to manipulate some SVG elements. I learned (the hard way) that newer versions of FireFox don't really handle D3's force layout well. So I switched to a simple rotation and it's STILL running crappy in Firefox. In the following code, group1 is an array of 200 <circle> svg elements which I create dynamically:
function orbit( target, first ) {
/* Other easing options here: https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease */
var ease = ( first ) ? 'sin-in' : 'linear';
target
.transition()
.duration(40000)
.ease( ease )
.attrTween("transform", rotTween)
.each('end', function(){ orbit( group1, false ); } );
function rotTween() {
var i = d3.interpolate(0, 360);
return function(t) {
return "rotate(" + i(t) + ","+width/2+","+height/2+")";
};
}
}
orbit( group1, true );
It's perfect smooth in Chrome but it chugs along like a Choo Choo train in Firefox.
As requested, here is how group1 is selected:
var makeNode = function(coeficient, x, y) {
coeficient = coeficient || 1;
return {
radius: (Math.random() * coeficient ).toFixed(2),
cx: function() { return x || Math.round(Math.random()*width) },
cy: function() { return y || Math.round(Math.random()*height) }
}
};
var nodes1 = d3.range(300).map( function(){ return makeNode(1.9); } );
var nodes2 = d3.range(700).map( function(){ return makeNode(.6); } );
// var nodes2 = [];
var svg = d3.select('#sky_svg');
var group1 = svg.append('g').attr("class", "group1");
var group2 = svg.append('g').attr("class", "group2");
var addNodes = function(group, nodes) {
for (var i=0; i<nodes.length; i++){
var node = nodes[i];
var circle = group.append('circle');
circle
.attr("r", node.radius )
.attr("cx", node.cx )
.attr("cy", node.cy )
.attr("stroke-width", 8 )
.attr("stroke", "transparent")
.style("fill", "#FFFFFF");
}
}
addNodes( group1, nodes1 );
addNodes( group2, nodes2 );
I also, consistently have problems with FireFox in rendering svg transformations that IE/Chrome handle with no problem. Follow the Posts:
Google Search: "Looking for SVG that was/is slow in Firefox"
You can also search on: Firefox's Gecko rendering engine+SVG, and see that Firefox has a poor rep for responsive SVG rendering.
My suggestion is to keep pressure on FireFox to fix this poor performance in dynamic SVG.
这篇关于为什么这部动画在FireFox这么慢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
