Video summary
When you click on a hyperlink in your browser like Google Chrome, the process begins by establishing communication with the web server hosting the requested page. The browser first consults Domain Name System (DNS) servers to translate the human-readable domain name into an IP address, which identifies the specific computer serving the resources. Once this translation is complete, the operating system's network stack and hardware are utilized to initiate a connection over available internet infrastructure such as Wi-Fi or mobile networks. This initial phase involves negotiating rules for communication known as protocols; specifically, Chrome uses TCP/IP to create a secure session with the server before exchanging messages using the HTTP protocol to request files like HTML documents, CSS stylesheets, images, and other necessary assets.
To ensure that this data exchange remains safe from eavesdropping by hackers, the connection is secured through Transport Layer Security (TLS), which requires an additional series of verification steps often described as a long handshake between the browser and the server. After receiving the raw files, Chrome's software begins parsing them to understand their structure while simultaneously fetching any extra resources required for full functionality. This stage also involves executing JavaScript code using the V8 engine, which is responsible for interpreting WebAssembly scripts alongside standard JavaScript commands. These components work together to prepare all textual and logical data so that it can be visually presented on your screen in a way that users can interact with immediately.
The final step of this complex sequence is rendering, where Chrome's Blink rendering engine takes the parsed code and resources to construct the visual layout of the webpage. Blink utilizes the open-source Skia graphics library to communicate directly with the underlying hardware of your device or mobile phone to draw text, images, and interactive elements accurately on the display. For advanced graphical needs involving two-dimensional or three-dimensional objects, such as games or complex animations, Blink leverages third-party libraries like WebGL to handle these specific rendering tasks efficiently. Ultimately, this entire orchestrated process transforms a simple click into a fully formed, interactive digital environment that allows you to browse social media, shop online, stream content, and engage with various web services seamlessly.
Read the full video transcript
Sam, love the work on the Chrome videos.
Quick question. When you click on a
link, what does Chrome do next?
>> Uh well, you know, obviously uh like
Chrome like uh reaches out reaches out
to the website and then zoosh, all these
little pixels uh come wooshing back and
then uh like Chrome can uh you know,
paint them on the screen.
>> Sam, Sam, Sam, just wait a minute. When
you click a link to a page, that's like
telling Chrome, "I want to view the web
page that's on the other end of this
link."
>> Uh yeah, right. Right.
>> That page might be for a social media
site, online store, a streaming service,
a blog, whatever. It doesn't matter.
Chrome has to get the resources it needs
to display a web page you can view and
interact with.
Oliver, Nour?
>> Exactly. Chrome needs to communicate
with the web server that has those
resources. Now, Chrome doesn't need to
do all the work on its own. Chrome is
very good at delegating tasks.
>> Nour?
>> Uh first of all, Chrome communicates
with the network stack of the operating
system used by your device. The
operating system might be Android,
Windows, macOS, whatever.
>> The network stack is part of the system
software that can be used by Chrome to
set up a connection over the internet to
a web server.
>> Next, the operating system's network
stack sends a request to your device's
network hardware.
>> The network stack and hardware will have
been configured to fetch internet
resources via the network card over
whatever internet connection is
available.
Wi-Fi, a mobile network, or even a wired
connection.
>> Exactly. The first job for Chrome is to
find out how to reach the servers that
hold the resources for your web page.
Imagine that you clicked a link to
cats.example/tabby.
Where does your browser get the
resources for that page?
>> Uh so, like Chrome goes to this like big
big computer where there's like this
long long list of like names and stuff.
Uh, and Bish bash bosh, Chrome gets the
like the lowdown uh, on how to find the
website.
>> Mhm.
Not quite. Domain name servers, DNS
servers, allow browsers to find and
access the resources they need.
DNS servers translate human readable
domain names, like cats.example,
into numbers, like 142.250.187.211.
That can be used to locate the computers
that serve the resources your browser
requires.
>> Once the DNS system provides the IP
address for the website you're visiting,
Chrome can begin negotiating a
connection.
That process uses a set of rules for
communication known as TCP/IP.
These rules are known as protocols.
>> And a protocol is a standardized set of
rules for communication.
In this example, Chrome sends a message
to the website cats.example
following the TCP/IP
rules. The website responds.
Then Chrome responds to that, and
eventually the whole handshaking process
is complete.
Once this is done, the browser and the
web server have a mechanism in place to
exchange messages and files. This is
called a TCP session.
>> That's right.
Um, that way
Chrome
can ping messages to the web server. Pew
pew pew. And the web server is slightly
um, uh, like a big computer in a giant
shed.
>> N- No, not exactly.
Requests from the browser and responses
from the web server are done using
another set of rules, the HTTP protocol.
Got it, Sam?
>> Yeah. Okay. Uh, yeah, got that.
>> Okay, good. So, HTTP is the protocol for
exchanging messages and files, while TCP
is a protocol for the underlying
mechanism which makes that all possible.
>> [music]
>> And this is why TCP is known as the
transport layer.
>> Exactly.
A request from a web browser to a web
server is really just a text message
that follows the rules of the HTTP
protocol. [music]
The HTTP request is sent over a TCP
connection.
When made, [music] the server responds
with a file. This could be an HTML file,
it could be a CSS file, an image, or
really anything else.
The request and the response can include
some extra information in text format,
and those are known as the headers.
>> And in case you're wondering, headers
are used to send cookie data along with
a request or a response.
>> Thank you, Shiften. And by the way,
browsers can also upload files. Browsers
can also be used to stream [music]
video, to stream audio, and for video
chat. This requires a very different
approach for communicating data between
browsers and the servers, but we won't
go into the details here.
>> One thing to bear in mind, we need to
make sure that the communication is
secure. Otherwise, a hacker could listen
in on the conversation between the
browser and the server. And for that, we
have the transport layer security, known
as TLS. This requires a series of round
trips between the browser and the web
server before any communication takes
place.
>> [music]
>> A bit like one long handshake to check
that the browser and the server are both
who they say they are.
>> So, finally, the browser gets response
back from the web server. Once CSS and
HTML files are received, Chrome software
can begin to transform that code into a
form it can work with, and get all the
extra resources it needs for the page,
like images and additional files.
>> Exactly. That's called parsing.
JavaScript also needs to be parsed and
executed. Oh, on the subject of
JavaScript, let's talk about Blink and
V8. So, Blink is the rendering engine
used by Chromium-based browsers, that
includes Chrome. [music]
And the rendering engine is the
component of the web browser that
transforms all the HTML, CSS, and
JavaScript, along with the images and
other resources into a rendered page on
the screen that [music] you can view and
interact with.
Now, to parse and execute JavaScript and
WebAssembly, Blink uses another engine,
V8, also open source, as part of the
Chromium project. Oh, yeah. In fact,
we've got a video and an article on
this, What is Blink?
>> Thanks, [music] Ron.
>> Once all that's done, Blink begins
rendering. Rendering is the work of
laying out and displaying web pages.
>> Exactly. To render graphics, Blink uses
the open source Skia graphics engine to
interact with the underlying graphics
hardware [music] of a computer or a
mobile device.
>> And let's not forget about those
third-party libraries.
>> Absolutely. Blink uses multiple
third-party libraries. For example,
WebGL is used to render interactive
[music]
2D and 3D graphics. If you want to see
WebGL in action, check out the fractal
rendering app Fractus, which uses WebGL.
>> So, what you're saying is, when you
click on a link, Chrome [music] uses
Blink to access your phone or computer
operating system's underlying network
stack, that in turn makes a request to
your device's network card, [music]
which is used to set up a connection
with your internet service provider, and
once that's done, a TCP session can be
set up between Chrome and a web server
to allow HTTP requests and responses
[music] to get the resources for a web
page, which can then be parsed by Blink
in Chrome, along with a JavaScript and
WebAssembly parsed and executed by V8,
in order to display a web page that you
can view and interact with.
>> Yes.
>> Wow. Right. So, you click a link, and
>> [music]
>> that's what Chrome does next.
>> Mhm.