Question

我有一个大约需要6秒钟才能加载的脚本。我想知道我能做些什么来加快负载。该脚本首先加载SVGdata然后加载函数调用以加载图像。请查看http://jsfiddle.net/jacobsultd/9vam9n20/并提供任何指示。辅助，我可以使用哪个站点来跟踪分析Web应用程序加载时间？感谢。

脚本很长，不适合这里。我构建了3个容器组，将图像和控制面板分别放在每个容器组中。这些按钮都是通过for循环创建的。

    var gpnl = new Kinetic.Group({x: 100,y: 400,draggable: true,width: 900,height: 50});



var cp1 = new Kinetic.Rect({x: 0,y: 0,stroke: 'black',width: 800,height: 500});



var complexText = new Kinetic.Text({x: s.getWidth() / 4,y: 10,text: '9Positions Glove Design Tool',fontSize: 30,fontFamily: font,fill: fontcolor,width: 500,padding: 10,align: 'center'});
gpnl.add(cp1);



var gt = new Kinetic.Text({x: 25,y: 10,text: 'Glove Type',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(gt);

var gs = new Kinetic.Text({x: 300 - 40,y: 10,text: 'Glove Series',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(gs);

var gthw = new Kinetic.Text({x: 575,y: 10,text: 'Throws',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});gthw.nextX = 575;gthw.nextY = 38;
gpnl.add(gthw);

var gstl = new Kinetic.Text({x: 25,y: 75,text: 'Glove Back Style',fontSize: 16,fontFamily: font,fill: fontcolor,padding: 2,align: 'left'});
gpnl.add(gstl);

var ghnd = new Kinetic.Text({x: 300 - 40,y: 75,text: 'Hand Size',fontSize: 16,fontFamily: font,fill: fontcolor,padding: 2,align: 'left'});
gpnl.add(ghnd);


var gplm = new Kinetic.Text({x: 575,y: 75,text: 'Palm Protection',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(gplm);

var gstf = new Kinetic.Text({x: 25,y: 165,text: 'Glove Stiffness',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(gstf);

var gsze = new Kinetic.Text({x: 300 - 40,y: 165,text: 'Glove Size',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(gsze);


var gfpro = new Kinetic.Text({x: 575,y: 165,text: 'Finger Protection',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(gfpro);

var gweb = new Kinetic.Text({x: 25,y: 275,text: 'Click Web:',fontSize: 16,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(gweb);

var dlmr = new Kinetic.Text({x: 25,y: 300,text: '(Web will not be reflected in design.)',fontSize: 12,fontFamily: font,fill: fontcolor,width: 300,padding: 2,align: 'left'});
gpnl.add(dlmr);


// Glove Parts SVG Graphics /////////////////////////////////////////////
var gp1 = new Kinetic.Group({x: 200,y: 50,draggable: true,width: 524,height: 350});   var lin = new Kinetic.Path({ id: 'lin', x: 57, y: 205, data: 'M 0,0 C 0,0 -2.667,10 -4.333,16.333 -6,22.667 -7.667,28 -3.667,33 c 4,5 8.334,8 18,10.333 9.667,2.334 43,7 51.334,7.667 8.333,0.667 26.333,2 33.666,1.667 7.334,-0.334 20,-3.334 25.334,-7 5.333,-3.667 11,-10.334 12,-15.667 1,-5.333 3,-13.667 0,-17.667 -3,-4 -18.334,-12 -27,-13.666 C 101,-3 76.333,-6 63,-5 49.667,-4 37.333,-4.333 25,-3.667 12.667,-3 0,0 0,0 Z', fill: 'black' });

-Andre

Answer 1

我建议Timeline中的Chrome Developer tools标签，以确定花费的时间（脚本，加载等）在哪些区域。

我可以看到你有复杂的SVG路径。我想知道如果你将它们称为＆＃34;正常＆＃34;它是否会加速它。 svgs。

您还可以在Audit工具中制作Chrome Developer。我和你的小提琴做了一些测试。

看起来大部分时间花在动态draw函数调用中。

在实例化所有对象后，是否可以执行此功能一次？

此处请参阅此链接，讨论批量抽奖：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-batch-draw/

刚刚发现：

KineticJS是一个快速，强大的HTML5 Canvas库，已不再存在保持

优化加载SVG和图像的Kineticjs脚本

1 个答案: