Why do Google webapps use so many iframes (and web workers)?
Poking around Google with a browser dev console open, I noticed that Google apps like Gmail use almost 10 unique JavaScript contexts, iframes and webworkers. Facebook doesn't even have one. In fact I couldn't find another major website with more than 1 or 2 (Amazon has 2). So each tab of each google webapp is allocating 10 jsvms and up to 10 DOMs. That seems excessive. What's going on? Why do Google's webapps need so many top-level jsvms compared to their competitors?
3 comments
Probably because different teams are working on different pieces of the application. Spotify does this as well. They have multiple iframes where each team responsible for the iframe. This makes loading external libraries easy.
When you have a single "top level browsing context", ie. a window, iframe or worker, it's mostly impossible to unload JS code that had been loaded. By using iframes and workers you can actually control the unloading of useless code. Workers of course also help with offloading the main thread.
The overhead of allocating a new js runtime is not that high in modern browsers anymore so that's an acceptable trade off.
One reason could be security. iframe has the sandbox attribute to limit 3rd party scripts. Webworkers don't have access the dom.