Browser vs Layout Engine

Ever since I started working on a Front End Heavy Project which involves significant bit of HTML5 and CSS3 as well as elements of responsive design, I have heard terms like WebKit, Gecko, Browser Engine, JS Engine,Rendering Engine and so on.

Some of these terms are clear to me but some are not. So, I decided to do some digging into this area to self educate myself.

Findings are good enough to share with wider audience in the hope of being helpful to someone in future.

• What is WebKit?  

WebKit is an open source rendering engine which parses HTML, CSS and JavaScript and renders the web page in a browser.

Standard Components of WebKit are WebComponents, JSCore (used for JS parsing and execution) as well as platform specific stack for actually rendering the page.

Source  of Image http://www.paulirish.com/2013/webkit-for-developers/

It is all very well explained in an article here

• What are the other rendering engines in the wild? 

Well, there are numerous rendering engines (besides webkit)  but most notable ones are Trident (from MicroSoft) and Gecko (from Mozilla)

Conceptually, they are pretty similar to WebKit but actual differentiation lies in the implementation.

• What is a Browser?

Browser is a software which is used to access resources over the internet (or intranet).

Browsers use rendering engine like WebKit/Gecko to render the page but have additional code for Browser UI as well as dealing with different persistence layer like Cookies/LocalStorage/WebSQL/IndexedDB

Image Source (how browsers work?)

Standard Components of a Browser are:

• Parsing (HTML, XML, CSS, JavaScript)
• Layout (common in all WebKit browsers)
• Text and graphics rendering
• Image decoding
• GPU interaction
• Network access
• Hardware acceleration

More information can be found here and here

• Does using WebKit mean that browsers will be compatible?

No, Just because 2 browsers are using WebKit, it does not mean that they will be compatible.

For example, Chrome (upto 27) and Safari are based on WebKit but as we can see from the diagrams above, there are lots of other components which vary from one browser to another browser (for example, Chrome uses V8 JS Engine where as Safari uses different engine) or from one OS to another OS (like Safari on Windows vs Safari on IPad)

It is a complex world out there!

How does Solr Sort Documents when their Score is Same

We have had cases when same keyword Search gives us results which are ordered randomly.

On digging deeper, it seems that if Score of documents are same then Solr is sorting them based on their internal DocId or the time when the documented was indexed.

To demonstrate this, I used a very simple schema:

Added few documents like this

<doc>
<str name="id">201</str>
<int name="rank_id">20111</int>
<str name="name">Perl Harbor</str>
</doc>

<doc>
<str name="id">2022</str>
<int name="rank_id">20111</int>
<str name="name">Perl Harbor</str>
</doc>

<doc>
<str name="id">1</str>
<int name="rank_id">20</int>
<str name="name">Perl Harbor</str>
</doc>

<doc>
<str name="id">2</str>
<int name="rank_id">21</int>
<str name="name">Perl Harbor</str>
</doc>

When doing a simple query, 

http://localhost:8983/solr/select?q=Perl+Harbor&start=0&rows=10&wt=xml&edismax=true&qf=name&q.op=AND&debugQuery=true

I get following documents which are in the order in which they were added

<doc>

<str name="id">201</str>

<int name="rank_id">20111</int>

<str name="name">Perl Harbor</str>

</doc>

<doc>

<str name="id">2022</str>

<int name="rank_id">20111</int>

<str name="name">Perl Harbor</str>

</doc>

<doc>

<str name="id">1</str>

<int name="rank_id">20</int>

<str name="name">Perl Harbor</str>

</doc>

<doc>

<str name="id">2</str>

<int name="rank_id">21</int>

<str name="name">Perl Harbor</str>

</doc>

This indicates that order is based on the order in which they were added to Solr.

You can see same question being asked here