Prerendering: Revisit

PRERENDERING REVISIT

WARNINGLONG session.

Ask for a break whenever you want.

credit: http://www.quickmeme.com/meme/352t2a

http://www.quickmeme.com/meme/352t2a

RESOURCE HINTS• dns-prefetch, preconnect, prefetch, prerender

Resource Hints Concept

credit: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o

https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o

Examples

https://www.w3.org/TR/resource-hints/

https://www.w3.org/TR/resource-hints/

Prerender in Chromium

• Minimizing resource contention. • Handling dynamic media [video, audio, plugins, canvas]

• Cancellation of pages on certain corner cases.

• Minimizing server side effects.

• Mutations to shared local storage [cookies, sessionStorage, etc.]

Main concerns:

credit: https://www.chromium.org/developers/design-documents/prerender

https://www.chromium.org/developers/design-documents/prerender

Prerender Cancellation in Chromium• The top-level page is not an HTTP/HTTPS scheme, either on the initial link or during any server-side or client-

side redirects. For example, both ftp are canceled. Content scripts are allowed to run on prerendered pages.

• window.opener would be non-null when the page is navigated to.

• A download is triggered. The download is cancelled before it starts.

• A request is issued which is not a GET, HEAD, POST, OPTIONS, or TRACE.

• A authentication prompt would appear.

• An SSL Client Certificate is requested and requires the user to select a certificate.

• A script tries to open a new window.

• alert() is called.

• window.print() is called.

• Any of the resources on the page are flagged by Safe Browsing as malware or phishing.

• The fragment on the page does not match the navigated-to location.

Monitoring Prerender in Chromium

XPFE• from XUL elements to docshells

nsWebShellWindow

nsWebShellWindow

browser.xul

nsWebShellWindow

<tabbrowser/>browser.xul

browser.xul

<tabbrowser/>

<browser/><browser/>

<browser/>

content.js

DocShell XPCOM Module

browser.js…

browser/base/content/browser.xulbrowser/base/content/tabbrowser.xmltoolkit/content/widgets/browser.xmltoolkit/content/widgets/remote-browser.xmlbrowser/base/content/global-scripts.incbrowser/base/content/browser.jsbrowser/base/content/content.js

major source files

Usually referred as “gBrowser”

Browser High-level Overview

browser.xul

<tabbrowser/>

<remote-browser/><remote-browser/>

<remote-browser/>

(content process)

browser-child.jsmessage managerbrowser-child.jsmessage manager

message manager browser-child.js

content.jsbrowser.js

…

DocShell XPCOM Module DocShell XPCOM ModulePBrowser.ipdl

Browser High-level Overview (e10s)

DOCSHELL• the scary evil thing

The Ancient WebShell…

credit: http://www-archive.mozilla.org/projects/webshell/design.html

http://www-archive.mozilla.org/projects/webshell/design.html

Redesign Plan

credits:http://www.symphonyinc.co.jp/mozilla/mazmoz/mazmoz_e/mm_embed2.html https://developer.mozilla.org/en-US/docs/Gecko/Embedding_Mozilla/API_overview

http://www.symphonyinc.co.jp/mozilla/mazmoz/mazmoz_e/mm_embed2.html

https://developer.mozilla.org/en-US/docs/Gecko/Embedding_Mozilla/API_overview

DocLoader & DocShell Tree

chrome / non-e10s process

Chrome or non-e10s Tree

nsDocLoader

nsDocLoader

nsDocLoader

nsDocLoader

nsDocLoader

nsDocLoader

nsDocLoader

nsDocLoader

do_GetService(“@mozilla.org/docloaderservice;1”)

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

chrome tree owner

content tree owner

e10s content process

Content Tree in e10s

nsDocLoader

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

do_GetService(“@mozilla.org/docloaderservice;1”)

tab A tree owner

tab B tree owner

Modules Relationship

DOM

Layout

DocShell

Widget View Presentation Layer

Model Layer

Modules Relationship (complex ver.)

LoadURI

RENDERING• the very basic concept

Document Parsing Components

credit: http://www-archive.mozilla.org/newlayout/doc/

(slightly outdated)

http://www-archive.mozilla.org/newlayout/doc/

Document Rendering Components



Rendering Data Flow



More on Layout & RenderingGoto http://dbaron.org/talks/

http://dbaron.org/talks/

SESSION HISTORY• browsing context, session history and bfcache

Browsing context

A browsing context is an environment in which Document objects are presented to the user.

The docshell is the toplevel object responsible for managing a single browsing context.

credit: https://developer.mozilla.org/en-US/docs/Inner_and_outer_windows

https://developer.mozilla.org/en-US/docs/Inner_and_outer_windows

Session History

The sequence of Documents in a browsing context is its session history.

Session history consists of a flat list of session history entries.

Session history entry = URL + state + title + Document + form data + scroll position + …, etc.

interface History { readonly attribute long length; readonly attribute any state; void go(optional long delta); void back(); void forward(); void pushState(any data, DOMString title, optional DOMString? url = null); void replaceState(any data, DOMString title, optional DOMString? url = null);};

Session History

Multi-level History Entries

page2

frame1

page2

frame1


page2

frame1

page2

frame1frame2


DOM WINDOW• inner & outer

Window

/*sealed*/ interface Window : EventTarget { // the current browsing context [Unforgeable] readonly attribute WindowProxy window; [Unforgeable] readonly attribute Document document; readonly attribute History history;

// other browsing contexts [Unforgeable] readonly attribute WindowProxy top; [Replaceable] readonly attribute WindowProxy parent; WindowProxy open(optional DOMString url = "about:blank", optional DOMString target = “_blank”, [TreatNullAs=EmptyString] optional DOMString features = "", optional boolean replace = false); getter WindowProxy (unsigned long index); getter object (DOMString name);

// the user agent readonly attribute Navigator navigator; };

(Partial) Window IDL definition

WindowProxy

credit: http://d.hatena.ne.jp/cou929_la/20110310/1299767973

var w = window.open();

http://d.hatena.ne.jp/cou929_la/20110310/1299767973

Split WindowIn SpiderMonkey, a split object is made up of two JSObjects: an inner object and an outer object.The inner window object is different for each page a browser window visits. It serves as the "globals" object and provides the JSPrincipals for scripts on that page.The outer window object is the object returned by window.open. It represents the window or tab itself and survives as the user navigates in that window or tab.

The inner window => HTML5 Window object. The outer window => HTML5 WindowProxy object.

Nested Windows



Nested Windows

browsing context



Nested Windows

var w = window.self;

browsing context



Nested Windows

var w = window.self;

var w = window.parent;

var w = window.top;

browsing context



Inner / Outer Window

Was Ideal Plan

Inner / Outer Window

Was Ideal PlanNow

WebIDL Bindings

'Window': { 'nativeType': 'nsGlobalWindow', 'binaryNames': { 'postMessage': 'postMessageMoz', },},

'WindowProxy': { 'nativeType': 'nsPIDOMWindowOuter', 'headerFile': 'nsPIDOMWindow.h', 'concrete': False},

dom/bindings/Bindings.conf

PRERENDERgecko’s (ongoing) implementation

Swapping

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

nsDocShell

XUL Doc

xul:browser

xul:browser

nsFrameLoader

nsFrameLoader

Swapping DocShells vs. ContentViewers

Swapping DocShells


Swapping Viewers


• Swapping DocShells.

• The bfcache issue.

• Swapping ContentViewers.

• Almost impossible to prerender out-of-process.

Solutions?

• Connects multiple session histories.

• With pseudo history entries, or

• With mIndexOffset, mExtraLength

• How to update SessionStore?

• How to manage lifetime of grouped tabs?

• Other ways?

BONUS!chromium process models

Process Models in Chromium

• Process-per-site-instance (*) • Process-per-site • Process-per-tab • Single process

credit: https://www.chromium.org/developers/design-documents/process-models http://www.aosabook.org/en/posa/high-performance-networking-in-chrome.html

https://www.chromium.org/developers/design-documents/process-models

http://www.aosabook.org/en/posa/high-performance-networking-in-chrome.html

General Limitations• Script-connected tabs (unit of related browsing contexts) are always in the same process.http://w3c.github.io/html/single-page.html#groupings-of-browsing-contexts

• Chromium only swaps renderer processes for browser-initiated cross-site navigations, such as typing a URL in the location bar or following a bookmark (unless using rel=noreferrer target=_blank).

• Subframes are currently rendered in the same process as their parent page (OOPIF is ongoing).

• There is a limit to the number of renderer processes that Chromium will create.

http://w3c.github.io/html/single-page.html#groupings-of-browsing-contexts

Out-of-Process iframes (OOPIFs)• Process-per-frame, or more preciously unit of related similar-origin browsing context. http://w3c.github.io/html/single-page.html#units-of-related-similar-origin-browsing-contexts

• Support more JS-IPC excluding those need access to page content.

• On the way to Site Isolation. https://www.chromium.org/developers/design-documents/site-isolation

credit: https://www.chromium.org/developers/design-documents/oop-iframes

http://w3c.github.io/html/single-page.html#units-of-related-similar-origin-browsing-contexts

https://www.chromium.org/developers/design-documents/site-isolation

https://www.chromium.org/developers/design-documents/oop-iframes

Prerendering: Revisit

Technology

Transcript of Prerendering: Revisit