Browser


A browser (also: web browser) is a computer program that allows you to view documents and data and navigate the world wide web. Browsers can display different types of information resources; primarily HTML documents, however, other file types and media content are possible too, such as PDF, JPEG, MPEG, GIF or the meta markup language. Using special plug-ins and applicable settings, browsers further support Flash, JavaScript, or Java Applets to make interactive media content available or forward e-mail addresses to a mail program.

600x400-Browser-01.png

General information

Browser are used in PCs to surf the Internet and browse webpages. Based on the English verb “to browse,” browsers allow one to perform several functions including searching, browsing, and scrolling of Internet resources. Typically, browsers are pre-installed on a computer system. Mobile devices, such as smartphones, tablets, or phablets contain mobile browsers. Known web browsers are Mozilla Firefox, Internet Explorer, Safari, Opera, and Google Chrome.

Worldwide, browsers differ significantly in their market shares. In Germany, Firefox is the most popular, whereas in the US, Google Chrome is the most used browser.[1] Historically, so-called browser wars were relevant for the development of today’s market shares.

How browsers work

Browsers are commonly graphical user interfaces for web applications. They offer a variety of functions to retrieve resources, navigate in them, perform searches or store bookmarks.

Browser usually work with the client-server model, in which the web client communicates with a server using standardized protocols (HTTP, HTTPS or FTP). If you access a URL address in the browser, it will contact the server. The URL contains a prefix that tells the server with which protocol the data should be retrieved. By entering an Internet address such as www.sample.com the browser uses the HTTP protocol and retrieves the data stored there.

If the resource is available and has been uniquely referenced by the correct address, the browser interprets the data and displays it to you. Such a display of data is also referred to as rendering. Retrieving a resource by means of a URL or URI is called fetching. The server responds to the browser by passing the requested HTML document and associated resources such as CSS or JavaScript files on to the browser. The layout engine of the browser is responsible for the conversion of the source code and JavaScript engines for the execution of scripts.

HTML rendering

The process of converting resources into websites can be shown in simplified form.

  • HTML markup and CSS tags are parsed and converted into a content tree. The content tree is a structure according to the Document Object Model (DOM), which abstractly consists of nodes and edges. The first node is the document itself, which starts like this:
<html></html>

The next node can be an HTML body which is specified this way:

 <body> </ body> 

This is followed by more tags such as paragraphs, images or divisions by nesting them in each HTML document.

  • The DOM content tree is transferred into a rendering structure based on the markup. This is basically the pattern for later display. Based on rectangles which have visual characteristics such as colors, positions, and dimensions, the layout is structurally constructed. The order of the rectangles depends on the display of your screen.
  • The layout of the content tree gets created now. Each DOM node receives the exact coordinates for display on the screen and possible additional style properties from the CSS files. The structure is transferred into a layout.
  • Painting is next: Each node of the render tree is displayed by the graphical user interface as it was specified in the HTML source code including the CSS properties.

The layout engine works successively to improve the user experience. The browser will initially show any data it received from the server without the entire document having to be parsed. The size of the files and technical requirements (client, layout engine, server, data transfer via broadband) affect the data transmission speed. Under favorable conditions, the load time will be no more than a few milliseconds. Functions such as compression, caching, and minifying can additionally improve the load time of resources.

You can now use the HTML document and click a link in the document, for example, or use the Forward and Back buttons. Such interactions can cause the process to start all over again, which is called HTML reflow.[2] As a rule, however, parts of the source are stored in the cache of the browser so that it does not have to be reloaded. Moreover, scripts may be loaded during the HTTP communication between the browser and server. This is frequently done on the user side via JavaScript injection. Scripts are called by the client and carried out without a new HTTP communication. This asynchronous data transmission reduces the calls to server files by the client and makes the web application interactive to a certain degree. The execution of scripts is done by JavaScript engines.

Text-based browsers

These types of browsers provide text only and are therefore referred to as a text-based browsers or headless browsers (examples: Lynx, Links, w3m). These browsers are used to display sites from the perspective of a computer program. Search engines use text-based browsers to parse resources and include them in their index. Text-based browsers are often part of crawlers, bots or spiders. However, you can use this kind of browser as well to test sites and emulate what the crawler of a search engine sees.[3]

Offline browsers

Offline browsers are mostly used for browsing local documents without an Internet connection. Default browsers (for example, Internet Explorer) also let you work offline. Bookmarks can be set and sites made available offline to retrieve them later.

Other browsers

Furthermore, there are many different special browsers that have been designed only for a particular system. Mobile browsers are one example; library search engines are another. Browsers for PDAs and other devices often have to be adapted to these systems.

Browsers: plug-ins, security and personalization

Plug-ins are small user programs that extend the functionality of a browser. Especially for search engine optimization, there are numerous browser plug-ins that enables one to check a webpage quickly and easily for specific on- and off-page factors. The metadata of a page or an IP address can be determined quickly by means of special plug-ins. Topic-specific toolbars can be installed in a browser to gain quick access to relevant data while browsing.

The security settings of browsers are extremely important when users want to protect themselves from attacks, tracking, or unwanted advertising. Typically, these settings must be specially adapted. Optional plug-ins suppress certain browser actions, such as Ghostery, AdBlocker or the disguising of IP addresses. Browsers such as Tor allowed you to surf the web anonymously without the use of personal data. Many browsers can now be visually and functionally personalized so that the browser conforms to the user’s wishes and meets high demands on data protection and privacy.

Importance for search engine optimization

Since browsers represent the program with which you can reach websites, they are relevant to search engine optimization and web design. The functionalities of websites should be tested with different browsers and devices. This seems to be particularly necessary in the commercial sector since online shops may lose revenue if individual processes do not run smoothly. Moreover, web designers and SEOs can influence numerous factors through programming, optimization, and testing. Examples are website load times, caching in browsers, data compression, minifying of resources, different usability and user experience aspects.

References

  1. Browser Statistics stetic.com. Accessed on 02/19/2016
  2. Notes on HTML Reflow www-archive.mozilla.org. Accessed on 02/19/2016
  3. What is a headless browser? blog.arhg.net. Accessed on 02/19/2016

Web Links