Delivery and display of page previews using shadow DOM

• US 10,289,659 B2
• Filed: 06/26/2017
• Issued: 05/14/2019
• Est. Priority Date: 12/12/2014
• Status: Active Grant

• Current Assignee: Amazon Technologies, Inc. (Amazon.com, Inc.)
• Original Assignee: Amazon Technologies, Inc. (Amazon.com, Inc.)
• Inventors: Batni, Dhruva Lakshmana Rao
• Primary Examiner(s): Zuberi, Mohammed H
• Application Number:
  US15/633,483
• Publication Number:
  US 20170351648A1
• Time in Patent Office: 687 Days
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 40/106 Display of layout of documents; Previewing
• CPC Class Codes: G06F 40/14 Tree-structured documents parsing G06F40/205; validation G06F40/226
• CPC Class Codes: G06F 40/154 Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets

Abstract

A content server retrieves the code and other content of a page and generates a preview of the page. The page preview could be an image that depicts a snapshot of the page, such as a screenshot, or an image map that includes links selectable by a user. The content server further modifies the original code used to load the page such that the modified code instructs a browser application to render and display the page preview for a first period of time and to render and display the actual page in place of the page preview after the first period of time. The content server may use the shadow document object model (DOM) framework to provide the page preview.

Claims

1. A computer-implemented method of generating a preview of a content page, the method comprising:

as implemented by a computer system comprising one or more computing devices, the computer system configured with specific executable instructions,

retrieving first code of a content page;

retrieving an image that depicts a representation of the content page;

modifying the first code to include second code that references the image and an identification of a user-initiated event, wherein the modified first code, when executed by a browser application, causes the browser application to display initially the image and to render and display the content page in place of the image after the user-initiated event identified in the modified first code occurs; and

transmitting the modified first code in response to a request to access the content page.

2. The computer-implemented method of claim 1, wherein the modified first code, when executed by the browser application, further causes the browser application to:

generate a document object model (DOM) tree that comprises a root node, a shadow host node that is a child of the root node, a subtree that is a first child of the shadow host node, and a shadow root node that is a second child of the shadow host node, wherein the subtree includes DOM elements of the content page, and wherein the shadow root node references the image;

render the shadow root node during before the user-initiated event identified in the modified first code occurs;

modify the DOM tree, after the user-initiated event identified in the modified first code occurs, such that the shadow host node is deleted and the subtree becomes a child of the root node; and

render the subtree after the DOM tree is modified.

3. The computer-implemented method of claim 2, wherein the DOM tree comprises a child node that is a child of the root node, and wherein the modified first code further causes the browser application to render the child node before the user-initiated event identified in the modified first code occurs.

4. The computer-implemented method of claim 3, wherein the shadow root node is rendered in a portion of the browser application that is visible to a user before the user interacts with the browser application, and wherein the child node is rendered in a portion of the browser application that is not visible to the user before the user interacts with the browser application.

5. The computer-implemented method of claim 2, wherein the modified first code causes the browser application to render the shadow root node and not the subtree before the user-initiated event identified in the modified first code occurs.

6. The computer-implemented method of claim 1, wherein at least a portion of the image comprises an image map, and wherein the image map comprises interactive content selectable by a user.

7. The computer-implemented method of claim 1, wherein the computer system is an intermediary system that operates as an intermediary between a content server that hosts the content page and a user device that runs the browser application.

8. The computer-implemented method of claim 1, wherein the browser application comprises a server-based browser application.

9. A system comprising:

a computer data repository that stores generated content page previews; and

a computing system comprising one or more computing devices, the computing system configured with computer-executable instructions that, when executed, cause the computing system to;

retrieve first code of a content page;

retrieve an image that depicts a representation of the content page;

modify the first code to include second code that references the image and an indication of a user-initiated event, wherein the modified first code, when executed by a browser application, causes the browser application to display initially the image in place of the content page and to render and display the content page in place of the image after the user-initiated event identified in the modified first code occurs; and

transmit the modified first code in response to a request to access the content page.

10. The system of claim 9, wherein the modified first code further causes the browser application to:

generate a document object model (DOM) tree that comprises a root node, a shadow host node that is a child of the root node, a subtree that is a first child of the shadow host node, and a shadow root node that is a second child of the shadow host node, wherein the subtree includes DOM elements of the content page, and wherein the shadow root node references the image;

render the shadow root node before the user-initiated event identified in the modified first code occurs;

modify the DOM tree, after the user-initiated event identified in the modified first code occurs, such that the shadow host node is deleted and the subtree becomes a child of the root node; and

render the subtree after the DOM tree is modified.

11. The system of claim 10, wherein the DOM tree comprises a child node that is a child of the root node, and wherein the modified first code further causes the browser application to render the child node before the user-initiated event identified in the modified first code occurs.

12. The system of claim 11, wherein the shadow root node is rendered in a portion of the browser application that is visible to a user before the user interacts with the browser application, and wherein the child node is rendered in a portion of the browser application that is not visible to the user before the user interacts with the browser application.

13. The system of claim 10, wherein the modified first code causes the browser application to render the shadow root node and not the subtree before the user-initiated event identified in the modified first code occurs.

14. The system of claim 9, wherein the modified first code further causes the browser application to:

generate a document object model (DOM) tree that comprises a root node, a shadow host node that is a child of the root node, a subtree that is a first child of the shadow host node, and a shadow root node that is a second child of the shadow host node, wherein the subtree includes DOM elements of the content page, and wherein the shadow root node references the image,

render the shadow root node before the user-initiated event identified in the modified first code occurs,

modify the DOM tree, after the user-initiated event identified in the modified first code occurs, such that the shadow host node comprises the subtree, and

re-render the shadow host node after the DOM tree is modified.

15. The system of claim 9, wherein the computer-executable instructions, when executed, further cause the computing system to modify the image such that at least a portion of the image comprises an image map, wherein the image map comprises interactive content selectable by a user.

16. The system of claim 9, wherein the computing system is an intermediary between user devices and content servers.

17. The system of claim 9, wherein the browser application comprises a server-based browser application.

18. A non-transitory computer-readable medium having stored thereon a browser component configured to run on a computing device and to interact over a network with a content server, the browser component comprising executable program code that directs the computing device to perform a process that comprises:

requesting a content page;

receiving code associated with the content page in response to requesting the content page, wherein the code comprises an identification of a user-initiated event and a reference to an image;

displaying the image before the user-initiated event identified in the code occurs; and

rendering and displaying the content page in place of the image in response to an indication that the user-initiated event identified in the code occurred.

19. The non-transitory computer-readable medium of claim 18, wherein the code comprises a reference to a shadow document object model (DOM) tag.

20. The non-transitory computer-readable medium of claim 19, wherein the process further comprises:

generating a DOM tree to include a node corresponding to the shadow DOM tag;

displaying the image before the user-initiated event identified in the code occurs based on a traversal of the node;

modifying the DOM tree to remove the node after the user-initiated event identified in the code occurs; and

rendering and displaying the content page in place of the image based on a traversal of the modified DOM tree.

21. A computer-implemented method of generating a preview of a content page, the method comprising:

as implemented by a computer system comprising one or more computing devices, the computer system configured with specific executable instructions,

retrieving first code of a content page;

retrieving an image that depicts a representation of the content page;

modifying the first code to include second code that references the image and an identification of an event, wherein the modified first code, when executed by a browser application, causes the browser application to;

generate a document object model (DOM) tree that comprises a root node, a shadow host node that is a child of the root node, a subtree that is a first child of the shadow host node, and a shadow root node that is a second child of the shadow host node, wherein the subtree includes DOM elements of the content page, and wherein the shadow root node references the image;

render the shadow root node and display initially the image before the event identified in the modified first code occurs;

modify the DOM tree, after the event identified in the modified first code occurs, such that the shadow host node is deleted and the subtree becomes a child of the root node; and

render the subtree after the DOM tree is modified and display the content page in place of the image; and

transmitting the modified first code in response to a request to access the content page.

22. The computer-implemented method of claim 21, wherein the DOM tree comprises a child node that is a child of the root node, and wherein the modified first code further causes the browser application to render the child node before the event identified in the modified first code occurs.

23. The computer-implemented method of claim 22, wherein the shadow root node is rendered in a portion of the browser application that is visible to a user before the user interacts with the browser application, and wherein the child node is rendered in a portion of the browser application that is not visible to the user before the user interacts with the browser application.

24. The computer-implemented method of claim 21, wherein the modified first code causes the browser application to render the shadow root node and not the subtree before the event identified in the modified first code occurs.

25. A system comprising:

a computer data repository that stores generated content page previews; and

a computing system comprising one or more computing devices, the computing system configured with computer-executable instructions that, when executed, cause the computing system to;

retrieve first code of a content page;

retrieve an image that depicts a representation of the content page;

modify the first code to include second code that references the image and an indication of an event, wherein the modified first code, when executed by a browser application, causes the browser application to;

generate a document object model (DOM) tree that comprises a root node, a shadow host node that is a child of the root node, a subtree that is a first child of the shadow host node, and a shadow root node that is a second child of the shadow host node, wherein the subtree includes DOM elements of the content page, and wherein the shadow root node references the image;

render the shadow root node and display initially the image in place of the content page before the event identified in the modified first code occurs;

modify the DOM tree, after the event identified in the modified first code occurs, such that the shadow host node is deleted and the subtree becomes a child of the root node; and

render the subtree and display the content page in place of the image after the DOM tree is modified; and

transmit the modified first code in response to a request to access the content page.

26. The system of claim 25, wherein the DOM tree comprises a child node that is a child of the root node, and wherein the modified first code further causes the browser application to render the child node before the event identified in the modified first code occurs.

27. The system of claim 26, wherein the shadow root node is rendered in a portion of the browser application that is visible to a user before the user interacts with the browser application, and wherein the child node is rendered in a portion of the browser application that is not visible to the user before the user interacts with the browser application.

28. The system of claim 25, wherein the modified first code causes the browser application to render the shadow root node and not the subtree before the event identified in the modified first code occurs.

29. A system comprising:

a computer data repository that stores generated content page previews; and

a computing system comprising one or more computing devices, the computing system configured with computer-executable instructions that, when executed, cause the computing system to;

retrieve first code of a content page;

retrieve an image that depicts a representation of the content page;

modify the first code to include second code that references the image and an indication of an event, wherein the modified first code, when executed by a browser application, causes the browser application to;

generate a document object model (DOM) tree that comprises a root node, a shadow host node that is a child of the root node, a subtree that is a first child of the shadow host node, and a shadow root node that is a second child of the shadow host node, wherein the subtree includes DOM elements of the content page, and wherein the shadow root node references the image;

render the shadow root node and display initially the image in place of the content page before the event identified in the modified first code occurs;

modify the DOM tree, after the event identified in the modified first code occurs, such that the shadow host node comprises the subtree; and

re-render the shadow host node and display the content page in place of the image after the DOM tree is modified; and

transmit the modified first code in response to a request to access the content page.