Page display method, resource file package generation method and electronic equipment

Abstract

The embodiment of the invention discloses a method for displaying a page, a method for generating a resource file package and electronic equipment, and the method for displaying the page comprises the steps: obtaining a target resource file package of a target page after receiving a request for jumping from a source page to the target page; by running a static resource template file in the target resource file package, obtaining static resource data corresponding to the target field from static resource data transmitted from the source page to a page rendering engine in a page jumping process; according to the obtained static resource data and the first screen layout information in the static resource template, constructing first screen page content to be displayed; and displaying the content of the constructed first-screen page by utilizing a page layout time sequence control technology. Through the embodiment of the invention, the on-screen display speed of the first-screen page content of the page can be improved.

Description

Technical Field

[0001] The present application relates to the technical field of page information processing, and in particular to a method and electronic device for page display and resource file package generation. Background Art

[0002] In the page rendering process, the time required from the user sending a request to displaying the first screen content of the page is an important indicator, which directly affects the user experience when browsing the page. However, when traditional page rendering engines process large-volume main Bundle (resource file package, when developing a page, many pictures, text files, etc. are organized together and packaged into a Bundle file), the first screen display time of the page is often too long, affecting the user experience.

[0003] Specifically, after a user issues an access request to a target page, the following process is required: pull the main Bundle file of the page from the cloud to the local computer, and then execute the main Bundle file, including CSS (Cascading Style Sheets) parsing, package structure parsing, calling the business logic layer of the specific business to obtain business data, and then rendering the page. In the whole process, from pulling files from the cloud to the final page display, many steps are involved. In addition, the time required for this process is not fixed, and it depends on the package size of the Bundle file, the code implementation method, etc. For a large main Bundle file, it will take a long time from the request to the presentation of the first screen content of the page.

[0004] For example, suppose there is a page in a product information service system (e-commerce platform), and its main Bundle file includes many different types of information cards, such as video cards, picture cards, live broadcast cards, etc. The specific content of these information cards needs to come from the business side, so it is also necessary to obtain the data in the remote server of the business side (for example, the product title, price, picture, interest point, store name and other information required in the picture card), and then it is necessary to do data processing, filter out the required data, parse the template at the UI (User Interface) level, merge the data with the template, and finally perform UI screen processing. Obviously, the whole process will take a long time, and the user needs to wait before the screen is displayed. Especially for users of low-end mobile devices, there are still limitations on the hardware performance of the device, and they will face more delays and freezes when loading large applications. Summary of the invention

[0005] The present application provides a method and electronic device for page display and resource file package generation, which can improve the speed of displaying the first screen page content on the screen.

[0006] This application provides the following solutions:

[0007] A page display method, comprising:

[0008] After receiving a request to jump from a source page to a target page, a target resource file package of the target page is obtained; wherein the target resource file package includes a static resource template file and a main resource file of the target page; the static resource template is used to define the first screen layout information and target fields of the target page;

[0009] By running the static resource template file in the target resource file package, the static resource data corresponding to the target field is obtained from the static resource data transmitted from the source page to the page rendering engine during the page jump process;

[0010] Constructing the home screen page content to be displayed according to the acquired static resource data and the home screen layout information in the static resource template;

[0011] The page layout timing control technology is used to display the constructed first screen page content.

[0012] Among them, in the target resource file package, the static resource template file is located before the main resource file, so that the static resource template file is started and run preferentially before the main resource file is started and run.

[0013] Wherein, in the process of the resource file packaging program generating the resource file package for the target page, the plug-in program of the resource file packaging program inserts the static resource template file into the target resource file package.

[0014] Among them, it also includes:

[0015] In the process of running the static resource template file, running the main resource file to load and render the dynamic resource data related to the target page;

[0016] After the dynamic resource data is loaded and rendered, the page content is regenerated using the dynamic resource data, and the first screen page content constructed based on the static resource data is overwritten and displayed.

[0017] Among them, it also includes:

[0018] After the dynamic resource data is loaded and rendered, the document object model DOM element injected during the process of constructing the first screen page content with the static resource template file is removed.

[0019] Wherein, the static resource template file is implemented using native JavaScript.

[0020] The source page includes a first page in a product information service system, the first page includes a plurality of first information cards arranged in a double-column flow or a multi-column flow, the first information card includes an information card for displaying graphic information of the corresponding product;

[0021] The target page includes a second page to which a first information card corresponding to a target product in the first page is jumped after being clicked, the second page includes a plurality of second information cards arranged in a single-column flow, wherein, in an initial state of jumping to the second page, the first screen range of the second page is used to display the second information card corresponding to the target product;

[0022] Among them, in the process of jumping from the first page to the second page, the first page passes the relevant data of the target product to the page rendering engine, and the static resource template file in the target resource file package of the second page obtains the relevant data of the target product through the page rendering engine, and is used as static resource data for constructing the first screen page content of the second page.

[0023] A method for generating a resource file package, the method being applied to a plug-in program of a resource file packaging program, comprising:

[0024] Listen to the event that the resource file packaging program generates a resource file package for the target page;

[0025] If the event is monitored, the static resource template file corresponding to the target page is inserted into the target resource file package of the target page, and the static resource template is used to define the first screen layout information and target fields of the target page, so that after the client side jumps from the source page to the target page for display and obtains the target resource file package of the target page, by running the static resource template file, the static resource data corresponding to the target field is obtained from the static resource data passed by the source page to the page rendering engine during the page jump process, the first screen page content is constructed according to the obtained static resource data and the first screen layout information, and the constructed first screen page content is displayed using the page layout timing control technology.

[0026] The step of inserting the static resource template file corresponding to the target page into the target resource file package of the target page includes:

[0027] The static resource template file corresponding to the target page is inserted before the main resource file of the target page, so that the static resource template file is started and run preferentially before the main resource file is started and run.

[0028] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements the steps of any of the methods described above.

[0029] An electronic device, comprising:

[0030] one or more processors; and

[0031] A memory associated with the one or more processors, the memory being used to store program instructions, wherein the program instructions, when read and executed by the one or more processors, execute the steps of any of the methods described above.

[0032] A computer program product comprises a computer program / computer executable instructions, wherein the computer program / computer executable instructions implement the steps of any of the aforementioned methods when executed by a processor in an electronic device.

[0033] According to the specific embodiments provided in this application, this application discloses the following technical effects:

[0034] Through the embodiments of the present application, a static rendering template code file can be injected into the resource file package of the target page, and combined with the page layout timing control technology, the first screen page content can be optimized for rapid on-screen display. Specifically, the static resource template can be used to define the first screen layout information of the target page and the target field that needs to be quickly displayed on the first screen. After receiving a request to jump from the source page to the target page for display, the client side can obtain the target resource file package of the target page. By running the static resource template file therein, the static resource data corresponding to the target field can be obtained from the static resource data passed from the source page to the page rendering engine during the page jump process, and the first screen page content to be displayed can be constructed based on the obtained static resource data and the first screen layout information in the static resource template. Afterwards, the constructed first screen page content can be displayed on the screen using the page layout timing control technology. Through this solution, since local static resource data can be used to construct the first screen page content, there is no need to wait for data to be pulled from the remote database. After the first screen page content is constructed, the page layout timing control technology can be used to directly display it on the screen without waiting for the construction of other page contents. Therefore, the speed of displaying the first screen page content on the screen can be improved. Especially for users of low-performance terminal devices, loading delays and freezes can be reduced, improving user experience.

[0035] In an optional implementation, the injection of static rendering template code files is achieved by providing a plug-in program for the resource file packaging program. This implementation method does not require large-scale transformation of the existing front-end project and has the advantages of low transformation cost and simple maintenance during implementation.

[0036] In addition, while displaying static home page content, you can also continue to load and render dynamic content, which can better support real-time interaction needs.

[0037] Of course, any product implementing the present application does not necessarily need to achieve all of the advantages described above at the same time. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0039] Figure 1 It is a schematic diagram of the system architecture provided by the embodiment of the present application;

[0040] Figure 2 is a flow chart of the first method provided in an embodiment of the present application;

[0041] Figure 3 is a flow chart of the second method provided in an embodiment of the present application;

[0042] Figure 4 It is a schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0043] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.

[0044] In an embodiment of the present application, a corresponding solution is provided to realize the rapid on-screen display of the first screen content of a page. In this solution, the packaging process of the main Bundle file of a target page can be intervened first, so as to insert the static resource template file into the main Bundle file package. When the terminal side needs to display the target page and pulls the main Bundle file package from the server, the static resource template file can also be pulled locally. In a preferred implementation method, a specific static resource template file can also be inserted before the original main Bundle file, so that after the terminal side pulls the Bundle file package, it can preferentially start running the static resource template file, so as to construct the first screen page content of the target page through the static resource template file.

[0045] Among them, the static resource template file can be generated for the target page, which can define the first screen layout information of the target page and the target fields that need to be quickly displayed on the first screen. In addition, it can also include obtaining specific static resource data and using static resource data to construct the relevant implementation logic of the first screen page content. In other words, the layout of the first screen can be determined according to the layout of the target page, for example, which resource positions are included, which field data needs to be displayed for each resource position, and so on. In addition, it can also be defined which fields of data need to be quickly displayed on the first screen. For example, taking a target page in a commodity information service system as an example, the fields that need to be quickly displayed on the first screen may include title, price, picture, benefit point, store name, etc. Among them, which specific fields need to be quickly displayed on the first screen can be determined according to the needs of the project where the specific target page is located.

[0046] In order to implement the insertion of the above-mentioned static resource template file, the embodiment of the present application can also provide a plug-in program for the main Bundle file packaging program, which can be used to monitor the Bundle file packaging event. If the event is monitored, the pre-prepared static resource template file can be inserted into the Bundle file package. In a preferred manner, the static resource template file can be inserted before the main Bundle file.

[0047] Through the above processing, the Bundle file package of the target page includes not only the main Bundle file but also the aforementioned static resource template file. In this way, when the user jumps to the target page for access by performing operations such as clicking from a source page, the terminal side can pull the Bundle file package of the target file from the server side, in which the aforementioned static resource template file can be included, and then the static resource template file can be run to obtain static resource data about the target page, and the first screen page content can be assembled using the static resource data. Specifically, in the process of jumping from the source page to the target page, the source page will pass some data to the page rendering engine, for example, including some information about the currently clicked product, which can be obtained from the server side during the process of displaying the source page, and in the process of jumping to the target page, the source page can pass the relevant data of the clicked product to the page rendering engine. In this way, the static resource template file can obtain this data from the page rendering engine as the static resource data of the target page, and then the first screen page content can be assembled in combination with the page layout information defined in the static resource template file.

[0048] After the assembly of the first screen page content is completed, the page layout timing control technology can also be used to submit the constructed first screen page content to the layout thread for displaying the constructed first screen page content on the screen. In other words, the timing of submitting the content to the layout thread can be controlled by using the page layout timing control technology. In the embodiment of the present application, as long as the first screen page content is constructed using static resource data, the page layout timing control technology can be used to submit it to the layout thread, thereby realizing the rapid display of the constructed first screen page content on the screen without waiting for the construction of other page contents.

[0049] In summary, in the embodiment of the present application, by inserting a static resource template file into the Bundle file packaging of the target page, and then combining it with the page layout timing control technology, the first screen page content can be quickly displayed on the screen to shorten the user's waiting time and improve the user experience.

[0050] From an application perspective, the solution provided by the embodiment of the present application can be used in a variety of different scenarios or projects. Since static resource data needs to be provided by the source page, no matter what specific scenario or project it is in, the specific target page can be a secondary page, a tertiary page, etc. Since there is usually a certain connection relationship between the target page and its parent page, part of the data that needs to be displayed in the target page may also exist in its parent page. Therefore, based on this feature, the acquisition of static resource data of the target page can be achieved.

[0051] From the perspective of system architecture, see Figure 1, the embodiments of the present application may involve the client and server of the application, wherein there may be multiple specific applications, the client mainly runs in the user's terminal device, and the server runs in the cloud server. Among them, in one implementation method, a plug-in program can be provided for the Bundle file packaging program to complete the reading of static resource template files, the monitoring of packaging events, and the insertion of static resource template files, and the generated Bundle file package can be saved on the server side. Among them, in some cases, the Bundle file package can also be converted into a binary file on the server side for storage. Afterwards, if the user executes a request to jump from the source page to the target page on the client side, the source page can pass some relevant data to the page rendering engine. At the same time, the client can pull the Bundle file package of the target page from the server, and the static resource template file can be obtained by parsing the Bundle file package. Then, by executing the static resource template file, the relevant static resource data can be obtained from the page rendering engine, and the static resource data can be used to assemble the first screen page content. Afterwards, the layout timing control technology is used to submit the first screen page content to the layout thread to achieve rapid on-screen display of the first screen page content.

[0052] The specific implementation scheme provided in the embodiments of the present application is described in detail below.

[0053] Embodiment 1

[0054] First, this embodiment provides a page display method from the perspective of the client. Figure 2 , the method may include:

[0055] S201: After receiving a request to jump from a source page to a target page, obtain a target resource file package of the target page; wherein the target resource file package includes a static resource template file and a main resource file of the target page; the static resource template is used to define the first screen layout information and target fields of the target page.

[0056] As described above, in an embodiment of the present application, a static resource template file can be provided in advance for the target page that needs to be accelerated on the first screen. The file can be manually generated by the developer of the specific target page, or by the manager of the project to which the target page belongs, or can be generated in an automated manner. Specifically, the static resource template file can include information defining the first screen layout information of the target page and the target fields that need to be quickly displayed on the first screen. In addition, it can also include relevant implementation logic codes for obtaining static resource data and assembling the first screen page content, etc.

[0057] Among them, the above-mentioned static resource template files can be implemented using pure native JavaScript (JavaScript is a dynamic programming language, and pure native JavaScript refers to pure JavaScript that does not rely on any framework or library) to reduce the time consumption of the framework layer and achieve faster DOM (Document Object Model) rendering.

[0058] After defining the above-mentioned static resource template file, in order to be able to insert this static resource template file into the Bundle file, a plug-in program can also be defined. Afterwards, the above-mentioned customized plug-in program can be introduced and used in the build configuration file of the project where the specific target page is located (used to define the build configuration of the project, including various build options and plug-in configurations, etc.). The specific role of the plug-in program may include: reading the content of the static resource template file in the constructor of the plug-in and saving it to a variable; in the compilation (compilation) phase of the Bundle file packaging program, the Bundle file packaging event of the target page can be monitored. For example, for the Webpack packaging program, the monitoring can be achieved through the processAssets hook function of Webpack. The processAssets hook of Webpack is a hook triggered by Webpack when generating the final Bundle file, allowing developers to perform some custom operations before or after the Bundle file is generated. When the Bundle file packaging event for the target page is monitored, the static resource template file of the target page can be inserted into the resource file package of the target page. In a preferred implementation, the static resource template file can be inserted in front of the main Bundle file so that the static resource template file can be started and executed first on the client side. Afterwards, in the processAssets hook, it can be checked whether the static resource template code file is already included in the bundle file package actually generated. If not, the insertion operation can be re-executed. This method of providing a plug-in program for the packaging program and implementing the injection of static template code files does not require large-scale transformation of the existing front-end project, and has the advantages of low implementation cost and simple maintenance.

[0059] After completing the insertion of the above-mentioned static resource template code file and the generation of the Bundle file package, the generated Bundle file package can be saved on the server side. Among them, for some page rendering engines, it is also necessary to convert this Bundle file package into binary form, especially for dynamic rendering engines that support cross-platform, because developers are allowed to use syntax similar to the Web to develop a single code base while developing applications for various mobile terminal system architectures. Therefore, in the Webpack packaging process, the generated Bundle file package also needs to be converted into a binary file and then saved on the server side. Correspondingly, in this scenario, the Bundle file package injected with the static resource template code file in the embodiment of the present application will also be compiled into a unified binary file by the above-mentioned dynamic page rendering engine that supports cross-platform together with other resource files. This binary file can be efficiently loaded and executed in the above-mentioned dynamic page rendering environment that supports cross-platform.

[0060] Of course, the above only provides a specific implementation method for injecting static resource template code files into the Bundle file package. In actual applications, the above injection process can also be completed in other ways. For example, the injection can be completed manually, etc.

[0061] After completing the injection of the above-mentioned static resource template code file, the static resource template code file can be used to realize the rapid on-screen display of the first screen page content. Specifically, on the client side, the specific access request can be initiated by jumping from the source page, that is, in the process of a user browsing a source page, an access request to the target page can be initiated by clicking on a link therein. At this time, on the one hand, the source page can pass some relevant data, especially some data related to the display of the target page, to the page rendering engine (usually, the source page will perform the data transfer work, and the embodiment of the present application utilizes this feature to obtain the static resource data of the target page from the transferred data); on the other hand, the client can pull the Bundle file package of the target page from the server, and obtain the above-mentioned static resource template code file from it. Of course, the Bundle file package will also include the main Bundle file of the target page, which is used to obtain the dynamic data of the target page, as well as the construction of the page content and other processing.

[0062] S202: Obtain static resource data corresponding to the target field from the static resource data transmitted from the source page to the page rendering engine during the page jump process by running the static resource template file in the target resource file package.

[0063] In the Bundle file package pulled to the target page, static resource template files and main Bundle files can be parsed out, and then the above static resource template files can be executed, and of course, the specific main Bundle file will also be executed. In the preferred implementation of the present application, the static resource template file can be inserted before the main Bundle file, so that the time to start executing the static resource template file is earlier than the time to start executing the main Bundle file, so as to further realize the rapid product display of the first screen page content.

[0064] After starting to execute the static resource template file, the static resource template file can obtain the relevant data passed by the source page from the current page rendering engine, and obtain the static resource data related to the first screen page content of the target page. Among them, which data needs to be obtained as static resource data can be determined according to the definition in the static resource template file. For example, in the target page of the commodity information service system, the specific content that needs to be quickly displayed on the first screen may include the title, price, benefit point, store name, etc. of the commodity, and these data can be read from the page rendering engine. Since the page rendering engine runs locally on the terminal device, the relevant data passed from the source page to the page rendering engine will also be saved locally on the terminal device. Therefore, the speed at which the static resource template file obtains specific static resource data from the page rendering engine will be very fast and will not be affected by network delays.

[0065] S203: Constructing the home screen page content to be displayed according to the acquired static resource data and the home screen layout information in the static resource template.

[0066] After obtaining the static resource data of the target page, since the first screen layout information is also defined in the static resource template, the first screen page content can be constructed based on the above static resource data and layout information. For example, assuming that the target page displays multiple information cards in the form of a single-column stream, where the first screen range is usually mainly used to display the information cards corresponding to the products clicked in the source page, in the embodiment of the present application, the information card of the product can be constructed through the obtained static resource data for fast on-screen display. Of course, in the actual target page, relevant prompt content about the previous or next information card may also be provided within the first screen range. Regarding this part of the content, if the relevant static resource data can be obtained from the page rendering engine, it can also be directly constructed in the static first screen page content, otherwise it does not need to appear in the first screen page content.

[0067] S204: Using page layout timing control technology, the constructed first screen page content is displayed.

[0068] After the first screen page content of the target page is constructed using the static resource data, the constructed first screen page content can be displayed on the screen using the page layout timing control technology.

[0069] Among them, in the cross-platform dynamic page rendering engine, the page layout timing control technology is a technology used to control the timing of submitting content to the layout thread. At the beginning of the design, this technology is mainly used to solve the submission timing problem of information cards in pages such as product lists to the layout thread, so as to realize the submission in units of information cards. It should be noted here that in the cross-platform dynamic page rendering engine, the layout calculation is usually performed in an independent thread to ensure the efficiency and responsiveness of the layout calculation. This thread can be called a "layout thread". This thread management method helps to avoid the impact of layout calculation on the main thread and improve the fluency of the application. Among them, before the emergence of the page layout timing control technology, it is usually necessary to submit multiple information cards in the page to the layout thread for on-screen display only after all the information cards in the page are built. However, since the content required in the information card usually needs to be read from the remote database of the specific business party, the construction completion time of different information cards may be different. This means that even if some information cards have been built, they need to wait until other information cards are built before they can be displayed on the screen, which obviously prolongs the product display time of the page. By utilizing the above-mentioned page layout timing control technology, each time an information card is constructed, the content of the information card can be submitted to the layout thread using the above-mentioned page layout timing control technology to display the content of the information card on the screen without waiting for the construction of other information cards to be completed.

[0070] In an embodiment of the present application, the ability to control the timing of submitting tasks to the layout thread provided by the page layout timing control technology can be utilized. After the first screen page content is constructed using static resource data, the page layout timing control technology can be directly utilized to submit the first screen page content to the layout thread, so that the layout thread can display it on the screen based on this part of the first screen page content, and then the user can browse this part of the first screen page content in a shorter time. Of course, if there is no independent layout thread in a rendering engine, and the page layout calculation is completed directly through the main thread, then the first screen page content constructed above can be submitted to the main thread for on-screen display, which is not limited here.

[0071] It should be noted that in the embodiment of the present application, the static resource data obtained locally can be used to construct the content of the first screen page, and the page layout timing control technology can be used to realize the rapid display on the screen. The process will be faster, but in theory, the process of constructing the content of the first screen page using static resource data also takes a certain amount of time. Therefore, before completing the static construction of the first screen page content, the skeleton diagram of the target page can also be displayed according to the layout information of the target page included in the static resource template file, that is, first show the user the approximate style of the page. In the skeleton diagram, pictures, texts, and icons will be displayed through gray rectangular blocks or circular blocks, etc. Before showing specific pictures, texts, etc., users can perceive the basic style and page layout of the page to be loaded through this skeleton diagram, avoiding waiting for the page to load in the state of a pure white screen. Of course, in the embodiment of the present application, since the first screen page content is constructed by static resource data and quickly displayed on the screen, in actual application, the user may not obviously perceive the process of displaying the skeleton diagram.

[0072] In the process of starting to run the static resource template file, the main Bundle file of the target page will also be started to load and render the dynamic resource data related to the target page. This includes CSS parsing, package structure parsing, and requesting specific data from the business party's remote database in the traditional rendering method. After the dynamic resource data is loaded and rendered, the dynamic resource data can be used to regenerate the page content, and overwrite the first screen page content built based on the static resource data to ensure that the final state of the page is consistent with expectations.

[0073] It should be noted that, in the process of using static resource data to construct the first screen page content, the page DOM tree will be rewritten, that is, some DOM elements will be inserted into the DOM tree of the target page by the static resource template file. After the above dynamic resource data is loaded and rendered, the document object model DOM elements injected in the process of constructing the first screen page content by the static resource template file can also be removed to avoid unnecessary occupation of the terminal's memory resources.

[0074] The above is a detailed introduction to the solution provided by the embodiment of the present application. The solution can inject a static rendering template code file into the resource file package of the target page, and combined with the page layout timing control technology, it can realize the rapid optimization of the first screen page content. Specifically, the static resource template can be used to define the first screen layout information of the target page and the target field that needs to be quickly displayed on the first screen. After receiving a request to jump from the source page to the target page for display, the client side can obtain the target resource file package of the target page. By running the static resource template file therein, the static resource data corresponding to the target field can be obtained from the static resource data passed from the source page to the page rendering engine during the page jump process, and the first screen page content to be displayed can be constructed according to the obtained static resource data and the first screen layout information in the static resource template. Afterwards, the constructed first screen page content can be displayed on the screen using the page layout timing control technology. Through this solution, since local static resource data can be used to construct the first screen page content, there is no need to wait for data to be pulled from the remote database. After the first screen page content is constructed, the page layout timing control technology can be used to directly display it on the screen without waiting for the construction of other page contents. Therefore, the speed of displaying the first screen page content on the screen can be improved. Especially for users of low-performance terminal devices, loading delays and freezes can be reduced, improving user experience.

[0075] In an optional implementation, the injection of static rendering template code files is achieved by providing a plug-in program for the resource file packaging program. This implementation method does not require large-scale transformation of the existing front-end project and has the advantages of low transformation cost and simple maintenance during implementation.

[0076] In addition, while displaying static homepage content, you can also continue to load and render dynamic content, which can better support real-time interaction needs.

[0077] Furthermore, the solution provided by the embodiment of the present application can be applied to a variety of mobile application scenarios or projects, wherein the content presented by the specific target page is different in different scenarios or projects, but the solution provided by the embodiment of the present application can be used to realize the rapid product display of the first screen page content. Of course, since the acquisition of static resource data depends on the data transmission from the source page to the rendering engine, such a target page can usually be a secondary page or a tertiary page in a specific application.

[0078] For example, in a certain project of a product information service system, a page (which may be called a second page) may be provided between a product list page (wherein a plurality of information cards (which may be referred to as first information cards) may be displayed in the form of a double-column stream or a multi-column stream, for example, a product recommendation page (including a client homepage providing a recommended feeds stream, etc.), a product search result page, etc., which may be collectively referred to as a first page) and a product detail page, and some information cards (which may be referred to as second information cards) may also be provided in the second page, but the area of ​​such second information cards is larger than that of the first information cards in the first page, and a larger area of ​​pictures may be displayed, richer product information may be carried, etc., and such second information cards may generally exist in the form of a single-column stream, and a single second information card may generally occupy the entire screen, and may be switched to other second information cards for display by sliding up and down by the user. Among them, if the first information card corresponding to a product in the first page is clicked, it may jump to the above-mentioned second page, and the first screen content of the second page is the second information card corresponding to the product clicked in the first page.

[0079] In other words, on the product list page, some "small cards" of the products are displayed (of course, these "small cards" can also be video cards, live broadcast cards, etc.). After clicking on the small card corresponding to a product, you can jump to the above-mentioned second page display. The page will first display the "big card" corresponding to the product. Users can slide up and down on the second page, and the second page can display the "big cards" of other products, videos, live broadcast rooms, etc.

[0080] In the above project, since the "small card" and "big card" of the same product may overlap in some information, for example, the "small card" of a product will display data on fields such as product title, price, picture, benefit point, store name, etc., and after clicking the "small card" of the product to jump to the second page, the first "big card" that needs to be displayed on the second page is the "big card" of the product, and the "big card" usually also needs to display data on fields such as product title, price, picture, benefit point, store name, etc. These data can actually be passed from the first page to the page rendering engine during the page jump process.

[0081] Based on the above characteristics, the second page in the above project can be the target page in the embodiment of the present application. In order to realize the rapid display of the first screen page content in the second page, a static resource template file can be generated for the target page in advance and inserted into the Bundle file package of the target page. The first page such as the above-mentioned product list page can be used as a source page. When the user clicks on the first information card of a certain product in the first page, the first page can pass the data related to the product (including the product title, price, picture, interest point, store name, etc. that have been displayed in the first page) to the page rendering engine. At the same time, the end side can obtain the Bundle file package of the second page from the server side, and obtain the static resource template file from it. The static resource template file can obtain the data on the fields such as the product title, price, picture, interest point, store name, etc. passed from the first page from the page rendering engine. Since these data are not directly from the cloud server, they can be obtained as a static resource data. Afterwards, the static resource template file can use this static resource data to construct the first screen page content of the second page, which includes the second information card of the aforementioned target product. Then, the page layout timing control technology is used to submit the constructed first screen page content to the layout thread or the main thread for displaying the constructed first screen page content on the screen.

[0082] Embodiment 2

[0083] The second embodiment provides a method for generating a resource file package from the perspective of a plug-in program, and the method is applied to a plug-in program of a resource file packaging program, see Figure 3 , the method may include:

[0084] S301: monitoring the event that the resource file packaging program generates a resource file package for the target page;

[0085] S302: If the event is monitored, the static resource template file corresponding to the target page is inserted into the target resource file package of the target page, and the static resource template is used to define the first screen layout information and target fields of the target page, so that after the client side jumps from the source page to the target page for display and obtains the target resource file package of the target page, it runs the static resource template file to obtain the static resource data corresponding to the target field from the static resource data passed by the source page to the page rendering engine during the page jump process, constructs the first screen page content according to the obtained static resource data and the first screen layout information, and uses the page layout timing control technology to display the constructed first screen page content.

[0086] In specific implementation, the static resource template file corresponding to the target page may be inserted before the main resource file of the target page, so that the static resource template file is started and run preferentially before the main resource file is started and run.

[0087] For the undescribed parts in the second embodiment, please refer to the description of the first embodiment and other parts of this specification, which will not be repeated here.

[0088] It should be noted that the embodiments of the present application may involve the use of user data. In actual applications, user-specific personal data can be used in the scheme described herein within the scope permitted by applicable laws and regulations, subject to the requirements of applicable laws and regulations of the country where the user is located (for example, with the user's explicit consent, effective notification to the user, etc.).

[0089] Corresponding to the above-mentioned embodiment 1, the embodiment of the present application further provides a page display device, which may include:

[0090] A target resource file package acquisition unit is used to acquire a target resource file package of the target page after receiving a request to jump from a source page to a target page; wherein the target resource file package includes a static resource template file and a main resource file of the target page; the static resource template is used to define the first screen layout information and target fields of the target page;

[0091] A static resource data acquisition unit, configured to acquire static resource data corresponding to the target field from static resource data transmitted from the source page to the page rendering engine during the page jump process by running the static resource template file in the target resource file package;

[0092] A home page content construction unit, used to construct home page content to be displayed according to the acquired static resource data and the home page layout information in the static resource template;

[0093] The first screen display unit is used to display the constructed first screen page content by using page layout timing control technology.

[0094] Among them, in the target resource file package, the static resource template file is located before the main resource file, so that the static resource template file is started and run preferentially before the main resource file is started and run.

[0095] Specifically, in the process of the resource file packaging program generating the resource file package for the target page, the plug-in program of the resource file packaging program inserts the static resource template file into the target resource file package.

[0096] In addition, the device may also include:

[0097] A dynamic resource data loading unit, used to run the main resource file to load and render dynamic resource data related to the target page during the process of running the static resource template file;

[0098] The overlay display unit is used to regenerate the page content using the dynamic resource data after the dynamic resource data is loaded and rendered, and overlay the home page content constructed based on the static resource data.

[0099] Furthermore, the device may further include:

[0100] The DOM element removal unit is used to remove the document object model DOM element injected into the static resource template file during the construction of the first screen page content after the dynamic resource data is loaded and rendered.

[0101] Wherein, the static resource template file can be implemented using native JavaScript.

[0102] Specifically, the source page includes a first page in a product information service system, the first page includes a plurality of first information cards arranged in a double-column flow or a multi-column flow, the first information card includes an information card for displaying graphic information of the corresponding product;

[0103] The target page includes a second page to which a first information card corresponding to a target product in the first page is jumped after being clicked, the second page includes a plurality of second information cards arranged in a single-column flow, wherein, in an initial state of jumping to the second page, the first screen range of the second page is used to display the second information card corresponding to the target product;

[0104] Among them, in the process of jumping from the first page to the second page, the first page passes the relevant data of the target product to the page rendering engine, and the static resource template file in the target resource file package of the second page obtains the relevant data of the target product through the page rendering engine, and is used as static resource data for constructing the first screen page content of the second page.

[0105] Corresponding to the second embodiment, the embodiment of the present application further provides a device for generating a resource file package, which can be applied to a plug-in program of a resource file packaging program, and specifically may include:

[0106] A monitoring unit, used for monitoring the event that the resource file packaging program generates a resource file package for the target page;

[0107] A static resource template file insertion unit is used to insert the static resource template file corresponding to the target page into the target resource file package of the target page if the event is monitored. The static resource template is used to define the first screen layout information and target field of the target page, so that after the client side jumps from the source page to the target page for display and obtains the target resource file package of the target page, it can obtain the static resource data corresponding to the target field from the static resource data passed from the source page to the page rendering engine during the page jump process by running the static resource template file, construct the first screen page content according to the obtained static resource data and the first screen layout information, and use the page layout timing control technology to display the constructed first screen page content.

[0108] The static resource template file insertion unit can be specifically used for:

[0109] The static resource template file corresponding to the target page is inserted before the main resource file of the target page, so that the static resource template file is started and run preferentially before the main resource file is started and run.

[0110] In addition, an embodiment of the present application further provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of any one of the methods in the aforementioned method embodiments are implemented.

[0111] And an electronic device, comprising:

[0112] one or more processors; and

[0113] A memory associated with the one or more processors, the memory being used to store program instructions, wherein the program instructions, when read and executed by the one or more processors, execute the steps of the method described in any one of the aforementioned method embodiments.

[0114] A computer program product includes a computer program / computer executable instructions, which, when executed by a processor in an electronic device, implement the steps of the method described in the aforementioned method embodiment.

[0115] in, Figure 4 The architecture of the electronic device is shown as an example, which may include a processor 410, a video display adapter 411, a disk drive 412, an input / output interface 413, a network interface 414, and a memory 420. The processor 410, the video display adapter 411, the disk drive 412, the input / output interface 413, the network interface 414, and the memory 420 may be communicatively connected via a communication bus 430.

[0116] Among them, the processor 410 can be implemented by a general-purpose CPU (Central Processing Unit, processor), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, etc., to execute relevant programs to implement the technical solution provided in this application.

[0117] The memory 420 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 420 can store an operating system 421 for controlling the operation of the electronic device 400, and a basic input and output system (BIOS) for controlling the low-level operation of the electronic device 400. In addition, a web browser 423, a data storage management system 424, and a page display processing system 425, etc. can also be stored. The above-mentioned page display processing system 425 can be an application program that specifically implements the operations of the aforementioned steps in the embodiment of the present application. In short, when the technical solution provided by the present application is implemented by software or firmware, the relevant program code is stored in the memory 420 and is called and executed by the processor 410.

[0118] The input / output interface 413 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0119] The network interface 414 is used to connect to a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WIFI, Bluetooth, etc.).

[0120] The bus 430 comprises a pathway for transmitting information between the various components of the device (eg, the processor 410, the video display adapter 411, the disk drive 412, the input / output interface 413, the network interface 414, and the memory 420).

[0121] It should be noted that, although the above device only shows a processor 410, a video display adapter 411, a disk drive 412, an input / output interface 413, a network interface 414, a memory 420, a bus 430, etc., in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include components necessary for implementing the solution of the present application, and does not necessarily include all the components shown in the figure.

[0122] It can be known from the description of the above implementation methods that those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the present application can be essentially or partly contributed to the prior art in the form of a software product, which can be stored in a storage medium such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in the various embodiments of the present application or certain parts of the embodiments.

[0123] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can refer to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system or system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can refer to the partial description of the method embodiment. The system and system embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without creative work.

[0124] The above is a detailed introduction to the page display, resource file package generation method and electronic device provided by the present application. This article uses specific examples to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method and core ideas of the present application. At the same time, for those skilled in the art, according to the ideas of the present application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as limiting the present application.

Claims

1. A page display method, characterized in that: include: After receiving a request to jump from a source page to a target page, a target resource file package of the target page is obtained; wherein the target resource file package includes a static resource template file and a main resource file of the target page; the static resource template is used to define the first screen layout information and target fields of the target page; By running the static resource template file in the target resource file package, the static resource data corresponding to the target field is obtained from the static resource data transmitted from the source page to the page rendering engine during the page jump process; Constructing the home screen page content to be displayed according to the acquired static resource data and the home screen layout information in the static resource template; The page layout timing control technology is used to display the constructed first screen page content.

2. The method according to claim 1, characterized in that: In the target resource file package, the static resource template file is located before the main resource file, so that the static resource template file is started and run preferentially before the main resource file is started and run.

3. The method according to claim 1, characterized in that In the process of the resource file packaging program generating the resource file package for the target page, the plug-in program of the resource file packaging program inserts the static resource template file into the target resource file package.

4. The method according to claim 1, characterized in that: Also includes: In the process of running the static resource template file, running the main resource file to load and render the dynamic resource data related to the target page; After the dynamic resource data is loaded and rendered, the page content is regenerated using the dynamic resource data, and the first screen page content constructed based on the static resource data is overwritten and displayed.

5. The method according to claim 4, characterized in that Also includes: After the dynamic resource data is loaded and rendered, the document object model DOM element injected during the process of constructing the first screen page content with the static resource template file is removed.

6. The method according to claim 1, characterized in that The static resource template file is implemented using native JavaScript.

7. The method according to claim 1, characterized in that The source page includes a first page in the product information service system, the first page includes a plurality of first information cards arranged in a double-column flow or a multi-column flow, the first information card includes an information card for displaying graphic information of the corresponding product; The target page includes a second page to which a first information card corresponding to a target product in the first page is jumped after being clicked, the second page includes a plurality of second information cards arranged in a single-column flow, wherein, in an initial state of jumping to the second page, the first screen range of the second page is used to display the second information card corresponding to the target product; Among them, in the process of jumping from the first page to the second page, the first page passes the relevant data of the target product to the page rendering engine, and the static resource template file in the target resource file package of the second page obtains the relevant data of the target product through the page rendering engine, and is used as static resource data for constructing the first screen page content of the second page.

8. A method for generating a resource file package, characterized in that: The method is applied to a plug-in program of a resource file packaging program, and includes: Listen to the event that the resource file packaging program generates a resource file package for the target page; If the event is monitored, the static resource template file corresponding to the target page is inserted into the target resource file package of the target page, and the static resource template is used to define the first screen layout information and target fields of the target page, so that after the client side jumps from the source page to the target page for display and obtains the target resource file package of the target page, by running the static resource template file, the static resource data corresponding to the target field is obtained from the static resource data passed by the source page to the page rendering engine during the page jump process, the first screen page content is constructed according to the obtained static resource data and the first screen layout information, and the constructed first screen page content is displayed using the page layout timing control technology.

9. The method according to claim 8, characterized in that The step of inserting the static resource template file corresponding to the target page into the target resource file package of the target page includes: The static resource template file corresponding to the target page is inserted before the main resource file of the target page, so that the static resource template file is started and run preferentially before the main resource file is started and run.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method described in any one of claims 1 to 9 are implemented.

11. An electronic device, characterized in that: include: one or more processors; as well as A memory associated with the one or more processors, the memory being used to store program instructions, wherein the program instructions, when read and executed by the one or more processors, execute the steps of the method described in any one of claims 1 to 9.

12. A computer program product comprising a computer program / computer executable instructions, characterized in that: When the computer program / computer executable instructions are executed by a processor in an electronic device, the steps of the method according to any one of claims 1 to 9 are implemented.

Images