Browsers | UA - User Agents

ssb (Site-Specific Browser)

ssb is a software application dedicated to accessing pages from a single source (site) on a network (Internet or Intranet).

ssbs typically simplify complex functionality in web browers by excluding unneccessary, and unwanted features, options, and browser chrome.

ssbs are typically implemented through the use of application frameworks (like Gecko, WebKit, etc.)

Software utilities that produce ssbs:

• Fluid (Max OS X only)
• Google Chrome ("Application Shortcut" feature, thought not entirely sand-boxed like Mozilla Prism
• Mailplane (Max OS X only)
• Mozilla Prism (cross-platform, Flash compatible, and true application isolation (e.g., cookies); discontinued)
• Epiphany ("Application Shortcut" feature; as of late 2011 Epiphany has problems playing nicely with Flash
• ie9
• NoScript's abe module

ria Platforms that produce ssbs:

• JavaFX 2.0
• Adobe Air
• Curl air platform
• Microsoft Silverlight

Widget Engines that produce ssbs:

• Opera Widgets

Site-Specific Browser

Browser Rendering

• Browsers parse out html source code and from it construct the dom tree, which is a data representation of the document, where every html element has a corresponding node in the tree, and the text (content) between the elements gets a text node representation. The root node in the dom tree is the documentElement (the html element).
• The browser then parses css; the styling information cascades.
• Next the render tree is constructed, which is similar to the dom tree, but not the same. Render tree understands styles, so if an element has display:none set, it will not be represented in the render tree; this is the same for other invisible elements, like head (which actually have display:none set in the user agent style sheet. Some dom elements are represented by more than one node in the render tree, for example, like when text nodes for every line in a p needs a render node. A node in the render tree is called a frame or box (as in the css box model). Each of these nodes has css box properties.
• After the construction of the render tree, the browser can paint (draw) the render tree nodes on the screen.

Paints always have at least one initial page layout, unless you are serving up blank documents. Changing input information that was used to construct the render tree may result in one or both of the following:

Repaints and Reflows

Reflow, also known as layout, or layouting, are parts or all of the render tree that need to be revalidated and have node dimensions recalculated.

Note: there is always at least one reflow, the initial layout of the page.

Repaint, also known as redraw, is a part of the screen that needs to be updated, either because of changes in geometric properties of an node, or because of stylistic change, like changing the background-color.

Triggering a Reflow/Repaint

Anything altering input information used when constructing the rendering tree can cause a repaint, reflow, such as:

• Adding, removing, updating dom nodes
• Hiding a dom node via display:none (reflow and repaint) or visibility:hidden (repaint only, because of no geometry changes.
• Moving, animating a dom node in the document.
• Adding a style sheet, tweaking style properties.
• User action such as resizing the window, changin the font size or scrolling.

Reflows and repaints are expensive, use them carefully.

Rendering: Repaint, Reflow/Relayout, Restyle

Browser Features

JavaScript Profilers

JavaScript profilers are browser features or add-ons that allow you to determine what parts of your code are fast or slow. They can help you to identify unnecessary or extraneous code that needs to be refactored. They can also be used to benchmark two or more ways of accomplishing the same task, or to determine if a certain effect is the reason for a webapp’s slowness.

JavaScript profilers give you an overview on the performance of your application on the JavaScript function level by measuring the time it takes to execute each individual function from its starts to its end. The gross execution time of a function is the overall time it takes to execute it from top to bottom. The net execution time is the gross execution time minus the time it took to execute functions called from the function.

Some functions get called more often than others. Profilers usually give you the time it took for all invocations to run as well as the average and minimum and maximum execution time.

Profilers are great for wpo for improving page/application speed. Digging into profiling will help find out where optimizations could yield the greatest benefit.

Note: optimizations will often have negative impact on the maintainability of your source code and should thus only be applied if necessary.

Improving the Performance of Your html5 App

Browser Plug-Ins

Browser Plug-Ins are sets of software components extending specific capabilities to the browser. When supported, browser plug-ins enable customizing the functionality of an application.

Like Flash, browser plug-ins provide an application framework and runtime for web developers to write plug-ins to extend the functionality of sites/applications.

Get Ready for Plug-in Free Browsing

Popular browser plug-ins are listed below:

Adobe Flash Player

Adobe Flash Player in ie installs as an Microsoft ActiveX object.

Adobe Acrobat Reader

Adobe Acrobat Reader in ie is an bho (Browser Helper Object).

Microsoft Silverlight

Apple Quicktime

Java Applets

Browser Issue Trackers

• Mozilla's bugzilla
• WebKit bugs
• Chrome bugs
• Opera bugs
• Internet Explorer Feedback Program

There are also wml browsers for mobile phones

4th generation browsers allow certain parts of the document to be hidden or shown, moved around on the page or have their colors changed. The functionality of many 4th generation browsers is based on proprietary technology. 5th generation browsers allow everything that 4th generation browsers allow, and in addition, they allow any parts of the document to be created or deleted, or to have their content re-written. They are by far the most versatile and allow maximum control over the contents of the web page using the w3c's dom standards.

• Amaya
• Amiga Voyager
• AWeb
• Clue browser
• Dillo
• Escape 4
• Escape/Evo 5
• GNUscape Emacs-W3
• HotJava Browser 3
• iBrowse
• iCab 2
• iCab 3
• ICEbrowser
• Internet Explorer 4 (Windows)
• (Internet) Explorer 4 (Mac)
• Internet Explorer 5-8
• Internet) Explorer 5.x (Mac)
• iPanel MicroBrowser
• KHTML/WebKit (Konqueror/Safari)
• Links
• Lunascape Web Browser - The World's Fastest Browser Ever
• Lynx
• Maxthon Browser
• Mozilla/Firefox
• NetBox
• NetFront 3+
• Netscape 4
• Netscape Archive
• The Netscape Unofficial faq
• OmniWeb 4.2-
• OpenTV / SpyGlass Device Mosaic
• Opera 6-
• Opera 7-9
• Tkhtml Hv3 (HTML Viewer)
• WebTV / MSN TV

User interface

Most major web browsers have these user interface elements in common:

• Back and forward buttons to go back to the previous resource and forward again.
• A refresh or reload button to reload the current resource.
• A stop button to cancel loading the resource. In some browsers, the stop button is merged with the reload button.
• A home button to return to the user's home page
• An address bar to input the Uniform Resource Identifier (uri) of the desired resource and display it.
• A search bar to input terms into a search engine
• A status bar to display progress in loading the resource and also the uri of links when the cursor hovers over them, and page zooming capability.

Major browsers also possess incremental find features to search within a web page.

Browser Tools

RoboHornet

RoboHornet is am open source test suite benchmark designed around performance pain points real web developers care about.

References & Resources

• How Browsers Work
• evolt browser install archive