iCloud share available at http://tinyurl.com/hhxeegf

1. PRERENDERING
REVISIT

2. WARNING
LONG session.
Ask for a break whenever you want.
credit: http://www.quickmeme.com/meme/352t2a

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

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

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

6. 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

7. 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.

8. Monitoring Prerender in Chromium

9. XPFE
• from XUL elements to docshells

10. nsWebShellWindow

11. nsWebShellWindow
browser.xul

12. nsWebShellWindow
<tabbrowser/>
browser.xul

13. browser.xul
<tabbrowser/>
<browser/>
<browser/>
<browser/>
content.js
DocShell XPCOM Module
browser.js
…
browser/base/content/browser.xul
browser/base/content/tabbrowser.xml
toolkit/content/widgets/browser.xml
toolkit/content/widgets/remote-browser.xml
browser/base/content/global-scripts.inc
browser/base/content/browser.js
browser/base/content/content.js
major source files
Usually referred as “gBrowser”

14. Browser High-level Overview

15. browser.xul
<tabbrowser/>
<remote-browser/>
<remote-browser/>
<remote-browser/>
(content process)
browser-child.jsmessage manager
browser-child.jsmessage manager
message manager browser-child.js
content.js
browser.js
…
DocShell XPCOM Module DocShell XPCOM ModulePBrowser.ipdl

16. Browser High-level Overview (e10s)

17. DOCSHELL
• the scary evil thing

18. The Ancient
WebShell…
credit: http://www-archive.mozilla.org/projects/webshell/design.html

19. 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

20. DocLoader & DocShell Tree

21. 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

22. 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

23. 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

24. Modules Relationship
DOM
Layout
DocShell
Widget View
Presentation
Layer
Model Layer

25. Modules Relationship
(complex ver.)

26. LoadURI

27. LoadURI

28. LoadURI

29. RENDERING
• the very basic concept

30. Document Parsing Components
credit: http://www-archive.mozilla.org/newlayout/doc/
(slightly outdated)

31. Document Rendering Components
credit: http://www-archive.mozilla.org/newlayout/doc/

32. Rendering Data Flow
credit: http://www-archive.mozilla.org/newlayout/doc/

33. More on Layout & Rendering
Goto http://dbaron.org/talks/

34. SESSION HISTORY
• browsing context, session history and bfcache

35. 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

36. 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);
};

37. Session History

38. page1
Multi-level History Entries

39. page1 page2
frame1
page2
frame1
Multi-level History Entries

40. page1 page2
frame1
page2
frame1frame2
Multi-level History Entries

41. DOM WINDOW
• inner & outer

42. 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

43. WindowProxy
credit: http://d.hatena.ne.jp/cou929_la/20110310/1299767973
var w = window.open();

44. Split Window
In 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.

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

46. Nested Windows
browsing context
credit: https://developer.mozilla.org/en-US/docs/Inner_and_outer_windows

47. Nested Windows
var w = window.self;
browsing context
credit: https://developer.mozilla.org/en-US/docs/Inner_and_outer_windows

48. Nested Windows
var w = window.self;
var w = window.parent;
var w = window.top;
browsing context
credit: https://developer.mozilla.org/en-US/docs/Inner_and_outer_windows

49. Inner / Outer Window
Was Ideal Plan

50. Inner / Outer Window
Was Ideal PlanNow

51. Inner / Outer Window
Was Ideal PlanNow

52. Inner / Outer Window
Was Ideal PlanNow

53. WebIDL Bindings
'Window': {
'nativeType': 'nsGlobalWindow',
'binaryNames': {
'postMessage': 'postMessageMoz',
},
},
'WindowProxy': {
'nativeType': 'nsPIDOMWindowOuter',
'headerFile': 'nsPIDOMWindow.h',
'concrete': False
},
dom/bindings/Bindings.conf

54. PRERENDER
gecko’s (ongoing) implementation

55. Swapping
nsDocShell
nsDocShell
nsDocShell
nsDocShell
nsDocShell
nsDocShell
nsDocShell
XUL Doc
xul:browser
xul:browser
nsFrameLoader
nsFrameLoader

56. Swapping
nsDocShell
nsDocShell
nsDocShell
nsDocShell
nsDocShell
nsDocShell
nsDocShell
XUL Doc
xul:browser
xul:browser
nsFrameLoader
nsFrameLoader

57. Swapping DocShells vs. ContentViewers
Swapping DocShells

58. Swapping DocShells vs. ContentViewers
Swapping Viewers

59. Swapping DocShells vs. ContentViewers
• Swapping DocShells.
• The bfcache issue.
• Swapping ContentViewers.
• Almost impossible to prerender out-of-process.

60. 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?

61. BONUS!
chromium process models

62. 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

63. 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.

64. 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