CN113934953A - Webpage first screen rendering method and device - Google Patents
Webpage first screen rendering method and device Download PDFInfo
- Publication number
- CN113934953A CN113934953A CN202111180747.6A CN202111180747A CN113934953A CN 113934953 A CN113934953 A CN 113934953A CN 202111180747 A CN202111180747 A CN 202111180747A CN 113934953 A CN113934953 A CN 113934953A
- Authority
- CN
- China
- Prior art keywords
- screen
- webpage
- response data
- environment
- rendering
- 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.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 106
- 238000000034 method Methods 0.000 title claims abstract description 53
- 230000004044 response Effects 0.000 claims abstract description 149
- 230000001960 triggered effect Effects 0.000 claims abstract description 15
- 238000004590 computer program Methods 0.000 claims description 13
- 230000008569 process Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- 230000003068 static effect Effects 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
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
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 application discloses a webpage first screen rendering method. The method comprises the following steps: when a webpage initial screen access request triggered by a user is received, judging whether a request body for acquiring dynamic resources of the webpage initial screen exists in a code execution environment according to a uniform resource locator of the webpage initial screen; when the request body exists in the environment, response data responding to the request body is acquired from a server according to the request body; receiving response data returned by the server, and storing the response data into the environment; initializing a plurality of components contained in the first screen of the webpage, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data. According to the method and the device, the rendering speed of the first screen of the webpage in the application program can be improved, and the waiting time of a user is reduced.
Description
Technical Field
The application relates to the technical field of computers, in particular to a webpage first screen rendering method and device.
Background
With the development of internet technology and the popularization of mobile terminals, people are more and more accustomed to obtaining various types of information from a network through clients (including web page clients and local clients). However, as the functions included in the client are continuously rich, the contents displayed on the web pages (web pages) in the client are more and more rich, generally, one web page presents multi-screen displayed contents, and a user can trigger the mobile terminal to perform a screen flipping operation of the web page through a sliding operation or a clicking operation, so as to switch the first screen page of the web page to another screen page. In the prior art, when a user accesses a home screen page, a mobile terminal sends a network request to a server to acquire home screen page data, and then the mobile terminal renders the home screen page through the acquired home screen page data, so that the home screen page is displayed. Generally, a certain time is required from the moment a user triggers a request to open a first screen page to the moment an application program displays the first screen page, so that the user needs to experience a long waiting time. In order to reduce the waiting time of the user, in the prior art, static resources (html, css, js, image and other resources) of a first screen page are downloaded locally, and when the user accesses the first screen page, an application program localizes an access request of a remote resource, so that the time required by network communication is removed, and the purpose of accelerating the first screen is achieved. The inventor has found that the user still needs a long waiting time by the optimization mode.
Disclosure of Invention
In view of the above, a method, an apparatus, a computer device, and a computer readable storage medium for rendering a first screen of a webpage are provided to solve the problem of how to further reduce the waiting time required by a user when rendering the first screen of the webpage.
The application provides a webpage first screen rendering method, which comprises the following steps:
when a webpage initial screen access request triggered by a user is received, judging whether a request body for acquiring dynamic resources of the webpage initial screen exists in a code execution environment according to a uniform resource locator of the webpage initial screen;
when the request body exists in the environment, response data responding to the request body is acquired from a server according to the request body;
receiving response data returned by the server, and storing the response data into the environment;
initializing a plurality of components contained in the first screen of the webpage, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
Optionally, when receiving a webpage initial screen access request triggered by a user, determining whether a request body for acquiring a dynamic resource of the webpage initial screen exists in a code execution environment according to a uniform resource locator of the webpage initial screen includes:
when a webpage initial screen access request triggered by a user is received, generating a network request according to the access request, wherein the network request comprises a uniform resource locator of the webpage initial screen;
and intercepting the network request, and judging whether a request body for acquiring the dynamic resources of the first screen of the webpage exists in the environment according to a uniform resource locator in the network request.
Optionally, the method further comprises:
when a request body for acquiring the dynamic resource of the first screen of the webpage does not exist in the environment, acquiring page data corresponding to the first screen of the webpage from the server through the network request, and storing the request body contained in the network request into the environment;
and rendering the first screen of the webpage by adopting the page data.
Optionally, the initializing a plurality of components included in the first screen of the web page, acquiring the response data from the environment, and rendering each component in parallel by using the response data includes:
initializing a plurality of components contained in the first screen of the webpage, and inquiring whether response data corresponding to the components exist in the environment;
and if the response data corresponding to the components exist in the environment, rendering each component in parallel by adopting the response data corresponding to the components.
Optionally, the initializing a plurality of components included in the first screen of the web page, acquiring the response data from the environment, and rendering each component in parallel by using the response data further includes:
if the environment does not have response data corresponding to the components, acquiring page data corresponding to the first screen of the webpage from the server through a network request, and storing a request body contained in the network request into the environment;
and rendering the first screen of the webpage by adopting the page data.
Optionally, the method further comprises:
and deleting the response data from the environment after acquiring the response data from the environment.
Optionally, the obtaining the response data from the environment, and the rendering each component in parallel by using the response data includes:
if the response data does not exist in the environment and the state of the request body is an undetermined state, waiting for receiving the response data returned by the server and storing the response data into the environment;
and acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
The application also provides a webpage first screen rendering device, including:
the judging module is used for judging whether a request body for acquiring the dynamic resources of the first webpage screen exists in a code execution environment according to the uniform resource locator of the first webpage screen when a webpage first screen access request triggered by a user is received;
the acquisition module is used for acquiring response data responding to the request body from a server according to the request body when the request body is judged to exist in the environment;
the storage module is used for receiving response data returned by the server and storing the response data into the environment;
and the rendering module is used for initializing a plurality of components contained in the first screen of the webpage, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
The present application further provides a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the above method when executing the computer program.
The present application also provides a computer-readable storage medium having stored thereon a computer program which, when being executed by a processor, carries out the steps of the above-mentioned method.
According to the embodiment of the application, the request body used for acquiring the dynamic resources of the first webpage screen is stored in the environment, so that when a user accesses the first webpage screen, response data can be directly acquired from the request body to the server side, and the response data are adopted to render a plurality of components contained in the first webpage screen in parallel, the request body of the response data can be acquired after the page data of the first webpage screen is analyzed without waiting, and therefore the time for acquiring the response data is saved, the rendering speed of the first webpage screen is improved, and the waiting time of the user is shortened. In addition, by rendering components in a parallel manner, the rendering speed can be further improved.
Drawings
Fig. 1 is an environment schematic diagram of a webpage first screen rendering method according to an embodiment of the present application;
FIG. 2 is a flowchart of an embodiment of a method for rendering a first screen of a web page according to the present application;
fig. 3 is a flowchart illustrating a detailed process of determining whether a request for acquiring a dynamic resource of a first webpage screen exists in a code execution environment according to a uniform resource locator of the first webpage screen when a webpage screen access request triggered by a user is received in an embodiment of the present application;
FIG. 4 is a flowchart of another embodiment of a method for rendering a first screen of a web page in an application according to the present application;
fig. 5 is a flowchart illustrating a detailed process of initializing a plurality of components included in the first screen of the web page, acquiring the response data from the environment, and rendering each component in parallel by using the response data in an embodiment of the present application;
FIG. 6 is a flowchart illustrating a detailed process of steps of obtaining the response data from the environment and rendering each component in parallel by using the response data according to an embodiment of the present application;
fig. 7 is a schematic view illustrating an implementation flow of a webpage first screen rendering method in the present application;
FIG. 8 is a block diagram of a webpage first screen rendering apparatus according to an embodiment of the present disclosure;
fig. 9 is a schematic hardware structure diagram of a computer device for executing a method for rendering a first screen of a webpage according to an embodiment of the present application.
Detailed Description
The advantages of the present application are further illustrated below with reference to the accompanying drawings and specific embodiments.
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.
The terminology used in the present disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. As used in this disclosure and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.
It is to be understood that although the terms first, second, third, etc. may be used herein to describe various information, such information should not be limited to these terms. These terms are only used to distinguish one type of information from another. For example, first information may also be referred to as second information, and similarly, second information may also be referred to as first information, without departing from the scope of the present disclosure. The word "if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination", depending on the context.
In the description of the present application, it should be understood that the numerical references before the steps do not identify the order of performing the steps, but merely serve to facilitate the description of the present application and to distinguish each step, and therefore should not be construed as limiting the present application.
The application program is realized by a browser kernel when rendering the first screen of the webpage, wherein the browser kernel is responsible for interpreting the webpage language (such as HTML and JavaScript) and rendering (displaying) the webpage, namely, the webpage is analyzed and rendered by the browser kernel. Typically, the browser kernel is also referred to as a rendering engine. And the rendering engine is used for converting the HTML/CSS/JavaScript text and the corresponding resource files thereof into image results for displaying.
Generally, when a page is opened using a client (a local client or a web client) having a browser kernel installed on a mobile terminal (e.g., a smart phone) whose display area is limited, the page performance is determined by the rendering speed of the first screen of the page. Because the page rendered by the client needs to download the first screen data, the JavaScript script is executed to analyze the first screen data, and then various analyzed tags are inserted into the HTML document of the page. The browser kernel then parses and typesets the HTML document, initiates a first screen picture request, decodes the loaded picture, renders the page, and then the user can see the first screen of the page, and the series of operations are executed serially, which consumes a long time.
Dynamic data typically needs to be downloaded over a network, and therefore typically takes over 600 ms. It is also time consuming to perform the JavaScript script rendering of the first screen, which usually takes more than 300 ms. Therefore, the user can experience a long waiting process each time a new page is opened, and the use experience of the user is seriously influenced.
Fig. 1 schematically shows an application environment diagram of a webpage first screen rendering method according to an embodiment of the application. In an exemplary embodiment, the system of the application environment may include the terminal device 10 and the server 20. Wherein the terminal device 10 forms a wireless or wired connection with the server 20. The terminal device 10 may be a mobile phone, an iPAD, a tablet computer, or the like. The server 20 may be a server or a server cluster composed of multiple servers, or a cloud computing center, and the like, and is not limited herein. The terminal device 10 may operate the above-described webpage first screen rendering method.
It should be noted that the webpage first screen rendering method in the application is applied to a scene of rendering the webpage first screen with thousands of people and thousands of faces.
The rendering scene of the first webpage screen of thousands of people and thousands of faces means that page data displayed by the first webpage screen may be different when different users request the same first webpage screen.
Fig. 2 is a schematic flowchart of a webpage first screen rendering method according to an embodiment of the present application. It should be understood that the flow charts in the embodiments of the present method are not used to limit the order of executing the steps. As can be seen from the figure, the method for rendering the first screen of the webpage provided in this embodiment includes:
step S20, when a webpage initial screen access request triggered by a user is received, whether a request body for acquiring the dynamic resource of the webpage initial screen exists in a code execution environment is judged according to the uniform resource locator of the webpage initial screen.
Specifically, the first screen of the webpage is web page content displayed on a first screen of a terminal device by a local client (APP) or a webpage client.
The Uniform Resource Locator (URL) is a network address required for the client to request the server to obtain the page code of the first screen of the web page.
The environment (Global) for code execution may be a window object in a browser, or may also be a Global object in a Node Server, which is not limited in this embodiment.
The dynamic resource is interface data which needs to be acquired from a server through a network request, wherein the interface data is data required for rendering components in a first screen of a webpage.
Generally, the whole webpage first screen (HTML) is abstracted into different service modules, the different service modules are called different components, the component rendering usually depends on interface data, DOM nodes are rendered by the components, and the display page corresponding to the webpage first screen can be obtained after all the DOM nodes are rendered.
The request body may include a request method (GET, POST, etc.) for requesting the first screen of the web page, a URL for requesting the first screen of the web page, a Headers object related to the request for requesting the first screen of the web page, a params for requesting the first screen of the web page, and the like.
It should be noted that the interface data mentioned above may refer to interface data required by all components included in the first screen of the web page.
In this embodiment, when a user wants to access a first webpage screen of a certain web page, the user may trigger a first webpage screen access request by clicking a target control in the page.
In the prior art, when a user triggers a request for accessing a first screen of a web page, a client requests a server to obtain page data of the first screen of the web page according to a Uniform Resource Locator (URL) of the first screen of the web page. However, in the present application, after receiving the page access request, the server is not requested to obtain the page data of the first screen of the web page according to a Uniform Resource Locator (URL) of the first screen of the web page, but the server is determined whether a request body for obtaining the dynamic Resource of the first screen of the web page exists in an environment where a code is executed according to the URL of the first screen of the web page, and when the request body does not exist in the environment, a network request is sent according to the URL of the first screen of the web page to request the server to obtain the page data of the first screen of the web page.
In an exemplary embodiment, referring to fig. 3, when receiving a web page initial screen access request triggered by a user, determining whether a request body for acquiring a dynamic resource of a web page initial screen exists in a code execution environment according to a uniform resource locator of the web page initial screen includes: step S31, when receiving a webpage initial screen access request triggered by a user, generating a network request according to the access request, wherein the network request comprises a uniform resource locator of the webpage initial screen; step S32, intercepting the network request, and judging whether a request body for acquiring the dynamic resource of the first screen of the webpage exists in the environment according to the uniform resource locator in the network request.
Specifically, when a user triggers a web page initial screen access request, a network request is generated according to the access request, so that the web page data corresponding to the web page initial screen can be requested to a server through the network request. After the network request is generated, the client intercepts the network request and judges whether a request body matched with the first screen of the webpage exists in the environment according to the URL in the network request. Specifically, the URL included in the network request may be compared with the URL included in the request body stored in the environment, and if the same URL as the URL included in the network request exists, it may be determined that the request body matching the first screen of the web page exists in the environment. If there is no URL that is the same as the URL included in the network request, it may be determined that there is no requestor in the environment that matches the first screen of the web page.
And step S21, when the request body exists in the environment, response data responding to the request body is obtained from the server according to the request body.
Specifically, when it is determined that the request body exists in the environment, the response data responding to the request body can be directly obtained from the server through the request body, and the response data responding to the request body can be obtained from the server through the request body obtained after the analysis without waiting for the analysis of the page code of the first screen of the webpage, so that the time for obtaining the response data can be saved.
And step S22, receiving response data returned by the server, and storing the response data into the environment.
Step S23, initializing a plurality of components included in the first screen of the web page, acquiring the response data from the environment, and rendering each component in parallel by using the response data.
Specifically, after response data returned by the server is received, the response data may be stored in the environment, so that when the first screen of the webpage needs to be rendered subsequently, all components included in the first screen of the webpage may be initialized first, and then the response data may be taken from the environment directly, and the response data is adopted to render the multiple components in parallel, thereby obtaining the first screen of the webpage.
According to the embodiment of the application, the request body used for acquiring the dynamic resources of the first webpage screen is stored in the environment, so that when a user accesses the first webpage screen, response data can be directly acquired from the request body to the server side, and the response data are adopted to render a plurality of components contained in the first webpage screen in parallel, the request body of the response data can be acquired after the page data of the first webpage screen is analyzed without waiting, and therefore the time for acquiring the response data is saved, the rendering speed of the first webpage screen is improved, and the waiting time of the user is shortened. In addition, by rendering components in a parallel manner, the rendering speed can be further increased.
In an exemplary embodiment, referring to fig. 4, the method further comprises: step S40, when there is no request body for acquiring the dynamic resource of the web page initial screen in the environment, acquiring the page data corresponding to the web page initial screen from the server through the network request, and storing the request body included in the network request in the environment; and step S41, rendering the first screen of the webpage by adopting the page data.
Specifically, when a request body matched with the first webpage screen does not exist in the environment, rendering of the first webpage screen can be realized through normal webpage screen rendering logic, namely, the webpage data are obtained by sending a network request to the server, and after the webpage data returned by the server are received, the webpage data are used for rendering the first webpage screen, so that the first webpage screen is displayed for a user.
In an exemplary embodiment, referring to fig. 5, initializing a plurality of components included in the first screen of the web page, acquiring the response data from the environment, and rendering each component in parallel by using the response data includes: step S50, initializing a plurality of components contained in the first screen of the webpage, and inquiring whether response data corresponding to the components exist in the environment; step S51, if there is response data corresponding to the plurality of components in the environment, rendering each component in parallel by using the response data corresponding to the plurality of components.
Specifically, after the initialization of the components included in the first screen of the web page is completed, the components may be rendered, in this embodiment, when rendering is performed, because the environment may not have the response data corresponding to the components, it is necessary to first query whether the environment has the response data corresponding to the components, and only when the environment has the response data, the components may be concurrently rendered through the response data.
In an exemplary embodiment, if there is no response data corresponding to the plurality of components in the environment, obtaining page data corresponding to the first screen of the web page from the server through a network request, and storing a request body included in the network request into the environment; and rendering the first screen of the webpage by adopting the page data.
Specifically, when response data corresponding to a plurality of components does not exist in the environment, a normal rendering logic may be used to render the first screen of the webpage, that is, the page data corresponding to the first screen of the webpage may be acquired from the server through a network request, and then the first screen of the webpage is rendered by using the page data.
In this embodiment, when the subsequent user accesses the first screen of the web page again, the response data may be extracted and obtained, and when the web page data is requested from the server by the network request, the request body included in the network request is also stored in the environment. Therefore, when the user accesses the first screen of the webpage again, the request body stored in the environment can request the server for acquiring the response data in advance, and therefore the rendering speed of the first screen of the webpage can be improved.
In an exemplary embodiment, to ensure timeliness and accuracy of data, the response data may be deleted from the environment after the response data is obtained from the environment.
In an exemplary embodiment, referring to fig. 6, the obtaining the response data from the environment, and the rendering each component in parallel using the response data includes: step S60, if the response data does not exist in the environment and the status of the request body is an undetermined status, waiting for receiving the response data returned by the server, and storing the response data in the environment; and step S61, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
In this embodiment, when rendering the first screen of the web page, if the response data does not exist in the environment yet, but the request body exists, and the current state of the request body is a pending state (pending state), in order to increase the rendering speed of the first screen of the web page, the server may wait to receive the response data returned by the server, store the response data in the environment, then obtain the response data from the environment, and render each component in parallel by using the response data.
It should be noted that the pending state is such that the task of obtaining response data from the server via the requesting entity is neither honored nor denied.
According to the method and the device, the page data are acquired from the server in a waiting mode instead of directly through a network request, and the acquired response data are adopted to render the first screen of the webpage. The rendering speed of the first screen of the webpage can be improved.
In order to facilitate understanding of the present application, an implementation flow of the webpage first screen rendering method in the present application will be described in detail below with reference to a specific embodiment.
Referring to fig. 7, when the user accesses the first screen of the web page, it is determined whether a request for acquiring a dynamic resource of the first screen of the web page exists in a code execution environment (Global). If the request exists in the Global, the request is acquired from the Global, response data (response) is acquired from the server by using the request, and after the response data is acquired from the server, the response data is stored in the Global. When the webpage first screen is rendered, the components contained in the webpage first screen are initialized firstly, then whether corresponding response data exist in Global or not is judged, if the corresponding response data exist, the components are rendered by adopting the response data, and after all DOM nodes are rendered, a rendered webpage of the webpage first screen is obtained. In this embodiment, when it is determined that there is no corresponding response data in the Global, a network request is sent to obtain the corresponding response data from the server, and after the response data is obtained, the component is rendered by using the response data, and meanwhile, a request corresponding to obtaining the response data included in the network request is stored in the Global.
In another embodiment, when there is no request body for acquiring the dynamic resource of the first screen of the web page in the Global, the component included in the first screen of the web page is initialized, then a network request may be sent to acquire corresponding response data from the server, and after the response data is acquired, the component is rendered by using the response data, and meanwhile, a request corresponding to the acquisition of the response data included in the network request is stored in the Global. And after all DOM nodes are rendered, obtaining a rendered webpage of the first screen of the webpage.
Fig. 8 is a block diagram of a webpage first screen rendering apparatus 70 according to an embodiment of the present invention.
In this embodiment, the webpage first screen rendering apparatus 70 includes a series of computer program instructions stored in a memory, and when the computer program instructions are executed by a processor, the webpage first screen rendering function according to the embodiments of the present application can be implemented. In some embodiments, based on the specific operations implemented by the computer program instructions, the first webpage rendering apparatus 70 may be divided into one or more modules, which may be specifically divided as follows:
the determining module 71 is configured to determine, according to a uniform resource locator of a first webpage screen, whether a request body for acquiring a dynamic resource of the first webpage screen exists in a code execution environment when a webpage first screen access request triggered by a user is received;
an obtaining module 72, configured to, when it is determined that the request body exists in the environment, obtain, according to the request body, response data for responding to the request body from a server;
a storage module 73, configured to receive response data returned by the server, and store the response data in the environment;
and a rendering module 74, configured to initialize a plurality of components included in the first screen of the web page, obtain the response data from the environment, and render each component in parallel by using the response data.
In an exemplary embodiment, the determining module 71, when receiving a web page initial screen access request triggered by a user, generates a network request according to the access request, where the network request includes a uniform resource locator of the web page initial screen; and intercepting the network request, and judging whether a request body for acquiring the dynamic resources of the first screen of the webpage exists in the environment according to a uniform resource locator in the network request.
In an exemplary embodiment, the obtaining module 72 is further configured to, when there is no request body for obtaining the dynamic resource of the first screen of the web page in the environment, obtain, from the server through the network request, page data corresponding to the first screen of the web page, and store, in the environment, the request body included in the network request.
The rendering module 74 is further configured to render the first screen of the webpage by using the page data.
In an exemplary embodiment, the rendering module 74 is further configured to initialize a plurality of components included in the first screen of the webpage and query the environment whether response data corresponding to the plurality of components exists; and if the response data corresponding to the components exist in the environment, rendering each component in parallel by adopting the response data corresponding to the components.
In an exemplary embodiment, the rendering module 74 is further configured to, if there is no response data corresponding to the multiple components in the environment, obtain, by a network request, page data corresponding to the first screen of the web page from the server, and store a request body included in the network request in the environment; and rendering the first screen of the webpage by adopting the page data.
In an exemplary embodiment, the first webpage rendering apparatus 70 in the application further includes a deletion module.
The deleting module is used for deleting the response data from the environment after the response data is acquired from the environment.
In an exemplary embodiment, the rendering module 74 is further configured to wait to receive response data returned by the server and store the response data into the environment if the response data does not exist in the environment and the status of the requester is in a pending status; and acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
The application embodiment is used for acquiring the request body of the dynamic resource of the first webpage screen through storage in the environment, so that when a user accesses the first webpage screen, response data can be directly acquired from the request body to the server side, and the response data are adopted to render a plurality of components contained in the first webpage screen in parallel, the request body of the response data can be acquired after the page data of the first webpage screen is analyzed without waiting, and therefore the time for acquiring the response data is saved, the rendering speed of the first webpage screen is improved, and the waiting time of the user is shortened. In addition, by rendering components in a parallel manner, the rendering speed can be further increased.
Fig. 9 schematically shows a hardware architecture diagram of a computer device 8 suitable for implementing the webpage first screen rendering method according to an embodiment of the present application. In the present embodiment, the computer device 8 is a device capable of automatically performing numerical calculation and/or information processing in accordance with a command set or stored in advance. For example, the server may be a tablet computer, a notebook computer, a desktop computer, a rack server, a blade server, a tower server, or a rack server (including an independent server or a server cluster composed of a plurality of servers). As shown in fig. 9, the computer device 8 includes at least, but is not limited to: the memory 120, processor 121, and network interface 122 may be communicatively linked to each other by a system bus. Wherein:
the memory 120 includes at least one type of computer-readable storage medium, which may be volatile or non-volatile, and particularly, includes a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the storage 120 may be an internal storage module of the computer device 8, such as a hard disk or a memory of the computer device 8. In other embodiments, the memory 120 may also be an external storage device of the computer device 8, such as a plug-in hard disk provided on the computer device 8, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like. Of course, the memory 120 may also include both internal and external memory modules of the computer device 8. In this embodiment, the memory 120 is generally used for storing an operating system installed in the computer device 8 and various types of application software, such as program codes of a webpage first screen rendering method. In addition, the memory 120 may also be used to temporarily store various types of data that have been output or are to be output.
Processor 121 may be, in some embodiments, a Central Processing Unit (CPU), a controller, a microcontroller, a microprocessor, or other web page first screen rendering chip. The processor 121 is generally configured to control the overall operation of the computer device 8, such as performing control and processing related to data interaction or communication with the computer device 8. In this embodiment, the processor 121 is configured to execute the program code stored in the memory 120 or process data.
Network interface 122 may comprise a wireless network interface or a wired network interface, with network interface 122 typically being used to establish communication links between computer device 8 and other computer devices. For example, the network interface 122 is used to connect the computer device 8 with an external terminal via a network, establish a data transmission channel and a communication link between the computer device 8 and the external terminal, and the like. The network may be a wireless or wired network such as an Intranet (Intranet), the Internet (Internet), a Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), a 4G network, a 5G network, Bluetooth (Bluetooth), or Wi-Fi.
It is noted that FIG. 9 only shows a computer device having components 120-122, but it is understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead.
In this embodiment, the method for rendering the first screen of the web page stored in the memory 120 may be divided into one or more program modules and executed by one or more processors (in this embodiment, the processor 121) to complete the present application.
The embodiment of the application provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, implements the steps of the webpage first screen rendering method in the embodiment.
In this embodiment, the computer-readable storage medium includes a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the computer readable storage medium may be an internal storage unit of the computer device, such as a hard disk or a memory of the computer device. In other embodiments, the computer readable storage medium may be an external storage device of the computer device, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like provided on the computer device. Of course, the computer-readable storage medium may also include both internal and external storage devices of the computer device. In this embodiment, the computer-readable storage medium is generally used for storing an operating system and various types of application software installed in a computer device, for example, program codes of a webpage first screen rendering method in the embodiment, and the like. Further, the computer-readable storage medium may also be used to temporarily store various types of data that have been output or are to be output.
The above-described embodiments of the apparatus are merely illustrative, and the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on at least two network units. Some or all of the modules can be screened out according to actual needs to achieve the purpose of the scheme of the embodiment of the application. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by software plus a general hardware platform, and certainly can also be implemented by hardware. It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware related to instructions of a computer program, which can be stored in a computer readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-only memory (ROM), a Random Access Memory (RAM), or the like.
Finally, it should be noted that: the above embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; and the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the scope of the technical solutions of the embodiments of the present application.
Claims (10)
1. A webpage first screen rendering method is characterized by comprising the following steps:
when a webpage initial screen access request triggered by a user is received, judging whether a request body for acquiring dynamic resources of the webpage initial screen exists in a code execution environment according to a uniform resource locator of the webpage initial screen;
when the request body exists in the environment, response data responding to the request body is acquired from a server according to the request body;
receiving response data returned by the server, and storing the response data into the environment;
initializing a plurality of components contained in the first screen of the webpage, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
2. The method for rendering the first screen of the webpage according to claim 1, wherein the step of judging whether a request body for acquiring the dynamic resource of the first screen of the webpage exists in an environment where a code is executed according to a uniform resource locator of the first screen of the webpage when receiving a request for accessing the first screen of the webpage triggered by a user comprises the following steps:
when a webpage initial screen access request triggered by a user is received, generating a network request according to the access request, wherein the network request comprises a uniform resource locator of the webpage initial screen;
and intercepting the network request, and judging whether a request body for acquiring the dynamic resources of the first screen of the webpage exists in the environment according to a uniform resource locator in the network request.
3. The method for rendering the first screen of a webpage according to claim 2, wherein the method further comprises:
when a request body for acquiring the dynamic resource of the first screen of the webpage does not exist in the environment, acquiring page data corresponding to the first screen of the webpage from the server through the network request, and storing the request body contained in the network request into the environment;
and rendering the first screen of the webpage by adopting the page data.
4. The method for rendering the first screen of a webpage according to claim 1, wherein the initializing a plurality of components included in the first screen of the webpage, acquiring the response data from the environment, and rendering each component in parallel by using the response data comprises:
initializing a plurality of components contained in the first screen of the webpage, and inquiring whether response data corresponding to the components exist in the environment;
and if the response data corresponding to the components exist in the environment, rendering each component in parallel by adopting the response data corresponding to the components.
5. The method of rendering the first screen of a web page according to claim 4, wherein the initializing a plurality of components included in the first screen of the web page, acquiring the response data from the environment, and rendering each component in parallel by using the response data further comprises:
if the environment does not have response data corresponding to the components, acquiring page data corresponding to the first screen of the webpage from the server through a network request, and storing a request body contained in the network request into the environment;
and rendering the first screen of the webpage by adopting the page data.
6. The method for rendering the first screen of the webpage according to any one of claims 1 to 5, wherein the method further comprises:
and deleting the response data from the environment after acquiring the response data from the environment.
7. The method for rendering the first screen of the webpage according to claim 6, wherein the obtaining the response data from the environment, and the rendering each component in parallel by using the response data comprises:
if the response data does not exist in the environment and the state of the request body is an undetermined state, waiting for receiving the response data returned by the server and storing the response data into the environment;
and acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
8. A webpage first screen rendering device is characterized by comprising:
the judging module is used for judging whether a request body for acquiring the dynamic resources of the first webpage screen exists in a code execution environment according to the uniform resource locator of the first webpage screen when a webpage first screen access request triggered by a user is received;
the acquisition module is used for acquiring response data responding to the request body from a server according to the request body when the request body is judged to exist in the environment;
the storage module is used for receiving response data returned by the server and storing the response data into the environment;
and the rendering module is used for initializing a plurality of components contained in the first screen of the webpage, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the method of any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium having stored thereon a computer program, characterized in that: the computer program, when executed by a processor, implementing the steps of the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111180747.6A CN113934953A (en) | 2021-10-11 | 2021-10-11 | Webpage first screen rendering method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111180747.6A CN113934953A (en) | 2021-10-11 | 2021-10-11 | Webpage first screen rendering method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113934953A true CN113934953A (en) | 2022-01-14 |
Family
ID=79278069
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111180747.6A Pending CN113934953A (en) | 2021-10-11 | 2021-10-11 | Webpage first screen rendering method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113934953A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10042695B1 (en) * | 2015-09-28 | 2018-08-07 | Amazon Technologies, Inc. | Program exception recovery |
| CN109284454A (en) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | Page rendering method, apparatus, computer equipment and storage medium |
| CN110599142A (en) * | 2019-09-16 | 2019-12-20 | 腾讯科技（深圳）有限公司 | Data storage method and device, computer equipment and storage medium |
| CN111294369A (en) * | 2018-12-06 | 2020-06-16 | 阿里巴巴集团控股有限公司 | Page request processing method and device and electronic equipment |
| CN112527293A (en) * | 2020-12-16 | 2021-03-19 | 平安付科技服务有限公司 | Method and device for rendering first screen page, computer equipment and storage medium |
-
2021
- 2021-10-11 CN CN202111180747.6A patent/CN113934953A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10042695B1 (en) * | 2015-09-28 | 2018-08-07 | Amazon Technologies, Inc. | Program exception recovery |
| CN109284454A (en) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | Page rendering method, apparatus, computer equipment and storage medium |
| CN111294369A (en) * | 2018-12-06 | 2020-06-16 | 阿里巴巴集团控股有限公司 | Page request processing method and device and electronic equipment |
| CN110599142A (en) * | 2019-09-16 | 2019-12-20 | 腾讯科技（深圳）有限公司 | Data storage method and device, computer equipment and storage medium |
| CN112527293A (en) * | 2020-12-16 | 2021-03-19 | 平安付科技服务有限公司 | Method and device for rendering first screen page, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109582899B (en) | Page loading method and device, computer equipment and storage medium | |
| CN107948314B (en) | Business processing method and device based on rule file and server | |
| US9426200B2 (en) | Updating dynamic content in cached resources | |
| US8935798B1 (en) | Automatically enabling private browsing of a web page, and applications thereof | |
| CN108874922B (en) | Client device, webpage rendering method based on single page application and storage medium | |
| US20170300459A1 (en) | Card-type desktop implementation method and apparatus | |
| CN112637361B (en) | Page proxy method, device, electronic equipment and storage medium | |
| CN109670126B (en) | Cross-border access acceleration method and device | |
| CN106202368B (en) | Preloading method and device | |
| CN111431767B (en) | Multi-browser resource synchronization method and device, computer equipment and storage medium | |
| CN111079048A (en) | Page loading method and device | |
| US11930096B2 (en) | Systems and methods for rendering interactive web pages | |
| CN112672187B (en) | Page generation method and device, computer equipment and readable storage medium | |
| CN108664191B (en) | System access method and device | |
| US20230336636A1 (en) | Systems and methods for tracking user access across web domains | |
| CN113934954A (en) | Webpage first screen rendering method and device in application program | |
| US12001458B2 (en) | Multi-cloud object store access | |
| CN114915565B (en) | Network debugging method and system | |
| CN116304403A (en) | Webpage access method and device, computer equipment and storage medium | |
| CN111756744B (en) | H5 user identification method, device, equipment and storage medium | |
| US20140237133A1 (en) | Page download control method, system and program for ie core browser | |
| US8402367B1 (en) | Smart reload pages | |
| CN113934953A (en) | Webpage first screen rendering method and device | |
| CN113127788B (en) | Page processing method, object processing method, device and equipment | |
| US10460005B2 (en) | Data consumption between heterogeneous web applications |
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 |