Francesco Sciuti: We Are All Good with Browsers Made by Others

This talk explores the intricate workings of web browsers, detailing their multi-process architecture and how they manage user interactions through various specialized processes. The speaker discusses the rendering process, emphasizing the complexities involved in displaying web pages, including parsing, layout, painting, and compositing. He explains how browsers handle network requests and manage memory and resource allocation to ensure a smooth user experience. The importance of maintaining approximately 60 frames per second for rendering tasks is highlighted, as interruptions can lead to a poor browsing experience. Additionally, the speaker suggests optimization techniques to improve browser performance and make web applications more efficient.

[Music] ladies and Gentlemen please welcome our next speaker Franchesco Cudi presenting the topic we are all good with browsers made by others hello hello everyone thank you for being here uh I I'm a bit nervous so let's dive into the topic uh we will take a quick ride through the tool we use the most our trusty browser okay um it helps everyone uh serve the web but

more importantly serve our artistic creation well but first let's have a show of fans are you ready yeah okay are you ready oh great oh if I asked all of you how many times have you gotten frustrated uh with your browser not responding and what a lot of hand well every day okay how many uh of us have said the f word during web navigation all of

us okay I'm sure and I often have you seen or Coast a page with Ley animation or a bad user experience great great F okay thank you for your resident and it's time to understand uh why our dear uh and beloved browser sometimes acts like this okay we will try okay but what is uh I'm sorry okay what is a browser um everyone uses it but only

some really know how it really works okay so let's start by learning how it works and what challenges it might face well if we try to simplify things uh a browser is an application uh that request data from web servers right sends a network request to the URL and retriever resources and present them interactively sounds simple right uh trust me there's nothing simple about it uh it's

one of the most complex processes you can imagine okay um browser is one uh a browser is one of the uh most used software because everything uh is web based today and um they are built with million of lines of C++ or are called languages and it is not a good news uh they changed a lot uh over time and uh because users needs changed over time

and trust me another time they are a concentrated mix of Technologies and algorithms uh which makes uh Batmobile looks like a regular car okay and trust me I'm a Batman n so it's very difficult to say something like this okay well but uh who write browser have a little chaos to manage users love to see pixels on the screen as quickly as possible do you agree which

is the reason why the browsing experience is enjoyable so if you have pixel happy you will be uh happy you will have an enjoyable uh experience but you might be thinking why should care it is a Italian Gest very common Italian G I'm not a BRS code developer uh a little disclaimer if uh any of you are from the chromium team for example please be merciful I'm

trying to uh understand better uh how a browser works okay pleas be merciful okay so um uh it's not uh it's not a problem uh as web developers we must understand some of the mechanics of browers uh to make better decision and make sense of some things that sometimes seem absurd this is not a so famous quot because it's mine uh but uh I hope it will

be and it is from Chicho from valem demon is an ancient name of the region where I was born and it is a very cool name in Italian language so it's it's beautiful okay uh it's a complex stuff okay and U but but uh we're knowing about uh and um uh so um we can try to dive into how it's build and um a look uh a

bit into uh into its architecture okay okay uh currently there are uh no standard architecture or specification to build a browser and a project could change from one to another and um uh the the the most commonly uh used today uh architecture uh is a multiprocess architecture and where each process handles um specific task or logic and it's important to understand that each process has a main

thread and a lot of other dedicated uh tasks uh threads I'm sorry for more specific okay yes okay yes okay to get a clear understanding of the concept of processes and threads okay um we can Define them uh at a level uh I'm sure you know this concept but it's important to remember uh a process is a like a running program uh that includes executable uh executable

code um data or um the state of our application and other elements uh useful and required for the execution uh each process as its own uh address space and it is managed by the operating system as an independent entity okay on the other hand a thread is a single unit of execution within a process and um a process can contain one or more thread that share the

same uh space the same memory space and resources as the uh parent process okay uh I'm sure you know this concept but uh it's important uh we are talking about a multiprocess architecture so um process uh processes uh must communicate among them and um um the way is uh IPC a set of mechanisms um and techniques like uh pipe for example or or sockets uh shared memories

and so on uh that enable separate process uh exchange data or information uh to uh for for work together okay uh IPC is essential when coordination and sharing of of information are required for example in a a multitasking application or a distributed application and so on well uh so a browser is a multipress okay a multi process architector or application uh but what exactly are these processes

and how do they collaborate among them he is tired don't be scared okay uh it seem complex and it absolutely is but uh this wonderful and beautiful diagram uh helps us okay uh a browser is divided into VAR in various I'm sorry processes the first one the main or browser process and um it is the primary process for our architector and it is responsible for um for

managing the user interface the address bar menus uh tabs and so on and um it is useful um to coordinate the interaction um um among other processes okay involved in this architector and um it is also handles the uh creation and termination of tub rendering process okay now uh it is the next process so uh rendering process the the uh the um the uh browser process uh

we can imagine it as the um blue rectangle okay well the next one uh render or rendering process each open tab during our navigation in in the browser is is associated with a separate rendering process okay it is very very important this process renders web pages uh process uh HTML um executes uh JavaScript and so on interact uh with the Dom and so on and uh the

the very important thing to know is that each tab has a dedicated process okay it it is uh very high level definition but it is good enough right now the next one network process that manages uh all Network stuff uh including resource uh downloading for example images scripts sales sheets and um it isolate uh Network operation to ensure that um security issues or crashes don't impact our

uh browsing experience so the entire browser experience okay uh so it's basically responsible um for communicating with the network okay and manages this stuff the last one is the GPU process that um uh is like a layer between our BR and bare metal the GPU um so it uh is useful to manage the hardware acceleration okay it is very important okay great um each processes has a

priority and um a priority show uh how is important a process to the underlying operating system the operating system uses this priority to balance resources okay our resour resers of our machine okay well okay uh like everything else uh a multipress architector has its pros and cons we are lucky because Pros are more than cons and um the first one is send boxing and um it is

like a security bubble uh that isolate processes okay and the um to the underlying operating system as so in um if one process is afflicted by malware for example the damage is contained inside this bubble without compromising the World Browser experience okay and the operating system experience okay then uh the next one black ship detection it is a very cool name for me black ship detection uh

okay consider it um like a way to spot processes uh that are consuming uh resources like memory or CPU and um um this feature prevent uh that a single tab um destroy from destroying uh the uh the entire browsing experience okay um privacy feature can ensure that sensitive uh like cookies uh session info and so on uh is handled uh are handled I'm sorry um securely and

privately okay and the last one site isolation web pages um it ensures that uh web pages from different sites load in separate processes okay there are some cons uh too uh but uh we are talking about uh uh multiprocess architecture so it's normal that we had a lot of processes uh that use memories and need to uh to communicate with IPC okay so this overed it's normal

okay but it is mentioned okay so what's happened when we browse um when we uh enter a URL or a query in the address bar the input is evaluated by the browser process and then um it communicates with the network process or thread uh depends uh to execute the request and um the response is read and handled okay uh at this point a render process is um

activated um yeah is activated okay and the navigation is taken over by the render process finally uh the document loading phase begins and um it maintains the dialogue between the render process and the browser process okay well uh uh very beautiful and animated slide uh so the users uh a user types uh in the address bar and um um the browser process ask to to the network

process uh to go fetch the information over the Internet uh once it is received the process creates or look for I'm sorry for the best rer process which communicate with the browser process andap our page is served uh it's not magic and uh uh What uh and we we can ask what happened inside uh the easy the rendering path uh is um the the most intricate but

exciting uh part of our journey and um um it is uh where we uh encount um the much feared critical okay uh here the entire Journey uh that the rendering process has to do to render a single frame of our page okay so it is the journey for a single frame but uh the rendering of a page is like a cartoon uh it it is rendered frame

by frame okay it is uh the journey for a single frame well it is another uh gesture Italian gesture do you know gestures oh oh yeah okay um well uh scared okay um let's remove the expression of Terror uh and uh take a look inside yeah inside the uh phases um the steps uh that the rendering process needs to handle parsing style calculation layout paint compositing okay

let's go uh through them one by one well data uh the first one parsing uh data travels over the internet as packages okay okay and when uh retrieved by the network process the data is nothing more than row bites okay the first thing uh we receive is the HT HTML which is also received um as a row bites simple bites okay here the passsing step begins uh

this step transforms uh this uh the the bites into a series of characters like a unit of a string okay and then um these uh these characters are tokenized uh tokenization means converting um this sequence of character into a sequence of tokens okay um a token is a piece of text uh representing an HTML element uh or an attribute a text or a other content within the

HTML document uh for example an opening D tag becomes an opening token or a a closing div tag uh becomes a closing token okay so we can obtain anable structure and uh the token uh uh the tokens are analyzed by the lexer a Lex a lexical analyzer okay and um um um and it is useful to discover their type and structors okay and so um such for

example a tag name or an attribute value and so on uh so the lexer analyzes the token stream to recognize their structures okay finally uh browser can create uh finally uh uh nodes and relative Dom the document object model uh using the extracted information during tokenization and lexer works well done I'm sure you know what is the Dom okay it is the first step the second one

after creating the Dom uh the browser build another uh free like data structor called CSS oom uh and um it represents uh all CSS rules uh declared in our document including selector um um style declaration or specifiy okay uh it uses similar techniques uh as the previous step it's not the same but it is similar and um this um this step uh fatures CSL style sheets and

relative files uh and the extract in line Styles directly from the HTML document so CSS is passed to create the CSS om so finally this phase is completed it's similar to the previous one and the process is ready to create one of the most important um data structure for our browser uh once uh the Dom and the CSS are created the main thread trar uh through the

D and styles and making this uh data structur called layout or render tree okay uh this tree contains information such as the coordinates and the dimension of the elements the layout process uh so this step requires a lot of browser resources uh because it has to compute the exact position and size of each element of the page so it is a a slide I'm very proud of

uh it's contain a remarkable quote I hope you will appreciate it and um I'm I'm expecting a huge up close Okay please okay the Dom and cssom Fusion thank you torama okay we have obtained the most powerful layout three where is the Applause oh H thank you um okay to build the layout or render threee uh the main thread will to uh recursively Traverse uh the Dome

and um uh uh and search for uh the visible elements only visible elements nonvisible element is not uh so useful for this step because we don't need Dimension and position for a non visible element and um build and update the layout tree um and their node by pointing to the Dome node so create a relationship of each uh Tre uh layout uh I'm sorry uh layout threee

node and Dom node okay and then derive the computed style for the Dom note and Associate them uh with the layout three node okay so gathering this information uh in a single structor uh thanks to gathering this information and our elements are positioned on X and Y AIS like a 2d position okay 2D coordinates it is very important okay and it is the layout step I hope

this video is clear enough uh to um to have an idea uh uh about how much work is required yeah yeah thank you oh okay okay well a lot of work to do okay um so we have positioned the elements on the Z and I'm sorry X and Y AIS and the new Step comes into play the painting step uh we know the dimension and position of

the elements uh but it's also necessary to know how the element are arranged on on the Z axis Okay the third the third dimension um so what's in front and what's behind uh during this phase uh the layout Tre is traversed and um uh to build a queue of uh draw uh quotes uh I'm sorry paint records I'm sorry uh that are like a a deck of

cards um useful to the SE pixel colors for example the drawing order of the elements and they overlapping okay so what's in front and what's behind um this step is when the browser uh detects pixel on the user's device but uh detects not render okay well the last one you the compositing uh phase or step um during this step browser uh creates the um the final visual

appearance of the web page okay uh and it is a a technique to layer parts of the page Rize uh them separately and composite them as a page okay uh it's important to know that this step uh is executed out of the main thread and it is very important uh it is handled uh by an independent thread can you hear me okay uh called compositor thread okay

and um uh it manages um um a lot of intensive operations like scrolling okay well uh during this step the content is divided uh into layers oh so uh this uh representation so the pages split to um a lot of into a lot of layers okay uh and uh to generate I'm sorry uh the layer three uh so the main thread uh sends this information to the

compositor thread um that handles the rization of each layers okay uh the compos Itor thread also divide uh our page into pains like a square you can see the um the gray squares and um um so divide our page into paints and send each Square um called Draw quad uh the name uh the name is Dr quad to Ruster um to the Ruster thread another thread useful

for the rering okay so uh this information is gathered and um uh it's time to create a compositor frame um so it is a collection of uh uh of this information World information World information okay so this compositor frame is sent to the browser process and then to the GPU to rusterizer oh so to render uh our page via IPC okay uh the compositor thread uh has

another work to do uh if a browser process receive a user event like um click or touch start um send the even type and the relative coordinates to the render process okay so the render process manages the event if there is an attached listener and run it okay but it's important to know that compositor thread uh makes and Associates uh the Handler uh the handlers uh sorry

to uh some areas of our page called non-fast scrollable regions uh if an event occurs outside these regions the compositor thread uh can create a frame without asking anything uh from the main thread okay so um so can skip this kind of um of request okay and it is a very good Improvement okay uh there is a lot of stuff uh to do and every step is

crucial this journey is called critical rendering path and why is uh it is critical the browser must create frames at the device uh refresh rate so it's fundamental that a browser renders about or almost 60 frames per second to ensure a smooth animation and a good user experience so the entire pipeline we saw uh as a approximately 10 milliseconds to complete its task that it's not much

time well okay so it's critical well if the Brer fails to maintain this Frame generation frequency uh we will see in famous legs uh called uh junk uh but no user wants a poor uh experience so avoiding it is crucial well we have some good news it's important to know that we can skip uh specific steps like uh layout and painting uh using some optimizations uh you

can skip the layout step uh when Dimension or positions aren't changed of each element aren changed okay uh for example if uh only the color of text changes probably the render process skip this step okay and it is another very good Improvement you can skip the painting uh step using specific CSS rules like transform or opacity and it is another very good Improvement I have no time

okay um so uh it's clear that skip in any of these phases or steps um will help the browser to render uh correct number of frames for a good experience a smooth experience some clarification uh web application use the main threade to execute the application logic and code but um the main threade uh executes also user interface tasks Okay so so I I sure you know what

is the event Loop uh but uh it's important to understand that um it lives within the main thread and the good performance of the event Loop uh determines the good performance of our okay well it is a uh high level representation of the event loop it's very good okay but I have no time um basically uh a event Loop is an infinite Loop and it is responsible

for selecting a task from the task q and place it on the cold stock uh for the execution okay but sometimes uh select a render step uh task instead of uh reading from the task Q okay uh and it is useful to generate a new frame and we need 60 frames per second okay so uh we need um to be careful and uh not overload it okay

there are very different type of tasks and um um for example HTML or css parsing input okay input event management and nwork data and render step okay oh I hope uh I hope it's a bit clear now um but uh I hope we understood that the browser has to do to render a frame uh a lot a lot of tasks okay and um but it's important that

browser reach uh the famous 60 frames per second okay well uh we talked about uh chromium based architecture uh but it's important to remember that uh on the market we have a lot of um JavaScript and rending uh rendering engines okay okay our browser uh our brothers don't have such an easy life as we could think uh so it's a good idea to start thinking about how

to make their work uh their job I'm sorry more manageable uh some stuff um we um we can use to reach this goal uh some um um some techniques please uh we need to use request animation frame and request title frame uh the the second one it's not so famous but it is very important okay idle time is a very important time for our browsers okay uh

you can use will change uh CSS rules to split a layer okay um between the um painting and um compositing steps okay oh okay I'm sure you use a sync or defer tax uh tax attributes uh please we need uh we need to uh use workers because workers is useful to execute code uh code out of the main thread so it is the goal um priority resources

and please uh check CSS and thei triggers uh for skipping layout and painting steps well Tada okay to ensure a smooth experience let's try to help the tool that helps us to navigate through billions and billions and billions it is another quote I don't know if you cat it of pages full of things to learn and cute K uh kittens every day oh okay do you love

kittens okay okay I do it in my way I use the bad computer okay which is powerful uh and uh I I don't care I'm kidding I'm trying uh to write better code okay it it is my site for the night okay a collection of of links to learn uh these these topics H more more more uh I'm Franchesco shui thank you so much I'm a developer

by choice and passion I'm a Google developer expert and a Microsoft MVP and I love nerd stuff uh especially botman stuff and I love to share knowledge so uh I'm also a partner uh in an Italian company focused on um front end and mobile development and training about these fields uh thank you very much uh here are some links to reach me out if you want I

hope you won thanks again thank you so much and feedback time if you want thank oh feedback feedback feedback oh yeah oh I showed the renderer the render animation of a web page with various color is each color a different thread no um pixels are detected in the paint step okay so the paint step uh lives uh within the main thread so uh no so no uh

the only one thread that manages pixel colors uh are the main oh not so much because um we uh talked about um what happens uh into uh the browser so uh you already received the page so yeah okay or better um um if you have less JavaScript to manage uh it's it's a good thing to have so yes uh the server rendering could help us but uh

everything um helps our browser to skip for example steps or uh to improve and reach the famous UH 60 frames is useful uh okay um we need uh almost 60 frames per second because uh but uh is better than the refresh rate is U uh similar to the render frequency but uh 60 frames per second is good enough okay and uh uh yeah rful uh have all

threee browser engines converged on a similar multi architector a moment I'm too old to read in that way have all three brothers engine verion on mul ah okay uh if I understand the question um there are uh some uh render engines I talked about uh blink that is the render engine uh of the uh chromium architecture okay uh but uh there are jeo for example or U

I don't remember the last one used by Safari but um um yeah we have similar uh architectures and uh it is commonly a multipress architector okay so uh I suppose that the engines are similar yeah maybe ah it is a very good question but I don't know the the answer no I'm kidding uh yeah GPU and webg are useful but um it is a different um um

it is a different topic for example web GPU is uh very important uh because it uh enables to dialogue directly with the GPU okay so probably the render engine um will move to this direction but I don't know uh web GPU and web gppl are apis so it uh works like uh apis okay um yes web GP web GL for example is a uh an API optim

optimized for the rendering for sure and it works for example on the canvas tag okay so it is a optimization for the browser and it is a NPI a browser API okay a web okay okay thank you thank you so much bye-bye oh if you want I have stickers and pins if you want