Adding bottleneck vanilla test sites #803
Conversation
|
|
krisxw
force-pushed
the
master
branch
3 times, most recently
from
d50fcb2 to
ec05c80
Compare
| } | ||
| return (<div>Data requests complete!</div>); | ||
| } | ||
| } |
There was a problem hiding this comment.
Technically I think we'd want the data requests to be kicked off in handleRoute. Practically, I'm not sure if that will make a difference.
There was a problem hiding this comment.
Yeah, these should get kicked off in handleRoute, and then we should make root elements wait for them.
Ideally we could style the root elements so they all fit above the fold and affect the WPT speed index.
There was a problem hiding this comment.
I did not incorporate this feedback into my most recent commit. I'll address this in the next commit.
|
|
||
| const colorThings = []; | ||
| for (var i = 0; i < 99999; i++) { | ||
| let selection = Math.floor(Math.random() * 7); |
There was a problem hiding this comment.
let selection = Math.floor(Math.random() * ColorWheel.length)?
There was a problem hiding this comment.
I can comment this if it's confusing to read. Basically, I wanted a site that served something a bit more interesting than a bunch of monochrome elements, so it serves a random assortment of various elements from the colors of the rainbow. A bit unnecessary maybe, but it was very little effort.
There was a problem hiding this comment.
I think @roblg might be suggesting a replacement for the hard-coded 7 here.
I'll add that this can be a const. 👹
| return (<div> | ||
| {colorThings} | ||
| </div>); | ||
| } |
There was a problem hiding this comment.
Do we want to return a single element here with 100k children? Or 100k elements?
There was a problem hiding this comment.
I didn't appreciate the difference. I'm wanting 100k elements, so I'll adjust this accordingly.
| JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware, | ||
| JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware, | ||
| JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware, | ||
| JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware, JsonResponseMiddleware]; |
There was a problem hiding this comment.
_.range(80).map(() => JsonResponseMiddleware);;)
| export default class ElementsPage { | ||
|
|
||
| getElements() { | ||
|
|
||
| const colorThings = []; | ||
| for (var i = 0; i < 99999; i++) { | ||
| let selection = Math.floor(Math.random() * 7); | ||
| for (var i = 0; i < 10000; i++) { |
There was a problem hiding this comment.
After changing this behavior such that I was correctly returning a large number of elements (not one element with a large number of children), I found myself running out of heap space in javascript, so this number came down intentionally.
… and number of data requests. This includes visual functionality as elements are rendered and requests are fulfilled.
|
Looks good, thanks! |
Adding some vanilla test sites in the react-server-test-pages package. These are very straightforward test sites, where the elements site loads 99,999 random elements from a set of predetermined elements, and the data requests site makes 999,999 data requests. Finally, the middleware site has a chain of 100 (identical) middleware that performs a bunch of no-ops on each. That site is currently blank, but there is work being done when it is accessed.
Some performance metrics are produced by default if one just looks in the browser console. Ideally we will integrate these with automated testing suites in the near future. I'm planning on sending out another PR for some other simple test sites in the near future, but wanted to get the ball rolling on these changes sooner rather than later.