Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015

We all take for granted that when we push enter in the browsers address bar, magic happens. The browser gets our HTML, that intern requests all the dependencies, insert magic, other things happen and then we have our site rendered. Simple, right, right…
Like many people as I’ve progressed in my career, building for the web, I’ve become curious as to how the browser does what it does. What makes it tick, how it turns a string of HTML into a data structure, how CSS & JavaScript come into play. Things like render tree, style recalculation, paints, reflows, all alien words will start to make sense by the end of this talk.
Suddenly you’ll understand why people recommend you place script tags at the bottom of the document, inlining critical CSS & all sorts of other performance techniques.
Intro music by @halfbyte

[@domaincontroller]

01:54 the browser 03:07 high level flow 03:46 parsing HTML 05:57 parsing flow 06:31 parsing, tokenizer 07:18 parse tree, DOM tree 07:39 there is certain situations where , stops the parsing of the HTML, tag 08:12 08:26 speculative parsing 09:02 reentrant, means the parsing progress can be interrupted ======================================== performance ======================================= 09:34 at the bottom 11:01 parsing HTML Document , visualized 11:35 CSS parsing, CSSOM 12:05 Render / Frame tree, DOM + CSSOM 12:35 revisiting the diagram 12:55 rendering, multiple trees, renderObjects, RenderStyles, RenderLayers, linboxes 15:24 the DOM Node converted into RenderObject

[@B1r3a4n5i6a7c8]

Wow, A LOT goes on behind the scenes! I got answers to questions I didn't even know I had. Awesome presentation!

[@about2mount]

I know how they all work. It is not as you may think. The NCSA Mosaic Canvas was one of the first browsers that used a single Canvas with as many as 25 added frames. Netscape Navigator was that Browser. These could handle up to 50 added text, image, label, button, entry boxes, spin boxes, check boxes, option boxes and message box widgets. And all of these along with the frames depending on the complexity of how many were used by a website. These also used two methods to render a GUI(Graphical User Interface) inside the browser. 1. The browser first request the HTML page with a HTTP/HTTPS Request. 2. When the HTML is fetched it is Parsed and fetches the CSS, JS and Image path links then does a Multi Threaded second request and downloads them all. 3. The HTML then is separated into two distinct methods. One it determines the div tags traversal using a for loop to append a positive and negative count to regex both beginning and end div tags into an array by div1 div2 div3 div3 div2 div1 tree. A second method fetches all the text for rendering on the GUI into their required Frames below. 4. All HTML tags then become add_tag() methods for the Canvas Markup. These also in a for loop are stripped leaving only the render-able text pre-placed onto the screen but without config_tag() methods. 5. The HTML at this same instance fetches all class=value, id=value these become the add_tag() names that will be matched to the config_tag() methods to render all color, background, paddings, margins etc as the screen is Painted. iN THIS STEP THE class=value and id=value become the div tag named add_tag() methods. They resemble these----Sdiv1value Sdiv2value Sdiv3value Ediv3value Ediv2value Ediv1value. These can now become the div block add_tag() begin and end location methods pre loading the GUI Canvas and Frames. 6. The CSS and the HTML really have no correlation within the browser with exception to only their relative class and id names. The CSS contains the Markup Rules and Attributes for the add_tag() methods and the GUI.These have to mate/match by name to the already set add_tag() methods for the config_tags() to render them all. This is the Painting. 7. An elide() method is also used to hide both the begin add_tag() and end add_tag()(Of-Which-Separate-Each-Block) methods as markup tags in the GUI Canvas. These tags(un-related to HTML tags are used as Markers for the GUI's Frames and all widgets. Hidden or elided are not seen but mark the exact positions for the config_tags() to render them in the right order. 8. The config_tag() methods are last. These using conditionals are filtered out to determine page GUI layouts according to Markup Rules matched to the add_tag methods to Render/Paint the GUI Screen Mosaic Canvas. 9. The last config_tags() methods the Hyperlinks have to depend on already being placed and positioned on the GUI Canvas and Frames. These are the Hyperlink Tags and have their path suspended into the for loop using Lambda for each config_tag() method. So when a client clicks them can send the correct callback function and URL path to be fetched next. In summation all Browsers use highly customized versions of the original NCSA Mosaic Canvas. Microsoft purchased a copy from SpyGlass Inc. back before IE was introduced. Webview is another copy that exist besides it. It came from a customized original copy of Netscape Navigator. These have also become so customized that today the CSS use all of the HTML5 Canvas Markup rules. And use many Advertiser added junk from their respective type. Chrome being such. Many cannot understand how CSS is used. The CSS isn't a computer language its only a Parsed set of Markup Rules that in a for loop are matched by name to their relative add_tag() methods(which are the already set add_tag HTML Parsed section blocks) and thus rendering/painting the final Mosaic Canvas and Frames using the last defined config_tag() methods. These parsed in the loop for their Attributes painting the GUI Mosaic Canvas. Where does JavaScript fit in? Well contrary to common belief it is Parsed by the Browsers HTML Parser and then is Token-ized into the clients machine. It executes by using several eval() and literal_eval() methods. These evals take strings and convert them in to executable scripts in the browsers backend and also only use the config_tag() methods along with their own sets of elide() functions to present or hide data presentation. And were first designed to allow website masters to implement injected Advertising into the browsers. This language gradually became less advertising and more dynamic as it grew. Search the NCSA Mosaic Canvas developed at Berkley on Wikipedia. Microsoft before it got its hands on the Spyglass Mosaic was testing with Tk(Tkinter) before they found the Mosaic Canvas. They more than likely used parts of both to develop IE as well. Read more about Tk/Tkinter Widgets at effbot dot com. Also the original NCSA Mosaic Browser code can be viewed at Github. Thanks and enjoy the Knowledge !

[@codetour]

Thanks for posting this Robin awesome stuff to know

[@II-ii2um]

thank you for the detailed writeup.

[@toomuchtruth]

Very informative and very well organised talk, thanks a lot.

[@ThomasLeo]

@6:21 The diagram from a slide is cut off by a window of speaker. I think it's super unnecessary to show the speaker, unless he or she is physically motioning to something. I don't understand why this is being done...

[@PrzemekSmyrdek]

Great talk - very informative!

[@atmospheric_b]

Thanks a lot! Very interesting!

[@dusuarez]

At 13:51 he says head, script and title aren't in the render tree, because they aren't visual elements. Well, not by default, but they can be. Just set head, title {display:block} and the header will be rendered with the page title visible.

[@toomuchtruth]

nice additional info, thanks

[@inshallahPalestienWillBeFreed]

he also says, any elements who has display: none; will not be part of the render tree., head, title, are part of display: none; by default.

[@anupamng]

@Coolworldleaderguy I thought it was a hair on my screen.

[@pithikoulis]

My god, you're a genius!

[@sohangchopra6478]

The talk was very interesting - there's lots of stuff going on in browsers behind the scenes! However, the audio quality is not good because voice is low even with earphones.

[@dhanashekaranm4725]

Thanks for the video

[@adivmt]

Very cool informative

[@yanazarov]

Actually, good and bad examples at 21:40 will have the same performance, as all the changes are done in one task. The event loop will only reach the rendering step after all code is executed and the task is completed.

[@garhhh9513]

Content start @ 1:13

[@cyberplemyaleha]

On 8:26 he mentions that link and style halt js execution, I replayed this part like 5 times, but can’t get what he is speaking about. Anyone understood? Please let me know

[@wcstcompany7781]

It means html parser wait till fetch external JavaScript or script tag between html, after executing JavaScript, HTML parser will resume so always we should use defer or async in script tag.

[@missingdays1]

16:20 where can I get this gif (or video)? I couldn't find it anywhere =( Thanks!

[@AnthonyMontalbano]

+Евгений Бовыкин Are you looking for this? kzbin.info/www/bejne/kIXReqt_dpp-fdk

[@JoshOlsonDev]

Anthony Montalbano I already linked that...

[@AnthonyMontalbano]

+Josh Olson where at? I didn't see it on the thread

[@JoshOlsonDev]

In this thread, I linked to it and two related things. I must've got auto-flagged as spam but I can still see my response. Friggin ghost comment ban system...

[@AnthonyMontalbano]

Ah dang. Yeah, I don't see any other comments. Must be some spam wizardry going on.

[@kincheung9217]

pretty good

[@kachunchan6207]

What are the four trees he said? DOM, CSSOM, render tree and another one is? Edit: I ady found out the answer, they are RenderObjects, RenderStyles, RenderLayers, Line boxes

[@fernandosepulveda8331]

I hope you are already an engineer, if you are not, what have you been doing all this time?

[@xinwilson]

It's like an entire course squeezed into 30 minutes. My brain just exploded... good content though.

[@VonderBoob]

What if you had a cylinder that was solid in the center and connected to a hollow cylinder by pegs extending from the edge of the solid cylinder out to the inside of the hollow? What if the core was balanced in the center of a hollow cylinder by magnetism without touching?

[@hansrichter5227]

Dood u hi?

[@patriceken]

youpi ! its party time there !

[@Textras]

👏

[@chimpwithagun]

Dependencies are requested by interns? No wonder there are so may inconsistencies.

[@rumaroy3847]

His voice is so hard to listen, the volume is very low.

[@ishaaqolwi8716]

Put on subtitles if you want.

[@micalevisk]

headphones to rescue

[@jakewood5475]

His voice made me want to sleep...

[@solidbroadcast3053]

ASMR geek edition

[@satvikjha8932]

i was worried about my headphones

[@adesegunadebayo]

Same here, the sound is pretty low

[@konstantinoszeimpekis698]

The person frame is hiding the view of the presentations guys. We are not interested in the person, only on the knowledge he is presenting

[@YamaDWD]

for new programmers this is quite hard to understand. It looks like that he skips a lot of details and important information. Maybe this is for people who are already known about web dev for years. But i will definitely will try to learn about this!

[@skargardande]

yes not everything is intended for beginners

[@geelemo]

It's very good to serve beginners who don't research

[@bohdanromanovich4912]

Could you please hide host video when you showing some charts? Wtf?

[@prabhakaranjeyamohan4579]

Its like eminem teaching me this. So fas and totally lost, Well, I am just a beginner

[@trustour5090]

not so detail

[@bipulkushwaha1567]

supari nikal k baat kar re baba .... (voice is not clear)

[@mwmwmw777]

Great content but his voice and tone are making it difficult to listen for non native English speaker :p

[@PANDA-vm3tt]

most annoying intro I've ever heard

[@greg6618]

Haha true

[@panzequest-1226]

cute actually :P

[@bhavyakhurjawal]

Although he is good but his way of presentation sucks.

[@amroto97]

Man try to be constructive, its tough to give such a hard presentation to a huge crowd. Be a decent guy and give me a nice feedback, like speak more confidently or more clearly. You've never been in his shoes to know how tough it is

[@stifflery]

bhavya, I disagree! You people always missed the point of videos like this. Context of this video is not the kind where you of have to do a TedX like presentation, where the presentator has to attract very wide range of audience who often happen to differ in profession and knowledge by large margin while in this video he is here to target audience of a very specific domain (FS developer/learner, front end engineer/developer/learner). Everything said in this presentation is exactly right on point in my opinion. You seem to have programmed yourself to take knowledge only through the fancy so called presentation layers which is actually worthless to the actual matter. Only thing I found a little odd is the volume of sound, although I don't know if it's only on the recorded video.

[@cya3mdirl158]

Boring world. - frontend world. For girls