CN112100543B - Webpage rendering method and device, storage medium, electronic equipment and server - Google Patents
Webpage rendering method and device, storage medium, electronic equipment and server Download PDFInfo
- Publication number
- CN112100543B CN112100543B CN202010900382.9A CN202010900382A CN112100543B CN 112100543 B CN112100543 B CN 112100543B CN 202010900382 A CN202010900382 A CN 202010900382A CN 112100543 B CN112100543 B CN 112100543B
- Authority
- CN
- China
- Prior art keywords
- metadata
- screen
- webpage
- skeleton
- server
- 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
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 96
- 238000000034 method Methods 0.000 title claims abstract description 67
- 238000004590 computer program Methods 0.000 claims description 17
- 230000000007 visual effect Effects 0.000 abstract description 9
- 238000004891 communication Methods 0.000 description 12
- 238000010586 diagram Methods 0.000 description 11
- 230000005540 biological transmission Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 5
- 230000005236 sound signal Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- KLDZYURQCUYZBL-UHFFFAOYSA-N 2-[3-[(2-hydroxyphenyl)methylideneamino]propyliminomethyl]phenol Chemical compound OC1=CC=CC=C1C=NCCCN=CC1=CC=CC=C1O KLDZYURQCUYZBL-UHFFFAOYSA-N 0.000 description 1
- 201000001098 delayed sleep phase syndrome Diseases 0.000 description 1
- 208000033921 delayed sleep phase type circadian rhythm sleep disease Diseases 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
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
The disclosure relates to a method, a device, a storage medium, an electronic device and a server for rendering a webpage, wherein the method is applied to a client and comprises the following steps: sending a skeleton screen data request message to a server so that the server can acquire target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message; receiving the target skeleton screen data sent by the server; rendering the first screen according to the target skeleton screen data, and generating a skeleton screen corresponding to the first screen; acquiring first metadata corresponding to the first screen, and rendering the first screen according to the first metadata; and acquiring second metadata, and rendering other screens except the first screen in the webpage to be displayed according to the second metadata. Therefore, the rendering time of the first screen of the webpage is shortened, so that a user can be prevented from seeing the white screen for a long time, and the visual effect is further improved.
Description
Technical Field
The disclosure relates to the technical field of webpage processing, in particular to a method, a device, a storage medium, electronic equipment and a server for rendering webpages.
Background
When information is transmitted through a network, the current user-oriented interface is mainly presented through HTML (Hyper Text Markup Language ), and for a presentation interface of a survey class or an interview class, a presentation interface generally includes a plurality of forms.
At present, when a form page is displayed, a webpage view is started first, webpage view initialization is performed, a basic frame of the webpage view is obtained after the webpage view initialization, corresponding webpage data is obtained based on the basic frame, the webpage view is rendered based on the data, and a skeleton screen view of a webpage is obtained, and at the moment, a user can see a view frame of the webpage. However, in the case of more forms, the loading and rendering process is slow, and the user can see the white screen for a long time, resulting in poor visual effect.
Disclosure of Invention
In order to solve the above problems, the present disclosure provides a method, an apparatus, a storage medium, an electronic device, and a server for rendering a web page.
In a first aspect, the present disclosure provides a method for rendering a web page, applied to a client, the method comprising: sending a skeleton screen data request message to a server so that the server can acquire target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message; receiving the target skeleton screen data sent by the server; rendering the first screen according to the target skeleton screen data, and generating a skeleton screen corresponding to the first screen; acquiring first metadata corresponding to the first screen, and rendering the first screen according to the first metadata; and acquiring second metadata, and rendering other screens except the first screen in the webpage to be displayed according to the second metadata.
Optionally, before the sending the skeleton screen data request message to the server, the method further includes: sending a webpage request message to the server so that the server obtains a webpage display file of the webpage to be displayed according to the webpage request message; receiving the page display file sent by the server; the sending the skeleton screen data request message to the server comprises the following steps: and after receiving the page display file sent by the server, sending the skeleton screen data request message to the server according to the page display file.
Optionally, the skeleton screen data request message includes a device type of a display device displaying the web page to be displayed and a display height of a display area, where the display area is an area where the display device displays the web page to be displayed; before the step of sending the skeleton screen data request message to the server according to the page display file, the method further comprises: acquiring the equipment type and the display height; the step of sending the skeleton screen data request message to the server according to the page display file comprises the following steps: and sending the skeleton screen data request message to the server according to the equipment type, the display height and the page display file, so that the server can acquire the target skeleton screen data according to the equipment type and the display height.
In a second aspect, the present disclosure provides a method of rendering a web page, applied to a server, the method comprising: receiving a framework screen data request message sent by a client; acquiring target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message; and sending the target skeleton screen data to the client so that the client renders the first screen according to the target skeleton screen data, generates a skeleton screen corresponding to the first screen, acquires first metadata corresponding to the first screen, renders the first screen according to the first metadata, acquires second metadata, and renders other screens except the first screen in the webpage to be displayed according to the second metadata.
Optionally, before the receiving the framework screen data request message sent by the client, the method further includes: receiving a webpage request message sent by the client; acquiring a page display file of the webpage to be displayed according to the webpage request message; and sending the page display file to the client.
Optionally, the skeleton screen data request message includes a device type of a display device displaying the web page to be displayed and a display height of a display area, where the display area is an area where the display device displays the web page to be displayed; the step of obtaining the target skeleton screen data corresponding to the first screen of the webpage to be displayed according to the skeleton screen data request message comprises the following steps: according to the equipment type and the display height, acquiring target metadata which can be displayed by the first screen from webpage metadata corresponding to the webpage to be displayed; and taking the skeleton screen data corresponding to the target metadata as the target skeleton screen data.
Optionally, according to the device type and the display height, the obtaining, from the web page metadata corresponding to the web page to be displayed, target metadata that can be displayed by the first screen includes: determining a skeleton model corresponding to the webpage to be displayed according to the equipment type; acquiring metadata to be determined according to the skeleton model, wherein the metadata to be determined comprises the webpage metadata of the first N rows corresponding to the skeleton model, and N is an integer greater than 0; and acquiring the target metadata according to the metadata to be determined and the display height.
Optionally, the obtaining the target metadata according to the metadata to be determined and the display height includes: when the height to be displayed corresponding to the metadata to be determined is greater than or equal to the display height, and the height to be displayed corresponding to the webpage metadata of the first N-1 rows is smaller than the display height, taking the metadata to be determined as the target metadata; or under the condition that the height to be displayed corresponding to the metadata to be determined is smaller than the display height, acquiring the front N+1 row of webpage metadata corresponding to the skeleton model, taking the front N+1 row of webpage metadata as new metadata to be determined, and acquiring the target metadata according to the new metadata to be determined and the display height.
In a third aspect, the present disclosure provides an apparatus for rendering a web page, applied to a client, the apparatus comprising: the data request sending module is used for sending a skeleton screen data request message to a server so that the server can acquire target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message; the data receiving module is used for receiving the target skeleton screen data sent by the server; the first rendering module is used for rendering the first screen according to the target skeleton screen data and generating a skeleton screen corresponding to the first screen; the second rendering module is used for acquiring first metadata corresponding to the first screen and rendering the first screen according to the first metadata; and the third rendering module is used for acquiring second metadata and rendering other screens except the first screen in the webpage to be displayed according to the second metadata.
Optionally, the apparatus further comprises: the webpage request sending module is used for sending a webpage request message to the server so that the server can acquire a webpage display file of the webpage to be displayed according to the webpage request message; the webpage file receiving module is used for receiving the webpage display file sent by the server; the data request sending module is specifically configured to: and after receiving the page display file sent by the server, sending a skeleton screen data request message to the server according to the page display file.
Optionally, the skeleton screen data request message includes a device type of a display device displaying the web page to be displayed and a display height of a display area, where the display area is an area where the display device displays the web page to be displayed; the apparatus further comprises: the device acquisition module is used for acquiring the device type and the display height; the data request sending module is specifically configured to: and sending the skeleton screen data request message to the server according to the equipment type, the display height and the page display file, so that the server can acquire the target skeleton screen data according to the equipment type and the display height.
In a fourth aspect, the present disclosure provides an apparatus for rendering a web page, applied to a server, the apparatus comprising: the data request receiving module is used for receiving a skeleton screen data request message sent by the client; the data acquisition module is used for acquiring target skeleton screen data corresponding to the first screen of the webpage to be displayed according to the skeleton screen data request message; the data sending module is used for sending the target skeleton screen data to the client so that the client renders the first screen according to the target skeleton screen data, generates a skeleton screen corresponding to the first screen, obtains first metadata corresponding to the first screen, renders the first screen according to the first metadata, obtains second metadata, and renders other screens except the first screen in the webpage to be displayed according to the second metadata.
Optionally, the apparatus further comprises: the webpage request receiving module is used for receiving webpage request messages sent by the client; the webpage file acquisition module is used for acquiring a webpage display file of the webpage to be displayed according to the webpage request message; and the webpage file sending module is used for sending the webpage display file to the client.
Optionally, the skeleton screen data request message includes a device type of a display device displaying the web page to be displayed and a display height of a display area, where the display area is an area where the display device displays the web page to be displayed; the data acquisition module is specifically configured to: according to the equipment type and the display height, acquiring target metadata which can be displayed by the first screen from webpage metadata corresponding to the webpage to be displayed; and taking the skeleton screen data corresponding to the target metadata as the target skeleton screen data.
Optionally, the data acquisition module is further configured to: determining a skeleton model corresponding to the webpage to be displayed according to the equipment type; acquiring metadata to be determined according to the skeleton model, wherein the metadata to be determined comprises the webpage metadata of the first N rows corresponding to the skeleton model, and N is an integer greater than 0; and acquiring the target metadata according to the metadata to be determined and the display height.
Optionally, the data acquisition module is further configured to: when the height to be displayed corresponding to the metadata to be determined is greater than or equal to the display height, and the height to be displayed corresponding to the webpage metadata of the first N-1 rows is smaller than the display height, taking the metadata to be determined as the target metadata; or under the condition that the height to be displayed corresponding to the metadata to be determined is smaller than the display height, acquiring the front N+1 row of webpage metadata corresponding to the skeleton model, taking the front N+1 row of webpage metadata as new metadata to be determined, and acquiring the target metadata according to the new metadata to be determined and the display height.
In a fifth aspect, the present disclosure provides a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of the method of the first aspect of the present disclosure; alternatively, the program when executed by a processor implements the steps of the method of the second aspect of the disclosure.
In a sixth aspect, the present disclosure provides an electronic device, comprising: a memory having a computer program stored thereon; a processor for executing the computer program in the memory to implement the steps of the method of the first aspect of the disclosure.
In a seventh aspect, the present disclosure provides a server comprising: a memory having a computer program stored thereon; a processor for executing the computer program in the memory to implement the steps of the method of the second aspect of the present disclosure.
According to the technical scheme, the framework screen data request message is sent to the server, so that the server can acquire target framework screen data corresponding to the first screen of the webpage to be displayed according to the framework screen data request message; receiving the target skeleton screen data sent by the server; rendering the first screen according to the target skeleton screen data, and generating a skeleton screen corresponding to the first screen; acquiring first metadata corresponding to the first screen, and rendering the first screen according to the first metadata; and acquiring second metadata, and rendering other screens except the first screen in the webpage to be displayed according to the second metadata. That is, the client may first obtain, from the server, the target skeleton screen data corresponding to the first screen of the web page to be displayed, generate, according to the target skeleton screen data, the skeleton screen corresponding to the first screen, then obtain, from the server, the first metadata corresponding to the first screen, and render, according to the first metadata, the first screen, where the data size of the target skeleton screen data is smaller compared with the skeleton screen data corresponding to all the skeletons of the web page, so that the time of data transmission can be saved, so that the rendering time of the first screen of the web page is shortened, and thus, a user can be prevented from seeing a white screen for a long time, and further, the visual effect is improved.
Additional features and advantages of the present disclosure will be set forth in the detailed description which follows.
Drawings
The accompanying drawings are included to provide a further understanding of the disclosure, and are incorporated in and constitute a part of this specification, illustrate the disclosure and together with the description serve to explain, but do not limit the disclosure. In the drawings:
FIG. 1 is a flowchart illustrating a method of rendering a web page according to an exemplary embodiment;
FIG. 2 is a flowchart illustrating a second method of rendering a web page according to an exemplary embodiment;
FIG. 3 is a flowchart illustrating a third method of rendering a web page according to an exemplary embodiment;
FIG. 4 is a schematic diagram illustrating an apparatus for rendering a web page according to an exemplary embodiment;
FIG. 5 is a schematic diagram illustrating a second apparatus for rendering web pages according to an exemplary embodiment;
FIG. 6 is a schematic diagram illustrating a third apparatus for rendering web pages according to an example embodiment;
FIG. 7 is a schematic diagram illustrating a fourth apparatus for rendering web pages according to an example embodiment;
FIG. 8 is a schematic diagram illustrating a fifth apparatus for rendering a web page according to an exemplary embodiment;
FIG. 9 is a block diagram of an electronic device, shown in accordance with an exemplary embodiment;
fig. 10 is a block diagram of a server, according to an example embodiment.
Detailed Description
Specific embodiments of the present disclosure are described in detail below with reference to the accompanying drawings. It should be understood that the detailed description and specific examples, while indicating and illustrating the disclosure, are not intended to limit the disclosure.
In the following description, the words "first," "second," and the like are used merely for distinguishing between the descriptions and not for indicating or implying a relative importance or order.
First, an application scenario of the present disclosure will be described. The present disclosure can be applied to a scenario of web page loading, and when a browser performs web page rendering, it is generally required to request an HTML file, CSS (Cascading Style Sheets, cascading style sheet), JS (JavaScript, scripting language) and the like of a web page from a server. The HTML file carries a webpage document and determines the data content displayed in the webpage; CSS is used to provide style structures (e.g., position and size of input box) for web pages; the JS is used for adding the man-machine interaction function of the webpage.
In the existing webpage rendering process, the browser needs to acquire the three files respectively, so that the data volume of interaction between the browser and the server is large, and when the processing capacity of the server is limited or the network bandwidth is tense, the webpage rendering speed is reduced, and long waiting time is generated. In the related art, when waiting for loading a page, a skeleton screen of the page can be displayed to a user to prompt the user that the content is being loaded. The skeleton screen is a rough structure (gray occupied bitmap) of a page displayed by a user before the page data is loaded, and the skeleton screen is replaced after the page data is acquired and the actual page content is rendered.
However, under the condition that more forms need to be displayed, the process of loading and rendering the skeleton screen is slower, and the user still sees the white screen for a long time, so that the visual effect is poor, and the user experience is affected.
In order to solve the above-mentioned problems, the present disclosure provides a method, an apparatus, a storage medium, an electronic device, and a server for rendering a web page, where a client may first obtain target skeleton screen data corresponding to a first screen of a web page to be displayed from the server, generate a skeleton screen corresponding to the first screen according to the target skeleton screen data, then obtain first metadata corresponding to the first screen from the server, and render the first screen according to the first metadata.
The following detailed description of specific embodiments of the present disclosure refers to the accompanying drawings.
FIG. 1 is a flowchart illustrating a method of rendering a web page, the method being applied to a client, according to an example embodiment. As shown in fig. 1, the method includes:
s101, sending a skeleton screen data request message to a server.
In this step, the client may include a mobile phone, a computer, and the like, and when a web page to be displayed needs to be displayed, the framework screen data request message may be sent to the server. After receiving the skeleton screen data request message sent by the client, the server can acquire skeleton screen data corresponding to the first screen of the webpage to be displayed according to the skeleton screen data request message. The first screen of the webpage to be displayed is a part which can be seen by a user under the condition that the webpage to be displayed is not scrolled.
S102, receiving the target skeleton screen data sent by the server.
The target skeleton screen data may include data required for rendering a skeleton of a first screen of the webpage to be displayed, and for example, the target skeleton screen data may include description information of a placeholder block corresponding to the first screen.
In this step, after obtaining the target skeleton screen data corresponding to the first screen of the web page to be displayed, the server may send the target skeleton screen data to the client.
And S103, rendering the first screen according to the target skeleton screen data, and generating a skeleton screen corresponding to the first screen.
In this step, after receiving the target skeleton screen data sent by the server, the first screen may be rendered according to the target skeleton screen data. For example, when the target skeleton screen data includes description information of a space block corresponding to the first screen, the client may render the space block according to the description information of the space block, and after rendering of all the space blocks corresponding to the first screen is completed, the skeleton screen corresponding to the first screen may be generated.
S104, acquiring first metadata corresponding to the first screen, and rendering the first screen according to the first metadata.
The first metadata may include specific content corresponding to the first screen, such as text, pictures, and the like.
In this step, after the framework screen data request message is sent to the server, a first metadata acquisition request may be sent to the server, and after the server receives the first metadata acquisition request, the server may acquire the first metadata according to the first metadata acquisition request, and send the first metadata to the client. After receiving the first metadata sent by the server, the client can render the first screen according to the first metadata, and after rendering is completed, the user can see the whole content of the webpage to be displayed. Here, since the skeleton screen corresponding to the first screen is already displayed, when the first screen is rendered according to the first metadata corresponding to the first screen, only specific content needs to be filled in the skeleton screen corresponding to the first screen, in addition, the first metadata only comprises the specific content corresponding to the first screen, the data size is small, the data transmission is fast, after the client finishes the rendering of the skeleton screen corresponding to the first screen, the content corresponding to the first screen can be filled in time according to the first metadata, and therefore the overall rendering time of the first screen can be shortened, and a user can see the specific content of the first screen more quickly.
S105, acquiring second metadata, and rendering other screens except the first screen in the webpage to be displayed according to the second metadata.
The second metadata may include specific content, display style, and the like of other screens except the first screen in the webpage to be displayed.
In this step, after the framework screen data request message is sent to the server, a second metadata acquisition request may be sent to the server, and after the server receives the second metadata acquisition request, the server may acquire the second metadata according to the second metadata acquisition request, and send the second metadata to the client. After receiving the second metadata sent by the server, the client can render other screens except the first screen in the webpage to be displayed according to the second metadata, and after rendering is completed, the user can see the whole content of the webpage to be displayed.
By adopting the method, the target skeleton screen data corresponding to the first screen of the webpage to be displayed can be acquired from the server, the skeleton screen corresponding to the first screen is generated according to the target skeleton screen data, then the first metadata corresponding to the first screen is acquired from the server, the first screen is rendered according to the first metadata, and compared with the skeleton screen data corresponding to all the skeletons of the webpage, the data size of the target skeleton screen data is smaller, so that the time of data transmission can be saved, the rendering time of the first screen of the webpage is shortened, a user can be prevented from seeing a white screen for a long time, and the visual effect is improved.
FIG. 2 is a flowchart illustrating a second method of rendering a web page, the method being applied to a server, according to an exemplary embodiment. As shown in fig. 2, the method includes:
s201, receiving a skeleton screen data request message sent by a client.
In this step, when the web page to be displayed needs to be displayed, the client may send the skeleton screen data request message to the server.
S202, acquiring target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message.
The target skeleton screen data may include data required for rendering a skeleton of a first screen of the webpage to be displayed, and for example, the target skeleton screen data may include description information of a placeholder block corresponding to the first screen.
In this step, after receiving the skeleton screen data request message sent by the client, the server may obtain, according to the skeleton screen data request message, target skeleton screen data corresponding to the first screen of the web page to be displayed. The first screen of the webpage to be displayed is a part which can be seen by a user under the condition that the webpage to be displayed is not scrolled.
S203, the target skeleton screen data are sent to the client.
In this step, after obtaining the target skeleton screen data corresponding to the first screen of the web page to be displayed, the server may send the target skeleton screen data to the client. After receiving the target skeleton screen data sent by the server, the client can render the first screen according to the target skeleton screen data. For example, when the target skeleton screen data includes description information of a space block corresponding to the first screen, the client may render the space block according to the description information of the space block, and after rendering of all the space blocks corresponding to the first screen is completed, the skeleton screen corresponding to the first screen may be generated. And then, the client can acquire first metadata corresponding to the first screen, render the first screen according to the first metadata, acquire second metadata, render other screens except the first screen in the webpage to be displayed according to the second metadata, and after the rendering is completed, the user can see the whole content of the webpage to be displayed.
By adopting the method, after the framework screen data request message sent by the client is received, the target framework screen data corresponding to the first screen of the webpage to be displayed can be obtained according to the framework screen data request message, and the target framework screen data is sent to the client, so that the client can generate the framework screen corresponding to the first screen according to the target framework screen data, then the first screen is rendered according to the first metadata, and compared with the framework screen data corresponding to all frameworks of the webpage, the data size of the target framework screen data is smaller, so that the time of data transmission can be saved, the rendering time of the first screen of the webpage is shortened, a user can be prevented from seeing a white screen for a long time, and the visual effect is improved.
FIG. 3 is a flowchart illustrating a third method of rendering a web page according to an exemplary embodiment. As shown in fig. 3, the method includes:
s301, the client sends a webpage request message to the server.
In this step, when the user needs to log in to the target website or browse the target web page, the web page request message may be sent to the server. For example, the web page request message may be generated by the browser installed at the client by inputting the web address of the target web site or clicking on the tag of the target web page, and then the client may transmit the web page request message to the server through RPC (Remote Procedure Call ).
S302, after receiving the webpage request message sent by the client, the server obtains a webpage display file of the webpage to be displayed according to the webpage request message.
In this step, after receiving the web page request message sent by the client, the server may verify the path requested by the web page request message, and if the path is confirmed to be legal, may obtain the page display file corresponding to the web page to be displayed from the database. The page display file may be an HTML file, where the HTML file may include resources required for obviously a skeleton of a first screen of the web page to be displayed, and for example, may include a skeleton JS and a skeleton CSS, where the skeleton JS file and the skeleton CSS file are used to render a skeleton screen corresponding to the first screen of the web page to be displayed.
S303, the server sends the page display file to the client.
S304, after receiving the page display file sent by the server, the client sends a skeleton screen data request message to the server according to the page display file.
In this step, the client may parse the page display file after receiving the page display file sent by the server. For example, if the page display file is an HTML file, the HTML file may be parsed to obtain a skeleton JS file and a skeleton CSS file corresponding to the web page to be displayed.
Further, after obtaining the skeleton JS file corresponding to the webpage to be displayed, the client may execute the logic code in the JS file, and send the skeleton screen data request message to the server through the logic code. Wherein, the logic code may be preconfigured according to the rendering mode.
It should be noted that, considering that different display devices and display areas display different contents, the present disclosure may obtain, according to the type of the display device and the height of the display area, data that can be displayed by the first screen of the web page to be displayed. In one possible implementation manner, a device type of a display device displaying the web page to be displayed and a display height of a display area may be obtained, and the skeleton screen data request message is sent to the server according to the device type, the display height and the page display file. The display area is an area where the display device displays the webpage to be displayed.
For example, after the skeleton JS file corresponding to the web page to be displayed is obtained, a logic code in the JS file may be executed, and the device type of the display device and the display height of the display area are obtained through the logic code. The device type may include a mobile phone, a computer, etc., for the mobile phone, the height of the display area may be the height of the display screen of the mobile phone, the height of the display screen of the mobile phone may be obtained through the logic code, for the computer, the height of the display area may be the display height of a browser on the computer for displaying the web page to be displayed, and the display height may be obtained from the browser through the logic code. Further, after the device type of the display device and the display height of the display area are acquired, the skeleton screen data request message may be sent to the server through the logic code according to the device type and the display height.
S305, after receiving the skeleton screen data request message sent by the client, the server acquires target skeleton screen data corresponding to the first screen of the webpage to be displayed according to the skeleton screen data request message.
In this step, after receiving the skeleton screen data request message sent by the client, the server may parse the skeleton screen data request message, and obtain, according to the skeleton screen data request message, target skeleton screen data corresponding to the first screen of the web page to be displayed. If the skeleton screen request message includes the device type of the display device of the webpage to be displayed and the display height of the display area, the device type and the display height can be obtained from the skeleton screen data request message. Further, the server may obtain, according to the device type and the display height, target metadata that can be displayed by the first screen from the webpage metadata corresponding to the webpage to be displayed, and use skeleton screen data corresponding to the target metadata as the target skeleton screen data.
In one possible implementation manner, the server may determine a skeleton model corresponding to the web page to be displayed according to the device type, obtain metadata to be determined according to the skeleton model, where the metadata to be determined includes web page metadata of a first N rows corresponding to the skeleton model, N is an integer greater than 0, and obtain the target metadata according to the metadata to be determined and the display height. In one example, the skeleton model may include a table layout and a streaming layout, and if the device type is a computer, the skeleton model of the display area may be the table layout, and a row of the display area may display a plurality of cells; if the device type is a mobile phone, the skeleton model of the display area may be a stream layout, and only one cell may be displayed in one row in the display area. It will be appreciated that in the case where the display heights of the display areas are the same, the table layout will display more data than the stream layout, for example, in the case where the first screen may display 20 cells per the table layout, only 10 cells may be displayed per the stream layout.
When the server acquires the target metadata according to the metadata to be determined and the display height, the metadata to be determined is used as the target metadata when the height to be displayed corresponding to the metadata to be determined is larger than or equal to the display height and the height to be displayed corresponding to the webpage metadata of the front N-1 rows is smaller than the display height; or under the condition that the height to be displayed corresponding to the metadata to be determined is smaller than the display height, acquiring the front N+1 row of webpage metadata corresponding to the skeleton model, taking the front N+1 row of webpage metadata as the new metadata to be determined, and acquiring the target metadata according to the new metadata to be determined and the display height.
After determining the skeleton model corresponding to the webpage to be displayed, the server may obtain, according to a layout manner of the skeleton model, the 1 st row of webpage metadata corresponding to the skeleton model, take the 1 st row of webpage metadata as the metadata to be determined, take the first display height corresponding to the 1 st row of webpage metadata as the height to be displayed, compare the height to be displayed with the display height, and take the 1 st row of webpage metadata as the target metadata when the height to be displayed is greater than or equal to the display height; continuously acquiring the webpage metadata of the 2 nd row corresponding to the skeleton model under the condition that the to-be-displayed height is smaller than the display height, taking the webpage metadata of the 1 st row and the webpage metadata of the 2 nd row as new to-be-determined metadata, taking the sum of the second display height corresponding to the webpage metadata of the 2 nd row and the first display height corresponding to the webpage metadata of the 1 st row as new to-be-displayed height, comparing the new to-be-displayed height with the display height, and taking the webpage metadata of the 1 st row and the webpage metadata of the 2 nd row as the target metadata under the condition that the new to-be-displayed height is larger than or equal to the display height; and continuously acquiring the webpage metadata of the 3 rd row corresponding to the skeleton model under the condition that the new to-be-displayed height is smaller than the display height, taking the webpage metadata of the 1 st row, the webpage metadata of the 2 nd row and the webpage metadata of the 3 rd row as new to-be-determined metadata, and acquiring the target metadata according to the new to-be-determined metadata and the display height in the mode.
It should be noted that, when the display height corresponding to each row of webpage metadata is obtained, the display height corresponding to the row may be determined according to the type of the control for displaying the webpage metadata, where the control may include a text control, for example, a single row of text, a plurality of rows of text, a drop-down menu, multiple choices, a single choice, a date, a rich text edit, a title, and the like, and may also include a picture control, for example, an image, a file upload, a handwritten signature, a multiple picture upload, a GPS (Global Positioning System ) positioning, and the like. Illustratively, the height occupied by a cell in the table may include the upper and lower margins, the border, and the position occupied by the internal element of the cell, and the height of the cell may be calculated by formula (1):
H＝margin-top+border-top-width+padding-top+content-height+padding-bott om+border-bottom-width+margin-bottom(1)
wherein H is the height of the cell, margin-top is the upper outer margin, boundary-top-width is the width of the upper frame, padding-top is the upper inner margin, content-height is the height of the inner element, padding-bottom is the lower inner margin, boundary-bottom-width is the width of the lower frame, margin-bottom is the lower outer margin.
In addition, for the form page, since the cell formats are the same and the heights of the cells of each row are the same, only the height of the cell of the first row may be calculated.
Further, after the target metadata is determined, skeleton screen data corresponding to the target metadata can be obtained, and the skeleton screen data is used as the target skeleton screen data. The target skeleton screen data may include description information of the placeholder blocks, which may include coordinates, shapes, and side lengths of the placeholder blocks, which may include upper left vertex coordinates, lower left vertex coordinates, upper right vertex coordinates, lower right vertex coordinates, or center coordinates, and which may include other information, which is not limited in this disclosure. In addition, for the picture class control, a svg of 1 pixel can be defined, and when the first screen is rendered, a corresponding picture in the first screen can be displayed through the svg of 1 pixel.
S306, the server sends the target skeleton screen data to the client.
In this step, after the server acquires the target skeleton screen data, the server may send the target skeleton screen data to the client.
S307, after receiving the target skeleton screen data sent by the server, the client renders the first screen according to the target skeleton screen data, and generates a skeleton screen corresponding to the first screen.
In this step, after receiving the target skeleton screen data sent by the server, the client may render the first screen according to the target skeleton screen data. For example, if the target skeleton screen data includes upper left vertex coordinates of the placeholder block, a length and a width of the placeholder block, and a shape of the placeholder block, the client may render the placeholder block according to the target skeleton screen data. After the client finishes rendering all the occupied blocks, the skeleton screen corresponding to the first screen can be generated.
S308, the client sends a first metadata acquisition request to the server.
In this step, the client may send the first metadata acquisition request to the server after sending the skeleton screen data request message to the server.
S309, after receiving the first metadata acquisition request sent by the client, the server acquires the first metadata according to the first metadata acquisition request.
The first metadata may include specific content corresponding to the first screen, such as text, pictures, and the like.
S310, the server sends the first metadata to the client.
And S311, after receiving the first metadata sent by the server, the client renders the first screen according to the first metadata.
In this step, after receiving the first metadata sent by the server, the client may render the first screen according to the first metadata, and after rendering is completed, the user may see the entire content of the web page. Because the skeleton screen corresponding to the first screen is displayed, when the first screen is rendered according to the first metadata corresponding to the first screen, only specific content is required to be filled in the skeleton screen corresponding to the first screen, in addition, the first metadata only comprises the specific content corresponding to the first screen, the data size is small, the data transmission is fast, after the client finishes the rendering of the skeleton screen corresponding to the first screen, the skeleton screen corresponding to the first screen can be filled in time according to the first metadata, and therefore the overall rendering time of the first screen can be shortened, and a user can see the specific content of the first screen more quickly.
S312, the client sends a second metadata acquisition request to the server.
In this step, the client may send a second metadata acquisition request to the server after sending the skeleton screen data request message to the server.
S313, after receiving the second metadata acquisition request sent by the client, the server acquires the second metadata according to the second metadata acquisition request.
The second metadata may include specific content, display style, and the like of other screens except the first screen in the webpage to be displayed. In addition, the second metadata may include JS files and CSS files for a plurality of different functions.
S314, the server sends the second metadata to the client.
And S315, after receiving the second metadata sent by the server, the client renders other screens except the first screen in the webpage to be displayed according to the second metadata.
In this step, after receiving the second metadata sent by the server, the client may render, according to the second metadata, the other screens except the first screen in the web page to be displayed, and after rendering is completed, the user may see the entire content of the web page to be displayed.
It should be noted that, the above steps may be sequentially performed, or after the client sends the skeleton screen data request message to the server, the client may send the first metadata acquisition request and the second metadata acquisition request to the server at the same time, and in the process that the client receives the target skeleton screen data sent by the server and renders the first screen according to the target skeleton screen data, the client may synchronously acquire the first metadata and the second metadata, and after receiving the first metadata and the second metadata sent by the server, may timely render the first screen according to the first metadata, and render other screens except the first screen in the web page to be displayed according to the second metadata. Therefore, the rendering time of the first screen of the webpage to be displayed can be shortened, so that a user can be prevented from seeing the white screen for a long time, and the visual effect is further improved.
By adopting the method, the target skeleton screen data corresponding to the first screen of the webpage to be displayed can be acquired firstly, the first screen is rendered according to the target skeleton screen data, and the skeleton screen corresponding to the first screen is generated; in addition, in the process of rendering the first screen according to the target skeleton screen data, the first metadata and the second metadata can be synchronously acquired, after the skeleton screen corresponding to the first screen is generated, the first screen can be timely rendered according to the first metadata, the content of the first screen is displayed faster, the content display speed of the first screen is improved, and other screens except the first screen in the webpage to be displayed can be rendered according to the second metadata while the first screen is rendered, and the first screen and the other screens are synchronously rendered, so that the display speed of the whole webpage content can be improved.
Fig. 4 is a schematic structural view illustrating an apparatus for rendering a web page, which is applied to a client, according to an exemplary embodiment. As shown in fig. 4, the apparatus includes:
The data request sending module 401 is configured to send a skeleton screen data request message to a server, so that the server obtains target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message;
a data receiving module 402, configured to receive the target skeleton screen data sent by the server;
the first rendering module 403 is configured to render the first screen according to the target skeleton screen data, and generate a skeleton screen corresponding to the first screen;
the second rendering module 404 is configured to obtain first metadata corresponding to the first screen, and render the first screen according to the first metadata;
and the third rendering module 405 is configured to obtain second metadata, and render other screens except the first screen in the web page to be displayed according to the second metadata.
Optionally, fig. 5 is a schematic structural diagram of a second apparatus for rendering a web page according to an exemplary embodiment. As shown in fig. 5, the apparatus includes:
a web page request sending module 406, configured to send a web page request message to a server, so that the server obtains a page display file of the web page to be displayed according to the web page request message;
a web page file receiving module 407, configured to receive the page display file sent by the server;
The data request sending module 401 is specifically configured to: and after receiving the page display file sent by the server, sending a skeleton screen data request message to the server according to the page display file.
Optionally, the skeleton screen data request message includes a device type of a display device displaying the web page to be displayed, and a display height of a display area, where the display area is an area where the display device displays the web page to be displayed; fig. 6 is a schematic structural view illustrating a third apparatus for rendering a web page according to an exemplary embodiment. As shown in fig. 6, the apparatus includes:
a device acquisition module 408 for acquiring the device type and the display height;
the data request sending module 401 is specifically configured to: and sending the skeleton screen data request message to the server according to the equipment type, the display height and the page display file so that the server can acquire the target skeleton screen data according to the equipment type and the display height.
By adopting the method, the target skeleton screen data corresponding to the first screen of the webpage to be displayed can be acquired from the server, the skeleton screen corresponding to the first screen is generated according to the target skeleton screen data, then the first metadata corresponding to the first screen is acquired from the server, the first screen is rendered according to the first metadata, and compared with the skeleton screen data corresponding to all the skeletons of the webpage, the data size of the target skeleton screen data is smaller, so that the time of data transmission can be saved, the rendering time of the first screen of the webpage is shortened, a user can be prevented from seeing a white screen for a long time, and the visual effect is improved.
Fig. 7 is a schematic structural view of a fourth apparatus for rendering a web page, which is applied to a server, according to an exemplary embodiment. As shown in fig. 7, the apparatus includes:
a data request receiving module 701, configured to receive a skeleton screen data request message sent by a client;
the data acquisition module 702 is configured to acquire target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message;
the data sending module 703 is configured to send the target skeleton screen data to the client, so that the client renders the first screen according to the target skeleton screen data, generates a skeleton screen corresponding to the first screen, obtains first metadata corresponding to the first screen, renders the first screen according to the first metadata, obtains second metadata, and renders other screens except the first screen in the webpage to be displayed according to the second metadata.
Optionally, fig. 8 is a schematic structural diagram of a fifth apparatus for rendering a web page according to an exemplary embodiment. As shown in fig. 8, the apparatus includes:
a web page request receiving module 704, configured to receive a web page request message sent by the client;
the web page file obtaining module 705 is configured to obtain, according to the web page request message, a page display file of the web page to be displayed;
And the web page file sending module 706 is configured to send the page display file to the client.
Optionally, the skeleton screen data request message includes a device type of a display device displaying the web page to be displayed, and a display height of a display area, where the display area is an area where the display device displays the web page to be displayed; the data acquisition module 702 is specifically configured to: according to the equipment type and the display height, acquiring target metadata which can be displayed by the first screen from webpage metadata corresponding to the webpage to be displayed; and taking the skeleton screen data corresponding to the target metadata as the target skeleton screen data.
Optionally, the data acquisition module 702 is further configured to: determining a skeleton model corresponding to the webpage to be displayed according to the equipment type; acquiring metadata to be determined according to the skeleton model, wherein the metadata to be determined comprises the webpage metadata of the first N rows corresponding to the skeleton model, and N is an integer greater than 0; and acquiring the target metadata according to the metadata to be determined and the display height.
Optionally, the data acquisition module 702 is further configured to: when the height to be displayed corresponding to the metadata to be determined is greater than or equal to the display height, and the height to be displayed corresponding to the webpage metadata of the first N-1 rows is smaller than the display height, the metadata to be determined is used as the target metadata; or under the condition that the height to be displayed corresponding to the metadata to be determined is smaller than the display height, acquiring the front N+1 row of webpage metadata corresponding to the skeleton model, taking the front N+1 row of webpage metadata as the new metadata to be determined, and acquiring the target metadata according to the new metadata to be determined and the display height.
By adopting the method, after the framework screen data request message sent by the client is received, the target framework screen data corresponding to the first screen of the webpage to be displayed can be obtained according to the framework screen data request message, and the target framework screen data is sent to the client, so that the client can generate the framework screen corresponding to the first screen according to the target framework screen data, then the first screen is rendered according to the first metadata, and compared with the framework screen data corresponding to all frameworks of the webpage, the data size of the target framework screen data is smaller, so that the time of data transmission can be saved, the rendering time of the first screen of the webpage is shortened, a user can be prevented from seeing a white screen for a long time, and the visual effect is improved.
The specific manner in which the various modules perform the operations in the apparatus of the above embodiments have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.
Fig. 9 is a block diagram of an electronic device 900, according to an example embodiment. As shown in fig. 9, the electronic device 900 may include: processor 901, memory 902. The electronic device 900 may also include one or more of a multimedia component 903, an input/output (I/O) interface 904, and a communication component 905.
The processor 901 is configured to control the overall operation of the electronic device 900 to perform all or part of the steps in the method for rendering a web page. The memory 902 is used to store various types of data to support operations at the electronic device 900, which may include, for example, instructions for any application or method operating on the electronic device 900, as well as application-related data, such as contact data, transceived messages, pictures, audio, video, and so forth. The Memory 902 may be implemented by any type or combination of volatile or nonvolatile Memory devices, such as static random access Memory (Static Random Access Memory, SRAM for short), electrically erasable programmable Read-Only Memory (Electrically Erasable Programmable Read-Only Memory, EEPROM for short), erasable programmable Read-Only Memory (Erasable Programmable Read-Only Memory, EPROM for short), programmable Read-Only Memory (Programmable Read-Only Memory, PROM for short), read-Only Memory (ROM for short), magnetic Memory, flash Memory, magnetic disk, or optical disk. The multimedia component 903 may include a screen and audio components. Wherein the screen may be, for example, a touch screen, the audio component being for outputting and/or inputting audio signals. For example, the audio component may include a microphone for receiving external audio signals. The received audio signal may be further stored in the memory 902 or transmitted through the communication component 905. The audio assembly further comprises at least one speaker for outputting audio signals. The I/O interface 904 provides an interface between the processor 901 and other interface modules, which may be a keyboard, mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 905 is used for wired or wireless communication between the electronic device 900 and other devices. Wireless communication, such as Wi-Fi, bluetooth, near field communication (Near Field Communication, NFC for short), 2G, 3G, 4G, NB-IOT, eMTC, or other 5G, etc., or one or a combination of more of them, is not limited herein. The corresponding communication component 905 may thus comprise: wi-Fi module, bluetooth module, NFC module, etc.
In an exemplary embodiment, the electronic device 900 may be implemented by one or more application specific integrated circuits (Application Specific Integrated Circuit, abbreviated ASIC), digital signal processor (Digital Signal Processor, abbreviated DSP), digital signal processing device (Digital Signal Processing Device, abbreviated DSPD), programmable logic device (Programmable Logic Device, abbreviated PLD), field programmable gate array (Field Programmable Gate Array, abbreviated FPGA), controller, microcontroller, microprocessor, or other electronic components for performing the method of rendering web pages described above.
In another exemplary embodiment, a computer readable storage medium is also provided, comprising program instructions which, when executed by a processor, implement the steps of the above-described method of rendering a web page. For example, the computer readable storage medium may be the memory 902 described above including program instructions executable by the processor 901 of the electronic device 900 to perform the method of rendering a web page described above.
Fig. 10 is a block diagram of a server 1000, according to an example embodiment. For example, the server 1000 may be provided as a server. Referring to fig. 10, the server 1000 includes a processor 1022, which may be one or more in number, and a memory 1032 for storing computer programs executable by the processor 1022. The computer programs stored in memory 1032 may include one or more modules each corresponding to a set of instructions. Further, processor 1022 may be configured to execute the computer program to perform the methods of rendering web pages described above.
In addition, the server 1000 may also include a power component 1026 and a communication component 1050, the power component 1026 may be configured to perform power management of the server 1000, and the communication component 1050 may be configured to enable communication of the server 1000, such as wired or wireless communication. In addition, the server 1000 may also include an input/output (I/O) interface 1058. The Server 1000 may operate an operating system based on storage in memory 1032, such as Windows Server TM ，Mac OS X TM ，Unix TM ，Linux TM Etc.
In another exemplary embodiment, a computer readable storage medium is also provided, comprising program instructions which, when executed by a processor, implement the steps of the above-described method of rendering a web page. For example, the computer readable storage medium may be the memory 1032 including program instructions described above that are executable by the processor 1022 of the server 1000 to perform the method of rendering a web page described above.
In another exemplary embodiment, a computer program product is also provided, the computer program product comprising a computer program executable by a programmable apparatus, the computer program having code portions for performing the above-described method of rendering a web page when executed by the programmable apparatus.
The preferred embodiments of the present disclosure have been described in detail above with reference to the accompanying drawings, but the present disclosure is not limited to the specific details of the above embodiments, and various simple modifications may be made to the technical solutions of the present disclosure within the scope of the technical concept of the present disclosure, and all the simple modifications belong to the protection scope of the present disclosure. In addition, the specific features described in the foregoing embodiments may be combined in any suitable manner, and in order to avoid unnecessary repetition, the present disclosure does not further describe various possible combinations.
Moreover, any combination between the various embodiments of the present disclosure is possible as long as it does not depart from the spirit of the present disclosure, which should also be construed as the disclosure of the present disclosure.
Claims (13)
1. A method of rendering a web page, for application to a client, the method comprising:
sending a skeleton screen data request message to a server so that the server can acquire target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message;
receiving the target skeleton screen data sent by the server;
Rendering the first screen according to the target skeleton screen data, and generating a skeleton screen corresponding to the first screen;
acquiring first metadata corresponding to the first screen, and rendering the first screen according to the first metadata;
and acquiring second metadata, and rendering other screens except the first screen in the webpage to be displayed according to the second metadata.
2. The method of claim 1, wherein prior to said sending the skeleton screen data request message to the server, the method further comprises:
sending a webpage request message to the server so that the server obtains a webpage display file of the webpage to be displayed according to the webpage request message;
receiving the page display file sent by the server;
the sending the skeleton screen data request message to the server comprises the following steps:
and after receiving the page display file sent by the server, sending the skeleton screen data request message to the server according to the page display file.
3. The method of claim 2, wherein the skeletal screen data request message includes a device type of a display device displaying the web page to be displayed, and a display height of a display area, the display area being an area of the display device displaying the web page to be displayed; before the step of sending the skeleton screen data request message to the server according to the page display file, the method further comprises:
Acquiring the equipment type and the display height;
the step of sending the skeleton screen data request message to the server according to the page display file comprises the following steps:
and sending the skeleton screen data request message to the server according to the equipment type, the display height and the page display file, so that the server can acquire the target skeleton screen data according to the equipment type and the display height.
4. A method of rendering a web page, for application to a server, the method comprising:
receiving a framework screen data request message sent by a client;
acquiring target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message;
and sending the target skeleton screen data to the client so that the client renders the first screen according to the target skeleton screen data, generates a skeleton screen corresponding to the first screen, acquires first metadata corresponding to the first screen, renders the first screen according to the first metadata, acquires second metadata, and renders other screens except the first screen in the webpage to be displayed according to the second metadata.
5. The method of claim 4, wherein prior to receiving the client-transmitted skeletal screen data request message, the method further comprises:
receiving a webpage request message sent by the client;
acquiring a page display file of the webpage to be displayed according to the webpage request message;
and sending the page display file to the client.
6. The method of claim 4, wherein the skeletal screen data request message includes a device type of a display device displaying the web page to be displayed and a display height of a display area, the display area being an area of the display device displaying the web page to be displayed; the step of obtaining the target skeleton screen data corresponding to the first screen of the webpage to be displayed according to the skeleton screen data request message comprises the following steps:
according to the equipment type and the display height, acquiring target metadata which can be displayed by the first screen from webpage metadata corresponding to the webpage to be displayed;
and taking the skeleton screen data corresponding to the target metadata as the target skeleton screen data.
7. The method of claim 6, wherein the obtaining, according to the device type and the display height, target metadata that can be displayed by the first screen from the web page metadata corresponding to the web page to be displayed includes:
Determining a skeleton model corresponding to the webpage to be displayed according to the equipment type;
acquiring metadata to be determined according to the skeleton model, wherein the metadata to be determined comprises the webpage metadata of the first N rows corresponding to the skeleton model, and N is an integer greater than 0;
and acquiring the target metadata according to the metadata to be determined and the display height.
8. The method of claim 7, wherein the obtaining the target metadata based on the metadata to be determined and the display height comprises:
when the height to be displayed corresponding to the metadata to be determined is greater than or equal to the display height, and the height to be displayed corresponding to the webpage metadata of the first N-1 rows is smaller than the display height, taking the metadata to be determined as the target metadata; or,
and under the condition that the height to be displayed corresponding to the metadata to be determined is smaller than the display height, acquiring the webpage metadata of the front N+1 rows corresponding to the skeleton model, taking the webpage metadata of the front N+1 rows as new metadata to be determined, and acquiring the target metadata according to the new metadata to be determined and the display height.
9. An apparatus for rendering a web page, for application to a client, the apparatus comprising:
the data request sending module is used for sending a skeleton screen data request message to a server so that the server can acquire target skeleton screen data corresponding to a first screen of a webpage to be displayed according to the skeleton screen data request message;
the data receiving module is used for receiving the target skeleton screen data sent by the server;
the first rendering module is used for rendering the first screen according to the target skeleton screen data and generating a skeleton screen corresponding to the first screen;
the second rendering module is used for acquiring first metadata corresponding to the first screen and rendering the first screen according to the first metadata;
and the third rendering module is used for acquiring second metadata and rendering other screens except the first screen in the webpage to be displayed according to the second metadata.
10. An apparatus for rendering a web page, for application to a server, the apparatus comprising:
the data request receiving module is used for receiving a skeleton screen data request message sent by the client;
the data acquisition module is used for acquiring target skeleton screen data corresponding to the first screen of the webpage to be displayed according to the skeleton screen data request message;
The data sending module is used for sending the target skeleton screen data to the client so that the client renders the first screen according to the target skeleton screen data, generates a skeleton screen corresponding to the first screen, obtains first metadata corresponding to the first screen, renders the first screen according to the first metadata, obtains second metadata, and renders other screens except the first screen in the webpage to be displayed according to the second metadata.
11. A computer readable storage medium having stored thereon a computer program, characterized in that the program when executed by a processor realizes the steps of the method according to any of claims 1-3; alternatively, the program, when executed by a processor, implements the steps of the method of any of claims 4-8.
12. An electronic device, comprising:
a memory having a computer program stored thereon;
a processor for executing the computer program in the memory to carry out the steps of the method of any one of claims 1-3.
13. A server, comprising:
a memory having a computer program stored thereon;
a processor for executing the computer program in the memory to implement the steps of the method of any of claims 4-8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010900382.9A CN112100543B (en) | 2020-08-31 | 2020-08-31 | Webpage rendering method and device, storage medium, electronic equipment and server |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010900382.9A CN112100543B (en) | 2020-08-31 | 2020-08-31 | Webpage rendering method and device, storage medium, electronic equipment and server |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112100543A CN112100543A (en) | 2020-12-18 |
| CN112100543B true CN112100543B (en) | 2023-10-27 |
Family
ID=73756866
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010900382.9A Active CN112100543B (en) | 2020-08-31 | 2020-08-31 | Webpage rendering method and device, storage medium, electronic equipment and server |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112100543B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112633270B (en) * | 2020-12-29 | 2024-07-05 | 平安银行股份有限公司 | Skeleton screen generation method, device and equipment based on picture identification and storage medium |
| CN113468399B (en) * | 2021-07-19 | 2025-01-07 | 北京沃东天骏信息技术有限公司 | A data processing method, device, equipment, and storage medium |
| CN113656717B (en) * | 2021-08-06 | 2024-05-28 | 上海硬通网络科技有限公司 | Webpage control rendering method, device, equipment and storage medium |
| CN114064172A (en) * | 2021-11-08 | 2022-02-18 | 北京沃东天骏信息技术有限公司 | Data rendering method and device |
| CN114237744A (en) * | 2021-12-15 | 2022-03-25 | 携程旅游网络技术（上海）有限公司 | Component lazy loading method, system, equipment and storage medium |
| CN114661370B (en) * | 2022-02-17 | 2024-08-23 | 上海哔哩哔哩科技有限公司 | Resource loading method and device, electronic equipment and computer storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018196617A1 (en) * | 2017-04-25 | 2018-11-01 | 腾讯科技（深圳）有限公司 | Page loading method, system, server and terminal |
| CN111339455A (en) * | 2018-12-18 | 2020-06-26 | 阿里巴巴集团控股有限公司 | Method and device for loading page first screen by browser application |
| CN111552473A (en) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | Application processing method, device and equipment |
-
2020
- 2020-08-31 CN CN202010900382.9A patent/CN112100543B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018196617A1 (en) * | 2017-04-25 | 2018-11-01 | 腾讯科技（深圳）有限公司 | Page loading method, system, server and terminal |
| CN111339455A (en) * | 2018-12-18 | 2020-06-26 | 阿里巴巴集团控股有限公司 | Method and device for loading page first screen by browser application |
| CN111552473A (en) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | Application processing method, device and equipment |
Non-Patent Citations (1)
| Title |
|---|
| 基于完全渲染的网页首屏性能测量设计;吴清扬;赵栋;;电子制作(第16期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112100543A (en) | 2020-12-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112100543B (en) | Webpage rendering method and device, storage medium, electronic equipment and server | |
| JP6997253B2 (en) | Web page rendering methods, equipment, electronics, storage media and programs | |
| US10055507B2 (en) | Infinite scrolling | |
| CN108279966B (en) | Webpage screenshot method, device, terminal and storage medium | |
| CN111177618B (en) | Website construction method, device, equipment and computer readable storage medium | |
| US8843360B1 (en) | Client-side localization of network pages | |
| CN112306587B (en) | Page display processing method, device, and terminal device | |
| US8682964B1 (en) | Progressively loading network content | |
| JP7553211B2 (en) | Two-dimensional code display method, apparatus, device and medium | |
| US20170053383A1 (en) | Apparatus and method for providing 3d content and recording medium | |
| US10135910B2 (en) | Cross-platform document presentation | |
| CN114065080B (en) | Page rendering method, device, equipment and computer readable storage medium | |
| CN107818101A (en) | Method and device for page jump | |
| CN111368235A (en) | Page rendering and displaying method, device, server and storage medium | |
| WO2014176906A1 (en) | Online video playing method and apparatus and computer readable medium | |
| WO2024011899A1 (en) | Widget loading method and apparatus, device, and storage medium | |
| CN114063958A (en) | Page split-screen display method and device | |
| CN109684565A (en) | The generation of Webpage correlation video and methods of exhibiting, device, system and electronic equipment | |
| CN112307377B (en) | Information display method, device and electronic equipment | |
| CN106354792B (en) | Webpage display method and device | |
| CN109753612B (en) | Questionnaire display control method and device, storage medium and electronic equipment | |
| CN110020242A (en) | A kind of document reading progress synchronous method and device based on Web | |
| JP5303534B2 (en) | Appearance information processing apparatus and method | |
| CN109800378A (en) | Content processing method, device and electronic equipment based on custom browser | |
| CN109635263A (en) | The fixed methods of exhibiting of col width based on WEB ultra-wide table, device and electronic equipment |
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 |