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

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

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

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 !

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

@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...

Great talk - very informative!

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.

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.

Thanks a lot! Very interesting!

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.

Very cool informative

Thanks for the video

Content start @ 1:13

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

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

His voice made me want to sleep...

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

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

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?

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

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

youpi ! its party time there !

pretty good

i was worried about my headphones

👏

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

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!

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

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

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

not so detail

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

Although he is good but his way of presentation sucks.

most annoying intro I've ever heard

Boring world. - frontend world. For girls