CN111339458B - Page presentation method and device - Google Patents

Page presentation method and device Download PDF

Info

Publication number
CN111339458B
CN111339458B CN201811550201.3A CN201811550201A CN111339458B CN 111339458 B CN111339458 B CN 111339458B CN 201811550201 A CN201811550201 A CN 201811550201A CN 111339458 B CN111339458 B CN 111339458B
Authority
CN
China
Prior art keywords
page
display
target
display information
target page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201811550201.3A
Other languages
Chinese (zh)
Other versions
CN111339458A (en
Inventor
刘翔
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201811550201.3A priority Critical patent/CN111339458B/en
Publication of CN111339458A publication Critical patent/CN111339458A/en
Application granted granted Critical
Publication of CN111339458B publication Critical patent/CN111339458B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

A page presentation method and device are provided. The method comprises the following steps: acquiring page display information of a target page to be displayed; presenting a pre-presentation page of the target page based on the page display information; and displaying the target page with the rendered target page on the pre-display page. Therefore, before the target page is rendered and displayed, the pre-display page related to the page display information can be presented, the display time of the white screen is shortened, and the user experience is improved. Therefore, before the page content is rendered and displayed, the page pre-display page similar to the page content is acquired and displayed, so that the white screen time is reduced, and the use experience of a user is improved.

Description

Page presentation method and device
Technical Field
The present invention relates to a network front end, and in particular, to a method and an apparatus for displaying a page by using a corresponding browser application.
Background
With the development of internet technology and the popularization of mobile terminals, people are increasingly accustomed to acquiring various types of information from networks. Among these, browser applications, especially various kinds of browser APP installed on a mobile terminal or APP with browser functions, become a common tool for people to acquire information.
In the process of opening a Web page by a browser application, webView background color (white by default) is rendered first, then Web page background color (usually white as well) is rendered, and then page content is rendered. The page content is usually required to be rendered and displayed through the processes of JS execution, resource request, analysis typesetting rendering and the like, so that a user can see a white screen for a long time before the page content is completely displayed. Under the condition of poor network transmission or higher resource occupancy rate of terminal equipment, the white screen time before page display can be quite long, and the use experience of a user is seriously affected.
For this reason, a scheme capable of improving the influence of the long-time white screen on the user experience is required.
Disclosure of Invention
In order to solve at least one problem, the invention obtains and displays the page pre-display page close to the page content before rendering and displaying the page content, thereby reducing the time for a user to see the white screen and improving the use experience of the user.
In one aspect of the present invention, a page rendering method is provided, including: acquiring page display information of a target page to be displayed; before the target page rendering is completed, presenting a pre-display page of the target page based on the page display information; and displaying the target page with the rendered target page on the pre-display page. Therefore, the browser application can present the pre-display page related to the page display information before the rendering is completed and the target page is displayed, the display time of the white screen is shortened, and the user experience is improved.
Further, acquiring page display information of the target page to be displayed may include: resolving a Uniform Resource Locator (URL) of the target page to be displayed; and acquiring specific parameters related to the page display in the URL as page display information. Wherein, the specific parameters related to the page display in the URL are added by a page provider or a browser operator based on the related information of the page.
Alternatively, acquiring page display information of a target page to be displayed may include: acquiring and analyzing the HTML document of the target page to be displayed; and acquiring specific parameters related to the page display in the HTML document as page display information.
Alternatively, acquiring page display information of the target page to be displayed may further include: and acquiring page display information of the target page to be displayed from a configuration list issued by the server.
Therefore, in practical application, the page display information can be conveniently acquired based on specific settings, so that the preliminary display of the page is realized as soon as possible.
Preferably, the page display information may include at least one of: background color of the target page; and a page frame of the target page. To this end, presenting the predicted page of the target page based on the page display information may include: modifying a default webpage background color into a background color of the target page; and/or rendering the page frame in advance based on the page frame of the target page. Therefore, the white screen display of the rendered page content before being displayed is changed into the background color display which is the same as or similar to the background color of the real page content or the real page frame display, so that the waiting feel of a user is greatly reduced.
Preferably, the page presentation method may further include: setting a background color of a network view based on the background color of the target page. Therefore, the display of the network view white screen can be further avoided, and the use experience of a user is further improved.
In another aspect of the present invention, there is provided a page rendering device including: the information pre-acquisition unit is used for acquiring page display information of a target page to be displayed; the display device comprises a display unit, a target page display unit and a display unit, wherein the display unit is used for displaying a display page of a target page based on page display information before the target page is rendered; and a rendering page display unit for displaying the rendered target page on the pre-display page.
Preferably, the information pre-acquisition unit may be configured to: resolving a Uniform Resource Locator (URL) of the target page to be displayed; and acquiring specific parameters related to the page display in the URL as page display information. The specific parameters related to the page display in the URL may be added by the server end based on the page related information.
Alternatively, the information pre-acquisition unit may be configured to: acquiring and analyzing the HTML document of the target page to be displayed; and acquiring specific parameters related to the page display in the HTML document as page display information.
Alternatively, the information pre-acquisition unit may be configured to: and acquiring page display information of the target page to be displayed from a configuration list issued by the server.
The page display information may include at least one of: background color of the target page; and a page frame of the target page. The presentation page rendering unit may then be adapted to: modifying a default webpage background color into a background color of the target page; and/or rendering the page frame in advance based on the page frame of the target page.
Further, the pre-presentation page presenting unit may be further configured to: setting a background color of a network view based on the background color of the target page.
In yet another aspect of the present invention, a method for displaying a page by a browser application is provided, including: before the browser kernel renders and displays the page content, displaying a pre-display page of a target page based on page display information; and displaying the target page rendered by the browser kernel on the pre-display page.
Preferably, the method may further comprise: before displaying a predicted page of a target page based on page display information, displaying a background color of a network view based on the page display information.
In another aspect of the invention, a computing device is presented comprising: a processor; and a memory having executable code stored thereon, which when executed by the processor, causes the processor to perform the page rendering method or the display method as described above.
In another aspect of the invention, a non-transitory machine-readable storage medium is presented on which executable code is stored which, when executed by a processor of an electronic device, causes the processor to perform a page rendering method or a display method as described above.
Therefore, the method and the device can set or change the default display content (for example, modify the default page white screen into the known page background color) before the rendered page content is displayed by acquiring the page display information (for example, page background color) arranged in the URL and/or the HTML document in advance, so that the time for displaying the white screen to the user is reduced, and the use experience of the user is improved.
Drawings
The foregoing and other objects, features and advantages of the disclosure will be apparent from the following more particular descriptions of exemplary embodiments of the disclosure as illustrated in the accompanying drawings wherein like reference numbers generally represent like parts throughout exemplary embodiments of the disclosure.
Fig. 1 shows the structure of a computer with webkit kernel.
Fig. 2 is an example of a conventional flow diagram of a browser for page display.
FIG. 3 is an example of a flow diagram of a rendering implementation of a current browser.
FIG. 4 shows a flow chart of a page rendering method according to one embodiment of the invention.
FIG. 5 illustrates one example of a pre-displayed page frame.
Fig. 6 shows a schematic diagram of a page rendering device according to an embodiment of the invention.
Fig. 7 shows a flowchart of a browser application page display method according to an embodiment of the present invention.
Detailed Description
Preferred embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While the preferred embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
Browser applications, especially various kinds of browser APP installed on mobile terminals or APP with browser functions, are now becoming common tools for people to acquire information. Herein, the use of a "browser application" or "browser" refers to a dedicated browser as well as other applications having Web page display functions, such as various kinds of browser APPs installed on mobile terminals (e.g., smartphones) and other APPs with browsing and page rendering functions.
In the process of opening a Web page by a browser application, webView background color (white by default) is rendered first, then Web page background color (usually white as well) is rendered, and then page content is rendered. The page content is usually required to be rendered and displayed through the processes of JS execution, resource request, analysis typesetting rendering and the like, so that a user can see a white screen for a long time before the page content is completely displayed. Under the condition of poor network transmission or higher resource occupancy rate of terminal equipment, the white screen time before page display can be quite long, and the use experience of a user is seriously affected. Therefore, before the target page is rendered and displayed by the browser, the default white screen display is changed based on the display information of the target page (for example, the background color of the page which is defaulted to be white is changed to the background color of the target page), so that the time of facing the white screen by the user is shortened or eliminated (the user cannot feel the background color), the boring feeling in the waiting process of the user is reduced, and the use experience of the user is improved.
For the purposes of facilitating an understanding of the inventive principles of this patent disclosure, a description will first be given of the relevant context of browser rendering.
The browser can be architecturally split into two parts, a kernel and a shell. The browser kernel is responsible for interpreting (e.g., HTML, javaScript) the web page's grammar and rendering (displaying) the web page, i.e., the browser parses and renders the web page through the kernel. The browser shell mainly processes the browser appearance interface and the control experience.
The browser kernel is the browser core. Typically, the browser kernel is also referred to as a rendering engine. The rendering engine is used for converting the HTML/CSS/JavaScript text and the corresponding resource file into an image result for display.
Since the Webkit is used as the kernel in most of the current browser kernels, the following describes the computer structure with Webkit kernel in detail. It should be appreciated that the basic principles of Webkit work are also generally applicable to other browser kernels, and in particular to the Blink kernels developed therefrom. Browsers based on other browser kernels may also utilize the page rendering scheme of the present invention.
FIG. 1 shows the structure of a computer with a Webkit kernel. A computer may be implemented as various types of computer devices, such as a desktop computer, a portable computer, a tablet computer, a smart phone, a Personal Data Assistant (PDA), or other types of computer devices, but is not limited to any particular form. The computer may include a processing module 100, a storage subsystem 200, an input device 300, a display 400, a network interface 500, and a bus 600.
The processing module 100 may be a multi-core processor or may include multiple processors. In some embodiments, the processing module 100 may comprise a general-purpose host processor and one or more special coprocessors, such as Graphics Processors (GPUs), digital Signal Processors (DSPs), and so forth. In some embodiments, processor 100 may be implemented using custom circuitry, for example, an Application Specific Integrated Circuit (ASIC) or a Field Programmable Gate Array (FPGA). In some embodiments, the processing module 100 may be a similar circuit executing executable instructions stored on itself. In still other embodiments, processing module 100 may execute executable instructions stored on storage subsystem 200. In the embodiment shown in fig. 1, the processing module 100 is provided with an operating system 110 and a browser 120 running on the operating system 110. Browser 120 includes a Webkit kernel 123, an embedded interface 122, and some browser plug-ins 121 that interact with Webkit kernel 123 through the embedded interface 122. The WebKit kernel 123 (i.e., rendering engine) may in turn include a typesetting engine (Webcore) 1231, a JS engine 1232, and a WebKit Ports migration portion 1233.
In the architecture shown in FIG. 1, the layout engine 1231 in turn includes three modules: the system comprises an analysis module, a typesetting module and a rendering module. The parsing module may further include an HTML parser and a CSS parser. The HTML parser includes a tag generator and a tree constructor. The tag generator is used to parse the incoming web page content (typically in the form of an XML document) into a plurality of HTML tags. The HTML tag includes a start tag, an end tag, an attribute name, and an attribute value. The mark generator is used for identifying the marks and transmitting the marks to the tree constructor, and then receiving the next character to identify the next mark; this is repeated until the end of the input.
The JS engine 1232 is configured to parse the Javascript language, and implement a dynamic effect of the web page by executing the Javascript language. The JS engine can be JavaScripCore engine or V8 engine, javaScripCore engine is the default JS engine in webkit. In Google's chrome open source project, javaScripCore engine is replaced with a V8 engine, which is an open source JavaScript engine developed by Google, U.S.A.
WebKit Ports migration portion 1233 includes network stacks, hardware acceleration, video, text, picture decoding, loading modules (network stacks), and other functional modules. The resource loading of webkit is implemented by individual migration, so the network implementation may be different for each migration.
Storage subsystem 200 may include various types of storage units, such as system memory, read Only Memory (ROM), and persistent storage. Wherein the ROM may store static data or instructions required by the processing module 100 or other modules of the computer. The persistent storage may be a readable and writable storage. The persistent storage may be a non-volatile memory device that does not lose stored instructions and data even after the computer is powered down. In some embodiments, the persistent storage device employs a mass storage device (e.g., magnetic or optical disk, flash memory) as the persistent storage device. In other embodiments, the persistent storage may be a removable storage device (e.g., diskette, optical drive). The system memory may be a read-write memory device or a volatile read-write memory device, such as dynamic random access memory. The system memory may store instructions and data that are required by some or all of the processors at runtime. Furthermore, storage subsystem 200 may include any combination of computer-readable storage media, including various types of semiconductor memory chips (DRAM, SRAM, SDRAM, flash memory, programmable read-only memory), magnetic disks, and/or optical disks may also be employed. In some embodiments, storage subsystem 200 may include readable and/or writable removable storage devices such as Compact Discs (CDs), digital versatile discs (e.g., DVD-ROMs, dual-layer DVD-ROMs), blu-ray discs read only, super-density discs, flash memory cards (e.g., SD cards, min SD cards, micro-SD cards, etc.), magnetic floppy disks, and the like. The computer readable storage medium does not contain a carrier wave or an instantaneous electronic signal transmitted by wireless or wired transmission. In some embodiments, the storage subsystem 200 is capable of storing one or more software programs that can be executed by the processing module 100 or resource files that need to be invoked, which may include some third party libraries including, but not limited to, audio libraries, video libraries, 2D graphics libraries, 3D graphics libraries.
The user interface may be provided by one or more user input devices 300, a display 400, and/or one or more other user output devices. Input device 300 may include a device by which a user inputs signals to a computer that may interpret the signals as containing a particular user request or information. In some embodiments, a web address may be input to the user interface through the keyboard, and the browser 120 is required to display the web content corresponding to the input web address through the user interface. In some implementations, the input device 300 may include some or all of a keyboard button, a touch screen, a mouse or other pointing device, a scroll wheel, a click wheel, a dial, keys, switches, a keypad, a microphone, and the like.
The display 400 may display images generated by a computer and may include various types of image devices such as Cathode Ray Tubes (CRTs), liquid Crystal Displays (LCDs), light Emitting Diodes (LEDs), including Organic Light Emitting Diodes (OLEDs), projection systems, and the like, as well as a collection of other supporting electronics (e.g., DACs, ADCs, signal processors, and the like). In some embodiments, other user output devices may be provided in addition to or in place of display 400, such as signal lights, speakers, tactile sensors, printers, and the like.
In some implementations, the user interface can be provided through a graphical user interface. Some areas in the display 400 define some visual graphical elements as interactive or control objects that are selected by the user via the input device 300. For example, the user may operate the user input device 300 to input a web address at a designated position on the mobile screen, and control the browser to display the web page content corresponding to the web address on the display 400. In some implementations, a touch device that can recognize user gestures as an input device, which gestures can be, but need not be, associated with an array on the display 300.
The network interface 500 provides voice and/or data communication functions for a computer. In some implementations, the network interface 500 may include a radio frequency transceiver to communicate voice and/or data (e.g., data network technology using cellular telephone technology, such as 3G, 4G, or EDGE, WIFI), a GPS receiving module, and/or other modules. In some implementations, the network interface 500 may provide additional wireless network connections or alternative wireless interfaces. The network interface 500 may be a combination of hardware (e.g., antenna, modem, codec, and other analog and/or digital signal processing circuitry) and software modules.
Bus 600 may include a variety of systems, external devices, and chip buses that connect the various components within the computer. For example, bus 600 connects processing device 100 to storage subsystem 200, and may also connect input device 300 to display 400. Bus 600 may also enable a computer to connect to a network through network interface 500. In this case, the computer may be part of a plurality of networked computer devices. Any or all of the components of a computer may be used in concert in embodiments of the invention.
Some embodiments include electronic components, such as microprocessors, memory having computer instructions and data stored in a computer-readable storage medium. Many of the features described in this detailed description can be implemented by way of method steps performed by computer instructions stored on a computer-readable storage medium. When these computer instructions are executed, the computer processing unit performs the various functions of the instructions. The program instructions or computer-encoded embodiments may be machine code, such as code obtained by compiling other high-level languages using a computer, electronic components, or a microprocessor of a parser.
The processing device 100 may be a computer that is suitably programmed to perform various types of functions. For example, processing device 100 downloads web page content from a server to storage subsystem 200 via network interface 500. Then, the processing apparatus 100 reads the web page file from the storage subsystem 200 to the layout engine 1231. The parsing module of the typesetting engine 1231 parses the web page to construct a DOM tree. When the DOM tree is built, the typesetting module of the typesetting engine 1231 receives the style information of the CSS parser, constructs a new internal drawing model (Renderobject Tree, render object tree, also called typesetting tree), calculates the position and size of each element in the model by the typesetting module, and then finishes drawing from the model to the graphics by the rendering module. In the process of displaying the web page content, the processing module 100 may also read the audio file from the audio library of the third party library of the storage subsystem 200 and/or the video file from the video library and/or the 2D graphic and/or the 3D graphic from the 2D graphic library and/or the 3D graphic through the bus, and then draw a final image, and display the final image on the display 400.
It should be understood that the computer is illustrative. Computers may have other functions not specifically described (e.g., mobile phone, GPS, power management, one or more cameras, various connection ports or accessories for connecting to external devices, etc.). Further, the specific functional blocks referred to by computer 100 are described herein for ease of description and are not meant to imply a particular physical configuration of the functional blocks. Moreover, these functional modules need not be in one-to-one correspondence with physical modules. The modules may be configured to perform various operations, such as by programming or setting appropriate control circuitry, and the modules may be reconfigured according to the initial settings. Embodiments of the invention may be implemented using a combination of hardware and software in a variety of devices, including electronic devices.
In the embodiment shown in fig. 1, the main role of the browser is to display a web page. Currently, a web page is a document written in HTML language. With the development of technology, the styles of the web pages are richer, and the CSS style language and the JavaScript language are used for controlling the display characteristics of the web pages. Wherein, CSS is used to describe the display information of the web page, and JS codes are used to control the internal logic of the web page.
CSS (CASCADING STYLE SHEET ) is a style sheet language in which a series of style rules are defined that act on individual elements to describe the display information of the elements and control the display style of the web page. The CSS parsing process refers to a process of changing the CSS character string to an internal rule representation of the rendering engine after being processed by the CSS parser. When the CSS content needs to be parsed, the Webkit calls a parser to parse the CSS style and stores the created result.
The above describes the computer structure and web page structure with Webkit kernel. The process of displaying the webpage content by the browser comprises loading, analyzing, typesetting and rendering display.
Referring to fig. 2, fig. 2 is an example of a conventional flow diagram of a browser for page display. In the steps shown in fig. 2: firstly, the loading module requests web page content according to the input web address and inputs the web page content into the analysis module (step S201); the parsing module parses the web page content to obtain CSS information of the DOM tree and related nodes (step S202).
In step S202, when the loading module inputs the web page content to the HTML parser in the parsing module, the HTML parser builds a DOM tree while parsing, the DOM tree being an object representation of the HTML document and also being an interface between external content (e.g., javaScript) and HTML elements. During the period, if the JS codes are encountered, the JS engine is handed over to process, and the processing result of the JS engine is returned to the analysis module to be analyzed. If the webpage contains CSS codes, the webpage is submitted to a CSS parser for parsing. Through analysis of the XML document, the whole document is converted into a DOM tree and stored in a memory. The application program can access and operate any part in the DOM tree at any time without limit of access and operation times, and can modify the XML document by modifying the document tree.
In the process of the JS engine analyzing the script, the HTML analyzer stops analyzing the XML document until the script is analyzed. If the script is external, the XML document needs to be parsed after the external script resource is synchronously fetched from the network. Of course, in some embodiments, the script in the XML document may also be labeled "refer" so that it does not stop document parsing, but rather waits until the parsing ends. Currently, an option is added to HTML5 to mark scripts as asynchronous for parsing and execution by other threads.
In step S203, the web page is typeset. After the analysis is completed, the typesetting module constructs a new internal drawing model (namely a rendering object tree) according to the analysis result (CSS information of the DOM tree and related nodes) of the analysis module, and calculates the position and size information of each element of the internal drawing model.
Subsequently, in step S204, the rendering module draws an internal drawing model (rendering object tree) into an image. When the WebKit renders a page, the rendering module traverses the rendering layer tree from the root node, accesses each layer in each rendering layer tree until the leaf node, traverses the rendering object subordinate to the layer, and draws each rendering object. The rendering layer tree determines the hierarchical order of the web page drawing, while the rendering objects subordinate to the rendering layer determine the content of this layer, and all the rendering layers and the rendering objects together determine the content of the web page finally presented on the screen.
The object of each rendered layer can be thought of as one of the layers in the image, the layers together constituting an image. Each layer corresponds to one or some visual elements in the web page that draw content onto that layer. This process is called a drawing operation (paint).
The browser itself cannot directly change the pixel output of the screen, which is required to do so through the system's own graphical user interface toolkit (GUIToolkit). Therefore, in general, a browser packages a web page to be displayed into a user interface component (UI component), commonly called web view (WebView), and then displays the web page on a screen by placing the web view on the user interface component of the application.
No compositor was used in the previous rendering architecture of the browser kernel, which directly rendered the web page content (rendering layer (RENDERLAYER), rendering object (RenderObject)) onto the window cache. A synthesizer is introduced into the current browser kernel rendering architecture. Ideally, each layer has a storage area for drawing, which is used to hold the drawing results, and finally, the contents of these layers need to be combined into the same image, called composition, and rendering using composition techniques becomes composite rendering. The browser kernel firstly generates a content snapshot of the webpage content, then the synthesizer rasterizes the content snapshot, and the rasterized cache is synthesized on the window cache, and if the synthesis is to use the GPU, the hardware acceleration is called. Thus, current rendering implementations include software rendering and hardware rendering.
Referring to fig. 3, fig. 3 is an example of a flow chart of a rendering implementation of a current browser.
Step S301: the rendering engine traverses each node of the rendering layer tree (RENDERLAYER tree) to produce a content snapshot (Webkit layer and CPU completion).
Step S302: rasterization (Rasterization). The content snapshot is rasterized inside the compositor, which is converted by an adaptation layer or CPU into an off-screen buffer (buffer) that converts into true pixel color values using some drawing instructions.
Step S303: composition, which is responsible for cached copies, may also include displacement (Translation), scaling, rotation (Rotation), alpha blending, and the like. The synthesizer is responsible for copying the internal buffer, i.e. off-screen buffer (buffer), onto the window buffer (done by the adaptation layer and GPU), and may also include operations such as displacement (Translation), scaling (Scale), rotation (Rotation), alpha blending, etc.
The time consumption of the composition in step S303 is typically much less than the time consumption of the web page content rendering, which is typically within a few milliseconds even on a mobile device, and most of the time only a small region needs to be rendered and not a full WebView-size region, thus effectively reducing the overhead of this step of rendering.
Step S304: and displaying a window in which a web view (Webview) is located. The renderer process may, for example, put the rendered memory bitmap in the shared memory, then notify the browser process to update the interface through the IPC message, and after the browser process receives the IPC notification, draw the memory bitmap onto webview corresponding to the tag using the operating system API.
The general flow of page display by the browser application has been described above in connection with fig. 1-3. In the above, in the process of opening the Web page by the browser application, webView background color (white by default) is rendered first, then webpage background color (usually white as well) is rendered, and then page content is rendered. The page content is usually required to be rendered and displayed through the processes of JS execution, resource request, analysis typesetting rendering and the like, so that a user can see a white screen for a long time before the page content is completely displayed. Under the condition of poor network transmission or higher resource occupancy rate of terminal equipment, the white screen time before page display can be quite long, and the use experience of a user is seriously affected.
Therefore, the method and the device acquire and display the pre-display page close to the page content before rendering and displaying the page content, so that the time for a user to see the white screen is shortened, and the use experience of the user is improved. It should be appreciated that the page rendering scheme of the present invention is actively made at the client by the browser application.
FIG. 4 shows a flow chart of a page rendering method according to one embodiment of the invention. It should be appreciated that the page rendering method may be implemented in a browser application or an application that includes browsing functionality.
In step S401, page display information of a target page to be displayed is acquired. Here, the page display information may refer to information related to the display content of the target page. In one embodiment, the page display information may be information acquired by the browser for maintaining consistency in display with the target page content for subsequent rendering. For example, the above page display information may be a background color of the target page, or a page frame of the target page.
In step S402, before rendering of the target page is completed, a predicted page of the target page is presented based on the page display information. Subsequently, when the browser application actually completes the target page rendering, in step S403, the target page based on rendering is displayed on the pre-presentation page.
Here, the pre-presentation page may refer to a frame-like display content that has visual consistency with the display content of the subsequent complete page. In the case where the acquired page display information is the background color of the target page, the default white background color may be modified to the same or similar color as the above-described target page background color when the web page background color is rendered. For example, in the spring festival "lucky bag" activity, the default background color of a white webpage is modified to be the same or similar color as the red active page. And in the case that the acquired page display information is the page frame of the target page, the previously-fetched page frame may be directly rendered. FIG. 5 illustrates one example of a pre-displayed page frame. As shown in fig. 5, the page frame is a frame-like content that has not been filled with a specific content (e.g., "fire and explosion combination" in the figure). Before the real page content is rendered and displayed, page frame information can be obtained in advance and displayed, so that a user does not need to face a white screen for a long time, and the use experience of the user is improved.
In different embodiments, the browser application may take different means to obtain the page display information of the target page to be displayed.
In one embodiment, the page provider or browser operator may add specific parameters (e.g., background color) related to the display of the target page to the URL of the page based on the related information of the page. For example, website A may write the background information of the page to the URL when generating the page and corresponding URL. Or the configuration server corresponding to the client can read the page frequently accessed by the user in advance and add the page display information into the URL corresponding to the page. The client can access the page directly through the modified URL. Thus, step S401 may include: resolving a Uniform Resource Locator (URL) of a target page to be displayed; and acquiring specific parameters related to the page display in the URL as page display information. Thus, the page display information can be acquired in the website analysis stage. The page display information acquired at this time is usually background color information of the web page.
In another embodiment, a server (e.g., a configuration server corresponding to a client) may read in advance each page of a website frequently accessed by a user and generate a configuration list including page display information of a target page to be displayed. Thus, step S401 may include: and acquiring page display information of the target page to be displayed from a configuration list issued by the server. Thus, page display information of the page can be acquired even before the URL is parsed. The page display information acquired at this time may be background color information of the web page or more complex page frame information.
In both cases, additional operations on the server side are required to be coordinated, and the server may be, for example, a configuration server operated by a browser provider. The browser provider causes the configuration server to pre-provide a configuration list or modify the URL to match the pre-rendering function of the browser application installed on the client.
In a more general embodiment, the page display information may be obtained directly from the process of page parsing. Thus, step S401 may include: acquiring and analyzing the HTML document of the target page to be displayed; and acquiring specific parameters related to the page display in the HTML document as page display information. The page display information acquired at this time may be background color information of the web page or more complex page frame information.
Therefore, in practical application, the page display information can be conveniently acquired based on specific settings, so that the preliminary display of the page is realized as soon as possible.
It should be appreciated that the pre-fetching of page display information and presentation of the pre-rendered pages in fig. 4 is performed concurrently with the page parsing, typesetting, rendering and presentation by the browser kernel of fig. 2 using different processes. Whether the step S401 acquires the page display information by acquiring the configuration list in advance, parsing the URL, or parsing the HTML, the acquisition time of the page display information is earlier than the time when the page rendering is completed. Referring back to fig. 2 showing the conventional page display flow, step S401 may acquire page display information before the loading step of S201 (corresponding to configuration list acquisition), in the loading step of S201 (corresponding to resolution URL acquisition), or in the HTML resolution step of S202. Since the time required for displaying the predicted page based on the page display information (step S402) is far less than the time required for typesetting and rendering (steps S203 and S204), the displaying of the predicted page in step S402 is earlier than the displaying time after the rendering of the browser kernel page is completed, and the displaying of the predicted page with visual consistency with the page content in the above time period replaces the original default white screen display, which is just the meaning of the present invention.
Since the page display information acquired in step S401 may be the background color of the target page and/or the page frame of the target page. To this end, presenting the predicted page of the target page based on the page display information may include: modifying a default webpage background color into a background color of the target page; and/or rendering the page frame in advance based on the page frame of the target page. The background color of the target page may be modified by a variety of means. For example, the JS engine may directly obtain color value information in the URL, and then modify the background color of the page by running Javascript code; the background color described above may also be modified by Javascript injection. Therefore, the white screen display of the rendered page content before being displayed is changed into the background color display which is the same as or similar to the background color of the real page content or the real page frame display, so that the waiting feel of a user is greatly reduced.
Since in the conventional display of pages, there is a small period of time to display the background color of WebView before the background color of the web page is displayed. Thus, alternatively or additionally, the page rendering method of the present invention may further comprise: setting a background color of a network view based on the background color of the target page. Therefore, the display of the network view white screen can be further avoided, and the use experience of a user is further improved. Since the background color of the web view is displayed before the background color of the web page is displayed, the background color of the target page needs to be obtained at or before the URL resolution stage.
The page rendering method of the present invention has been described above with reference to fig. 4 and 5. According to the method, the page display information (for example, page background color) arranged in the URL and/or the HTML document is obtained in advance, default display content can be set or changed (for example, a default page white screen is modified into a known page background color) before rendered page content is displayed, so that the time for displaying the white screen to a user is shortened, and the use experience of the user is improved.
The page rendering scheme of the invention can also be implemented as a page rendering device. Fig. 6 shows a schematic diagram of a page rendering device according to an embodiment of the invention. As shown in fig. 6, the page presentation apparatus 600 may include an information pre-acquisition unit 601, a pre-presentation page presentation unit 602, and a rendering page display unit 603.
The information pre-acquisition unit 601 may be configured to acquire page display information of a target page to be displayed. The pre-presentation page presenting unit 602 is configured to present, before rendering of a target page is completed, a pre-presentation page of the target page based on the page display information. The rendering page display unit 603 may be configured to display the target page after rendering on the pre-rendering page.
Specifically, the information pre-acquisition unit 601 may acquire page display information from different approaches. In one embodiment, the information pre-acquisition unit 601 may be configured to: resolving a Uniform Resource Locator (URL) of the target page to be displayed; and acquiring specific parameters related to the page display in the URL as page display information. The specific parameters related to the page display in the URL may be added by the server end based on the page related information. Alternatively, the information pre-acquisition unit 601 may be configured to: acquiring and analyzing the HTML document of the target page to be displayed; and acquiring specific parameters related to the page display in the HTML document as page display information. Alternatively, the information pre-acquisition unit 601 may be configured to: and acquiring page display information of the target page to be displayed from a configuration list issued by the server.
The page display information may include at least one of: background color of the target page; and a page frame of the target page. Thus, the presentation page rendering unit 602 may be configured to: modifying a default webpage background color into a background color of the target page; and/or rendering the page frame in advance based on the page frame of the target page.
Further, the presentation page presenting unit 602 may be further configured to: setting a background color of a network view based on the background color of the target page.
It will be appreciated that the page rendering device 600 and its constituent elements described above may be implemented as functional modules of a browser application. For example, the information pre-acquisition unit 601 and the pre-presentation page presentation unit 602 may be functional modules that require additional addition to an existing browser application, while the rendering page display unit 603 may be conventional rendering and display modules.
Thus, the present invention may also be implemented as a method for displaying pages for a browser application. Fig. 7 shows a flowchart of a browser application page display method according to an embodiment of the present invention. In step S701, before the browser kernel renders and displays the page content, a predicted page of the target page based on the page display information is displayed. In step S702, the target page rendered by the browser kernel is displayed on the pre-display page.
In one embodiment, the method may further include displaying a background color of the web view based on the page display information before displaying the predicted page of the target page based on the page display information.
In addition, the computing device shown in FIG. 1 may also be used to implement the page rendering and display scheme of the present invention. Specifically, a computing device may include: a processor; and a memory having executable code stored thereon, which when executed by the processor, causes the processor to perform the page rendering method or the display method as described above.
The page rendering scheme according to the present invention has been described in detail above with reference to the accompanying drawings. According to the scheme, the page display information (for example, page background color) arranged in the URL and/or the HTML document is obtained in advance, default display content can be set or changed (for example, a default page white screen is modified into a known page background color) before rendered page content is displayed, so that a page frame with visual consistency with the rendered page display is used for replacing the white screen display, psychological perceptibility of waiting of a user is reduced, and use experience of the user is improved.
Furthermore, the method according to the invention may also be implemented as a computer program or computer program product comprising computer program code instructions for performing the steps defined in the above-mentioned method of the invention.
Or the invention may also be embodied as a non-transitory machine-readable storage medium (or computer-readable storage medium, or machine-readable storage medium) having stored thereon executable code (or a computer program, or computer instruction code) that, when executed by a processor of an electronic device (or computing device, server, etc.), causes the processor to perform the steps of the above-described method according to the invention.
Those of skill would further appreciate that the various illustrative logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein may be implemented as electronic hardware, computer software, or combinations of both.
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems and methods according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The foregoing description of embodiments of the invention has been presented for purposes of illustration and description, and is not intended to be exhaustive or limited to the embodiments disclosed. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the various embodiments described. The terminology used herein was chosen in order to best explain the principles of the embodiments, the practical application, or the improvement of technology in the marketplace, or to enable others of ordinary skill in the art to understand the embodiments disclosed herein.

Claims (18)

1.A method of page rendering, comprising:
acquiring page display information of a target page to be displayed;
Before the target page rendering is completed, presenting a pre-display page of the target page based on the page display information; and
Displaying the target page with the rendering completed on the pre-display page,
The method for acquiring the page display information of the target page to be displayed comprises the following steps:
resolving a Uniform Resource Locator (URL) of the target page to be displayed; and
Acquiring specific parameters related to the page display in the URL as page display information,
The page display information is obtained in advance and the presentation of the pre-presentation page is performed simultaneously with the analysis, typesetting, rendering and presentation of the target page by the browser kernel by using different processes.
2. The method of claim 1, wherein the specific parameters associated with the page display in the URL are added by a server-side based on page-related information.
3. The method of claim 1, wherein obtaining page display information for a target page to be displayed comprises:
Acquiring and analyzing the HTML document of the target page to be displayed; and
And acquiring specific parameters related to the page display in the HTML document as page display information.
4. The method of claim 1, wherein obtaining page display information for a target page to be displayed comprises:
and acquiring page display information of the target page to be displayed from a configuration list issued by the server.
5. The method of claim 1, wherein the page display information includes at least one of: background color of the target page; and a page frame of the target page.
6. The method of claim 5, wherein presenting the predicted page of the target page based on the page display information comprises:
Modifying a default webpage background color into a background color of the target page; and/or
And rendering the page frame in advance based on the page frame of the target page.
7. The method of claim 5, further comprising:
setting a background color of a network view based on the background color of the target page.
8. A page rendering device, comprising:
the information pre-acquisition unit is used for acquiring page display information of a target page to be displayed;
the display device comprises a display unit, a target page display unit and a display unit, wherein the display unit is used for displaying a display page of a target page based on page display information before the target page is rendered; and
A rendering page display unit for displaying the target page with the rendering completed on the pre-display page,
Wherein the information pre-acquisition unit is used for:
resolving a Uniform Resource Locator (URL) of the target page to be displayed; and
Acquiring specific parameters related to the page display in the URL as page display information,
The page display information is obtained in advance and the presentation of the pre-presentation page is performed simultaneously with the analysis, typesetting, rendering and presentation of the target page by the browser kernel by using different processes.
9. The apparatus of claim 8, wherein the specific parameters associated with the page display in the URL are added by a server-side based on page-related information.
10. The apparatus of claim 8, wherein the information pre-acquisition unit is configured to:
Acquiring and analyzing the HTML document of the target page to be displayed; and
And acquiring specific parameters related to the page display in the HTML document as page display information.
11. The apparatus of claim 8, wherein the information pre-acquisition unit is configured to:
and acquiring page display information of the target page to be displayed from a configuration list issued by the server.
12. The apparatus of claim 8, wherein the page display information comprises at least one of: background color of the target page; and a page frame of the target page.
13. The apparatus of claim 12, wherein the pre-presentation page presentation unit is to:
Modifying a default webpage background color into a background color of the target page; and/or
And rendering the page frame in advance based on the page frame of the target page.
14. The apparatus of claim 12, the pre-presentation page presentation unit further to:
setting a background color of a network view based on the background color of the target page.
15. A method for displaying pages by a browser application, comprising:
Before the browser kernel renders and displays the page content, displaying a pre-display page of a target page based on page display information; and
Displaying the target page rendered by the browser kernel on the pre-display page,
Wherein displaying a predicted page of a target page based on page display information includes:
Resolving a Uniform Resource Locator (URL) of a target page to be displayed; and
Acquiring specific parameters related to the page display in the URL as page display information,
The page display information is obtained in advance and the presentation of the pre-presentation page is performed simultaneously with the target page analysis, typesetting, rendering and presentation performed by the browser kernel by using different processes.
16. The method of claim 15, further comprising:
before displaying a predicted page of a target page based on page display information, displaying a background color of a network view based on the page display information.
17. A computing device, comprising:
A processor; and
A memory having executable code stored thereon, which when executed by the processor, causes the processor to perform the method of any of claims 1-7 or 15-16.
18. A non-transitory machine-readable storage medium having stored thereon executable code, which when executed by a processor of an electronic device, causes the processor to perform the method of any of claims 1-7 or 15-16.
CN201811550201.3A 2018-12-18 2018-12-18 Page presentation method and device Active CN111339458B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811550201.3A CN111339458B (en) 2018-12-18 2018-12-18 Page presentation method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811550201.3A CN111339458B (en) 2018-12-18 2018-12-18 Page presentation method and device

Publications (2)

Publication Number Publication Date
CN111339458A CN111339458A (en) 2020-06-26
CN111339458B true CN111339458B (en) 2024-05-31

Family

ID=71181365

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811550201.3A Active CN111339458B (en) 2018-12-18 2018-12-18 Page presentation method and device

Country Status (1)

Country Link
CN (1) CN111339458B (en)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112114800B (en) * 2020-09-30 2021-06-29 北京海泰方圆科技股份有限公司 Browser interface processing method and device
CN112817658A (en) * 2021-02-01 2021-05-18 中国工商银行股份有限公司 Method and device for quickly starting network application
CN113160241B (en) * 2021-03-18 2024-05-10 苏州云图健康科技有限公司 Volume rendering display method and device for medical image, storage medium and electronic device
CN113360820B (en) * 2021-05-29 2024-03-08 北京网聘信息技术有限公司 Page display method, system, equipment and storage medium
CN114035857A (en) * 2021-10-19 2022-02-11 四川天邑康和通信股份有限公司 Android webview set top box page loading optimization system and processing method
CN114296809B (en) * 2021-12-24 2023-05-05 深圳航天科技创新研究院 Object model construction method based on operating system and system call interface thereof
CN114675915A (en) * 2022-02-15 2022-06-28 上海哔哩哔哩科技有限公司 Page display method and device, computing equipment and computer storage medium

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102902799A (en) * 2012-10-12 2013-01-30 中科方德软件有限公司 Browser page display method and device based on WebKit
CN103425699A (en) * 2012-05-24 2013-12-04 腾讯科技(深圳)有限公司 Method, equipment and system for acquiring web pages
CN105159677A (en) * 2015-09-09 2015-12-16 深圳Tcl数字技术有限公司 Controlled display method of terminal user interface and controlled display device of terminal user interface
CN107066631A (en) * 2017-05-26 2017-08-18 北京三快在线科技有限公司 Display methods, device and the electronic equipment of the page
CN107402938A (en) * 2016-05-22 2017-11-28 广州市动景计算机科技有限公司 page display method, device and client device
CN107967278A (en) * 2016-10-19 2018-04-27 广州市动景计算机科技有限公司 Webpage pre-head method, Web access method, equipment and programmable device
CN108280119A (en) * 2017-11-29 2018-07-13 广州市动景计算机科技有限公司 Page generation method, device and user terminal
WO2018145485A1 (en) * 2017-02-13 2018-08-16 广东欧珀移动通信有限公司 Browser page display method and device, storage medium, and terminal
CN108984714A (en) * 2018-07-09 2018-12-11 北京三快在线科技有限公司 Page rendering method, apparatus, electronic equipment and computer-readable medium

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9576070B2 (en) * 2014-04-23 2017-02-21 Akamai Technologies, Inc. Creation and delivery of pre-rendered web pages for accelerated browsing

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103425699A (en) * 2012-05-24 2013-12-04 腾讯科技(深圳)有限公司 Method, equipment and system for acquiring web pages
CN102902799A (en) * 2012-10-12 2013-01-30 中科方德软件有限公司 Browser page display method and device based on WebKit
CN105159677A (en) * 2015-09-09 2015-12-16 深圳Tcl数字技术有限公司 Controlled display method of terminal user interface and controlled display device of terminal user interface
CN107402938A (en) * 2016-05-22 2017-11-28 广州市动景计算机科技有限公司 page display method, device and client device
CN107967278A (en) * 2016-10-19 2018-04-27 广州市动景计算机科技有限公司 Webpage pre-head method, Web access method, equipment and programmable device
WO2018145485A1 (en) * 2017-02-13 2018-08-16 广东欧珀移动通信有限公司 Browser page display method and device, storage medium, and terminal
CN107066631A (en) * 2017-05-26 2017-08-18 北京三快在线科技有限公司 Display methods, device and the electronic equipment of the page
CN108280119A (en) * 2017-11-29 2018-07-13 广州市动景计算机科技有限公司 Page generation method, device and user terminal
CN108984714A (en) * 2018-07-09 2018-12-11 北京三快在线科技有限公司 Page rendering method, apparatus, electronic equipment and computer-readable medium

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
基于React的电厂信息管理系统前端页面设计;祝广场;柯亚唯;;山东工业技术;20181024(第22期);全文 *
孙森 主编.网络银行.北京:中国金融出版社,2020,第97页. *

Also Published As

Publication number Publication date
CN111339458A (en) 2020-06-26

Similar Documents

Publication Publication Date Title
CN111339455B (en) Method and device for loading page first screen by browser application
CN111339458B (en) Page presentation method and device
US9857959B2 (en) Supporting webpage design and revision irrespective of webpage framework
CN108279966B (en) Webpage screenshot method, device, terminal and storage medium
KR102307163B1 (en) Cross-platform rendering engine
KR101099272B1 (en) Web page rendering mechanism using external programmatic themes
US20150279058A1 (en) Page Rendering Method and Apparatus
WO2017088509A1 (en) Page customization method and device
US20190073342A1 (en) Presentation of electronic information
US9766860B2 (en) Dynamic source code formatting
US20140304379A1 (en) Computer-Implemented Methods and Systems for Dynamically Compiling and Serving Electronic Content
CN107179920B (en) Network engine starting method and device
CN106874023B (en) Dynamic page loading method and device
CN110750664A (en) Picture display method and device
CN111813468A (en) Method and device for shielding webpage operation and electronic equipment
CN111737614A (en) Page display method and device, electronic equipment and storage medium
CN111460342B (en) Page rendering display method and device, electronic equipment and computer storage medium
CN111506848A (en) Webpage processing method, device, equipment and readable storage medium
RU2634221C2 (en) Method and device for drawing presentation of electronic document on screen
US10013406B2 (en) Flip-to-edit container
US20160147741A1 (en) Techniques for providing a user interface incorporating sign language
CN113468454A (en) Method and device for rendering HTML (hypertext markup language) page
CN111552467A (en) Dynamic page processing method, device and system and storage medium
US20160140112A1 (en) Information processing system, information processing method, data, information processing device, display device, display method, program, and information storage medium
RU2803487C1 (en) Method and system for translating text in image on web page

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant