Skip to content

Commit d69f823

Browse files
committed
Added Demo4 comparing perf of JSON modules vs inline JS object
1 parent 240cd07 commit d69f823

File tree

6 files changed

+224212
-1
lines changed

6 files changed

+224212
-1
lines changed

License.txt

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
The JSON data in demo4/citylots_reduced.json and demo4/noModule.html is sourced
3+
from https://github.com/zemirco/sf-city-lots-json. The following License applies:
4+
5+
Copyright (C) 2012 [Mirco Zeiss](mailto: mirco.zeiss@gmail.com)
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
8+
9+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
10+
11+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,4 +129,28 @@ Using CSS modules, styles.css is fetched as part of processing the module graph,
129129
#### With CSS module:
130130
![With CSSmodule](demo3/module.PNG)
131131

132-
If `styles.css` was slow to arrive over the network, or was large enough to take a nontrivial amount of time to parse, front-loading the work could result in a user-percievable difference in how early the styles are applied to the page.
132+
If `styles.css` was slow to arrive over the network, or was large enough to take a nontrivial amount of time to parse, front-loading the work could result in a user-percievable difference in how early the styles are applied to the page.
133+
134+
### Demo 4: [JSON modules are faster than inline JavaScript objects](https://dandclark.github.io/json-css-module-notes/demo4/index.html)
135+
[https://dandclark.github.io/json-css-module-notes/demo4/index.html](https://dandclark.github.io/json-css-module-notes/demo4/index.html)
136+
137+
In V8, it's faster to load a JSON object by feeding a string to JSON.parse() than by creating the equivalent JavaScript object directly. That is, this:
138+
```JavaScript
139+
const json = JSON.parse('{ "color": "blue", "shape": "circle", ...}');
140+
```
141+
142+
Will tend to be faster than this:
143+
```JavaScript
144+
const json = { color: "blue", shape: "circle", ...};
145+
```
146+
147+
[This V8 dev blog post](https://v8.dev/blog/cost-of-javascript-2019#json) goes into more detail, including V8 performance data. Put simply, JSON.parse is cheaper because the JSON format is significantly simpler than the JavaScript language, so parsing it can be done much more quickly.
148+
149+
JSON modules share the performance advantage of JSON.parse, because they basically do a JSON.parse under the hood; at no point does the content of a JSON module need to be parsed as JavaScript.
150+
151+
I've placed a simple demo of this difference [here](https://dandclark.github.io/json-css-module-notes/demo4/index.html). Both versions load the same 35 MB of JSON content. One loads it as a JSON module and the other inlines the content as a JavaScript object. Over 10 runs, all from a cold start, I observe the JSON module version loading in an average of 581 ms while the JS object version takes 1769 ms.
152+
153+
Another alternative is to inline the content as a JS string fed directly to JSON.parse, rather than going through a JSON module. However, this approach can easily suffer from the same pitfall outlined in [Demo 2](https://dandclark.github.io/json-css-module-notes/demo2/index.html)
154+
where the string never garbage collectible, resulting in unnecessary memory bloat relative to the JSON modules approach.
155+
156+
Sample JSON date obtained (and modified to reduce size) from [here](https://github.com/zemirco/sf-city-lots-json); see LICENSE.txt file.

0 commit comments

Comments
 (0)