CN113934953B - Method and device for rendering first screen of webpage - Google Patents
Method and device for rendering first screen of webpage Download PDFInfo
- Publication number
- CN113934953B CN113934953B CN202111180747.6A CN202111180747A CN113934953B CN 113934953 B CN113934953 B CN 113934953B CN 202111180747 A CN202111180747 A CN 202111180747A CN 113934953 B CN113934953 B CN 113934953B
- Authority
- CN
- China
- Prior art keywords
- screen
- response data
- environment
- web page
- request
- 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 108
- 238000000034 method Methods 0.000 title claims abstract description 49
- 230000004044 response Effects 0.000 claims abstract description 146
- 230000001960 triggered effect Effects 0.000 claims abstract description 15
- 238000004590 computer program Methods 0.000 claims description 12
- 238000010586 diagram Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- 238000012545 processing Methods 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
- 238000010295 mobile communication Methods 0.000 description 2
- 238000013515 script 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
- 230000007613 environmental effect Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000003993 interaction Effects 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
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 web page first screen access request triggered by a user is received, judging whether a request body for acquiring dynamic resources of the web page first screen exists in a code execution environment according to a uniform resource locator of the web page first screen; when the request body is determined to exist in the environment, response data responding to the request body is obtained 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 webpage first screen, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data. The application can improve the webpage first screen rendering speed in the application program and reduce the waiting time of the user.
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 increasingly accustomed to acquiring various types of information from a network through clients (including web clients and local clients). However, as functions included in the client are continuously enriched, content displayed by a web page (web page) in the client is increasingly enriched, and generally one web page presents multi-screen display content, a user can trigger the mobile terminal to execute a screen turning operation of the web page through a sliding operation or a clicking operation, so that a first screen page of the web page is switched to other screen pages. In the prior art, when a user accesses a first screen page, a mobile terminal sends a network request to a server to acquire first screen page data, and then the mobile terminal renders the first screen page through the acquired first screen page data, so that the first screen page is displayed. In general, it takes some time from when a user triggers a request to open a head screen page to when an application displays the head screen page, resulting in a long waiting time for the user. In order to reduce the waiting time of users, in the prior art, static resources (html, css, js, image and other resources) of the first screen page are downloaded to the local, and when the users access 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 inventors have found that a relatively long waiting time is still required by the user in this way of optimization.
Disclosure of Invention
In view of the foregoing, a method, an apparatus, a computer device, and a computer-readable storage medium for rendering a first screen of a web page 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 web page.
The application provides a webpage first screen rendering method, which comprises the following steps:
When a web page first screen access request triggered by a user is received, judging whether a request body for acquiring dynamic resources of the web page first screen exists in a code execution environment according to a uniform resource locator of the web page first screen;
when the request body is determined to exist in the environment, response data responding to the request body is obtained 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 webpage first screen, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
Optionally, when receiving a web page first screen access request triggered by a user, determining whether a request body for acquiring dynamic resources of the web page first screen exists in a code execution environment according to a uniform resource locator of the web page first screen includes:
When a web page first 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 web page first screen;
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.
Optionally, the method further comprises:
When a request body for acquiring the dynamic resource of the web page first screen does not exist in the environment, acquiring page data corresponding to the web page first screen from the server through the network request, and storing the request body contained in the network request into the environment;
and rendering the webpage first screen by adopting the page data.
Optionally, initializing a plurality of components included in the web page first screen, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data includes:
initializing a plurality of components contained in the webpage first screen, and inquiring whether response data corresponding to the components exist in the environment;
And if the response data corresponding to the plurality of components exists in the environment, rendering each component by adopting the response data corresponding to the plurality of components in parallel.
Optionally, initializing a plurality of components included in the web page first screen, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data further includes:
if the response data corresponding to the plurality of components does not exist in the environment, 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 webpage first screen by adopting the page data.
Optionally, the method further comprises:
and deleting the response data from the environment after the response data is acquired from the environment.
Optionally, the obtaining the response data from the environment, and rendering each component in parallel using the response data includes:
If the response data does not exist in the environment and the state of the request body is a pending state, waiting to receive 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, which comprises:
The judging module is used for judging whether a request body for acquiring dynamic resources of the webpage first screen exists in a code execution environment according to the uniform resource locator of the webpage first 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 exists 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 webpage first screen, acquiring the response data from the environment and rendering each component in parallel by adopting the response data.
The application also 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 application also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of the above method.
According to the embodiment of the application, the request bodies for acquiring the dynamic resources of the web page head screen are stored in the environment, so that when a user accesses the web page head screen, response data can be acquired directly from the request bodies to the server, and a plurality of components contained in the web page head screen are rendered in parallel by adopting the response data, and the request bodies for acquiring the response data can be acquired without waiting for analyzing the page data of the web page head screen, thereby saving the time for acquiring the response data, improving the rendering speed of the web page head screen and reducing the waiting time of the user. In addition, the rendering speed embodiment can be further improved by rendering the components in a parallel manner.
Drawings
FIG. 1 is an environmental schematic diagram of a method for rendering a first screen of a webpage 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 detailed flowchart of steps for determining whether a code execution environment has a request body for acquiring dynamic resources of a first screen of a web page according to a uniform resource locator of the first screen of the web page when a first screen access request of the web page triggered by a user is received in an embodiment of the present application;
FIG. 4 is a flowchart illustrating 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 detailed flowchart of the steps of initializing multiple components included in the first screen of the web page, obtaining the response data from the environment, and rendering each component in parallel using the response data according to an embodiment of the present application;
FIG. 6 is a detailed flow chart of a step of rendering each component in parallel using the response data obtained from the environment in accordance with an embodiment of the present application;
FIG. 7 is a schematic diagram of an implementation flow of a method for rendering a first screen of a web page according to the present application;
FIG. 8 is a block diagram illustrating an embodiment of a webpage first screen rendering device according to the present application;
Fig. 9 is a schematic hardware structure of a computer device for executing the method for rendering the first screen of the web page according to an embodiment of the present application.
Detailed Description
Advantages of the application are further illustrated in the following description, taken in conjunction with the accompanying drawings and detailed description.
Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present disclosure as detailed in the accompanying 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 or all possible combinations of one or more of the associated listed items.
It should be understood that although the terms first, second, third, etc. may be used in this disclosure to describe various information, these 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 "at … …" 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 in which the steps are performed, but are merely used to facilitate description of the present application and to distinguish between each step, and thus should not be construed as limiting the present application.
The application program is realized through a browser kernel when rendering the first screen of the webpage, wherein the browser kernel is responsible for explaining the webpage grammar (such as HTML, javaScript) and rendering (displaying) the webpage, namely, the webpage is analyzed and rendered through the browser kernel. Typically, the browser kernel is also referred to as a rendering engine. The rendering engine is used for converting the HTML/CSS/JavaScript text and the corresponding resource file into an image result for display.
In general, when a client (local client or web client) having a browser core installed on a mobile terminal (e.g., a smart phone) with a limited display area is used to open a page, its page performance is determined by the rendering speed of the head screen of the page. Because the page rendered by the client needs to download the first screen data, executing the JavaScript script to analyze the first screen data, and inserting various labels into the page HTML document. The browser kernel then parses the typeset 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 all executed serially, thus requiring a relatively long time.
In general, dynamic data needs to be downloaded via a network, and thus typically takes more than 600 ms. Rendering the first screen by executing JavaScript scripts is also time consuming, typically requiring more than 300 ms. Therefore, the user can go through a long waiting process when opening a new page each time, and the use experience of the user is seriously affected.
Fig. 1 schematically illustrates an application environment of a web page first screen rendering method according to an embodiment of the present application. In an exemplary embodiment, the system of the application environment may include a terminal device 10, a 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, etc. The server 20 may be a server cluster or a cloud computing center formed by one server or multiple servers, which is not limited herein. The above-described web page first screen rendering method may be run in the terminal device 10.
It should be noted that the webpage first screen rendering method is applied to a thousand-person and thousand-face webpage first screen rendering scene.
Wherein, the thousand-person thousand-face webpage first screen rendering scene refers to that when different users request the same webpage first screen, the webpage data displayed by the webpage first screen may be different.
Fig. 2 is a flow chart of a method for rendering a first screen of a web page according to an embodiment of the application. It will be appreciated that the flow charts in the method embodiments are not intended to limit the order in which the steps are performed. As can be seen from the figure, the method for rendering the first screen of the webpage provided in the present embodiment includes:
And step S20, judging whether a request body for acquiring dynamic resources of the web page first screen exists in a code execution environment according to the uniform resource locator of the web page first screen when a web page first screen access request triggered by a user is received.
Specifically, the first screen of the webpage is web page content displayed by a local client (APP) or a first screen of the webpage client on a screen of the terminal equipment.
The uniform resource locator (Uniform Resource Locator, URL) is a network address required by the client to request the server to obtain the page code of the first screen of the web page.
The environment (Global) of code execution may be a window object in a browser or 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 by a component in a rendering network page head screen.
Generally, we abstract the whole web page head screen (HTML) into different service modules, i.e. different service modules are called different components, the component rendering often depends on interface data, the component renders up DOM nodes, and the display page corresponding to the web page head screen can be obtained after all DOM nodes are rendered up.
The request body may include a request method (GET, POST, etc.) for requesting the first screen, a URL for requesting the first screen, a Headers object related to a request for requesting the first screen, a params for requesting the first screen, etc.
It should be noted that, the interface data may refer to interface data required by all components included in the first screen of the web page.
In this embodiment, when the user wants to access the web page first screen of a certain web page, the user may trigger the web page first screen access request by clicking the target control in the page.
In the prior art, when a user triggers a web page first screen access request, a client requests to obtain page data of the web page first screen from a server according to a uniform resource locator (Uniform Resource Locator, URL) of the web page first screen. However, in the present application, after receiving a page access request, the request for acquiring the page data of the first screen of the web page is not first sent to the server according to the uniform resource locator (Uniform Resource Locator, URL) of the first screen of the web page, but whether a request body for acquiring the dynamic resource of the first screen of the web page exists in the environment where the code is executed is first judged according to the URL of the first screen of the web page, and when the request body does not exist in the environment, the request body is sent to the server according to the URL of the first screen of the web page to request for acquiring the page data of the first screen of the web page.
In an exemplary embodiment, referring to fig. 3, when a user-triggered web page first screen access request is received, determining, according to a uniform resource locator of the web page first screen, whether a request body for obtaining a dynamic resource of the web page first screen exists in a code execution environment includes: step S31, when a web page first 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 web page first screen; and 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 first screen access request, a network request is generated according to the access request, so that the server can be requested to acquire page data corresponding to the web page first screen through the network request. After generating the network request, 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 there is the same URL as the URL included in the network request, it may be determined that there is a request body matching the web page home screen in the environment. If the URL which is the same as the URL contained in the network request does not exist, the fact that a request body matched with the webpage first screen does not exist in the environment can be judged.
And S21, when the request body exists in the environment, acquiring response data responding to the request body from a server according to the request body.
Specifically, when it is determined that the request body exists in the environment, response data responding to the request body can be obtained from the server directly 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 analysis without waiting for analysis of the page code of the first screen of the webpage, so that time for obtaining the response data can be saved.
And S22, receiving response data returned by the server, and storing the response data into the environment.
Step S23, initializing a plurality of components contained in the webpage first screen, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
Specifically, after response data returned by the server is received, the response data can be stored in the environment, so that all components contained in the first webpage screen can be initialized firstly when the first webpage screen needs to be rendered later, then the response data can be directly taken from the environment, and a plurality of components are rendered in parallel by adopting the response data, so that the first webpage screen is obtained.
According to the embodiment of the application, the request bodies for acquiring the dynamic resources of the web page head screen are stored in the environment, so that when a user accesses the web page head screen, response data can be acquired directly from the request bodies to the server, and a plurality of components contained in the web page head screen are rendered in parallel by adopting the response data, and the request bodies for acquiring the response data can be acquired without waiting for analyzing the page data of the web page head screen, thereby saving the time for acquiring the response data, improving the rendering speed of the web page head screen and reducing the waiting time of the user. In addition, the rendering speed can be further improved by rendering the components in a parallel manner.
In an exemplary embodiment, referring to fig. 4, the method further includes: step S40, when a request body for acquiring the dynamic resource of the web page first screen does not exist in the environment, acquiring page data corresponding to the web page first screen from the server through the network request, and storing the request body contained in the network request into the environment; and step S41, rendering the webpage first screen by adopting the page data.
Specifically, when a request body matched with the webpage first screen does not exist in the environment, the rendering of the webpage first screen can be realized through normal webpage first screen rendering logic, namely, page data are acquired by sending a network request to a server, and after the page data returned by the server are received, the webpage first screen is rendered by adopting the page data, so that the webpage first 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 using the response data includes: step S50, initializing a plurality of components contained in the webpage first screen, and inquiring whether response data corresponding to the plurality of components exists in the environment; and step S51, if the response data corresponding to the plurality of components exist in the environment, rendering each component by adopting the response data corresponding to the plurality of components in parallel.
Specifically, after the initialization of the plurality of components included in the web page header screen is completed, the components may be rendered, and in this embodiment, when the rendering is performed, since there may not exist response data corresponding to the plurality of components in the environment, it is necessary to first query whether there exists response data corresponding to the plurality of components in the environment when the rendering is performed, and only when there exists response data in the environment, the plurality of components may be rendered in parallel by the response data.
In an exemplary embodiment, if no response data corresponding to the plurality of components exists in the environment, acquiring page data corresponding to the first screen of the webpage from the server through a network request, and storing a request body included in the network request into the environment; and rendering the webpage first screen by adopting the page data.
Specifically, when response data corresponding to a plurality of components does not exist in the environment, normal rendering logic may be adopted to render the web page first screen, that is, page data corresponding to the web page first screen may be acquired from the server through a network request, and then the web page first screen is rendered by adopting the page data.
In this embodiment, in order to retrieve response data when a subsequent user revisits the first screen of the web page, when the page data is requested to the server through the network request, a request body included in the network request is also stored in the environment. Therefore, when the user accesses the first screen again, the request body stored in the environment can be used for requesting the server to acquire response data in advance, so that the rendering speed of the first screen can be improved.
In an exemplary embodiment, in order to ensure timeliness and accuracy of data, the response data may be deleted from the environment after the response data is acquired 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 state of the request body is a pending state, waiting to receive the response data returned by the server, and storing the response data into 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 temporarily, but the request body exists again, and the state where the request body is currently located is in a pending state (pending state), in order to increase the rendering speed of the first screen of the web page, the response data returned by the server may be waited to be received, and stored in the environment, and then the response data is acquired from the environment, and each component is rendered in parallel by adopting the response data.
It should be noted that, the pending state is that the task of acquiring the response data from the server through the request body is neither honored nor rejected.
According to the application, page data is acquired from the server in a waiting mode instead of directly through a network request, and the acquired response data is adopted to render the first screen of the webpage. The rendering speed of the first screen of the web page can be improved.
In order to facilitate understanding of the present application, the implementation flow of the web page first screen rendering method in the present application will be described in detail below in connection with a specific embodiment.
Referring to fig. 7, when a user accesses the web page header screen, it is determined whether a request body (request) for acquiring a dynamic resource of the web page header screen exists in an environment (Global) where code is executed. 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, firstly initializing components contained in the webpage first screen, then judging whether corresponding response data exists in Global, if so, rendering the components by adopting the response data, and after all DOM nodes are rendered, obtaining a rendered webpage first screen page. In this embodiment, when it is determined that there is no corresponding response data in Global, a network request is sent to obtain corresponding response data from a server, and after the response data is obtained, the response data is used to render a component, and at the same time, a request included in the network request and corresponding to the response data is stored in Global.
In another embodiment, when the Global does not have a request body for acquiring the dynamic resource of the first screen of the web page, the component included in the first screen of the web page is initialized first, then a network request may be sent to acquire corresponding response data from the server, after the response data is acquired, the response data is used to render the component, and at the same time, a request included in the network request for acquiring the response data is stored in the Global. And after all DOM nodes are rendered, obtaining a rendered webpage head screen page.
Referring to fig. 8, a block diagram of a program of an embodiment of a web page header-screen rendering apparatus 70 according to the present application is shown.
In this embodiment, the web page first screen rendering device 70 includes a series of computer program instructions stored in a memory, which when executed by a processor, can implement the web page first screen rendering functions of the embodiments of the present application. In some embodiments, based on the particular operations implemented by the portions of the computer program instructions, the web page first screen rendering device 70 may be divided into one or more modules, which may be specifically divided as follows:
The judging module 71 is configured to judge, when a web page first screen access request triggered by a user is received, whether a request body for acquiring a dynamic resource of the web page first screen exists in an environment where a code is executed according to a uniform resource locator of the web page first screen;
an obtaining module 72, configured to obtain response data responding to the request body from a server according to the request body when it is determined that the request body exists in the environment;
a storage module 73, configured to receive response data returned by the server, and store the response data into the environment;
and the rendering module 74 is used for initializing a plurality of components contained in the webpage first screen, acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
In an exemplary embodiment, the determining module 71 generates a network request according to the access request when receiving a web page first screen access request triggered by a user, where the network request includes a uniform resource locator of the web page first screen; 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.
In an exemplary embodiment, the obtaining module 72 is further configured to obtain, when a request body for obtaining a dynamic resource of the web page first screen does not exist in the environment, page data corresponding to the web page first screen from the server through the network request, and store the request body included in the network request in the environment.
The rendering module 74 is further configured to render the first screen of the web page 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 web page, and query from the environment whether response data corresponding to the plurality of components exists; and if the response data corresponding to the plurality of components exists in the environment, rendering each component by adopting the response data corresponding to the plurality of components in parallel.
In an exemplary embodiment, the rendering module 74 is further configured to, if no response data corresponding to the plurality of components exists in the environment, obtain, through 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 webpage first screen by adopting the page data.
In an exemplary embodiment, the web page header rendering device 70 in the application program further includes a deletion module.
The deleting module is used for deleting the response data from the environment after the response data are acquired from the environment.
In an exemplary embodiment, the rendering module 74 is further configured to wait to receive the response data returned by the server and store the response data in the environment if the response data does not exist in the environment and the state of the request body is in a pending state; and acquiring the response data from the environment, and rendering each component in parallel by adopting the response data.
According to the application embodiment, the request bodies for acquiring the dynamic resources of the webpage first screen are stored in the environment, so that when a user accesses the webpage first screen, response data can be acquired directly from the request bodies to the server, and a plurality of components contained in the webpage first screen are rendered in parallel by adopting the response data, and the request bodies for acquiring the response data can be acquired without waiting for analyzing the webpage data of the webpage first screen, so that the time for acquiring the response data is saved, the webpage first screen rendering speed is improved, and the waiting time of the user is reduced. In addition, the rendering speed can be further improved by rendering the components in a parallel manner.
Fig. 9 schematically shows a hardware architecture diagram of a computer device 8 adapted to implement a web page head screen rendering method according to an embodiment of the 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 instructions set or stored in advance. For example, the server may be a tablet computer, a notebook computer, a desktop computer, a rack-mounted server, a blade server, a tower server, or a rack server (including a stand-alone server or a server cluster formed by a plurality of servers), etc. As shown in fig. 9, the computer device 8 includes at least, but is not limited to: memory 120, processor 121, and network interface 122 may be communicatively linked to each other by a system bus. Wherein:
Memory 120 includes at least one type of computer-readable storage medium that may be volatile or nonvolatile, and specifically, readable storage media include flash memory, hard disk, multimedia card, card memory (e.g., SD or DX memory, etc.), random Access Memory (RAM), static Random Access Memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 120 may be an internal storage module of the computer device 8, such as a hard disk or 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, a smart memory card (SMART MEDIA CARD, abbreviated as SMC), a Secure Digital (SD) card, a flash memory card (FLASH CARD) or the like, which are provided on the computer device 8. Of course, the memory 120 may also include both internal memory modules of the computer device 8 and external memory devices. In this embodiment, the memory 120 is typically used to store an operating system installed on the computer device 8 and various types of application software, such as program codes of a web page head 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 a central processing unit (Central Processing Unit, simply CPU), controller, microcontroller, microprocessor, or other web page head screen rendering chip in some embodiments. The processor 121 is typically used 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, and the like. In this embodiment, the processor 121 is configured to execute program codes or process data stored in the memory 120.
The network interface 122 may comprise a wireless network interface or a wired network interface, the network interface 122 typically being used to establish a communication link between the 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 through 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 for mobile communications (Global System of Mobile communication, abbreviated as GSM), wideband code division multiple access (Wideband Code Division Multiple Access, abbreviated as WCDMA), a 4G network, a 5G network, bluetooth (Bluetooth), wi-Fi, etc.
It should be noted that fig. 9 only shows a computer device having components 120-122, but it should be understood that not all of the illustrated components are required to be implemented, and that more or fewer components may be implemented instead.
In this embodiment, the webpage first screen rendering method stored in the memory 120 may be divided into one or more program modules and executed by one or more processors (the processor 121 in this embodiment) to complete the present application.
The embodiment of the application provides a computer readable storage medium, and the computer readable storage medium stores a computer program thereon, and when the computer program is executed by a processor, the steps of the webpage first screen rendering method in the embodiment are realized.
In this embodiment, the computer-readable storage medium includes a flash memory, a hard disk, a multimedia card, a card 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 a computer device, such as a hard disk or a memory of the computer device. In other embodiments, the computer readable storage medium may also be an external storage device of a computer device, such as a plug-in hard disk, a smart memory card (SMART MEDIA CARD, abbreviated as SMC), a Secure Digital (abbreviated as SD) card, a flash memory card (FLASH CARD), or the like, which are provided on the computer device. Of course, the computer-readable storage medium may also include both internal storage units of a computer device and external storage devices. In this embodiment, the computer readable storage medium is typically used to store an operating system and various types of application software installed on the computer device, such as program codes of the web page head screen rendering method in the embodiment, and the like. Furthermore, 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 apparatus embodiments described above are merely illustrative, wherein elements illustrated as separate elements may or may not be physically separate, and elements shown as elements may or may not be physical elements, may be located in one place, or may be distributed over at least two network elements. Some or all modules in the system can be screened out according to actual needs to realize the purpose of the scheme of the embodiment of the application. Those of ordinary skill in the art will understand and implement the present application without undue burden.
From the above description of embodiments, it will be apparent to those skilled in the art that the embodiments may be implemented by means of software plus a general purpose hardware platform, or may be implemented by hardware. Those skilled in the art will appreciate that all or part of the processes implementing the methods of the above embodiments may be implemented by a computer program for instructing relevant hardware, where the program may be stored in a computer readable storage medium, and where the program may include processes implementing 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 (RandomAccessMemory, RAM), or the like.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present application, and not for limiting the same; although the application has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some or all of the technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit of the application.
Claims (10)
1. The webpage first screen rendering method is characterized by comprising the following steps of:
When a web page first screen access request triggered by a user is received, judging whether a request body for acquiring dynamic resources of the web page first screen exists in a code execution environment according to a uniform resource locator of the web page first screen, wherein the request body comprises a request method for requesting the web page first screen, a URL for requesting the web page first screen and Headers objects related to a request for requesting the web page first screen;
when the request body is determined to exist in the environment, response data responding to the request body is obtained 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 webpage first screen, 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 web page according to claim 1, wherein the determining whether the environment in which the code is executed according to the url of the first screen and the request body for obtaining the dynamic resource of the first screen of the web page exist when the request for accessing the first screen of the web page triggered by the user is received comprises:
When a web page first 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 web page first screen;
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.
3. The web page first screen rendering method of claim 2, further comprising:
When a request body for acquiring the dynamic resource of the web page first screen does not exist in the environment, acquiring page data corresponding to the web page first screen from the server through the network request, and storing the request body contained in the network request into the environment;
and rendering the webpage first screen by adopting the page data.
4. The web page head screen rendering method of claim 1, wherein initializing the plurality of components included in the web page head screen, acquiring the response data from the environment, and rendering each component in parallel using the response data comprises:
initializing a plurality of components contained in the webpage first screen, and inquiring whether response data corresponding to the components exist in the environment;
And if the response data corresponding to the plurality of components exists in the environment, rendering each component by adopting the response data corresponding to the plurality of components in parallel.
5. The method for rendering the first screen of the web page according to claim 4, wherein initializing the 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 using the response data further comprises:
if the response data corresponding to the plurality of components does not exist in the environment, 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 webpage first screen by adopting the page data.
6. The web page header screen rendering method according to any one of claims 1 to 5, characterized in that the method further comprises:
and deleting the response data from the environment after the response data is acquired from the environment.
7. The web page head screen rendering method of claim 6, wherein the obtaining the response data from the environment, and rendering each component in parallel using the response data comprises:
If the response data does not exist in the environment and the state of the request body is a pending state, waiting to receive 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 web page first screen rendering device, comprising:
The judging module is used for judging whether a request body for acquiring dynamic resources of the webpage first screen exists in a code execution environment according to the uniform resource locator of the webpage first screen when a webpage first screen access request triggered by a user is received, wherein the request body comprises a request method for requesting the webpage first screen, a URL for requesting the webpage first screen and Headers objects related to a request for requesting the webpage first screen;
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 exists 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 webpage first screen, 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 the computer program is executed.
10. A computer-readable storage medium having stored thereon a computer program, characterized by: the computer program implementing the steps of the method of any of claims 1 to 7 when executed by a processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111180747.6A CN113934953B (en) | 2021-10-11 | 2021-10-11 | Method and device for rendering first screen of webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111180747.6A CN113934953B (en) | 2021-10-11 | 2021-10-11 | Method and device for rendering first screen of webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113934953A CN113934953A (en) | 2022-01-14 |
| CN113934953B true CN113934953B (en) | 2024-11-08 |
Family
ID=79278069
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111180747.6A Active CN113934953B (en) | 2021-10-11 | 2021-10-11 | Method and device for rendering first screen of webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113934953B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109284454A (en) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | Page rendering method, apparatus, 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 |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103546498B (en) * | 2012-07-09 | 2018-11-13 | 百度在线网络技术（北京）有限公司 | It is a kind of that the method and apparatus accessing webpage is provided for mobile terminal |
| US10042695B1 (en) * | 2015-09-28 | 2018-08-07 | Amazon Technologies, Inc. | Program exception recovery |
| US20180032491A1 (en) * | 2016-07-26 | 2018-02-01 | Google Inc. | Web page display systems and methods |
| CN109684575A (en) * | 2018-10-30 | 2019-04-26 | 平安科技（深圳）有限公司 | Processing method and processing device, storage medium, the computer equipment of web data |
| CN111294369B (en) * | 2018-12-06 | 2022-06-03 | 阿里巴巴集团控股有限公司 | Page request processing method and device and electronic equipment |
| CN110765334A (en) * | 2019-09-10 | 2020-02-07 | 北京字节跳动网络技术有限公司 | Data capture method, system, medium and electronic device |
| CN110599142B (en) * | 2019-09-16 | 2024-06-25 | 腾讯科技（深圳）有限公司 | Data storage method, device, computer equipment and storage medium |
| CN112417360B (en) * | 2020-12-03 | 2023-02-07 | 武汉悦学帮网络技术有限公司 | Webpage rendering method and device |
-
2021
- 2021-10-11 CN CN202111180747.6A patent/CN113934953B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109284454A (en) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | Page rendering method, apparatus, 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113934953A (en) | 2022-01-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109582899B (en) | Page loading method and device, computer equipment and storage medium | |
| 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 | |
| WO2020199751A1 (en) | Method and apparatus for loading page picture, and electronic device | |
| US20140280691A1 (en) | Updating dynamic content in cached resources | |
| CN107402938B (en) | Page display method and device and client equipment | |
| US20170300459A1 (en) | Card-type desktop implementation method and apparatus | |
| CN102855318A (en) | Method and system for preloading of webpages | |
| CN107040584B (en) | Method and device for downloading picture by client | |
| CN112637361B (en) | Page proxy method, device, electronic equipment and storage medium | |
| CN111079048B (en) | Page loading method and device | |
| US11032683B2 (en) | Method and apparatus for publishing cloud resource | |
| CN111339456B (en) | Preloading method and device | |
| CN112818270A (en) | Data cross-domain transfer method and device and computer equipment | |
| CN108809943B (en) | Website monitoring method and device | |
| US20230171329A1 (en) | Systems and methods for rendering interactive web pages | |
| CN111431767B (en) | Multi-browser resource synchronization method and device, computer equipment and storage medium | |
| CN111581553A (en) | Network image display method, system, electronic equipment and storage medium | |
| CN112672187B (en) | Page generation method and device, computer equipment and readable storage medium | |
| CN113934953B (en) | Method and device for rendering first screen of webpage | |
| CN113934954A (en) | Webpage first screen rendering method and device in application program | |
| US20230336636A1 (en) | Systems and methods for tracking user access across web domains | |
| CN114915565B (en) | Network debugging method and system | |
| US20140237133A1 (en) | Page download control method, system and program for ie core browser | |
| CN111338928A (en) | Chrome-based browser testing method and device |
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 |