![]() Our team stared at the Chrome Profiler and couldn’t make much progress figuring out what happened. Instead, we used useEffect() and useState() to subscribe to messages from the worker and render them. The React app replaced its use of Apollo’s useSubscription() hook.The worker would use postMessage() to send those log entries to the main thread.We created a web worker that would continually fetch log entries from the server.In order to take advantage of web workers in this context, you need to roll it yourself. It’s not as simple as setting webWorker: true in your Apollo configuration. Why did this PR reduce CPU so significantly? In order to answer this, you need to understand what the use of a web worker actually entailed. ![]() As you can see, there’s lots of vigorous discussion. So when we saw a 70% drop in E2E time to load all of the logs and a subsequent decrease in CPU utilization, we were very surprised! □□ Web workers? Not so fast… In fact, you’d expect a slight increase in overall CPU utilization, since now we have to transfer large amounts of data between the worker and the main thread. With a move like this, you wouldn’t expect any change to the CPU utilization, since we’re simply moving the computation from one thread to another. Then we would only process the small subset of what needed to be rendered on the main thread, leading to a smooth user experience. The idea being that we could prioritize and filter this large stream of messages. So we did a lift-and-shift of the code to a web worker. We noticed that there was a very large log volume being processed: hundreds of megabytes! Parsing this much JSON while the CPU was pegged meant that parsing and client rendering were competing for the main thread. So we could rule out issues like bad DB indexes or other server-side performance issues. This suggested that the client could not keep up with the server. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |