Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

Browsers: The Very Basics – Part 2

Karissa Wingate

Error handling:

One of the reasons that HTML standards are so important is because HTML is a language that has historically been written with a lot of errors and now has many different versions. One of the rules that has been generally agreed upon by browser makers is “don’t break the web”. This means that all new browser versions have to be able to work with all the older standards and handle errors in code in a meaningful way.

For example, if a web developer nests a table inside another table, but the interior table isn’t inside a table cell, webkit will pull the interior table out, and make them two tables next to each other. This can have serious effects on styling and manipulation with javascript; e.g. it will be awfully hard for your javascript to find the table inside the table when it just isn’t there.

Another example is that a <form> nested inside a <form> will be ignored by webkit. Nesting 20+ of the same tags will cause all the tags above #20 to be ignored. (Apparently some crazy website for a Mexican private school, with a whole bunch of <b> tags. Thankfully I think they fired that guy and got a new one, because their website is pretty spiffy now.)

Web standards and semantic HTML will avoid most errors, but if you start to see strange things happening in the browser, make sure you check your code for mistakes. Of course, if we all comply to the standard rules, the browser developers don’t have to make as many decisions about how to handle different kinds of errors, and there will be less variation between browsers.

Disorder of operations:

Synchronous. Its one of those annoying 3 dollar words that people who know what it means throw it around like its sooo helpful to everyone else. For us, in terms of javascript, it boils down to this: all the scripts get loaded and processed in order, when the browser gets to them. So if you place your javascript in the head of your HTML, the browser will stop working on the DOM tree and take a break to load up the Javascript. if you have a giant library to load, or you have a lot of files, your user will probably get bored and navigate away too look at funny dog gifs or something. HTML5 now adds a option to make a script load on a different thread (Asynchronously, aka multi-tasking, more on that later). Not every browser has HTML5 working perfectly yet, and the golden rule is: Don’t break the web!

Now Webkit and Firefox are nice folks (other wise known as if you want a feature, you can built it yourself or wait for someone else too) and they have done a little magic to skip through the DOM tree and try to grab the next required resources while the main parser is busy working on the DOM. It’s a handy feature, but it has its limitations. It will speed up your website’s loading time in comparison to a completely synchronous browser.

Style Sheets are a little different than everything else. They kinda stand alone, and in theory shouldn’t affect the DOM tree, but if you’re loading a script that needs something to be styled properly before it runs, and the browser runs it too soon, you can end up with all kinds of head aches. Basically most modern browsers refuse to load scripts until the CSS has been parsed (Firefox), or they refuse to run scripts that rely on properly rendered CSS (Webkit).

2 Comments. Leave new

[…] This is also a very high level, simplified version of how the browser thinks. Each browser works a little differently, and that can effect a lot of different things, from paint times to error handling. See part two of Browsers: The Very Basics for more information. […]

[…] was originally posted at blog.tallan.com This entry was posted in Uncategorized on April 10, 2013 by […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\