onChanged Changes Perf

Benchmark created on


Setup

const changes1 = {
    "newValue": {
        "orgItem": "{\"order\":0,\"area\":\"top\"}",
        "connectionStatus": "{\"order\":0,\"area\":\"bottom\"}",
        "_persist": "{\"version\":1,\"rehydrated\":true}"
    },
    "oldValue": {
        "orgItem": "{\"order\":0,\"area\":\"mid\"}",
        "connectionStatus": "{\"order\":0,\"area\":\"bottom\"}",
        "_persist": "{\"version\":1,\"rehydrated\":true}"
    }
};

const changes2 = {
    "newValue": {
        "matchQuery": "\"TODO=\\\"TODO\\\"\"",
        "tagFaces": "{\"6#OTHER\":\"#6A3B9F\",\"5#BUSINESS\":\"#F5C400\",\"4#AUTOMATION\":\"#00FF33\",\"3#CODING\":\"#42A5F5\",\"2#MENTAL\":\"#008F40\",\"1#PHYSICAL\":\"#CC2200\"}",
        "itemText": "null",
        "itemTags": "[]",
        "itemClockStartTime": "null",
        "itemPreviouslyClockedMinutes": "0",
        "itemEffortMinutes": "null",
        "_persist": "{\"version\":1,\"rehydrated\":true}"
    },
    "oldValue": {
        "matchQuery": "\"TODO=\\\"TODO\\\"\"",
        "tagFaces": "{}",
        "itemText": "null",
        "itemTags": "[]",
        "itemClockStartTime": "null",
        "itemPreviouslyClockedMinutes": "0",
        "itemEffortMinutes": "null",
        "_persist": "{\"version\":1,\"rehydrated\":true}"
    }
};

const changes3 = {
    "newValue": {
        "untaggedItemBGColor": "\"#484848\"",
        "_persist": "{\"version\":1,\"rehydrated\":true}"
    }
};

const changes4 = {
    "oldValue": {
        "wsPort": "35942",
        "_persist": "{\"version\":1,\"rehydrated\":true}"
    }
};

const changes5 = {
	"oldValue": {
		"key1": "test",
		"key2": "test",
		"key3": "test",
		"key4": "test",
		"key5": "test",
		"key6": "test",
		"key7": "test",
		"key8": "test",
		"key9": "test",
		"key10": "test",
		"key11": "test",
		"key12": "test",
		"key13": "test",
		"key14": "test",
		"key15": "test",
		"key16": "test",
		"key17": "test",
		"key18": "test",
		"key19": "test",
		"key20": "test",
	},
	"newValue": {
		"key1": "test",
		"key2": "test",
		"key3": "test",
		"key4": "test",
		"key5": "test",
		"key6": "test",
		"key7": "test",
		"key8": "test",
		"key9": "test",
		"key10": "test",
		"key11": "test",
		"key12": "test",
		"key13": "test",
		"key14": "test",
		"key15": "test",
		"key16": "test",
		"key17": "test",
		"key18": "test",
		"key19": "test",
		"key20": "test",
	}
};

const changes6 = {};

const toTest = [changes1,changes2,changes3,changes4,changes5];

Test runner

Ready to run.

Testing in
TestOps/sec
JSON.stringify
toTest.forEach((change) => {
	if (JSON.stringify(change.oldValue) !== JSON.stringify(change.newValue)) {
      return true;
    }
    return false;
});
ready
Object.keys -> Filter
toTest.forEach((change) => {
	const { oldValue, newValue } = change;
	const updatedKeys = Object.keys(oldValue || {}).concat(Object.keys(newValue || {})).filter(
  (key, index, self) => self.indexOf(key) === index && oldValue?.[key] !== newValue?.[key]
);
	if (updatedKeys.length > 0) {
		return true;
	}
	return false;
});
ready
For in
toTest.forEach((change) => {
	const { oldValue, newValue } = change;
	const updatedKeys = [];
	for (const key in oldValue) {
	  if (oldValue[key] !== newValue?.[key]) {
	    updatedKeys.push(key);
	  }
	}
	for (const key in newValue) {
	  if (oldValue?.[key] !== newValue[key]) {
	    updatedKeys.push(key);
	  }
	}
	if (updatedKeys.length > 0) {
		return true;
	}
	return false;
});
ready
For in, Firefox only
const isFirefox = navigator.userAgent.includes('Firefox');
// chrome.runtime.getURL('').startsWith('moz-extension://');

const valuesChanged = (change) => {
	const { oldValue, newValue } = change;
	const updatedKeys = [];
	for (const key in oldValue) {
	  if (oldValue[key] !== newValue?.[key]) {
	    updatedKeys.push(key);
	  }
	}
	for (const key in newValue) {
	  if (oldValue?.[key] !== newValue[key]) {
	    updatedKeys.push(key);
	  }
	}
	if (updatedKeys.length > 0) {
		return true;
	}
	return false;
}

toTest.forEach((change) => {
	if (!isFirefox) return true;
	if (valuesChanged(change)) return true;
	return false;
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.