Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prerendering: Revisit

Prerendering: Revisit

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

1da96dc32c2993de010ca236dbc267bc?s=128

Samael Wang

April 29, 2016
Tweet

More Decks by Samael Wang

Other Decks in Technology

Transcript

  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.js message manager

    browser-child.js message manager message manager browser-child.js content.js browser.js … DocShell XPCOM Module DocShell XPCOM Module PBrowser.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 frame1 frame2 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 Plan Now

  51. Inner / Outer Window Was Ideal Plan Now

  52. Inner / Outer Window Was Ideal Plan Now

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