WO2022199806A1

WO2022199806A1 - Accelerating loading of web pages and web applications

Info

Publication number: WO2022199806A1
Application number: PCT/EP2021/057527
Authority: WO
Inventors: Oleg Beletski; Sohan Jyoti GHOSH; Guido Grassel; Sarath SINGAPATI; Gnanasekar SOMANATHAN
Original assignee: Huawei Technologies Co., Ltd.
Priority date: 2021-03-24
Filing date: 2021-03-24
Publication date: 2022-09-29
Also published as: CN116806336A

Abstract

There is provided a method for loading a given web page into a device (102, 202, 302, 402) connected via a data communication system (104, 320, 416) to one or more servers (106A-N, 322A-N, 418A-N) and an intermediate service server (108). The given web page to be rendered to a user (100, 200) requires a browser to access one or more resources from the one or more servers. The method includes arranging for the browser to send a request for a preview bundle of the given web page and request web page data required for generating a first rendition of the given web page and a second rendition of the given web page concurrently while the first rendition of the web page is presented to the user. The method includes configuring the browser to switch from presenting the first rendition to the user to presenting the second rendition of the given original web page to the user.

Description

ACCELERATING LOADING OF WEB PAGES AND WEB APPLICATIONS

TECHNICAL FIELD

The disclosure relates generally to methods for loading web pages and web applications into devices, and apparatus that enable the methods to be executed. More particularly, the disclosure relates to a method for loading a given web page into a device and a method for operating a server arrangement for loading the given web page into the device. Moreover, the disclosure relates to a device that is configured to load the given web page.

BACKGROUND

Loading of a very first web page (for example, a cold page) of a web application takes a significantly longer time duration compared to a subsequent reloading of the same first web page. Such a time delay occurs because modern web pages comprise main pages (also refered to being “root pages”) with multiple individual resources (for example, identifiable elements in a webpage) for loading independently of the webpages. During a web page loading, an associated load time duration is spent on loading resources from a server to a browser executing on a client, parsing of resources on the client, and finally rendering the processed resources (and the like). A loading time duration of a resource can be divided into a duration of time representing a network delay associated with every web request and a duration of time for the resource to arrive over a network connection. Network latency has a more pronounced effect on page load time duration compared to connection speed. Accordingly, as occurs frequently during loading of a web page, users requesting the webpage experience viewing an empty screen for the time duration of up to multiple seconds.

In a known approach, a web accelerator is used to generate a preview page based on a screenshot of the web page. Since the screenshot is a raster image, the screenshot when scaled is unable to provide sufficient graphical details. Moreover, when a user zooms-in when viewing such a preview, a blurred image of the preview screen is viewed with inadequate quality of text rendered. All the elements of the web page are scaled together in the preview page and the user is not able to perform manipulation over one or more page element of the web page, for example selecting and copying and pasting the text, copying images from the web page, and so forth. A markup language (for example, HTML) format is used in a context of a preview, but only to glue several screenshots together in a case preview that is split into multiple parts and if the preview is generated for below the fold content as well. In such an approach, the markup language is used to combine screenshots together and separate page elements are not delivered as markup language elements.

In another known approach, multiple web (for example, HTTP) requests (for example, one request for the main web page and subsequent request to download resources) are issued, firstly to fetch HTML wrapper followed by additional HTTP request(s) for images. In such an approach, a round trip time for each request adds up to a page content delivery time duration.

In yet another known approach, resources of a given web page are received in bundles and only those bundles are cached (without an original page). Such an approach has a drawback that resources within the bundle that have become obsolete and/or are not needed continue to consume cache space on a given user device; such solete resources potentially pose challenges with respect to effectively managing a cache space on the given user device.

In another known approach, a web server (namely, not a proxy server) bundles resources belonging to the web server that an original web page uses and sends the bundle in a single package which is relatively large in terms of data (for example MBytes) to a given device. Not only does such an approach need at least 2 web requests to be sent (namely, one request for a HTML page and a second request for resource bundle), but the approach also results in a higher volume of data being sent from the web server via a data communication network linking the web server to the given device.

Therefore, there arises a need to address the aforementioned technical drawbacks in existing systems or technologies in accelerating loading of the web page and web application.

SUMMARY

It is an object of the disclosure to provide an improved method for loading a given web page into a device, an improved method for operating a server arrangement for loading the given web page into the device, and an improved device that is configured to load the given web page while avoiding one or more disadvantages of prior art approaches.

This object is achieved by the features of the independent claims. Further implementation forms are apparent from the dependent claims, the description, and the figures.

The disclosure provides an improved method for loading a given web page into a device, an improved method for operating a server arrangement for loading the given web page into the device, and an improved device that is configured to load the given web page.

According to a first aspect, there is provided a method for loading a given web page into a device connected via a data communication system to one or more servers and to an intermediate service server. The given web page to be rendered to a user requires a browser to access a plurality of resources from the one or more servers. The method includes arranging for the browser to send a request to the intermediate service server for a preview bundle of the given web page. The method includes receiving from the intermediate service server the preview bundle of the given web page at the device and processing the preview bundle at the device to generate a first rendition of the given web page on the device for presentation to the user, and arranging for the browser to request web page data required for generating a second rendition of the given web page to be provided from the one or more servers. The method includes receiving the web page data and generating the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user. The method includes configuring the browser to switch from presenting the first rendition to the user to presenting the second rendition of the given original web page to the user.

The method is of advantage in that the method proposes to receive in a response to a request for the webpage, a Multipart Hypertext Markup Language (MHTML) bundle in a preview format, thereby resulting in a more realistic rendering of the web page allowing the user to zoom in/out, select and copy/paste textual content, save images, and so forth. Selecting content elements (text and images) of a Document Object Model (DOM) preview and passing them to other applications of a mobile terminal or desktop computer for further processing provides advantages. Common supported features for an image include sharing with instant messenger or editing applications, sharing a link to an image, searching on the web, for example. By using such sharing, it is feasible to pass any part of the DOM preview page content to some other application. Resources (for example, images and styles) received with MHTML package are made available in browser cache (for example, by storing as individual resources) and can be used as soon as received when the (original) requested web page gets loaded in the background.

The method supports combining resources from different web servers into MHTML preview files and hence improving page load experience in web browsers by loading a static (namely, non-scripted) set of resources; after processing by the browser, there is created and presented a Document Object Model (DOM) preview page first, whereafter switching to the original webpage (requested) occurs when the webpage is ready to present. The DOM preview supports basic interaction (e.g. zooming, saving parts of the resources) that the user can do with the content while browsing.

In addition, the method supports the browser during a first step loading static (namely, non- scripted) but interactive web page preview provided by a web accelerator and showing the same to the user in a single bundle and within a single Round trip time (RTT) and during a second step loading the original page and rendering it off-screen in parallel in the background. Furthermore, the method supports removing the preview from the screen when the original page is displayed. The method supports web pages loaded in both the steps to appear identical and hence seamlessly switching of the pages.

The method is of advantage in that using a single multipart response which reduces network delays associated with loading of every individual resource, provides a preview page for contents of the visible part of the page to reduce the amount of content for loading and to reduce the content to process by the browser, pre-processing contents in order that is more efficient in rendering.

According to a second aspect, there is provided a method for operating a server arrangement configured to load a given web page into a device connected via a data communication system to the server arrangement. The given web page to be rendered to a user of the device requires access by a browser executing on the device to a plurality of resources from the server arrangement. The method includes receiving at the server arrangement a request from the browser for a preview bundle of the given web page. The method includes sending from the server arrangement the preview bundle of the given web page to the device for the device to process to generate a first rendition of the given web page on the device for presentation to the user, and receiving from the browser a request for web page data required for generating a second rendition of the given web page. The method includes sending from the server arrangement the web page data to the device for the device to process to generate the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user. The browser is configured to switch from presenting the first rendition to the user to presenting the second rendition of the given web page to the user.

The method is of advantage is that peak data delivery rate requirements from the server arrangement can be reduced when providing a given latency in the user devices when web browsing.

According to a third aspect, there is provided a software product including instructions that are executable on computing hardware to implement the above methods.

The software product may be implemented, at least in part, as a software product that is executable on computing hardware of a data communication device.

According to a fourth aspect, there is provided a device configured to load a given web page into the device when connected via a data communication system to one or more servers and an intermediate service server. The device is configured to use a browser that is configured to access a plurality of resources from the one or more servers and the intermediate service server. The device is configured to use the browser to send a request to the intermediate service server for a preview bundle of the given web page. The device is configured to receive the preview bundle of the given web page at the device and to process the preview bundle at the device to generate a first rendition of the given web page on the device for presentation to the user, and arranging for the browser to request web page data required for generating a second rendition of the given original web page from the one or more servers, The device is configured to receive the web page data and to generate the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user. The device is configured to arrange for the browser to switch from presenting the first rendition to the user to presenting the second rendition of the given web page to the user.

The device is of advantage in using a single multipart response which reduces network delays associated with loading of every individual resource, providing a preview page for contents of the visible part of the page to reduce the amount of content for loading and to reduce the content to process by the browser, pre-processing contents in order that is more efficient in rendering. A technical problem in the prior art is resolved, where the technical problem is with significantly longer time duration in loading of the very first web page (namely, a cold load of a page) of a web application in a web browser that can be made available to the user.

Therefore, in contradistinction to the prior art, according to the method for loading the given web page, the method for operating the server arrangement, and the device that is configured to load the given web page provided in the disclosure, the user system accelerates loading of the web page of a web application. The disclosure allows reducing network delays associated with loading of every resource by a single multipart response, reducing the amount of content for loading by providing only the visible part of the page in preview, and reducing the content to process by the browser by providing only the preview and efficiently rendering the content by pre-processing of the content.

These and other aspects of the disclosure will be apparent from and the implementation(s) described below.

BRIEF DESCRIPTION OF DRAWINGS

Implementations of the disclosure will now be described, by way of example only, with reference to the accompanying drawings, in which:

FIG. 1 is a block diagram that is an illustration of a device that is configured to load a given web page into the device when connected via a data communication system to one or more servers and an intermediate service server in accordance with an implementation of the disclosure;

FIG. 2 is an interaction diagram that is an illustration of steps of a method for loading a given web page into a device connected via a data communication system to a server and to an intermediate service server in accordance with an example implementation of the disclosure;

FIG. 3 is a block diagram that is an illustration of cold loading of a web page without preview in accordance with an implementation of the disclosure; FIG. 4 is a block diagram that is an illustration of an example environment to pre-process contents in a web page to generate a preview of the webpage in accordance with an implementation of the disclosure;

FIGS. 5A-5B are flow diagrams that are illustrations of steps of a method for loading a given web page into a device connected via a data communication system to one or more servers and to an intermediate service server in accordance with an implementation of the disclosure;

FIGS. 6A-6B are flow diagrams that are illustrations of a method for operating a server arrangement in accordance with an implementation of the disclosure; and

FIG. 7 is an illustration of a computing arrangement for use in implementing implementations of the disclosure.

DETAILED DESCRIPTION OF THE DRAWINGS

Implementations of the disclosure provide an improved method for loading a given web page into a device, an improved method for operating a server arrangement for loading the given web page into the device, and an improved device that is configured to load the given web page.

To make solutions of the disclosure more comprehensible for a person skilled in the art, the following implementations of the disclosure are described with reference to the accompanying drawings.

Terms such as "a first", "a second", "a third", and "a fourth" (if any) in the summary, claims, and foregoing accompanying drawings of the disclosure are used to distinguish between similar objects and are not necessarily used to describe a specific sequence or order. It should be understood that the terms so used are interchangeable under appropriate circumstances, so that the implementations of the disclosure described herein are, for example, capable of being implemented in sequences other than the sequences illustrated or described herein. Furthermore, the terms "include" and "have" and any variations thereof, are intended to cover a non-exclusive inclusion. For example, a process, a method, a system, a product, or a device that includes a series of steps or units, is not necessarily limited to expressly listed steps or units but may include other steps or units that are not expressly listed or that are inherent to such process, method, product, or device. FIG. 1 is a block diagram that illustrates a device 102 that is configured to load a given web page into the device 102 when connected via a data communication system 104 to one or more servers 106A-N and an intermediate service server 108 in accordance with an implementation of the disclosure. The block diagram includes the device 102, the data communication system 104, the one or more servers 106A-N and the intermediate service server 108. The device 102 is configured to use the browser to send a request to the intermediate service server 108 for a preview bundle of the given web page.

The device 102 is configured to receive the preview bundle of the given web page at the device 102 and to process the preview bundle at the device to generate a first rendition of the given web page on the device 102 for presentation to the user 100, and arrange for the browser to request web page data required for generating a second rendition of the given original web page from the one or more servers 106A-N.

The device 102 is configured to receive the web page data and to generate the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user 100. The device 102 is configured to arrange for the browser to switch from presenting the first rendition to the user 100 to presenting the second rendition of the given web page to the user 100.

The device 102 is of advantage in that the device 102 uses a single multipart response which reduces network delays associated with loading every individual resource; there is thereby provided a preview page for contents of a visible part of a page to reduce an amount of content for initial loading and to reduce an amount of the content to be initially processed by the browser, wherein pre-processing contents is utilized in order that renedering is more efficient. The device 102, without limitation, may be selected from a mobile phone, a Personal Digital Assistant (PDA), a tablet, a desktop computer, or a laptop. The user 100 may submit the user request (for the web page of the web application) by performing a corresponding operation on the device 102.

Optionally, the device 102 is configured to switch from presenting the first rendition to the user 100 to presenting the second rendition to the user 100 in a seamless manner such that the switching is not discernible to the user 100. Optionally, the device 102 is arranging for the preview bundle to have a preview format for enabling the user 100 by using the browser to perform in respect of the first rendition at least one of: zoom in/out in respect of the first rendition, select and copy/paste textural content from the first rendition, save one or more images from the first rendition. Optionally, the device 102 is configured to send the request in (a) to the intermediate service server as a single request.

The intermediate service server 108 provides the preview bundle of the given web page to the device 102 in response to receiving the request from a browser executing on the device 102. The intermediate service server 108 may be configured to obtain information from the one or more servers 106A-N for generating the preview bundle.

FIG. 2 is an interaction diagram that provides an illustration of steps of a method for (namely, a method of) loading a given web page into a device 202 connected via a data communication system to a server 206 and to an intermediate service server in accordance with an implementation of the disclosure. At a step 208, data indicating the URL of a web page (of a web application) is received as an input (in a browser window executing on the device 202) from a user 200 at the device 202. At a step 210, two requests are prepared based on the received request by the device 202. At a step 212, the device 202 is interacted with a web accelerator 204 to pass a first request for a web page preview. At a step 214, the device 202 is interacted with the web accelerator 204 to pass a second request for an original web page. At a step 216, the web accelerator 204 is interacted with a server 206 specified in the user request to request and to receive a content of the original web page. At a step 218, the content of the web page is parsed by the web accelerator 204. At a step 220, the server 206 is requested for resources referred to in the web page and needed for rendering the web page by the web accelerator 204. At a step 222, the web page in a headless browser configured to screen resolution and color scheme compatible are rendering on the device 202 from which the request for an (original) page is received by the web accelerator 204. The web accelerator 204 loads the web page in the headless browser in a manner similar to that in (regular) the web browser except that the browser uses screen properties of the device 202 while rendering the web page. The headless browser executes all the scripts that are triggered to execute at startup. When all above have been done, the fold page resources have been loaded and no more Java Script needs to be executed (within a configurable, short timeout), the web accelerator 204 starts to generate the content of a preview content in MHTML format.

At a step 224, resources referred to in the web page and needed for rendering the web page are received at the web accelerator 204 from the server 206. At a step 226, the resulting MHTML preview is created when all resources are needed to generate above the fold content by the web accelerator 204. At a step 228, the MHTML preview is sent to the device 202 by the web accelerator 204. At a step 230, the preview page is rendered and displayed on a display associated with the device 202. The device 202 further in parallel with the rendering of the preview browser stores its parts (CSS and images) in a browser cache for reuse in the rendering of the original page. The web browser executing on the device 202 loads the preview web page such as a regular web page with the exception that all resources are extracted from a single HTTP response including multipart message. The web browser adds image and CSS files obtained from the MHTML to the file cache at least until the regular page has been loaded. If the cache control header disallows caching, the web browser still caches the files until the regular page has been loaded.

At a step 232, an original main HTML page and requested resources that the main page references are received from the web accelerator 204 at the device 202. When some resources may already exist in the browser cache included within the MHTML preview response and for the other resources, the device 202 may wait until the receipt of the other resources. At a step 234, the original page is rendered as soon as it has all resources including those resources in the hidden browser tab/window at the device 202; optionally, there is no need to have all the resources that are required to render it, but only critical ones (CSS, Javascript) and above fold images, texts. The web browser executing on the device 202 loads the original page as a background task. The web browser either loads the original page in parallel with the preview page or sequence. The web browser finds image and CSS files in the file cache that have been added in the aforementioned process, uses the files in the cache, and hence does not request the related resources from the server 206 (even when cache-control disallows caching). In addition, the web accelerator 204 based on the first request received from the device 202 for the preview document prioritize the request for the web accelerator 204 to generate and send MHTML at first and subsequently send content items to belong to the original document requested in a second request. The web accelerator 204 and web browser may be enabled to throttle down download speed for resources belonging to the original page while downloading resources of a preview is in progress.

When the original web page (requested) is rendered, the corresponding browser tab containing the original page becomes visible on a browser window of the device 202 and the original web page replaces the preview tab on a display. The original web page requested is rendered off screen in parallel in the background with the preview page and the preview is removed. The preview and original web pages loaded appear identical and hence switching of the pages is performed seamlessly.

The web accelerator 204 may perform the following steps of:

(i) serializing the browser’ s in- memory document to HTML, only serializing the part of the rendered page that is above the fold (or near to it),

(ii) taking note of used CSS files;

(iii) marking all above the fold images; and

(iv) Assembling a multi-part message (MHTML) that includes the files such as a serialized HTML doc, Used CSS files and Marked image files.

The multipart message may include the origin URL of the CSS files and images. The multipart message may include HTTP cache control headers sent by the server 206. The preview does not include any JavaScript.

FIG. 3 is a block diagram that provides an illustration of cold loading a web page without preview in accordance with an implementation of the disclosure. The block diagram includes a device 302, a preview accelerator 308, and a data communication system 320. The device 302 includes a foreground Tenderer 304 and a background Tenderer 306. The preview accelerator 308 includes a headless browser 310, a preview cache 312, a web server 314, a web cache 316, and a web client 318. The data communication system 320 includes one or more servers 322A- N.

The headless browser 310 is shown as a client browser that serves content to the device 302. However, it will be appreciated that the headless browser 310 generates preview content that is consumed by the foreground Tenderer 304. Moreover, the web server 314 is a web server that acts more like a proxy server.

FIG. 4 is a block diagram that provides an illustration of an example environment to pre-process contents in a web page to generate a preview of the webpage in accordance with an implementation of the disclosure. The block diagram includes a device 402 that includes a foreground Tenderer 404 and a background Tenderer 406, a web accelerator 408 that includes a headless browser 410, a cache 412, a server, and proxy 414, and a data communication system 416 that includes one or more servers 418A-N.

The web accelerator 408 bundles individual resources associated with all the web pages into a single multipart response. The preview variant of HTML page generated is only for the part of the page that is visible on a user screen. The contents that are located “below the fold” and requiring scrolling to get into a viewport are dropped. The Server and Proxy 414 represents a proxy server enabling executing the browser remotely from the device 402.

The web accelerator 408 sends HTML content optimized for initial rendering to the device 402. The preview is sent as an individual view to the foreground Tenderer 404 using the headless browser 410 and as a static HTML format. The headless browser 410 stores in the cache 412 parts (CSS and images) of the preview page in parallel with the rendering of the preview page at least until the rendering of the original page. The web accelerator 408 filters contents (for example, only the contents of the part of the page that is visible on a display device associated with the device 402) based on the device 402 of a particular user.

There is link shown in FIG. 4 between the headless browser 410 and the foreground Tenderer 404. However, it will be appreciated that a headless browser does not serve content as such over http or any other protocol, such that a preview- server is beneficially employed for supply preview content.

The web accelerator 408 places the individual resources in a multipart preview based on the importance to minimize content processing time; The device 402 and its foreground Tenderer 404 are configured to extract resources from multipart resposnse, parse resources and render the preview page.. The device 402 using the foreground Tenderer 404 places the main HTML document in the preview at first and subsequently places the Cascading Style Sheets (CSS) and the rest of the resources in the order of their appearance on the resulting page. An order of appearance may differ from an order of reference of the resources in the web page. Subsequently, the device 402 generates a rendition of the original web page and places the original web page using the background Tenderer 406.

The acceleration in loading of the web page is attributed to one or more of the following factors: a) reduced network delays associated with loading of every individual resource that is achieved by providing a single multipart response; b) reduced amount of content for loading caused that is achieved by providing preview only for the visible part of the page; c) the browser having to process reduced content since only preview is provided; and d) More efficient rendering that is achieved due to pre-processed content, reduced processing time for inline styles, reduced execution time due to absence of execution time for the scripts (for example, JavaScript).

Some of the features of preview format (such as multipart HTML) include: a) the content is static and does not include JavaScript; b) the preview format includes a single file delivered as a single resource file, thereby avoiding multiple round trip times for individual resources; c) the preview format includes creating and rendering in a format supported by the browser ; d) the review format saves more than one screen height; e) the preview format aves content that is visible on the screen, the rest (below the screen content ) is dropped and hence he user does not need to scroll down the preview page.

According to an aspect of the disclosure, minimal additional network bandwidth is utilized by enabling page content caching and re-use.

FIGS. 5A-5B are flow diagrams that provide an illustration of steps of a method for loading a given web page into a device connected via a data communication system to one or more servers and to an intermediate service server in accordance with an implementation of the disclosure. The given web page to be rendered to a user requires a browser to access one or more resources from the one or more servers. At a step 502, a browser is arranged to send a request to an intermediate service server for a preview bundle of a given web page. At a step 504, the preview bundle of the given web page is received from the intermediate service server at the device and the preview bundle is processed at the device to generate a first rendition of the given web page on the device for presentation to the user, and the browser is arranged to request web page data required for generating a second rendition of the given web page to be provided from the one or more servers. At a step 506, the web page data is received and the second rendition of the web page data is generated concurrently while the first rendition of the web page is presented to the user. At a step 508, the browser is configured to switch from presenting the first rendition to the user to presenting the second rendition of the given original web page to the user.

The method is of advantage in that the method proposes to receive in a response to a request for a webpage, a Multipart Hypertext Markup Language (MHTML) bundle in a preview format, thereby resulting in more realistic rendering of a web page allowing the user to zoom in/out, select and copy/paste textual content, save images, and so forth. Resources (images and styles) received with MHTML package are made available in browser cache (for example, by storing as individual resources) and can be used as soon as received when the (original) requested web page gets loaded in the background.

The method supports combining resources from different web servers into MHTML preview files and hence improving page load experience in a web browser by loading static (non- scripted) Document Object Model (DOM) preview first and switching to the original webpage (requested) when the webpage is ready. The DOM preview supports basic interaction (zooming, saving parts of the resources) that the user can do with the content while browsing.

In addition, the method supports the browser during a first step loading static (non-scripted) but interactive web page preview provided by a web accelerator and showing the same to the user in a single bundle and within a single Round trip time (RTT) and during a second step loading the original page and rendering it off-screen in parallel in the background. Furthermore, the method supports removing the preview from the screen when the original page is displayed. The method supports web pages loaded in both the steps to appear identical and hence switching of the pages in a seamless manner.

The method is of advantage in that using a single multipart response reduces network delays associated with loading of every individual resource, providing a preview page for contents of the visible part of the page to reduce the amount of content for loading and reducing the content to process by the browser, and pre-processing contents in order that is more efficient in rendering.

Optionally, the method includes switching from presenting the first rendition to the user to presenting the second rendition to the user in a seamless manner such that the switching is not discernible to the user. Optionally, the method includes arranging for the first rendition to be a simplified version of the second rendition. The first rendition at least enables the user by using the browser to perform at least one of: zoom in/out in respect of the first rendition, select and copy/paste textural content from the first rendition, save one or more images from the first rendition. Optionally, the method includes providing the preview bundle in a bundling format and including HTML code. The bundling format includes at least one of: MHTML, a Mozilla Archive Format, a Web-Archive format. The preview bundle may include compressed (for example, “zipped”) data.

Optionally, the method includes structuring resources of the preview bundle in an order for most efficient execution of the first rendition in the device. Optionally, the method includes arranging the resources in the preview bundle in a priority order for the browser to execute as soon as they are received at the device. The preview bundle may devoid of executable code capable of providing user interaction. Optionally, the method includes sending the request for the preview bundle in (a) as a single request to the intermediate service server.

Optionally, the method includes reusing a portion of data used for generating the first rendition for generating the second rendition at the device. Optionally, the method includes storing data of the preview bundle in a data cache of a processor of the device. Optionally, the method includes modifying the browser to cache all parts that arrive in the preview bundle as individual resources, so that the resources are useable in the device for rendering other web pages on the device. Optionally, the method includes executing the browser on the device. Optionally, the method includes executing the browser remotely from the device as a proxy. The proxy may be implemented by at least one of: a proxy server, a remotely run browser that proxies its user interface (UI) to a screen of the device.

FIGS. 6A-6B are flow diagrams that provide illustrations of a method for operating a server arrangement in accordance with an implementation of the disclosure; however, it will be appreciated that the preview and original page are requested at the same time and they can be loading in parallel, wherein such parallelism is actually illustrated in FIG. 2. The server arrangement is configured to load a given web page into a device connected via a data communication system to the server arrangement. The given web page to be rendered to a user of the device requires access by a browser executing on the device to one or more resources from the server arrangement. At a step 602, a request from the browser for a preview bundle of the given web page is received at the server arrangement. At a step 604, the preview bundle of the given web page is sent from the server arrangement to the device for the device to process to generate a first rendition of the given web page on the device for presentation to the user, and a request for web page data required for generating a second rendition of the given web page is received from the browser. At a step 606, the web page data is sent from the server arrangement to the device for the device to process to generate the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user. The browser is configured to switch from presenting the first rendition to the user to presenting the second rendition of the given web page to the user.

Optionally, the method further includes configuring the server arrangement to include one or more servers for providing the web page data to the device, and configuring the server arrangement to include an intermediate service server for providing the preview bundle to the device. Optionally, the method further includes configuring the intermediate service server to obtain information from the one or more servers for generating the preview bundle.

A software product including instructions that are executable on computing hardware to implement the above methods. Optionally, the software product is implemented, at least in part, as a software product that is executable on computing hardware of a data communication device.

The above method further includes any file caching of external CSS style sheets, caching of the files in memory, reusing of the in-memory render tree of the preview page for rendering the original web page.

The above method further speed-ups preview rendering by optimizing CSS styling by a web accelerator, WA. The web accelerator may remove all unused CSS rules from style sheets. The web accelerator may inline all or a subset of styles defined in style sheets, and inline means defines them in an elements style property. The subset of styles may depend on a frequency of styling rules that are used in a document, or a number of styles, or a heuristic on processing complexity of a style rule.

The web accelerator may serialize computed styles (all those with non-default values) for each element when serializing in-memory documents to HTML. Signals to a device browser that styles are already computed. The device browser may skip style cascading rules processing, thereby avoiding sending of separate CSS files in the MHTML.

The above method further speed-ups preview rendering by layout pre-calculating performed by the web accelerator. The web accelerator computes the layout of each element in a preview document and inlines a result into a transferred preview document. The signals to the device browser with a special indicator in the MHTML that layout has been pre-calculated.

This process requires the web accelerator to know the device browser’s viewport width (in physical or device-independent pixels size), and information about the device browser’s specific fonts. The web accelerator may obtain this information with a request received from the device or a (information caching) database.

Upon recognizing from the indicator indicating layout pre-calculation, the device browser deploys a special mode to skip layout computation for the preview and use a provided element coordinates instead.

In the above method, at least these properties may need to be added for each document element: top, left, width, height; for text, the font including font-size, and wrapping of text gets pre computed and marked by inserting additional span elements or comparable markup.

The above method further includes DOM preview re-generation on the web accelerator. The web accelerator caches the preview document on a first request and serves consecutive requests from the cache. The web accelerator may observe a cache-control instruction sent by the one or more servers. Time to live, TTL, of a preview may be the shortest TTL of all files included in the MHTML and the original HTML file. The web accelerator re-loads a content from the one or more servers when the content expires in the cache and before it receives a request from the device (i.e. ahead of use re-loading). The web accelerator performs ahead-of-time re-loading only on the content that is identified as frequently needed or taking a long time to load from the one or more servers. The web accelerator performs web crawling and generates a preview for all the found pages where starting pages and optionally limitations of the web crawling process (in terms of pages that may be processed) are configurable. The web accelerator generates the preview and keeps the preview up-to-date on a configurable list of web pages or entire websites.

Optionally, the method includes performing a remote browser DOM Mirroring preview to get a preview into the device browser by the web accelerator. In such a method, the device browser receives a specially crafted webpage as a response to page preview requests. The specially crafted webpage includes a javascript library that may fetch elements of the preview page as a serialized DOM element from the web accelerator and reconstruct the webpage in the device browser. The web accelerator, WA, runs a preview mirroring service to handle the request received from a user for preview. The device browser sends an URL request to the web accelerator for preview. The web accelerator, WA’s, Preview Mirroring Service, PMS, receives the user’s request. The web accelerator, WA’s, PMS, constructs a simple page with empty body HTML with custom JavaScript, JS, and sends the simple page as a response to the device browser. The device browser receives a simple page and loads the simple page. The javascript executes and a device browser page makes a WebSocket connection (or WebRTC) to the WA’s PMS. In parallel to the above process, the WA’s PMS starts a headless browser in the web accelerator and loads the URL sent by the user. When the simple page is loading in the headless browser, the WA’s PMS injects a JS snippet (namely, library) into the page. The injected javascript creates a WebSocket connection in the headless browser to the PMS. The injected javascript also registers DOM Mutation Observers in the simple page which listens for the DOM changes in the simple page. A WA’s PMS server socket is connected to both the user’s browser page and WA’s Headless browser page. In the web accelerator, when the headless browser page mutation observer receives DOM updates, the headless browser page mutation observer serializes and pushes them as a JSON message in the WebSocket connection. In the WA, PMS receives a message from the headless browser with an identifier. The WA, PMS processes the message and sends the message to the device browser. The user browser page WebSocket receives the message and the user browser page WebSocket de-serializes the message and creates a DOM node and adds the message to a DOM tree. The above process keeps repeating until the device browser swaps a real page. In addition, the WA’s headless browser may send a request dependency tree to the device to assist in loading the background original page faster.

The method is advantageous in the preview being faster as the device only mirrors the DOM objects and there is no javascript execution of the real page. The user can have basic interaction with the page, navigate with the page, animations working during the preview.

Optionally, the method includes performing compositor frames generation and caching for a preview page as described herewith.

The method may save compositor frames/tiles generated by a render process in the web accelerator. A browser view class may receive the composite frames from a Tenderer compositor and subsequently serializes and saves pixels and metadata. The web accelerator may send the saved pixel data and metadata to the device over a custom protocol. The device may use the composite frames (for example, including a texture and metadata) to generate the preview page. As soon as a background live frame for an original document is ready, the preview page may be swapped with an original web page.

The method enables to define a new protocol to transmit the compositor frames (2D textures, even compressed) along with the metadata and a RenderPassList (namely, List of Quad parameters). The compositor frames may have deep knowledge of frame parameters such as page scale factor, frame deadline, etc. which may ensure a smoother transition between the preview page and original frames, as they may seamlessly fit into the UI subsystem such that the switching between the preview page and original web page may be unobservable. The method enables the switching between the preview page and the original webpage content without using a new tab or a render process, thereby reducing considerable RAM overhead. The method reduces time taken to load the original webpage, because a graphics back-end is ready after accepting the compositor frame and setting up the output surface, GPU Command Buffers. Optionally, the method includes performing optimization of Javascript handling. The web accelerator may aware a type of browser running on the device and there is a possibility for content optimization for an original page. The web accelerator, WA, may be aware of a hardware platform used by a user hardware platform which opens up possibilities for pre compilation of javascript resources. While generating the preview page in the headless browser on the web accelerator, WA, the javascript is compiled and executed. The headless browser may be modified to save a compiled version of javascript in the cache-store of the web accelerator, WA. Once the preview content is generated on the web accelerator, WA, and sent to the device browser, the web accelerator, WA, may send any remaining (namely, below the fold) resources and JavaScript resources to the device browser to load the original page in parallel with a background task. During this process, the web accelerator, WA, sends a compiled Java script, JS, (namely, by using machine code, for example by using a V8 JavaScript engine) along with other resources. The device browser directly uses the compiled JavaScript instead of doing parsing and compilation of the JavaScript sources, thereby improving the page’s readiness for user interaction. The device browser stores the compiled JS in its disk cache along with the other resources. The web accelerator, WA, also caches the compiled JS, when a page load request for the same page comes from other device browsers, and the consecutive preview generation may be accelerated (because the headless browser does not have to compile javascript on consecutive requests) and pushed to a new device browser even faster. The JavaScript compilation at the web accelerator, WA, may be handled according to the device browser’s target architecture based on user agent data. The user agent string includes an OS and a platform, a device model, etc. The web accelerator, WA, obtains a target Hardware platform, which may be by having a list of interested devices/models and target platforms, and performs a needed action.

Optionally, the method includes generating a preview file on the web server. The preview file is generated by the web server itself that serves the content of the original page. The web accelerator, WA, functionality is added to the web server as a custom plugin to generate the preview page. The device browser uses a custom HTML header to page request to indicate that the device browser supports the web page preview in the MHTML format. In this method, the device sends a request to the page and adds a custom header “x-preview- format: mhtml”. Additional headers may deliver screen resolution information to the one or more servers. The one or more servers detect that the device supports custom previews and responds with the MHTML preview echoing the same custom header. A generated preview may be cached on the Webserver. The device detects that the one or more servers respond with MHTML preview, receives and renders the MHTML preview on a screen, and in parallel performs the below process.

The device’s browsing client may issue a second request for the content of the original page, receives the content, and renders that on the screen. The second request includes an additional header “x-preview-format: none” to guarantee that the one or more servers may respond with the content of the original page.

The method is advantageous in improving an architecture by moving preview generation from an intermediate node in a network to the Webserver that serves the original page and accordingly results in excluding delay for content requests traveling between the one or more servers and the web accelerator, WA. The one or more servers may know when the content changes and can keep generated the preview page up to date in case there is a change in the original content. The preview of most of the pages served by the one or more servers can be generated beforehand since it is easy to manage a smaller number of pages that current server hosts.

Optionally, the method includes using HTTP2 to push DOM preview resources and the original page. In this method, the web accelerator, WA responds to the preview request received from the device browser executing on the device by pushing first resources needed for rendering the DOM preview. The resources are not bundled in one huge multipart HTML file but pushed as individual items. The device browser uses existing support for caching of push resources. After pushing the resources needed for DOM preview, the web accelerator, WA, continues with pushing additional critical resources required to render the original page. The device browser may load the original webpage in the background and switch to the original webpage when the rendering of the original page is completed.

The push and preload web page resources are as follows: first, an accelerator pushes files to a browser file cache using HTTP/2 Push. Efficient push requires that the Accelerator knows the files present in the browser cache, failing which there could be duplicate transfers. The accelerator has more complete and more up-to-date information about resources needed for a HTML page as compared to the browser itself, as the accelerator learns from multiple browsing clients.

Optionally, the method includes tab serialization which proposes to send a preview of a web as a binary large object (BLOB) including serialized data of the browser tab content. A tab serializer takes a Chrome® tab on a cloud browser (or more precisely WebContents) and serializes its state to a binary blob. A binary blob can be later deserialized into a tab in the device browser. The tab serializer serializes the necessary and sufficient Chrome/Blink/V8 state that is needed to preserve a tab, which includes all DOM/CSS/ActiveDOMObject states and V8 Javascript, Virtual Machine, VM, state.

FIG. 7 is an illustration of an exemplary computer system 700 in which the various architectures and functionalities of the various previous implementations may be implemented. As shown, the computer system 700 includes at least one processor 704 that is connected to a bus 702, wherein the computer system 700 may be implemented using any suitable protocol, such as PCI (Peripheral Component Interconnect), PCI-Express, AGP (Accelerated Graphics Port), HyperTransport, or any other bus or point-to-point communication protocol (s). The computer system 700 also includes a memory 706.

Control logic (software) and data are stored in the memory 706 which may take a form of random-access memory (RAM). In the disclosure, a single semiconductor platform may refer to a sole unitary semiconductor-based integrated circuit or chip. It should be noted that the term single semiconductor platform may also refer to multi-chip modules with increased connectivity which simulate on-chip modules with increased connectivity which simulate on- chip operation, and make substantial improvements over utilizing a conventional central processing unit (CPU) and bus implementation. Of course, the various modules may also be situated separately or in various combinations of semiconductor platforms per the desires of the user.

The computer system 700 may also include a secondary storage 710. The secondary storage 710 includes, for example, a hard disk drive and a removable storage drive, representing a floppy disk drive, a magnetic tape drive, a compact disk drive, digital versatile disk (DVD) drive, recording device, universal serial bus (USB) flash memory. The removable storage drive at least one of reads from and writes to a removable storage unit in a well-known manner.

Computer programs, or computer control logic algorithms, may be stored in at least one of the memory 706 and the secondary storage 710. Such computer programs, when executed, enable the computer system 700 to perform various functions as described in the foregoing. The memory 706, the secondary storage 710, and any other storage are possible examples of computer-readable media.

In an implementation, the architectures and functionalities depicted in the various previous figures may be implemented in the context of the processor 704, a graphics processor coupled to a communication interface 712, an integrated circuit (not shown) that is capable of at least a portion of the capabilities of both the processor 704 and a graphics processor, a chipset (namely, a group of integrated circuits designed to work and sold as a unit for performing related functions, and so forth).

Furthermore, the architectures and functionalities depicted in the various previous-described figures may be implemented in a context of a general computer system, a circuit board system, a game console system dedicated for entertainment purposes, an application-specific system. For example, the computer system 700 may take the form of a desktop computer, a laptop computer, a server, a workstation, a game console, an embedded system.

Furthermore, the computer system 700 may take the form of various other devices including, but not limited to a personal digital assistant (PDA) device, a mobile phone device, a smart phone, a television, and so forth. Additionally, although not shown, the computer system 700 may be coupled to a network (for example, a telecommunications network, a local area network (LAN), a wireless network, a wide area network (WAN) such as the Internet, a peer-to-peer network, a cable network, or the like) for communication purposes through an I/O interface

708.

It should be understood that the arrangement of components illustrated in the figures described are exemplary and that other arrangements may be possible. It should also be understood that the various system components (and means) defined by the claims, described below, and illustrated in the various block diagrams represent components in some systems configured according to the subject matter disclosed herein. For example, one or more of these system components (and means) may be realized, in whole or in part, by at least some of the components illustrated in the arrangements illustrated in the described figures. In addition, while at least one of these components are implemented at least partially as an electronic hardware component, and therefore constitutes a machine, the other components may be implemented in software that when included in an execution environment constitutes a machine, hardware, or a combination of software and hardware.

Although the disclosure and its advantages have been described in detail, it should be understood that various changes, substitutions, and alterations can be made herein without departing from the spirit and scope of the disclosure as defined by the appended claims.

Claims

1. A method for loading a given web page into a device (102, 202, 302, 402) connected via a data communication system (104, 320, 416) to one or more servers (106A-N, 322A-N, 418A-N) and to an intermediate service server (108), wherein the given web page to be rendered to a user (100, 200) requires a browser to access a plurality of resources from the one or more servers (106A-N, 322A-N, 418A-N), wherein the method includes:

(a) arranging for the browser to send a request to the intermediate service server (108) for a preview bundle of the given web page;

(b) receiving from the intermediate service server (108) the preview bundle of the given web page at the device (102, 202, 302, 402) and processing the preview bundle at the device (102, 202, 302, 402) to generate a first rendition of the given web page on the device (102, 202, 302, 402) for presentation to the user (100, 200), and arranging for the browser to request web page data required for generating a second rendition of the given web page to be provided from the one or more servers (106A-N, 322A-N, 418A-N);

(c) receiving the web page data and generating the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user (100, 200); and

(d) configuring the browser to switch from presenting the first rendition to the user (100, 200) to presenting the second rendition of the given original web page to the user (100, 200).

2. The method of claim 1, wherein the method includes switching from presenting the first rendition to the user (100, 200) to presenting the second rendition to the user (100, 200) in a seamless manner such that the switching is not discernible to the user (100, 200).

3. The method of claim 1 or 2, wherein the method includes arranging for the first rendition to be a simplified version of the second rendition, wherein the first rendition at least enables the user (100, 200) by using the browser to perform at least one of: zoom in/out in respect of the first rendition, select and copy/paste textural content from the first rendition, save one or more images from the first rendition.

4. The method of claim 1, 2 or 3, wherein the method includes providing the preview bundle in a bundling format and including HTML code, wherein the bundling format includes at least one of: MHTML, a Mozilla Archive Format, a Web- Archive format.

5. The method of claim 3 or 4, wherein the preview bundle includes compressed (for example, “zipped”) data.

6. The method of claim 3, 4 or 5, wherein the method includes structuring resources of the preview bundle in an order for most efficient execution of the first rendition in the device (102, 202, 302, 402).

7. The method of claim 6, wherein the method includes arranging the resources in the preview bundle in a priority order for the browser to execute as soon as they are received at the device (102, 202, 302, 402).

8. The method of any one of the preceding claims, wherein the preview bundle is devoid of executable code capable of providing user interaction.

9. The method of any one of the preceding claims, wherein method includes sending the request for the preview bundle in (a) as a single request to the intermediate service server (108).

10. The method of any one of the preceding claims, wherein the method includes reusing a portion of data used for generating the first rendition for generating the second rendition at the device (102, 202, 302, 402).

11. The method of any one of the preceding claims, wherein the method includes storing data of the preview bundle in a data cache of a processor of the device (102, 202, 302, 402).

12. The method of any one of the preceding claims, wherein the method includes modifying the browser to cache all parts that arrive in the preview bundle as individual resources, so that the resources are useable in the device (102, 202, 302, 402) for rendering other web pages on the device (102, 202, 302, 402).

13. The method of any one of the preceding claims, wherein the method includes executing the browser on the device (102, 202, 302, 402).

14. The method of any one of claims 1 to 12, wherein the method includes executing the browser remotely from the device (102, 202, 302, 402) as a proxy.

15. The method of claim 14, wherein the proxy is implemented by at least one of: a proxy server, a remotely run browser that proxies its user interface (UI) to a screen of the device (102, 202, 302, 402).

16. A method for operating a server arrangement (106A-N), wherein the server arrangement (106A-N) is configured to load a given web page into a device (102, 202, 302, 402) connected via a data communication system (104, 320, 416) to the server arrangement (106A-N), wherein the given web page to be rendered to a user (100, 200) of the device (102, 202, 302, 402) requires access by a browser executing on the device (102, 202, 302, 402) to a plurality of resources from the server arrangement, wherein the method includes:

(a) receiving at the server arrangement (106A-N) a request from the browser for a preview bundle of the given web page;

(b) sending from the server arrangement (106A-N) the preview bundle of the given web page to the device (102, 202, 302, 402) for the device (102, 202, 302, 402) to process to generate a first rendition of the given web page on the device (102, 202, 302, 402) for presentation to the user (100, 200), and receiving from the browser a request for web page data required for generating a second rendition of the given web page; and

(c) sending from the server arrangement (106A-N) the web page data to the device (102, 202, 302, 402) for the device (102, 202, 302, 402) to process to generate the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user (100, 200); wherein the browser is configured to switch from presenting the first rendition to the user (100, 200) to presenting the second rendition of the given web page to the user (100, 200).

17. The method of claim 16, wherein the method further comprises configuring the server arrangement to include one or more servers (106A-N, 322A-N, 418A-N) for providing the web page data to the device (102, 202, 302, 402), and configuring the server arrangement to include an intermediate service server (108) for providing the preview bundle to the device (102, 202, 302, 402), wherein the method further includes configuring the intermediate service server (108) to obtain information from the one or more servers (106A-N, 322A-N, 418A-N) for generating the preview bundle.

18. A software product including instructions that are executable on computing hardware to implement the method of any one of claims 1 to 17.

19. A software product of claim 18, wherein the software product is implemented, at least in part, as a software product that is executable on computing hardware of a data communication device.

20. A device (102, 202, 302, 402) that is configured to load a given web page into the device (102, 202, 302, 402) when connected via a data communication system (104, 320, 416) to one or more servers (106A-N, 322A-N, 418A-N) and an intermediate service server (108), wherein the device (102, 202, 302, 402) is configured to use a browser that is configured to access a plurality of resources from the one or more servers (106A-N, 322A-N, 418A-N) and the intermediate service server (108), wherein the device (102, 202, 302, 402) is configured:

(a) to use the browser to send a request to the intermediate service server (108) for a preview bundle of the given web page;

(b) to receive the preview bundle of the given web page at the device (102, 202, 302, 402) and to process the preview bundle at the device (102, 202, 302, 402) to generate a first rendition of the given web page on the device (102, 202, 302, 402) for presentation to the user (100, 200), and arranging for the browser to request web page data required for generating a second rendition of the given original web page from the one or more servers ( 106 A-N, 322 A-N, 418 A- N);

(c) to receive the web page data and to generate the second rendition of the web page data concurrently while the first rendition of the web page is presented to the user (100, 200); and

(d) to arrange for the browser to switch from presenting the first rendition to the user (100, 200) to presenting the second rendition of the given web page to the user (100, 200).

21. The device (102, 202, 302, 402) of claim 20, wherein the device (102, 202, 302, 402) is configured to switch from presenting the first rendition to the user (100, 200) to presenting the second rendition to the user (100, 200) in a seamless manner such that the switching is not discernible to the user (100, 200).

22. The device (102, 202, 302, 402) of claim 21 or 21, wherein the device (102, 202, 302, 402) is arranging for the preview bundle to have a preview format for enabling the user (100, 200) by using the browser to perform in respect of the first rendition at least one of: zoom in/out in respect of the first rendition, select and copy/paste textural content from the first rendition, save one or more images from the first rendition.

23. The device (102, 202, 302, 402) of any one of the claims 20 to 22, wherein the device (102, 202, 302, 402) is configured to send the request in (a) to the intermediate service server

(108) as a single request.