3

I'm using socket.io to push data to the browser to update the status of other members (eg: online/offline/away/busy).

I'm finding when the data arrives (every 10seconds) for processing the page hangs for a moment. eg: the browser scroll bar (if your moving it up/down) will stop for a moment and be unresponsive.

I don't believe the issue is the websockets because if I don't process the data (eg: it still arrives at the browser) the browser doesn't hang. it only hangs when I process the data.

below is the loop I'm using to process the data:

I'm aware I could better target the elements to be updated rather then using a generic find (and I will do this) but I'm still very surprised this code causes the site the hang for a moment when used.

The data sent would be around 100 user/status updates so I assume it would loop through this around 100 time and have to search the DOM 100 times. Is this the reason it hangs? Wouldn't it process this in the background?

I guess I'm trying to understand why the hanging occurs. I've used jQuery a lot and never experienced this hanging. All advise/ideas would be greatly appreciated.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Adam
  • 19,932
  • 36
  • 124
  • 207
  • Maybe it's the extremely long function names and classes/ID's ? – adeneo Jun 07 '15 at 04:05
  • I know there aren't the normal but I prefer them. Haven't had this issue before with them... – Adam Jun 07 '15 at 04:08
  • 1
    I'm just joking, the long names has nothing to do with it, but it just seemed overkill using such long names on ... everything ! Don't you get tired of typing those, and aren't they actually just harder to remember? The question is, how many `statusUpdates` are there, you're changing the DOM in a loop, adding classes and attributes to quite a few elements, and changing the DOM can hang the UI if it's done recursively like this. – adeneo Jun 07 '15 at 04:16
  • I hear you... there could be around 100 status updates every minute... maybe I will look for a different solution so I only need to process changes in status - currently I'm just updating every users status rather then just those who have changed. I thought this would be ok but obviously not - learning as I go... – Adam Jun 07 '15 at 04:19
  • Try finding the problem by Profiling javascript. – Piyuesh Jun 07 '15 at 06:08

1 Answers1

0

Javascript in a browser is single threaded. So, there's only one thread of Javascript running at a time. If you have some code that is busy processing incoming webSocket messages, then other Javascript cannot run until that code is done.

Javascript enforces this by sequencing everything through an event queue. When one piece of Javascript finishes running, then the JS engine pulls the next event off the event queue and runs it.

If your page appears to hang for a short time when an incoming message arrives, then that is likely because your Javascript that processes that incoming message is taking too much time and making other interactivity on the page wait until that processing is done. The best solution would be to improve the performance of the code that processes these incoming messages so it is fast enough that there is no perceptible impact on the interactivity of the page.

There is no generic way to speed up your code - what would make the most difference is entirely dependent upon the specific code, how it is written and what it is trying to accomplish. So, you can only receive more specific advice on improving the code if you show us the actual code and describe what it needs to accomplish. Doing anything 100 times in a row means each operation must be very, very fast (less than a couple milliseconds per operation) if you want to not notice the cumulative delay from doing 100 of them.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979