Different Styles of Object Diffs in JS
Date tested:
7 years ago
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Test name
Executions per second
DeepDiff (beforeText, afterText)
16368.1 Ops/sec
MongoDBDiff.diff(beforeText, afterText)
13589.4 Ops/sec
MongoDBDiff.diff *.toJS()
6854.2 Ops/sec
ImmutableDiff two mostly shared objects
45969.5 Ops/sec
Benchmark definition (click to collapse):
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js'></script> <script src='https://s3.amazonaws.com/www.deanius.com/javascripts/mongodb-diff.umd.js'></script> <script src='https://s3.amazonaws.com/www.deanius.com/javascripts/immutablediff.umd.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/deep-diff/0.3.3/deep-diff.min.js'></script>
Script Preparation code:
var beforeText = {"_id":"DZqGmqL6T9TBN6KXp","title":"Foofoo","createdAt":1475201145611,"createdBy":"Pe92xcgNnbi3yAebn","updatedBy":"Pe92xcgNnbi3yAebn","updatedAt":1475201156823,"artifactType":"creation","type":"canvas","status":"active","pages":[{"title":"Page 1","_id":"NMGnvMihjvB4XxZa7","createdAt":1475201145612,"items":{"_order":["dsbDxZQr7zMZ9JKYF"],"dsbDxZQr7zMZ9JKYF":{"_id":"dsbDxZQr7zMZ9JKYF","version":"1.0.0","style":{"text_align":"center","padding_left":12,"padding_right":12,"padding_top":28,"padding_bottom":28,"opacity":1},"settings":{"subtitle":false},"type":"headline","text":{"en":{"text":"<p>The word</p>"}}}}}],"settings":{"viewType":"free-form"}}; var afterText = {"_id":"DZqGmqL6T9TBN6KXp","title":"Foofoo","createdAt":1475201145611,"createdBy":"Pe92xcgNnbi3yAebn","updatedBy":"Pe92xcgNnbi3yAebn","updatedAt":1475201226516,"artifactType":"creation","type":"canvas","status":"active","pages":[{"title":"Page 1","_id":"NMGnvMihjvB4XxZa7","createdAt":1475201145612,"items":{"_order":["dsbDxZQr7zMZ9JKYF","J7y7NPf2WWema4sjy"],"dsbDxZQr7zMZ9JKYF":{"_id":"dsbDxZQr7zMZ9JKYF","version":"1.0.0","style":{"text_align":"center","padding_left":12,"padding_right":12,"padding_top":28,"padding_bottom":28,"opacity":1},"settings":{"subtitle":false},"type":"headline","text":{"en":{"text":"<p>The word</p>"}}},"J7y7NPf2WWema4sjy":{"_id":"J7y7NPf2WWema4sjy","version":"1.0.0","style":{"padding_left":12,"padding_right":12,"padding_top":18,"padding_bottom":18},"settings":{"title":false,"description":false,"caption":false},"type":"text","text":{"en":{"text":"<p>My first text</p>"}}}}}],"settings":{"viewType":"free-form"}}; var newEl = {"_id":"J7y7NPf2WWema4sjy","version":"1.0.0","style":{"padding_left":12,"padding_right":12,"padding_top":18,"padding_bottom":18},"settings":{"title":false,"description":false,"caption":false},"type":"text","text":{"en":{"text":"<p>My first text</p>"}}} var beforeTextI = Immutable.fromJS(beforeText); var afterTextI = beforeTextI.setIn(['items', 'J7y7NPf2WWema4sjy'], newEl)
Tests:
DeepDiff (beforeText, afterText)
DeepDiff(beforeText, afterText)
MongoDBDiff.diff(beforeText, afterText)
MongoDBDiff.diff(beforeText, afterText)
MongoDBDiff.diff *.toJS()
MongoDBDiff.diff(beforeTextI.toJS(), afterTextI.toJS())
ImmutableDiff two mostly shared objects
idiff(beforeTextI, afterTextI)
Open this result on MeasureThat.net