7 ms·

How Browsers Work: Behind the Scenes of Modern Web Browsers

282 points by Garbage 15y ago

srl 15y ago
Old discussion: http://news.ycombinator.com/item?id=2894708 http://news.ycombinator.com/item?id=2894708 Personally, I'm happy for the repost - I was looking for this, but couldn't find it, just yesterday.
- topherjaynes 15y ago
  Agree, reposts help me when searching in google site:http://news.ycombinator.com/ http://news.ycombinator.com/ Also, it gives a chance to add to the discussion of what's been happening in the domain in the past 181 days!
- alexchamberlain 15y ago
  Sometimes I wish reposting of old content at the same URL was allowed.
andrewthornton 15y ago
This is great content, but it is so hard to read. The light blue against the light gray is rough on the eyes, and the font size/style isn't helping either.
- david_a_r_kemp 15y ago
  readable http://readable.tastefulwords.com/ http://readable.tastefulwords.com/ makes a reasonable job of it, but it's clearly not built to be read.
- mauriciob 15y ago
  Best way to read it is selecting all the text. The white text on red "background" is not bad.
- wtetzner 15y ago
  You might want to try readability: http://www.readability.com/ http://www.readability.com/
  - fady 15y ago
    readability is a great option, but this site is brand new. it's not like it has outdated typography, etc.. you would expect the site to be readable without any tools :\
  - why-el 15y ago
    I actually used readability to prettify the article and send it to my kindle. Sadly though, it stayed on my Kindle for a long time, hopefully I will read it soon.
- tomkin 15y ago
  I was just about to post something to that effect. The site feels like Microsoft MSDN. In the case of documentation or technical information, you'll never go wrong by using a large, easy-to-read font with a strong contrast between background and text color.
- truncate 15y ago
  Here's the article at author's website http://taligarsiel.com/Projects/howbrowserswork1.htm http://taligarsiel.com/Projects/howbrowserswork1.htm.
  - duaneb 15y ago
    That's much better; thank you!
  - moonboots 15y ago
    "Tali published her research on her site, but we knew it deserved a larger audience, so we've cleaned it up and republished it here."
- fady 15y ago
  could not agree more. very hard to read, seems opaque in a way when trying to read the text. Update: so, i removed the dot texture on the page and also changed the google webfont to "gudea" instead of "open sans" and it seems to be a lot more readable. i think if the authors of the site changed the font to something more readable, all would be good. the font i choose was just picked at random. see my edits: http://dl.dropbox.com/u/103326/after_Gudea.png http://dl.dropbox.com/u/103326/after_Gudea.png
- sairion 15y ago
  It really is. javascript:void((function(){jQuery("body").css("font-family","hevetica,arial,sans-serif");})()); Changing it to Helvetica (or Arial) make a little bit easier to read (Putting above code into URL bar does this).
monsterix 15y ago
Great work! The guy who does photoshop job for you is simply amazing. From a high-level view, I hope we see super-intense competition of tablet browsers soon. Because looking at -webkit-on-iPad, I feel IE6 has just been re-invented.
- duaneb 15y ago
  What's so bad about webkit on the iPad? It's my favorite way to browse the web.
  - monsterix 15y ago
    Yeah it's good when it comes to rendering neatly done content websites - i.e consumption. But when it comes to creating the content, such as having an email done with browser based rich text-editing, or file-input for attachments it falls flat on the face. Example of a discussion: http://answers.37signals.com/basecamp/2659-ipad-file-uploading http://answers.37signals.com/basecamp/2659-ipad-file-uploadi...
gioele 15y ago
> So a lot of the parser code is fixing the HTML author mistakes. This is probably my biggest problem with most of the ideology behind HTML 5. You learn from past mistakes and HTML has no way to teach you anything because there is no error-correction-test feedback cycle. How do you learn proper HTML? You write something, you load it in a browser, does it show properly? It was right. Does it show in a funny way? There must be something wrong. What? Who knows. Nobody knows because you cannot, by definition create _wrong_ HTML 5. It is just that you did not write what you think you wrote. There are validators you can use to validate your page. But most of the times they will tell you that your page is wrong while it actually looks perfectly as you wish in the browser. The browser is not complaining and the page looks good... these validators must be too picky, a waste of time. The problem that killed XHTML was the draconian error handling in most browser. Only Opera had a good way to handle XHTML errors: a banner that told you that the page had an error and which error. Under that banner the page, rendered as best as possible. That was a good way to learn (and to tell people that the person who wrote the site is not a pro).
- jacobr 15y ago
  HTML5 does not mean that any markup is valid. The specification simply defines what a user agent should do when it encounters invalid markup. Previously user agents had to guess what others (IE) did when they encountered a piece of invalid markup.
  - monsterix 15y ago
    I don't see much of problem with loosely typed markup. Because markup is not supposed to be written by only the highly skilled engineers. An average Joe is supposed to feel great about writing something that renders the way he/she wants without having to go into deeper stuff like semantics, validity or even cross-browser. This is something that should be left to people who need to know it in their strata, isn't it?
    - gioele 15y ago
      > An average Joe is supposed to feel great about writing something that renders Indeed HTML is great for that, but the problem is that you never "level up". Once your content renders, you are done. A lot of Joes may be interested in how things work behind the scenes or in making things "correct" more than "just working". It would be great, from a pedagogical point of view, to have browser render Joe's content (for instant gratification) but also to point out that "Ehi, on line 32 you closed </p> before </i>. It should be the other way around because of this rule called nesting, have a look at it". I think we are wasting a lot of man-years around the globe for the lack of such warnings. In the education of many people, compiler errors and warning had exactly this function: they made you do whatever you wanted (as long as decent) but they would also pointed out the basic mistakes ("Ehi, on line 14 you print the variable prg_name, but that variable has not been initialized, beware").
Mavrik 15y ago
sigh Is it too much to ask HTML5 advocates to make sure their pages render properly on an iPad?
- monsterix 15y ago
  And also you guys, being at that level, should insist on Apple guys to respect web-standards for file-input on iPad Safari. This is gonna get corny very soon.
awt 15y ago
I desperately need this in ebook format so I can read it in chunks, leave it, come back to it, etc. [edit] Found something -- dotEPUB works great.
Erunno 15y ago
Started reading the document tripped over a statement at the beginning: "It is important to note that Chrome, unlike most browsers, holds multiple instances of the rendering engine - one for each tab. Each tab is a separate process." This is not true and has never been true to my knowledge without restricting the statement. Chrome will open links opened in a new tab/window which point to the same domain in the same content process and it will start mixing different domains in the same content processes once a certain threshold is reached (whether this is a hard-coded upper limit on how many content processes may exist simultaneously or if this is calculated dynamically I do not know).
camtarn 15y ago
A few interesting quotes about performance optimization from the article: "Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed. Webkit blocks scripts only when they try to access certain style properties that may be affected by unloaded style sheets." "WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing [optimization] for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child." "After parsing the style sheet, the rules are added to one of several hash maps, according to the selector. There are maps by id, by class name, by tag name and a general map for anything that doesn't fit into those categories." Every element then looks in these maps to find rules which might apply to it.

282 points by Garbage 15y ago

srl 15y ago

Old discussion: http://news.ycombinator.com/item?id=2894708 http://news.ycombinator.com/item?id=2894708 Personally, I'm happy for the repost - I was looking for this, but couldn't find it, just yesterday.

topherjaynes 15y ago
Agree, reposts help me when searching in google site:http://news.ycombinator.com/ http://news.ycombinator.com/ Also, it gives a chance to add to the discussion of what's been happening in the domain in the past 181 days!
alexchamberlain 15y ago
Sometimes I wish reposting of old content at the same URL was allowed.

andrewthornton 15y ago

This is great content, but it is so hard to read. The light blue against the light gray is rough on the eyes, and the font size/style isn't helping either.

david_a_r_kemp 15y ago
readable http://readable.tastefulwords.com/ http://readable.tastefulwords.com/ makes a reasonable job of it, but it's clearly not built to be read.
mauriciob 15y ago
Best way to read it is selecting all the text. The white text on red "background" is not bad.
wtetzner 15y ago
You might want to try readability: http://www.readability.com/ http://www.readability.com/
- fady 15y ago
  readability is a great option, but this site is brand new. it's not like it has outdated typography, etc.. you would expect the site to be readable without any tools :\
- why-el 15y ago
  I actually used readability to prettify the article and send it to my kindle. Sadly though, it stayed on my Kindle for a long time, hopefully I will read it soon.
tomkin 15y ago
I was just about to post something to that effect. The site feels like Microsoft MSDN. In the case of documentation or technical information, you'll never go wrong by using a large, easy-to-read font with a strong contrast between background and text color.
truncate 15y ago
Here's the article at author's website http://taligarsiel.com/Projects/howbrowserswork1.htm http://taligarsiel.com/Projects/howbrowserswork1.htm.
- duaneb 15y ago
  That's much better; thank you!
- moonboots 15y ago
  "Tali published her research on her site, but we knew it deserved a larger audience, so we've cleaned it up and republished it here."
fady 15y ago
could not agree more. very hard to read, seems opaque in a way when trying to read the text. Update: so, i removed the dot texture on the page and also changed the google webfont to "gudea" instead of "open sans" and it seems to be a lot more readable. i think if the authors of the site changed the font to something more readable, all would be good. the font i choose was just picked at random. see my edits: http://dl.dropbox.com/u/103326/after_Gudea.png http://dl.dropbox.com/u/103326/after_Gudea.png
sairion 15y ago
It really is. javascript:void((function(){jQuery("body").css("font-family","hevetica,arial,sans-serif");})()); Changing it to Helvetica (or Arial) make a little bit easier to read (Putting above code into URL bar does this).

monsterix 15y ago

Great work! The guy who does photoshop job for you is simply amazing. From a high-level view, I hope we see super-intense competition of tablet browsers soon. Because looking at -webkit-on-iPad, I feel IE6 has just been re-invented.

duaneb 15y ago
What's so bad about webkit on the iPad? It's my favorite way to browse the web.
- monsterix 15y ago
  Yeah it's good when it comes to rendering neatly done content websites - i.e consumption. But when it comes to creating the content, such as having an email done with browser based rich text-editing, or file-input for attachments it falls flat on the face. Example of a discussion: http://answers.37signals.com/basecamp/2659-ipad-file-uploading http://answers.37signals.com/basecamp/2659-ipad-file-uploadi...

gioele 15y ago

> So a lot of the parser code is fixing the HTML author mistakes. This is probably my biggest problem with most of the ideology behind HTML 5. You learn from past mistakes and HTML has no way to teach you anything because there is no error-correction-test feedback cycle. How do you learn proper HTML? You write something, you load it in a browser, does it show properly? It was right. Does it show in a funny way? There must be something wrong. What? Who knows. Nobody knows because you cannot, by definition create _wrong_ HTML 5. It is just that you did not write what you think you wrote. There are validators you can use to validate your page. But most of the times they will tell you that your page is wrong while it actually looks perfectly as you wish in the browser. The browser is not complaining and the page looks good... these validators must be too picky, a waste of time. The problem that killed XHTML was the draconian error handling in most browser. Only Opera had a good way to handle XHTML errors: a banner that told you that the page had an error and which error. Under that banner the page, rendered as best as possible. That was a good way to learn (and to tell people that the person who wrote the site is not a pro).

jacobr 15y ago
HTML5 does not mean that any markup is valid. The specification simply defines what a user agent should do when it encounters invalid markup. Previously user agents had to guess what others (IE) did when they encountered a piece of invalid markup.
- monsterix 15y ago
  I don't see much of problem with loosely typed markup. Because markup is not supposed to be written by only the highly skilled engineers. An average Joe is supposed to feel great about writing something that renders the way he/she wants without having to go into deeper stuff like semantics, validity or even cross-browser. This is something that should be left to people who need to know it in their strata, isn't it?
  - gioele 15y ago
    > An average Joe is supposed to feel great about writing something that renders Indeed HTML is great for that, but the problem is that you never "level up". Once your content renders, you are done. A lot of Joes may be interested in how things work behind the scenes or in making things "correct" more than "just working". It would be great, from a pedagogical point of view, to have browser render Joe's content (for instant gratification) but also to point out that "Ehi, on line 32 you closed </p> before </i>. It should be the other way around because of this rule called nesting, have a look at it". I think we are wasting a lot of man-years around the globe for the lack of such warnings. In the education of many people, compiler errors and warning had exactly this function: they made you do whatever you wanted (as long as decent) but they would also pointed out the basic mistakes ("Ehi, on line 14 you print the variable prg_name, but that variable has not been initialized, beware").

Mavrik 15y ago

sigh Is it too much to ask HTML5 advocates to make sure their pages render properly on an iPad?

monsterix 15y ago
And also you guys, being at that level, should insist on Apple guys to respect web-standards for file-input on iPad Safari. This is gonna get corny very soon.

awt 15y ago

I desperately need this in ebook format so I can read it in chunks, leave it, come back to it, etc. [edit] Found something -- dotEPUB works great.

Erunno 15y ago

Started reading the document tripped over a statement at the beginning: "It is important to note that Chrome, unlike most browsers, holds multiple instances of the rendering engine - one for each tab. Each tab is a separate process." This is not true and has never been true to my knowledge without restricting the statement. Chrome will open links opened in a new tab/window which point to the same domain in the same content process and it will start mixing different domains in the same content processes once a certain threshold is reached (whether this is a hard-coded upper limit on how many content processes may exist simultaneously or if this is calculated dynamically I do not know).

camtarn 15y ago

A few interesting quotes about performance optimization from the article: "Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed. Webkit blocks scripts only when they try to access certain style properties that may be affected by unloaded style sheets." "WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing [optimization] for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child." "After parsing the style sheet, the rules are added to one of several hash maps, according to the selector. There are maps by id, by class name, by tag name and a general map for anything that doesn't fit into those categories." Every element then looks in these maps to find rules which might apply to it.