I'm parsing a large json file and I want to keep my UI thread un-blocked. My json is about 25mb.
I'm getting the JSON from a XMLHttpRequest and I'm comparing 3 methods:
- responseType: "text" + JSON.parse
- responseType: "json"
- responseType: "text" + JSON.asyncParse
I'm measuring UI thread responsiveness by measuring the time delta (performance.now) between requestAnimationFrames. Any frames >150ms get reported. This will catch UI thread blocking in native code (for example method #2).
Here are my results:
- one 350-400ms frame per XHR + JSON.parse (mostly in JSON.parse)
- one 350-400ms frame per XHR (in native code, where it does the json parsing due to responseType)
- one 1000ms frame per XHR + JSON.asyncParse (due to marshaling cost)
As you can see, json.async blocked the UI thread 3 times as much as JSON.parse. This seems to contradict your results. Can you reproduce your results measuring the delta time between RAFs?
I'm parsing a large json file and I want to keep my UI thread un-blocked. My json is about 25mb.
I'm getting the JSON from a XMLHttpRequest and I'm comparing 3 methods:
I'm measuring UI thread responsiveness by measuring the time delta (performance.now) between requestAnimationFrames. Any frames >150ms get reported. This will catch UI thread blocking in native code (for example method #2).
Here are my results:
As you can see, json.async blocked the UI thread 3 times as much as JSON.parse. This seems to contradict your results. Can you reproduce your results measuring the delta time between RAFs?