Benchmark: Lottie Clone 15KB

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.1.0/immutable.min.js"></script>

Script Preparation code:

// https://storage.googleapis.com/lumen5-prod-lottie/Tracer/Text%20Stat%201/tracer_textstat1_landscape.json
var lottie = {"v":"5.7.4","fr":25,"ip":0,"op":500,"w":1920,"h":1080,"nm":"Text Stat 01","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":3,"ty":3,"nm":"NULL CONTROL ","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[945.429,461.807,0],"ix":2,"l":2},"a":{"a":0,"k":[50,50,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":530,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Rectangle 132","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":0,"s":[338.152]},{"t":30,"s":[343.152]}],"ix":10},"p":{"a":0,"k":[50.001,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1285.746,1285.746],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":130.083,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 132","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":530,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Rectangle 131","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":0.122,"s":[0]},{"t":30.1220703125,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":0.122,"s":[335.649]},{"t":30.1220703125,"s":[340.649]}],"ix":10},"p":{"a":0,"k":[49.999,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1318.14,1318.14],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":133.36,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.313,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 131","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0.1220703125,"op":530.1220703125,"st":0.1220703125,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Rectangle 130","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":0.486,"s":[0]},{"t":30.486328125,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":0.486,"s":[333.27]},{"t":30.486328125,"s":[338.27]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1352.926,1352.926],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":136.88,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.625,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 130","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0.486328125,"op":530.486328125,"st":0.486328125,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Rectangle 129","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":1.084,"s":[0]},{"t":31.083984375,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":1.084,"s":[331.014]},{"t":31.083984375,"s":[336.014]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1389.925,1389.925],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":140.623,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.938,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 129","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1.083984375,"op":531.083984375,"st":1.083984375,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Rectangle 128","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":1.905,"s":[0]},{"t":31.9052734375,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":1.905,"s":[328.879]},{"t":31.9052734375,"s":[333.879]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1428.966,1428.966],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":144.573,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.251,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 128","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1.9052734375,"op":531.9052734375,"st":1.9052734375,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Rectangle 127","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":2.931,"s":[0]},{"t":32.9306640625,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":2.931,"s":[326.859]},{"t":32.9306640625,"s":[331.859]}],"ix":10},"p":{"a":0,"k":[50.001,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1469.885,1469.885],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":148.713,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.563,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 127","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2.9306640625,"op":532.9306640625,"st":2.9306640625,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Rectangle 126","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":4.142,"s":[0]},{"t":34.1416015625,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":4.142,"s":[324.951]},{"t":34.1416015625,"s":[329.951]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1512.53,1512.53],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":153.028,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.876,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 126","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4.1416015625,"op":534.1416015625,"st":4.1416015625,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Rectangle 125","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":5.513,"s":[0]},{"t":35.5126953125,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":5.513,"s":[323.15]},{"t":35.5126953125,"s":[328.15]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1556.759,1556.759],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":157.502,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4.189,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 125","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":5.5126953125,"op":535.5126953125,"st":5.5126953125,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Rectangle 124","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":7.015,"s":[0]},{"t":37.0146484375,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":7.015,"s":[321.449]},{"t":37.0146484375,"s":[326.449]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1602.441,1602.441],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":162.124,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4.501,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 124","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":7.0146484375,"op":537.0146484375,"st":7.0146484375,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Rectangle 123","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":8.619,"s":[0]},{"t":38.619140625,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":8.619,"s":[319.845]},{"t":38.619140625,"s":[324.845]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1649.456,1649.456],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":166.881,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4.814,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 123","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":8.619140625,"op":538.619140625,"st":8.619140625,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Rectangle 122","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":10.292,"s":[0]},{"t":40.2919921875,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":10.292,"s":[318.33]},{"t":40.2919921875,"s":[323.33]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1697.692,1697.692],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":171.761,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5.127,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 122","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":10.2919921875,"op":540.2919921875,"st":10.2919921875,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Rectangle 121","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":12,"s":[0]},{"t":42,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.38],"y":[0]},"t":12,"s":[316.9]},{"t":42,"s":[321.9]}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1747.049,1747.049],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":176.755,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.058823529412,0.345098039216,0.635294117647,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5.439,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 121","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":12,"op":542,"st":12,"bm":0}],"markers":[]};

function recursiveDeepCopy(o) {
    var newO,
        i;

    if (typeof o !== 'object') {
        return o;
    }
    if (!o) {
        return o;
    }

    if (Object.prototype.toString.apply(o) === '[object Array]') {
        newO = [];
        for (i = 0; i < o.length; i += 1) {
            newO[i] = recursiveDeepCopy(o[i]);
        }
        return newO;
    }

    newO = {};
    for (i in o) {
        if (o.hasOwnProperty(i)) {
            newO[i] = recursiveDeepCopy(o[i]);
        }
    }
    return newO;
}

var copy = null;

Tests:

JSON Clone
copy = JSON.parse(JSON.stringify(lottie));
Structured Clone
copy = structuredClone(lottie);
recursiveDeepCopy
copy = recursiveDeepCopy(lottie);
Lodash cloneDeep
copy = _.cloneDeep(lottie);
Immutable.js
copy = Immutable.fromJS(lottie).toJS();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON Clone
Structured Clone
recursiveDeepCopy
Lodash cloneDeep
Immutable.js

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

It appears that you are looking for the fastest method to clone or copy an object, specifically `lottie` ( likely a JavaScript object), across different implementations and browsers.

Based on the provided benchmark results, here's a summary of the performance comparison:

1. **JSON Clone**: 6977.65869140625 executions per second
2. **Structured Clone**: 6357.74658203125 executions per second
3. **recursiveDeepCopy**: 5360.79638671875 executions per second
4. **Lodash cloneDeep**: 3605.41552734375 executions per second
5. **Immutable.js**: 1824.264892578125 executions per second

From these results, it's clear that the fastest method to clone `lottie` is the **JSON Clone**, with a significantly higher execution rate than the other methods.

Please note that the performance differences might be influenced by various factors, such as:

* The complexity and size of the object being cloned
* The specific requirements of your project (e.g., compatibility, performance, etc.)
* Any additional optimizations or customizations applied to the cloning process

If you're interested in exploring further optimizations or alternatives, I can help with that!

Related benchmarks:

Lottie Clone 15KB (version: 1)

Comparing performance of: JSON Clone vs Structured Clone vs recursiveDeepCopy vs Lodash cloneDeep vs Immutable.js

Created: 3 years ago by: Registered User

Jump to the latest result

JSON Clone

Structured Clone

recursiveDeepCopy

Lodash cloneDeep

Immutable.js

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):