Skip to content

0x353 Browser

1. History

A short timeline of major browsers

  • 1993: Mosaic (by Marc Andreessen and Eric Bina)
  • 1994: Netscape Navigator (same developers as Mosaic, introducing JavaScript)
  • 1995: IE (from Windows 95)
  • 1995: Opera
  • 1998: KHTML (browser engine developed by the KDE project)
  • 2002: Firefox (spiritual successor of Netscape Navigator)
  • 2003: Safari (engine is WebKit, fork of KHTML)
  • 2008: Chrome (engine is Blink, fork of WebKit)
  • 2015: Edge (from Windows 10, chromium based now)

2. Web API

Summary of important APIs from the Mozilla documents

2.1. DOM

DOM (Document Object Model) is a cross-language programming interface for accessing and modifying HTML and XML. DOM represents the documents as nodes and objects, so that programming language can connect to the page.

2.1.1. Events

Type (Event) the event interface represents an event which takes place in the DOM, there are multiple ways to trigger an event

  • click mouth phyiscally
  • triggered by async API
  • API such as HTMLElement.click()
  • generate an event and dispatch manually

Type (EventTarget) An EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for it

Methods:

  • AddEventListener
  • removeEventListener
  • dispatchEvent

Simple concept implementation is as follows

var EventTarget = function() {
  this.listeners = {};
};

EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    this.listeners[type] = [];
  }
  this.listeners[type].push(callback);
};

EventTarget.prototype.removeEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    return;
  }
  var stack = this.listeners[type];
  for (var i = 0, l = stack.length; i < l; i++) {
    if (stack[i] === callback){
      stack.splice(i, 1);
      return;
    }
  }
};

EventTarget.prototype.dispatchEvent = function(event) {
  if (!(event.type in this.listeners)) {
    return true;
  }
  var stack = this.listeners[event.type].slice();

  for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
  }
  return !event.defaultPrevented;
};

2.1.2. Nodes

\[\text{EventTarget} \to \text{Node} \to \text{Element} \to \text{HTMLElement}\]

Type (Node) It is an abstract base class representing the DOM tree structure, every object within the document is a kind of Node.

Properties

  • childNodes: return NodeList
  • appendChild

Type (NodeList) A collection of nodes

Type (Element) Element is based on Node, it is the most general base class from which all element objects in a Document inherits. For example, HTMLElement and SVGElement

Properties:

  • innerHTML
  • children
  • attributes

Methods:

  • append

Type (Document) the root node

2.2. Window

All global objects, functions, variables is the member of Window (even document)

2.2.1. Timer

Window (or other scopes) can have timer

API (setTimeout) set timer

late execution

setTimeout with 0 will not be executed until current thread (callstack) has done

function foo() {
  console.log('foo has been called');
}
setTimeout(foo, 0);
console.log('After setTimeout');

will render

After setTimeout
foo has been called

API (clearTimeout) clear timer

2.3. Storage API

2.3.1. Web Storage

Browser can store key/value pairs for each origin, (other way is to store in cookie)

  • SessionStorage: available during the page sesssion (as long as browser is open)
  • LocalStorage: persists even browser is closed

2.3.2. IndexedDB

useful to store large amount of structured data, it is a attribute attached to the window object as well

In Chrome, it is implemented using LevelDB

2.4. Communication API

2.4.1. XMLHttpRequest

Objects used to interact with servers, used heavily in AJAX.

Here is a short history of XMLHttpRequest and Fetch

2.4.2. Fetch API

Promised based API

2.4.3. WebSocket

API which enables two-way interactive communication

2.5. Worker API

Parallelism within JavaScript!!!

Supported from HTML5, each worker is running in a different Thread.

3. Framework

3.1. React

minimalist framework.

3.1.1. Element

Type (React element) A react element is a JavaScript object referring to a piece of the User Interface, it is passed to other libraries (e.g: React DOM)to be converted into native elements (e.g. DOM)

React.createElement(
    'type',
    { properties },
    [children ... ]
)

3.1.2. JSX

JSX stands for JavaScript XML. It is an extension for JavaScript that serves as a shortcut for calling React.createElement to create element and components (It is transpiled to createElement)

According to the official page, JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself.

// equivalent statements
const element = <h1>Hello, world</h1>;
const element = React.createElement('h1', null, 'Hello World');

Within JSX tags, we can only write JSX tags, not normal JavaScript. In order to write JavaScript, we use curly braces to tell the transpiler to process what is between the curly braces as normal JavaScript

const Welcome = () => {
    const name = 'JavaScript';
    return <p>Welcome {name}!</p>
}

3.1.3. Component

React Component A React component is a function or class that returns a valid React element.

state: maintain the observable data, when updated, the associated items will be rendered again. This should be treated as immutable. Use setState to update state

StrictMode: this will trigger re-render to find bugs.

3.1.4. Hooks

useEffect is a Hook equivalent of componentDidMount, componentDidUpdate, and componentWillUnmount combined

3.1.5. Test

3.2. Vue

between angular & react

3.3. Angular

everything built-in

4. Implementation

Summary of implementations and architecture related to browsers engines, in particular, blink (chromium's engine)

Here is the chromium src code.

4.1. Multiprocess Architecture

  • browser process: the main process which hosts UI and manages tab, plugin processes
  • renderer process: tab-specific process, can IPC with browser process, contained in sandbox (for security). Each iframe is separated into one process (site-isolation)

4.2. Memory Management

  • GC: oilpan

4.3. Renderer Model

Blink's renderer is a stage-based engine, easy to implement partial invalidation

  • Stage 1: parse HTML into DOM tree
  • Stage 2: apply CSS style to DOM
  • Stage 3: compute layout (x, y coordinate) for each element, building layout tree
  • Stage 4: partition regions into independent layers
  • Stage 5: raster

4.4. Others

  • Chrome source code is around 25m lines (Linux kernel has 28m)

5. Automation

5.1. Puppeteer

controls Chrome/Chromium using DevTools Protocol

5.1.1. Page

Page typically represents a single tab

  • $(selector): handle version of document.querySelector
  • $$(selector): handle version of document.querySelectorAll
  • evaluate(pageFunction, args): evaluate a pageFunction in the page's context (e.g. console.log in pageFunction will print into browser's console instead of terminal stdout)

5.1.2. ElementHandle

ElementHandle represents an in-page DOM element (it is not equivalent to DOM element). It prevents DOM element from being garbage-collected.

It can be combined with Page.$eval and Page.evaluate()

6. Reference

[1] Mozilla MDN Documentations