Conceptually, dynamic analysis is simply the movie of the execution of a computer program. Sounds easy? It's not.
Today, something as simple as a Google query involves dozens of network requests and millions of objects in memory … only in your browser. How to understand the machinery behind a single Google query? Today, this is easy. An off-the-shelf browser such as Chrome embeds its own dynamic analyzer,5 which is easy to use and beautiful.
In this post, we use the debugger of Google Chrome to present a runtime autopsy of a Google query. The scenario is straight forward: you open the browser, you type a query on Google, and you click the search button. What happens behind?
Let's start with a first dynamic analysis: we log and observe the network requests. After only typing "http://www.google.com [Enter]," there are 23 HTTP requests sent to the Google servers:,
Next, the browser builds the visual representation of the Google home page. All visual objects that need to be displayed are organized in the "Document Object Model," a.k.a the "DOM." The DOM contains all buttons, images, pages, and subpages, text fields that the browser must display to the user. When the browser interprets the information included in the DOM, it knows exactly what to draw on the screen to build the page. Now, when we type our actual query "extraordinary software [Enter]" in the iconic Google search field hundreds of DOM elements are loaded in the browser. All these elements included all the suggestions computed by the 'Google instant' feature every time we press a key on our keyboard. Chrome's analyzer records this progressive loading of DOM nodes (up to 2414 nodes) and also one screenshot per change.
This DOM tree can be represented with a visualization inspired by the Web Stalker6 (representation not from Chrome's analyzer)
Function call trees are well represented with `flame graphs'.7 Below, we show a flame graph for the function calls that run in the browser when hitting one single key while entering a query. The big yellow bar at the top is the top level event loop in the browser that handles the keystroke. A single keystroke triggers the execution of nine other operations, displayed on the screenshot as yellow and purple boxes on the second line. These nine operations trigger other operations themselves during their execution, shown in the level below, and so on. This goes as deep as 109 stacked operations triggered to handle a single keystroke. Most of these operations actually handle the 'Google Instant' feature that automatically shows a list of topics related to the words that have just been written so far.1
We have dissected the inner behavior of a Google query in the browser. This is actually a very small part of the much larger sequence of software executions involved in a Google query. In addition to the code executed by the browser, there are many other computations;
This represents massive amounts of code, that we would love to visualize also. However, this cannot be monitored and visualized with the browser debugger; only Google engineers can monitor the execution of their servers.
This dissection is easy to do on your own! There are many other visualizations to explore!
Do it yourself:
Open a Chrome browser.
Type Ctrl-E (or "Menu" >> "More Tools" >> "Developer Tools" >> "Performance" tab, "Click the record button")
Go to your favorite Web application.
Explore the many tabs and visualizations, try to understand what happens.
With this guided tour in a trivial and daily digital action—a Google query—we wanted to reveal the extraordinary complexity of today's software. We refer the readers intrigued by this extraordinary complexity to technical papers, such as 4. The visualization of the computation behind a Google query can even become art: Joana Chicau, a digital choreographer, is known for altering, in real time, the execution flow of a Google query.2
1Google Instant with Bob Dylan, September 8, 2010: https://youtu.be/qcm0rG8EKXI
2Chicau, W., A Web Page in Three Acts: https://berlin-ak.ftp.media.ccc.de/congress/2018/h264-hd/35c3-9598-eng-A_WebPage_in_Three_Acts.mp4
3How Search Works, Google, March 4, 2010: https://youtu.be/BNHR6IQJGZs
4Rahman, M.T., Rigby, P.C., and Shihab, E., The Modular and Feature Toggle Architectures of Google Chrome, Empirical Software Engineering, April 2019, Volume 24, Issue 2, pp 826–853 http://users.encs.concordia.ca/~pcr/paper/Rahman2018EMSE-preproduction.pdf
5Chrome DevTools, Google, https://developers.google.com/web/tools/chrome-devtools/
6The Web Stalker, V2_, Lab for the Unstable Media, https://v2.nl/archive/works/the-web-stalker
7Flame Graphs, http://www.brendangregg.com/flamegraphs.html
8How Browsers Work: Behind the Scenes of Modern Web Browsers, https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Benoit Baudry is professor at KTH Royal Institute of Technology, and director of the CASTOR Software Research Center. Martin Monperrus is professor at KTH Royal Institute of Technology, where he holds a Chair from the Wallenberg Autonomous Systems and Software Program.
No entries found