Page display method, device, equipment, storage medium and program product

By parsing the skeleton screen protocol data in the loading address information, the display data of the skeleton screen page is directly obtained, which solves the problem of low display efficiency of the skeleton screen page and achieves fast display and better page effect.

CN116861110BActive Publication Date: 2025-09-16TENCENT TECHNOLOGY (SHENZHEN) CO LTD

Patent Information

Application Number
CN202210317247.0
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-03-28
Publication Date
2025-09-16
Estimated Expiration
2042-03-28

AI Technical Summary

Technical Problem

In the prior art, the display efficiency of the skeleton screen page is low, mainly due to the delay in obtaining the skeleton screen code, which leads to low display efficiency and poor effect of the landing page.

Method used

By parsing the skeleton screen protocol data in the loading address information, the display data of the skeleton screen page is directly obtained, avoiding the delay of obtaining the skeleton screen code from the back end and realizing the fast display of the skeleton screen page.

Benefits of technology

It improves the display efficiency of the skeleton screen page, reduces the white screen time, and improves the display effect of the landing page.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN116861110B_ABST
    Figure CN116861110B_ABST
Patent Text Reader

Abstract

The present application provides a page display method, apparatus, device, storage medium and program product, which are applied to various page display scenarios such as instant messaging applications, websites and applets; the page display method includes: in response to a page loading operation, obtaining loading address information, wherein the loading address information is used to load a landing page; parsing the landing page loading address and skeleton screen protocol data from the loading address information, wherein the landing page loading address is used to load the landing page rendering data, the landing page rendering data is used to display the landing page, and the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page; when the landing page rendering data is loaded based on the landing page loading address, the skeleton screen page is displayed by parsing the skeleton screen protocol data. Through the present application, the display efficiency of the skeleton screen page can be improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to information processing technology in the field of computer applications, and in particular to a page display method, apparatus, device, storage medium and program product. Background Art

[0002] In the process of displaying the landing page, a white screen often appears due to the low display efficiency of the landing page; therefore, in order to improve the display effect of the landing page, a skeleton screen page with less rendering data than the landing page is usually displayed first.

[0003] Generally speaking, to display a skeleton screen page, the skeleton screen code is usually generated by analyzing the landing page, and then the skeleton screen page is displayed using the skeleton screen code. However, in the process of displaying the skeleton screen page, the skeleton screen code needs to be obtained from the backend. Therefore, there is a delay in obtaining the skeleton screen code, resulting in low display efficiency of the skeleton screen page. Summary of the Invention

[0004] The embodiments of the present application provide a page display method, apparatus, device, computer-readable storage medium, and computer program product, which can improve the display efficiency of skeleton screen pages.

[0005] The technical solution of the embodiment of the present application is implemented as follows:

[0006] The present invention provides a method for displaying a page, including:

[0007] In response to a page loading operation, obtaining loading address information, wherein the loading address information is used to load a landing page;

[0008] Parsing the landing page loading address and skeleton screen protocol data from the loading address information, wherein the landing page loading address is used to load the landing page rendering data, the landing page rendering data is used to display the landing page, and the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page;

[0009] When the landing page rendering data is loaded based on the landing page loading address, the skeleton screen page is displayed by parsing the skeleton screen protocol data.

[0010] An embodiment of the present application provides a page display device, comprising:

[0011] An operation response module, configured to obtain loading address information in response to a page loading operation, wherein the loading address information is used to load a landing page;

[0012] An information parsing module is used to parse the landing page loading address and skeleton screen protocol data from the loading address information, wherein the landing page loading address is used to load the landing page rendering data, the landing page rendering data is used to display the landing page, and the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page;

[0013] The page display module is used to display the skeleton screen page by parsing the skeleton screen protocol data when the landing page rendering data is loaded based on the landing page loading address.

[0014] In an embodiment of the present application, the page display device also includes an information combination module, which is used to display the landing page generation component in the landing page generation page; obtain the selected component in response to the selection operation of the landing page generation component; generate the landing page based on the selected component, and regionalize the selected component to obtain component area information; determine the skeleton screen protocol data based on the component area information; combine the skeleton screen protocol data and the landing page loading address corresponding to the landing page to obtain the loading address information.

[0015] In an embodiment of the present application, the information combination module is further used to determine the target component category corresponding to each target component in the selected components based on a first specified relationship between the component and the component category, wherein the component category includes at least one of a media component, a text component, a button component, and a form component; based on a second specified relationship between the category and the skeleton screen style, determine the target skeleton screen style corresponding to the target component category, wherein the skeleton screen style includes at least one area graphic; based on a third specified relationship between the skeleton screen style and the skeleton screen protocol, determine the target skeleton screen protocol corresponding to the target skeleton screen style, and obtain at least one target skeleton screen protocol corresponding to the selected component, wherein the skeleton screen protocol includes at least one of component category, height, style, margin, and row information; and combine at least one target skeleton screen protocol into the component area information.

[0016] In an embodiment of the present application, the page display device also includes a relationship determination module for classifying the landing page generation components to obtain the first specified relationship; determining the skeleton screen style corresponding to each component category in the first specified relationship, and combining the skeleton screen styles corresponding to each component category to obtain the second specified relationship; determining the skeleton screen protocol corresponding to the skeleton screen style, and combining the skeleton screen protocols corresponding to each skeleton screen style to obtain the third specified relationship.

[0017] In an embodiment of the present application, the information combination module is also used to compress the component area information to obtain component compressed area information; based on the comparison result of the length of the component compressed area information and the length of the component area information, the information with the shortest length between the component compressed area information and the component area information is determined as the skeleton screen protocol data.

[0018] In an embodiment of the present application, the page display module is further configured to parse the skeleton screen protocol data to obtain each target skeleton screen protocol; and display the skeleton screen page by rendering each target skeleton screen protocol.

[0019] In an embodiment of the present application, the information parsing module is further configured to detect whether the loading address information includes compression indication information.

[0020] In an embodiment of the present application, the page display module is further configured to decompress the skeleton screen protocol data to obtain the component area information when the loading address information includes the compression indication information; and parse the component area information to obtain each target skeleton screen protocol.

[0021] In an embodiment of the present application, the loading address information includes at least one of web page loading address information and mini program loading address information, wherein the web page loading address information is used to display the landing page by loading a web page, and the mini program loading address information is used to display the landing page by loading a mini program.

[0022] In the embodiment of the present application, when the loading address information includes web page loading address information, the skeleton screen protocol data refers to the uniform resource locator parameter in the loading address information.

[0023] In an embodiment of the present application, when the loading address information includes mini-program loading address information, the skeleton screen protocol data refers to the mini-program startup parameters in the loading address information.

[0024] An embodiment of the present application provides a page display device, including:

[0025] a memory for storing executable instructions;

[0026] The processor is used to implement the page display method provided in the embodiment of the present application when executing the executable instructions stored in the memory.

[0027] An embodiment of the present application provides a computer-readable storage medium storing executable instructions, which are used to implement the page display method provided in the embodiment of the present application when executed by a processor.

[0028] An embodiment of the present application provides a computer program product, including a computer program or instructions. When the computer program or instructions are executed by a processor, the page display method provided in the embodiment of the present application is implemented.

[0029] The embodiments of the present application have at least the following beneficial effects: by combining the skeleton screen protocol data with the landing page loading address as the loading address information corresponding to the landing page, the skeleton screen protocol data is obtained as a parameter of the loading address information; after obtaining the loading address information, the skeleton screen protocol data can be obtained by parsing the loading address information, which can improve the efficiency of obtaining the skeleton screen protocol data; and then the skeleton screen page can be quickly displayed by parsing the skeleton screen protocol data; therefore, the display efficiency of the skeleton screen page can be improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] Figure 1 This is a schematic diagram of an exemplary display skeleton screen page;

[0031] Figure 2 is another exemplary schematic diagram of displaying a skeleton screen page;

[0032] Figure 3a This is a schematic diagram of the architecture of the page display system provided in an embodiment of the present application;

[0033] Figure 3b This is a schematic diagram of an exemplary page display scenario provided in an embodiment of the present application;

[0034] Figure 4 This embodiment of the present application provides Figure 3a Schematic diagram of the composition structure of the terminal in;

[0035] Figure 5 This is a schematic diagram of the page display method provided in the embodiment of the present application. Figure 1 ;

[0036] Figure 6 This is a schematic diagram of the page display method provided in the embodiment of the present application. Figure 2 ;

[0037] Figure 7 is a schematic diagram of an exemplary display skeleton screen page provided in an embodiment of the present application;

[0038] Figure 8 This is a flowchart of an exemplary display skeleton screen page provided by an embodiment of the present application;

[0039] Figure 9 is a schematic diagram of an exemplary landing page editor provided in an embodiment of the present application;

[0040] Figure 10This is a comparison diagram of compression results of an exemplary skeleton screen page protocol provided in an embodiment of the present application;

[0041] Figure 11 This is a comparison diagram of compression results of an exemplary skeleton screen page protocol provided in an embodiment of the present application;

[0042] Figure 12 This is a schematic diagram of an exemplary result of a decompressed and compressed skeleton screen page protocol provided in an embodiment of the present application;

[0043] Figure 13 This is a schematic diagram comparing an exemplary skeleton screen page and a landing page provided in an embodiment of the present application. DETAILED DESCRIPTION

[0044] In order to make the purpose, technical solutions and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limiting this application. All other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0045] In the following description, reference is made to “some embodiments”, which describes a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0046] In the following description, the terms "first\second\third" involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first\second\third" can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.

[0047] Unless otherwise defined, all technical and scientific terms used in the embodiments of this application have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used in the embodiments of this application are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0048] Before further describing the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following interpretations.

[0049] 1) Mobile pages refer to web pages developed using Hypertext Markup Language technology that are compatible with mobile device size ratios and related resolutions; for example, Hypertext Markup Language 5 (HTML5, abbreviated as H5) pages. In the embodiments of this application, landing pages and skeleton screen pages can be mobile pages.

[0050] 2) Low-code platforms refer to low-code platforms; compared to not using low-code platforms, using low-code platforms can achieve business goals with less or no coding. Front-end low-code platforms are generally used to generate pages, reducing the workload of front-end development. In the embodiment of this application, landing pages can be generated through low-code platforms.

[0051] 3) Landing Page Editor: This is a low-code platform for generating landing pages. For example, by dragging and dropping business components, you can generate landing pages that meet your expectations, improving the efficiency of generating landing pages. In this embodiment of the application, you can generate landing pages through the landing page editor.

[0052] 4) Landing page: A web page that is independent of the current application theme. It can be a mobile page or a non-mobile page; it can be multimedia promotion information, such as an advertising page, an event page, etc.

[0053] 5) Skeleton screen page, which shows the approximate structure of the landing page before the landing page is displayed; generally speaking, the skeleton screen page and the landing page are similar (the difference is below the threshold) or consistent in page structure.

[0054] 6) Compression is a mechanism for reducing the size of computer files using a specific algorithm; for example, the "zlib" compression algorithm is a lossless data compression library that can achieve cross-platform compression. In the present embodiment, the skeleton screen protocol data corresponding to the skeleton screen page can be compressed. The mechanism for recovering the computer file corresponding to compression is called decompression.

[0055] 7) Asynchronous Javascript And XML (AJAX) technology is used to perform asynchronous data transmission between the front end (e.g., browser) and the server.

[0056] Generally speaking, in order to display the skeleton screen page, the skeleton screen code is usually generated by analyzing the landing page, and then the skeleton screen page is displayed using the skeleton screen code. For example, see Figure 1 , Figure 1 is a schematic diagram of an exemplary display skeleton screen page; Figure 1 As shown, in response to the operation of the developer 1-1 on the skeleton screen tool 1-2 (for example, the skeleton screen page generation module in the applet development module), the landing page is analyzed to obtain the skeleton screen page 1-3 (for example, the landing page A is analyzed to generate the skeleton screen page A, the landing page B is analyzed to generate the skeleton screen page B, and the landing page C is analyzed to generate the skeleton screen page C), and then the skeleton screen page 1-3 is introduced into the business project for launch and use. Among them, different landing pages correspond to different skeleton screen pages, which is a process of statically displaying the skeleton screen page and has low flexibility; and the skeleton screen page is manually generated and has low intelligence; in addition, in the process of displaying the skeleton screen page, it is necessary to obtain the skeleton screen code from the back end. Therefore, there is a delay in obtaining the skeleton screen code, and the display efficiency of the skeleton screen page is low.

[0057] In addition, in order to display the skeleton screen page, the skeleton screen page can also be displayed by using the skeleton screen data pre-set based on the landing page. Figure 2 , Figure 2 is another exemplary schematic diagram showing a skeleton screen page; Figure 2 As shown, in response to the operation of the developer 2-1 on the landing page editor 2-2, the landing page 2-3 is generated, and the skeleton screen data 2-4 corresponding to the landing page 2-3 is generated; when the landing page 2-3 is obtained from the back end in response to the operation of the user 2-5, the skeleton screen data 2-4 is obtained from the back end through AJAX request and the skeleton screen data 2-4 is parsed to display the skeleton screen page; however, in the above-mentioned process of displaying the skeleton screen page, since the skeleton screen data 2-4 is obtained from the back end through AJAX technology, although the dynamic rendering of the skeleton screen page is realized, it is time-consuming to request the back end through AJAX. Therefore, the efficiency of obtaining the skeleton screen data is low, and thus the display efficiency of the skeleton screen page is low; and, due to the low efficiency of obtaining the skeleton screen data, a white screen is still displayed during the process of obtaining the skeleton screen data, resulting in poor display effect of the landing page.

[0058] Based on this, the embodiments of the present application provide a page display method, apparatus, device, computer-readable storage medium, and computer program product, which can improve the page display effect and the display efficiency of the skeleton screen page. The following describes an exemplary application of the page display device provided by the embodiment of the present application. The page display device provided by the embodiment of the present application can be implemented as various types of terminals such as smart phones, smart watches, laptops, tablet computers, desktop computers, smart home appliances, set-top boxes, smart car devices, portable music players, personal digital assistants, dedicated messaging devices, intelligent voice interaction devices, portable gaming devices, and smart speakers, and can also be implemented as a server. Below, an exemplary application of the page display device when it is implemented as a terminal will be described.

[0059] See also Figure 3a , Figure 3a Schematic diagram of the architecture of the page display system provided in the embodiment of the present application; Figure 3a As shown, to support a page display application, in the page display system 100, the terminal 400 (terminal 400-1 and terminal 400-2 are shown as examples, referred to as page display devices) is connected to the server 200 via the network 300. The network 300 can be a wide area network or a local area network, or a combination of the two. In addition, the page display system 100 also includes a database 500 for providing data support to the server 200; and Figure 3a , which shows a case where the database 500 is independent of the server 200. In addition, the database 500 may also be integrated into the server 200, which is not limited in the embodiment of the present application.

[0060] Terminal 400 is used to obtain loading address information in response to a page loading operation, wherein the loading address information is used to load a landing page; parse the landing page loading address and skeleton screen protocol data from the loading address information, wherein the landing page loading address is used to load the landing page rendering data, the landing page rendering data is used to display the landing page, and the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page; when the landing page rendering data is loaded from the server 200 through the network 300 based on the landing page loading address, the skeleton screen page (such as the page displayed in terminal 400-1 and terminal 400-2) is displayed by parsing the skeleton screen protocol data.

[0061] For example, see Figure 3b , Figure 3b is a schematic diagram of an exemplary page display scenario provided in an embodiment of the present application; Figure 3b As shown, Figure 3a The terminal 400 displays the instant messaging application interface 3-1, wherein the instant messaging application interface 3-1 displays a mini-program message 3-11, and the mini-program message 3-11 is used to load the game landing page (called the landing page); when the user clicks the mini-program message 3-11, the terminal 400 receives the page loading operation; at this time, the terminal 400 obtains the mini-program startup information of the game landing page in response to the page loading operation, and parses the mini-program startup information to render the skeleton screen page 3-2 corresponding to the game landing page in the process of loading the rendering data of the game landing page; and when the loading of the rendering data of the game landing page is completed, the skeleton screen page 3-2 is hidden and the game landing page 3-3 is rendered based on the loaded rendering data.

[0062] In some embodiments, the server 200 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content distribution networks (CDNs), and basic cloud computing services such as big data and artificial intelligence platforms. The terminal 400 can be a smart phone, a smart watch, a laptop, a tablet computer, a desktop computer, a smart TV, a set-top box, a smart car device, a portable music player, a personal digital assistant, a dedicated messaging device, a portable gaming device, and a smart speaker, etc., but is not limited thereto. The terminal and the server can be directly or indirectly connected via wired or wireless communication, which is not limited in the embodiments of the present application.

[0063] See also Figure 4 , Figure 4 This embodiment of the present application provides Figure 3a The schematic diagram of the terminal structure in Figure 4 The terminal 400 shown includes: at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430. The various components in the terminal 400 are coupled together via a bus system 440. It is understood that the bus system 440 is used to achieve connection and communication between these components. In addition to including a data bus, the bus system 440 also includes a power bus, a control bus, and a status signal bus. However, for the sake of clarity, the bus system 440 is not shown in FIG. Figure 4 Various buses are labeled as bus system 440 .

[0064] The processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0065] The user interface 430 includes one or more output devices 431 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0066] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state memory, hard drives, optical drives, etc. The memory 450 may optionally include one or more storage devices that are physically remote from the processor 410.

[0067] The memory 450 includes volatile memory or non-volatile memory, or may include both volatile and non-volatile memory. The non-volatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 450 described in the embodiments of the present application is intended to include any suitable type of memory.

[0068] In some embodiments, the memory 450 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplified below.

[0069] Operating system 451, including system programs for processing various basic system services and performing hardware-related tasks, such as the framework layer, core library layer, and driver layer, which are used to implement various basic services and process hardware-based tasks;

[0070] A network communication module 452 for reaching other computer devices via one or more (wired or wireless) network interfaces 420 , exemplary network interfaces 420 including Bluetooth, Wi-Fi, and Universal Serial Bus (USB);

[0071] a presentation module 453 for enabling presentation of information via one or more output devices 431 (e.g., a display screen, a speaker, etc.) associated with the user interface 430 (e.g., a user interface for operating peripheral devices and displaying content and information);

[0072] The input processing module 454 is configured to detect one or more user inputs or interactions from one of the one or more input devices 432 and to translate the detected inputs or interactions.

[0073] In some embodiments, the page display device provided in the embodiments of the present application can be implemented in a software manner. Figure 4A page display device 455 stored in memory 450 is shown. This device can be software in the form of a program or plug-in, and includes the following software modules: an operation response module 4551, an information parsing module 4552, a page display module 4553, an information combination module 4554, and a relationship determination module 4555. These modules are logical and can be arbitrarily combined or further separated according to the functions they implement. The functions of each module will be described below.

[0074] In some embodiments, the page display device provided in the embodiments of the present application can be implemented in hardware. As an example, the page display device provided in the embodiments of the present application can be a processor in the form of a hardware decoding processor, which is programmed to execute the page display method provided in the embodiments of the present application. For example, the processor in the form of a hardware decoding processor can adopt one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), or other electronic components.

[0075] In some embodiments, the terminal or server can implement the page display method provided in the embodiments of the present application by running a computer program. For example, the computer program can be a native program or software module in the operating system; it can be a native application (APP, Application), that is, a program that needs to be installed in the operating system to run, such as a live broadcast APP or an instant messaging APP; it can also be a small program, that is, a program that can be run only by downloading it into a browser environment; it can also be a small program that can be embedded in any APP. In short, the above-mentioned computer program can be any form of application, module or plug-in.

[0076] Below, the page display method provided by the embodiment of the present application will be described in conjunction with the exemplary application and implementation of the page display device provided by the embodiment of the present application. In addition, the page display method provided by the embodiment of the present application is applied to various scenarios such as cloud technology, artificial intelligence, smart transportation, and vehicle-mounted.

[0077] See also Figure 5 , Figure 5 This is a schematic diagram of the page display method provided in the embodiment of the present application. Figure 1 , will combine Figure 5 The steps shown are explained.

[0078] Step 501: In response to a page loading operation, obtain loading address information.

[0079] In an embodiment of the present application, when the user triggers the loading of the landing page, or when the page display device receives an instruction to load the landing page, the page display device also receives a page loading operation for the landing page; at this time, the page display device responds to the page loading operation and obtains the loading address information to execute the process of displaying the landing page based on the loading address information.

[0080] It should be noted that the loading address information corresponds to the page loading operation, and is used to load the page indicated by the page loading operation; here, the page indicated by the page loading operation is the landing page, so the loading address information is used to load the landing page; in addition, the landing page is the page to be loaded, which can be a web page, a mini program page, a client page, etc., and the embodiment of the present application does not limit this.

[0081] Step 502: parse the loading address of the landing page and the skeleton screen protocol data from the loading address information.

[0082] In an embodiment of the present application, the loading address information includes the address for loading the rendering data of the landing page, which is referred to as the landing page loading address here, so that the page display device can parse the landing page loading address from the loading address information; in addition, the loading address information also includes parameters for displaying the skeleton screen page, which is referred to as the skeleton screen protocol data here, so that the page display device can parse the skeleton screen protocol data from the loading address information by parsing the parameters of the loading address information.

[0083] It should be noted that the landing page loading address is used to load the landing page rendering data; among them, the landing page rendering data is the rendering data of the landing page, which is used to display the landing page; the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page, and the landing page corresponds to the skeleton screen page in structural style, therefore, the skeleton screen page is the framework page of the landing page.

[0084] It should also be noted that the loading address information includes at least one of the web page loading address information and the mini program loading address information; wherein, the web page loading address information is used to display the landing page by loading the web page, that is, the loading address information is used to display the landing page in the web application scenario; the mini program loading address information is used to display the landing page by loading the mini program, that is, the loading address information is used to display the landing page in the mini program application scenario.

[0085] In an embodiment of the present application, the skeleton screen protocol data is the parameter of the loading address information; when the loading address information includes the web page loading address information, the skeleton screen protocol data refers to the uniform resource locator parameter in the loading address information; when the loading address information includes the mini-program loading address information, the skeleton screen protocol data refers to the mini-program startup parameter in the loading address information.

[0086] Step 503: When the landing page rendering data is loaded based on the landing page loading address, the skeleton screen page is displayed by parsing the skeleton screen protocol data.

[0087] In an embodiment of the present application, since the loading process of the landing page rendering data requires a certain loading time, when the page display device loads the landing page rendering data from the back end based on the landing page loading address, the skeleton screen page is displayed first by parsing the skeleton screen protocol data.

[0088] It can be understood that by combining the skeleton screen protocol data with the landing page loading address as the loading address information corresponding to the landing page, the skeleton screen protocol data is obtained as a parameter of the loading address information; after obtaining the loading address information, the skeleton screen protocol data can be obtained by parsing the loading address information, which can improve the efficiency of obtaining the skeleton screen protocol data; and then, the skeleton screen page can be quickly displayed by parsing the skeleton screen protocol data; therefore, the display efficiency of the skeleton screen page can be improved.

[0089] See also Figure 6 , Figure 6 This is a schematic diagram of the page display method provided in the embodiment of the present application. Figure 2 ;like Figure 6 As shown, in the embodiment of the present application, steps 504 to 508 are also included before step 501; that is, before the page display device responds to the page loading operation and obtains the loading address information, the page display method also includes steps 504 to 508, and each step is explained below.

[0090] Step 504: Display the landing page generation component on the landing page generation page.

[0091] In the embodiment of the present application, the landing page can be obtained by writing code, or by using a low-code platform (landing page editor), etc., and the embodiment of the present application does not limit this. When the landing page is obtained through a low-code platform, the low-code platform running on the startup page display device will be displayed, and the landing page generation page will be displayed; in addition, the landing page generation page also displays various components used to generate the landing page, which are referred to as landing page generation components.

[0092] Step 505: In response to the selection operation for the landing page generation component, the selected component is obtained.

[0093] In an embodiment of the present application, a page display device generates a landing page by selecting a component from a landing page generation component. When a component is selected for the landing page generation component to generate the landing page, the page display device receives a selection operation for the landing page generation component. At this time, the page display device determines that a component has been selected in response to the selection operation. The selected component includes at least one component that corresponds to the landing page.

[0094] Step 506: Generate a landing page based on the selected component, and regionalize the selected component to obtain component region information.

[0095] In an embodiment of the present application, after the page display device obtains the selected components, it generates a landing page based on the combination of the selected components; in addition, the page display device is also used to regionalize the selected components to simplify the selected components and obtain component area information that is simpler than the selected components.

[0096] It should be noted that regionalization refers to simplifying the processing of component display content and displaying components through regional information.

[0097] Step 507: Determine skeleton screen protocol data based on component area information.

[0098] It should be noted that the page display device can directly determine the component area information as skeleton screen protocol data; it can also process the component area information (for example, compress it) and then determine the processed component area information as skeleton screen protocol data; etc., and the embodiments of the present application are not limited to this.

[0099] Step 508: Combine the skeleton screen protocol data and the landing page loading address corresponding to the landing page to obtain loading address information.

[0100] In an embodiment of the present application, after obtaining a landing page, the page display device generates a landing page loading address corresponding to the landing page; and combines the obtained skeleton screen protocol data and the landing page loading address, so that in the process of generating the loading address information corresponding to the landing page loading address, the skeleton screen protocol data is used as a parameter of the loading address information; thereby, the loading address information including the skeleton screen protocol data and the landing page loading address is obtained. Thus, the skeleton screen protocol data is obtained by regionalizing the components of the landing page.

[0101] It can be understood that while generating a landing page based on the low-code platform, skeleton screen protocol data is generated based on the selected components, and the skeleton screen protocol data is used as a parameter of the loading address information, and is combined with the landing page loading address corresponding to the landing page to form the loading address information; so that the skeleton screen protocol data is obtained when the loading address information is obtained, thereby improving the efficiency of obtaining the skeleton screen protocol data. In addition, by simplifying the selected components, the skeleton screen protocol data with less information than the selected components is obtained, which provides conditions for using the skeleton screen protocol data as a parameter of the loading address information.

[0102] In an embodiment of the present application, step 506 can be implemented through steps 5061 to 5064 (not shown in the figure); that is, the page display device regionalizes the selected component to obtain component area information, including steps 5061 to 5064, and each step is explained below.

[0103] Step 5061: Based on the first specified relationship between the component and the component category, determine the target component category corresponding to each target component in the selected components.

[0104] In an embodiment of the present application, a first designated relationship is set in the page display device, or the page display device can obtain the first designated relationship from another device; the first designated relationship is a correspondence between components and component categories; thus, the page display device determines the component category corresponding to each target component in the selected components from the first designated relationship, thereby obtaining the target component category corresponding to each target component. The target component is any component in the selected components, and the component category includes at least one of a media component, a text component, a button component, and a form component.

[0105] Step 5062: Based on the second specified relationship between the category and the skeleton screen style, determine the target skeleton screen style corresponding to the target component category.

[0106] In an embodiment of the present application, a second designated relationship is provided in the page display device, or the page display device can obtain the second designated relationship from another device; the second designated relationship is a correspondence between a category and a skeleton screen style; thus, the page display device obtains the skeleton screen style corresponding to each target component category from the second designated relationship, thereby obtaining the target skeleton screen style corresponding to each target component category. The skeleton screen style includes at least one area graphic, such as a large-area matrix color block, a stripe color block, a matrix color block, and multiple stripe color blocks.

[0107] Step 5063: Based on the third specified relationship between the skeleton screen style and the skeleton screen protocol, determine the target skeleton screen protocol corresponding to the target skeleton screen style, and obtain at least one target skeleton screen protocol corresponding to the selected component.

[0108] In an embodiment of the present application, a third specified relationship is provided in the page display device, or the page display device can obtain the third specified relationship from another device; the third specified relationship is a correspondence between a skeleton screen style and a skeleton screen protocol; thus, the page display device obtains the skeleton screen protocol corresponding to each target skeleton screen style from the third specified relationship, thereby obtaining the target skeleton screen protocol corresponding to each target estimated flat style. Therefore, for a selected component, when the selected component includes at least one target component, at least one target skeleton screen protocol corresponding to the selected component can be obtained. The skeleton screen protocol includes at least one of component category, height, style, margin, and row information.

[0109] Step 5064: Combine at least one target skeleton screen protocol into component area information.

[0110] It should be noted that the page display device combines at least one target skeleton screen protocol to obtain component area information. The combination method can be based on the display order of the selected components in the landing page, spliced ​​with spacers, or directly spliced, etc., which is not limited in the embodiments of the present application.

[0111] It can be understood that by determining the skeleton screen style of the component based on the component category, and determining the skeleton screen protocol of the component based on the skeleton screen style, and then combining the skeleton screen protocol to obtain the component area information that structurally corresponds to the landing page, data conditions are provided for the rapid display of the skeleton screen page.

[0112] In an embodiment of the present application, steps 5065 to 5067 (not shown in the figure) are also included before step 5061; that is, before the page display device determines the target component category corresponding to each target component in the selected component based on the first specified relationship between the component and the component category, the page display method also includes steps 5065 to 5067, and each step is explained below.

[0113] Step 5065: Classify the landing page generation components to obtain the first specified relationship.

[0114] It should be noted that the first designated relationship is obtained by the page display device through classifying the landing page generation components in the low-code platform; thus, the first designated relationship includes the component categories corresponding to each component.

[0115] Step 5066: Determine the skeleton screen style corresponding to each component category in the first designated relationship, and combine the skeleton screen styles corresponding to each component category to obtain the second designated relationship.

[0116] It should be noted that the page display device determines the corresponding skeleton screen style for each component category in the first specified relationship, and combines the skeleton screen styles corresponding to each component category, thereby obtaining a second specified relationship that represents the correspondence between the component category and the skeleton screen style.

[0117] In an embodiment of the present application, the page display device determines the area information corresponding to each component category as the corresponding skeleton screen style, such as color block areas of different styles.

[0118] Step 5067: Determine the skeleton screen protocol corresponding to the skeleton screen style, and combine the skeleton screen protocols corresponding to each skeleton screen style to obtain a third designated relationship.

[0119] It should be noted that the page display device determines the corresponding skeleton screen protocol for each skeleton screen style in the second specified relationship, and combines the skeleton screen protocols corresponding to each skeleton screen style obtained, thereby obtaining a third specified relationship that characterizes the correspondence between the skeleton screen style and the skeleton screen protocol.

[0120] In the embodiment of the present application, the page display device obtains the skeleton screen protocol by describing each skeleton screen style, for example, the description information corresponding to the color block area.

[0121] It can be understood that by pre-setting the first specified relationship, the second specified relationship and the third specified relationship, the target skeleton screen protocol corresponding to each target component in the landing page can be obtained, and the target skeleton screen protocol is obtained by describing the style of the areas of different component categories. The corresponding data volume is small, which provides the possibility for serving as a parameter for loading address information, and also realizes the dynamic display of the skeleton screen page.

[0122] In an embodiment of the present application, step 507 can be implemented through steps 5071 and 5072 (not shown in the figure); that is, the page display device determines the skeleton screen protocol data based on the component area information, including steps 5071 and 5072, and each step is explained below.

[0123] Step 5071: Compress the component area information to obtain component compressed area information.

[0124] In the embodiment of the present application, when the loading address information has a maximum length limit, the page display device can also compress the component area information, wherein the component compressed area information is the compressed component area information.

[0125] Step 5072: Based on the comparison result of the length of the component compression area information and the length of the component area information, the information with the shortest length between the component compression area information and the component area information is determined as the skeleton screen protocol data.

[0126] It should be noted that, based on the compression method used during compression, the length of the component compression area information may be less than the length of the component area information, or it may be greater than or equal to the length of the component area information; thus, in order to obtain parameters with shorter length, the page display device selects the shortest information from the component compression area information and the component area information as the skeleton screen protocol data.

[0127] In an embodiment of the present application, the comparison result may be that the length of the component compressed area information is less than the length of the component area information, or it may be that the length of the component compressed area information is greater than or equal to the length of the component area information; when the comparison result is that the length of the component compressed area information is less than the length of the component area information, the page display device determines the component compressed area information as skeleton screen protocol data; when the comparison result is that the length of the component compressed area information is greater than or equal to the length of the component area information, the page display device determines the component area information as skeleton screen protocol data.

[0128] It can be understood that by compressing the component area information, the length of the skeleton screen protocol data is shortened; thereby, when the length of the loading address information is limited, the effective acquisition of the skeleton screen protocol data can be ensured; in addition, by compressing the component area information, the length of the loading address information can also be reduced, reducing resource transmission consumption; in addition, by determining the information with a short length as the skeleton screen protocol data based on the comparison result, the length of the skeleton screen protocol data is minimized, thereby ensuring the effective acquisition of the skeleton screen protocol data; and further, the display efficiency of the skeleton screen page can be improved.

[0129] In an embodiment of the present application, step 503 can be implemented through steps 5031 and 5032 (not shown in the figure); that is, the page display device displays the skeleton screen page by parsing the skeleton screen protocol data, including steps 5031 and 5032. Each step is explained below.

[0130] Step 5031: parse the skeleton screen protocol data to obtain each target skeleton screen protocol.

[0131] In the embodiment of the present application, the page display device parses the skeleton screen protocol data to parse out the target skeleton screen protocol corresponding to each target component, thereby obtaining each target skeleton screen protocol. Here, the page device can perform corresponding decomposition based on the combination of each target skeleton screen protocol to obtain each target skeleton screen protocol.

[0132] Step 5032: Display the skeleton screen page by rendering each target skeleton screen protocol.

[0133] It should be noted that the page display device parses each target skeleton screen protocol and obtains the area rendering data corresponding to each target skeleton screen protocol. By rendering the area rendering data, the target skeleton screen style corresponding to each target component is displayed, thereby completing the display of the skeleton screen page.

[0134] In the embodiment of the present application, step 5033 (not shown in the figure) is included before step 5031; that is, before the page display device parses the skeleton screen protocol data and obtains each target skeleton screen protocol, the page display method also includes step 5033, which is described below.

[0135] Step 5033: Check whether the loading address information includes compression indication information.

[0136] It should be noted that the page display device detects the compression indication information in the loading address information. If the compression indication information is detected, it indicates that the parsed skeleton screen protocol data is compressed; if the compression indication information is not detected, it indicates that the parsed skeleton screen protocol data is uncompressed.

[0137] Accordingly, in an embodiment of the present application, in step 5031, the page display device parses the skeleton screen protocol data to obtain each target skeleton screen protocol, including: when the loading address information includes compression indication information, the page display device decompresses the skeleton screen protocol data to obtain component area information; and parses the component area information to obtain each target skeleton screen protocol.

[0138] It should be noted that the page display device detects the compression indication information of the loading address information. If the detection result is that the loading address information does not include compression indication information, it indicates that the skeleton screen protocol data is uncompressed, and the skeleton screen protocol data is directly parsed to obtain each target skeleton screen protocol; if the detection result is that the loading address information includes compression indication information, it indicates that the skeleton screen protocol data is compressed, and the page display device compresses the skeleton screen protocol data and then parses it to obtain each target skeleton screen protocol.

[0139] The following describes an exemplary application of the embodiments of the present application in a practical application scenario.

[0140] See also Figure 7 , Figure 7 is a schematic diagram of an exemplary display skeleton screen page provided in an embodiment of the present application; Figure 7As shown, in response to the operation of the developer 7-1 on the landing page editor 7-2, the landing page 7-3 is generated, and at the same time, the skeleton screen page protocol 7-4 (called skeleton screen protocol data) is generated; the skeleton screen page protocol 7-4 is used as a parameter of the URL of the landing page 7-3, or the skeleton screen page protocol 7-4 is used as a parameter of the small program startup information of the landing page 7-3; when the front end 7-5 (called the page display device) responds to the operation of the user 7-6 (called the page loading operation), and obtains the URL of the landing page 7-3 or the small program startup information of the landing page 7-3 (called the loading address information), the skeleton screen page protocol 7-4 can be parsed through the obtained URL of the landing page 7-3 or the small program startup information of the landing page 7-3, and the skeleton screen page 7-7 is displayed through the skeleton screen page protocol 7-4. In this way, the skeleton screen page protocol 7-4 is carried in the form of startup parameters in the small program and in the H5 page as the tail parameter of the URL link. After the front end obtains the URL or mini program startup information, it can immediately obtain the skeleton screen page protocol, parse the skeleton screen page protocol and render the skeleton screen page; in this way, the skeleton screen page has been displayed when the user triggers the page opening operation.

[0141] based on Figure 7 , see Figure 8 , Figure 8 This is a flow chart of an exemplary display skeleton screen page provided by an embodiment of the present application; Figure 8 As shown, the exemplary process of displaying the skeleton screen page includes steps 801 to 810, and each step is described below.

[0142] Step 801: Generate a landing page through the landing page editor.

[0143] See also Figure 9 , Figure 9 is a schematic diagram of an exemplary landing page editor provided in an embodiment of the present application; Figure 9 As shown, page 9-1 is the landing page editor page (called the landing page generation page); area 9-11 is the components used to generate the landing page, and area 9-12 is the preview area of ​​the generated landing page. The generated landing page is displayed in area 9-12 by combining the components in area 9-11.

[0144] Step 802: Generate a skeleton screen page protocol while generating the landing page.

[0145] Next, the generation process of the skeleton screen page protocol is described.

[0146] It should be noted that by classifying the components in the landing page editor (called landing page generation components), the following categories are obtained: media components (for example, videos, pictures, etc.), text components, button components, and form components; among them, the skeleton screen styles corresponding to the components of each category are: large-area matrix color blocks, strip color blocks, matrix color blocks, and a combination of multiple strip color blocks; as shown in Table 1.

[0147] Table 1

[0148]

[0149]

[0150] In the process of selecting components to generate landing pages in the landing page editor, for the selected components corresponding to the landing page, combined with Table 1, the skeleton screen protocols corresponding to each component are determined, and the skeleton screen protocols corresponding to each component are combined to obtain the skeleton screen page protocol.

[0151] For example, the skeleton screen page protocol is: media-450|text-16-3|media-600|form-5|btn-20-20|media-100|text-10-8.

[0152] Step 803 , determine whether the length of the compressed skeleton screen page protocol is less than the length of the uncompressed skeleton screen page protocol; if yes, execute step 805 ; if not, execute step 804 .

[0153] It should be noted that after the landing page is generated through the landing page editor, the skeleton screen page protocol corresponding to the landing page is compressed; here, the "zlib" compression algorithm is used to compress the skeleton screen page protocol; the skeleton screen page protocol before compression can be represented by the code as "const skeletonProtocal='media-450|text-16-3|media-450|form-5|btn-20-20|form-5|media-100|text-16-3|form-5|btn-20-20|form-5|media-100|text-16-3|form-5'"; the compression process can be represented by the code as "zlib.deflate(skeletonProtocal,(err,buffer)=>{if(!err){const zipStr=buffer.toSt ring('base64'); console.log('before compression'); console.log(skeletonProtocal); console.log('after compression'); console.log(zipStr);}else{}"; wherein, the compressed skeleton screen page protocol can be represented by the code as "const zipStr=buffer.toString('base64')"; the error handling can be represented by the code as "else{}", and the output content can be represented by the code as "console.log('before compression'); console.log(skeletonProtocal); console.log('after compression'); console.log(zipStr);".

[0154] See also Figure 10 , Figure 10 This is a comparison diagram of compression results of an exemplary skeleton screen page protocol provided in an embodiment of the present application; Figure 10 As shown, the skeleton screen page protocol 10-1 before compression (media-450|text-16-3|media-450|form-5|btn-20-20|form-5|media-100|text-16-3|form-5|btn-20-20|form-5|media-100|text-16-3|form-5 before compression) and the skeleton screen page protocol 10-2 after compression (compressed eJzLTU3JTNQ1MTWoKUmtKNEINNM1rsmFi6XLF+XqmtYkleTpGhkAU Q2XAhBARSHKDA2QtWJoIKgWAG+EKTw=) are shown.

[0155] Step 804: Determine the skeleton screen page protocol before compression as the skeleton screen page protocol to be used (referred to as skeleton screen protocol data).

[0156] It should be noted that by compressing the skeleton screen page protocol, the length of the skeleton screen page protocol can be shortened. However, there is a case where the length of the compressed skeleton screen page protocol is greater than or equal to the length of the skeleton screen page protocol before compression. In this case, the skeleton screen page protocol before compression is still used.

[0157] For example, see Figure 11 , Figure 11 This is a comparison diagram of compression results of an exemplary skeleton screen page protocol provided in an embodiment of the present application; Figure 11 The figure shows the skeleton screen page protocol 11-1 before compression (media-450|text-16-3|media-450|form-5|btn-20-20 before compression) and the skeleton screen page protocol 11-2 after compression (eJzLTU3JTNQ1MTWoKUmtKNE1NNM1rsmFi6XLF+Xq mtYkleTpGhkAEQBmpA6u after compression). It is easy to see that the length of the skeleton screen page protocol 11-1 before compression is smaller than the length of the skeleton screen page protocol 11-2 after compression. In this case, the skeleton screen page protocol 11-1 before compression is still used.

[0158] Step 805: Determine the compressed skeleton screen page protocol as the skeleton screen page protocol to be used.

[0159] It should be noted that, when the length of the compressed skeleton screen page protocol is smaller than the length of the uncompressed skeleton screen page protocol, the compressed skeleton screen page protocol is adopted.

[0160] Step 806: Determine whether the landing page loading method is the H5 page loading method; if yes, execute step 807; if not, execute step 809.

[0161] Step 807: Use the skeleton screen page protocol to be used as a parameter of the URL.

[0162] Step 808: Parse the URL parameters and display the H5 skeleton screen page.

[0163] Step 809: Use the skeleton screen page protocol to be used as a parameter of the mini-program startup information.

[0164] Step 810: parse the parameters of the mini-program startup information and display the mini-program skeleton screen page.

[0165] Exemplarily, when the length of the compressed skeleton screen page protocol is less than the length of the skeleton screen page protocol before compression, step 807 is executed, and the obtained URL is "https: / / ……?pageId=…&skepro=zlib:eJzLTU3JTNQ1MTWoKUmtKNE1NNM1rsmFi6XlF+XqmtYkleTpGhkAEUw ArMLQwKCGSwEIEDoJqkdXCgA9ESji"; and step 809 is executed, and the obtained mini program startup information is "pages / ……?pageId=…&skepro=zlib:eJzLTU3JTNQ1MTWoKUmtKNE1NNM1rsmFi6XlF+XqmtYkleTpGhkAEUwArMLQwKCGSwEIEDoJqkdXCgA9ESj i".

[0166] For example, when the length of the compressed skeleton screen page protocol is greater than or equal to the length of the uncompressed skeleton screen page protocol, step 807 is executed, and the obtained URL is "https: / / …?pageId=…&skepro=media-450|text-16-3|media-450|form-5|btn-20-20". When the length of the compressed skeleton screen page protocol is greater than or equal to the length of the uncompressed skeleton screen page protocol, step 809 is executed, and the obtained mini program startup information is "pages / …?pageId=…&skepro=media-450|text-16-3|media-450|form-5|btn-20-20".

[0167] It should be noted that the skeleton screen page protocol used can be obtained by parsing the parameters of the URL through "const fullUrl=window.location.href;const index=fullUrl.indexof('skepro=');const skepro=fullUrl.substring(index+7,fullUrl.length);console.log(skepro);"; or, the skeleton screen page protocol used can be obtained by parsing the parameters of the mini program startup information through "onLoad(query){const{skepro}=query;console.log(skepro);}".

[0168] It should also be noted that since the parameters in the URL or mini-program startup information may be compressed skeleton screen page protocols, here, by judging whether the URL or mini-program startup information includes a compression identifier (for example, "zlib", which is called compression indication information), it is determined whether the skeleton screen page protocol used is the skeleton screen page protocol before compression or the skeleton screen page protocol after compression. Therefore, during the parsing process, it is first determined whether it is a compressed skeleton screen page protocol. If so, the skeleton screen page protocol used is decompressed using the "zlib" compression algorithm; the decompression process can be represented by the code as "const buffer2 = Buffer.from(zipStr,'base64'); zlib.unzip(buffer2,(err,innerBuffer)=>{if(!err){const originStr=innerBuffer.toString();console.log(originStr);}else{}})"; where "zipStr" is the compressed skeleton screen page protocol; error handling can be represented by the code as "else{}".

[0169] See also Figure 12 , Figure 12 This is a schematic diagram of the result of an exemplary decompressed and compressed skeleton screen page protocol provided in an embodiment of the present application; Figure 12 As shown, the skeleton screen page protocol 12-1 before decompression (compressed eJzLTU3JTNQ1MTWoKUmtKNE1NNM1rsmFi6X1F+XqmtYkleTpGhk AUQ2XAhBARSHKDA2QtWJoIKgWAG+EKTw=) and the skeleton screen page protocol 12-2 after decompression (before compression media-450|text-16-3|media-450|form-5|btn-20-20|form-5|media-100|text-16-3|form-5). It is easy to know that the skeleton screen page protocol 12-1 before decompression is Figure 10 The compressed skeleton screen page protocol 10-2 and the decompressed skeleton screen page protocol 12-2 are Figure 10 Skeleton screen page protocol 10-1 before compression.

[0170] For example, see Figure 13 , Figure 13 This is a schematic diagram showing a comparison between an exemplary skeleton screen page and a landing page provided in an embodiment of the present application; Figure 13 As shown, the skeleton screen page 13-1 is based on Figure 8 It is easy to see from the pages displayed in the described steps that the skeleton screen page 13-1 corresponds to the landing page 13-2 in structure.

[0171] It can be understood that by determining the skeleton screen style corresponding to the component, the skeleton screen protocol is determined to ensure that the skeleton screen page and the landing page are structurally consistent, without the need to manually regenerate the skeleton screen code, thereby improving the efficiency and intelligence of obtaining the skeleton screen page. In addition, by compressing the skeleton screen page protocol, the URL length or the length of the mini-program startup information is shortened. In addition, carrying the skeleton screen page protocol through URL parameters or mini-program startup parameters improves the display efficiency of the skeleton screen page, and can be used in application scenarios such as web pages and mini-programs, with a wide range of applications.

[0172] The following continues to describe the exemplary structure of the page display device 455 provided in the embodiment of the present application as a software module. In some embodiments, such as Figure 4 As shown, the software modules stored in the page display device 455 of the memory 450 may include:

[0173] Operation response module 4551, configured to obtain loading address information in response to a page loading operation, wherein the loading address information is used to load a landing page;

[0174] Information parsing module 4552 is used to parse the loading address information to obtain the landing page loading address and skeleton screen protocol data, wherein the landing page loading address is used to load the landing page rendering data, the landing page rendering data is used to display the landing page, and the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page;

[0175] The page display module 4553 is used to display the skeleton screen page by parsing the skeleton screen protocol data when the landing page rendering data is loaded based on the landing page loading address.

[0176] In an embodiment of the present application, the page display device 455 also includes an information combination module 4554, which is used to display the landing page generation component in the landing page generation page; obtain the selected component in response to the selection operation on the landing page generation component; generate the landing page based on the selected component, and regionalize the selected component to obtain component area information; determine the skeleton screen protocol data based on the component area information; combine the skeleton screen protocol data and the landing page loading address corresponding to the landing page to obtain the loading address information.

[0177] In an embodiment of the present application, the information combination module 4554 is also used to determine the target component category corresponding to each target component in the selected components based on a first specified relationship between the component and the component category, wherein the component category includes at least one of a media component, a text component, a button component, and a form component; based on a second specified relationship between the category and the skeleton screen style, determine the target skeleton screen style corresponding to the target component category, wherein the skeleton screen style includes at least one area graphic; based on a third specified relationship between the skeleton screen style and the skeleton screen protocol, determine the target skeleton screen protocol corresponding to the target skeleton screen style, and obtain at least one target skeleton screen protocol corresponding to the selected component, wherein the skeleton screen protocol includes at least one of component category, height, style, margin, and row information; and combine at least one target skeleton screen protocol into the component area information.

[0178] In an embodiment of the present application, the page display device 455 also includes a relationship determination module 4555, which is used to classify the landing page generation components to obtain the first specified relationship; determine the skeleton screen style corresponding to each component category in the first specified relationship, and combine the skeleton screen styles corresponding to each component category to obtain the second specified relationship; determine the skeleton screen protocol corresponding to the skeleton screen style, and combine the skeleton screen protocols corresponding to each skeleton screen style to obtain the third specified relationship.

[0179] In an embodiment of the present application, the information combination module 4554 is also used to compress the component area information to obtain component compressed area information; based on the comparison result of the length of the component compressed area information and the length of the component area information, the information with the shortest length between the component compressed area information and the component area information is determined as the skeleton screen protocol data.

[0180] In the embodiment of the present application, the page display module 4553 is further configured to parse the skeleton screen protocol data to obtain each target skeleton screen protocol; and display the skeleton screen page by rendering each target skeleton screen protocol.

[0181] In the embodiment of the present application, the information parsing module 4552 is further configured to detect whether the loading address information includes compression indication information.

[0182] In an embodiment of the present application, the page display module 4553 is further configured to decompress the skeleton screen protocol data to obtain the component area information when the loading address information includes the compression indication information; and parse the component area information to obtain each target skeleton screen protocol.

[0183] In an embodiment of the present application, the loading address information includes at least one of web page loading address information and mini program loading address information, wherein the web page loading address information is used to display the landing page by loading a web page, and the mini program loading address information is used to display the landing page by loading a mini program.

[0184] In the embodiment of the present application, when the loading address information includes web page loading address information, the skeleton screen protocol data refers to the uniform resource locator parameter in the loading address information.

[0185] In an embodiment of the present application, when the loading address information includes mini-program loading address information, the skeleton screen protocol data refers to the mini-program startup parameters in the loading address information.

[0186] The present invention provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device (referred to as a page display device) reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the page display method described above in the present invention.

[0187] The embodiment of the present application provides a computer-readable storage medium storing executable instructions, wherein the executable instructions are stored. When the executable instructions are executed by a processor, the processor will execute the page display method provided by the embodiment of the present application, for example, Figure 5 The page display method shown.

[0188] In some embodiments, the computer-readable storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or various devices including one or any combination of the above memories.

[0189] In some embodiments, executable instructions may be in the form of a program, software, software module, script, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment.

[0190] As an example, executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, such as in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinating files (e.g., files storing one or more modules, subroutines, or code portions).

[0191] As an example, executable instructions may be deployed to be executed on one computer device (in this case, this one computer device is the page display device), or on multiple computer devices located at one location (in this case, the multiple computer devices located at one location are the page display devices), or on multiple computer devices distributed at multiple locations and interconnected by a communication network (in this case, the multiple computer devices distributed at multiple locations and interconnected by a communication network are the page display devices).

[0192] To sum up, the embodiment of the present application combines the skeleton screen protocol data with the landing page loading address as the loading address information corresponding to the landing page, that is, the skeleton screen protocol data is obtained as a parameter of the loading address information; after obtaining the loading address information, the skeleton screen protocol data can be obtained by parsing the loading address information, which can improve the efficiency of obtaining the skeleton screen protocol data; and then, the skeleton screen page can be quickly displayed by parsing the skeleton screen protocol data; therefore, the display efficiency of the skeleton screen page and the display effect of the landing page can be improved.

[0193] The above description is merely an embodiment of the present application and is not intended to limit the scope of protection of the present application. Any modifications, equivalent replacements, and improvements made within the spirit and scope of the present application are included in the scope of protection of the present application.

Claims

1. A page display method, characterized in that: The method comprises: On the landing page generation page, the landing page generation component is displayed; In response to a selection operation on the landing page generation component, obtaining a selected component; Generate a landing page based on the selected component, and regionalize the selected component to obtain component region information; Determining skeleton screen protocol data based on the component area information; Combine the skeleton screen protocol data and the landing page loading address corresponding to the landing page to obtain loading address information for loading the landing page; In response to a page loading operation, the landing page loading address and the skeleton screen protocol data are parsed from the loading address information, wherein the landing page loading address is used to load the landing page rendering data, the landing page rendering data is used to display the landing page, and the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page; When the landing page rendering data is loaded based on the landing page loading address, the skeleton screen page is displayed by parsing the skeleton screen protocol data.

2. The method according to claim 1, characterized in that The regionalizing the selected component to obtain component region information includes: Determining a target component category corresponding to each target component in the selected components based on a first specified relationship between components and component categories, wherein the component category includes at least one of a media component, a text component, a button component, and a form component; determining a target skeleton screen style corresponding to the target component category based on a second specified relationship between the component category and the skeleton screen style, wherein the skeleton screen style includes at least one area graphic; Determining a target skeleton screen protocol corresponding to the target skeleton screen style based on a third specified relationship between the skeleton screen style and the skeleton screen protocol, and obtaining at least one target skeleton screen protocol corresponding to the selected component, wherein the skeleton screen protocol includes at least one of component category, height, style, margin, and row information; At least one of the target skeleton screen protocols is combined into the component area information.

3. The method according to claim 2, characterized in that Before determining the target component category corresponding to each target component in the selected components based on the first specified relationship between the components and the component categories, the method further includes: Classifying the landing page generation components to obtain the first specified relationship; Determining the skeleton screen style corresponding to each component category in the first designated relationship, and combining the skeleton screen styles corresponding to the component categories to obtain the second designated relationship; The skeleton screen protocol corresponding to the skeleton screen style is determined, and the skeleton screen protocols corresponding to the respective skeleton screen styles are combined to obtain the third designated relationship.

4. The method according to any one of claims 1 to 3, characterized in that The determining of the skeleton screen protocol data based on the component area information includes: Compressing the component area information to obtain component compressed area information; Based on a comparison result of the length of the component compression area information and the length of the component area information, the information with the shortest length between the component compression area information and the component area information is determined as the skeleton screen protocol data.

5. The method according to any one of claims 1 to 3, characterized in that The displaying of the skeleton screen page by parsing the skeleton screen protocol data includes: Parsing the skeleton screen protocol data to obtain each target skeleton screen protocol; The skeleton screen page is displayed by rendering each of the target skeleton screen protocols.

6. The method according to claim 5, characterized in that Before parsing the skeleton screen protocol data to obtain each target skeleton screen protocol, the method further includes: detecting whether the loading address information includes compression indication information; The parsing of the skeleton screen protocol data to obtain each target skeleton screen protocol includes: When the loading address information includes the compression indication information, decompressing the skeleton screen protocol data to obtain the component area information; The component area information is parsed to obtain the protocol of each target skeleton screen.

7. The method according to any one of claims 1 to 3, characterized in that The loading address information includes at least one of web page loading address information and mini program loading address information, wherein the web page loading address information is used to display the landing page by loading a web page, and the mini program loading address information is used to display the landing page by loading a mini program.

8. The method according to any one of claims 1 to 3, characterized in that When the loading address information includes web page loading address information, the skeleton screen protocol data refers to the uniform resource locator parameter in the loading address information.

9. The method according to any one of claims 1 to 3, characterized in that When the loading address information includes applet loading address information, the skeleton screen protocol data refers to the applet startup parameters in the loading address information.

10. A page display device, characterized in that: The page display device includes: An information combination module is configured to display a landing page generation component on a landing page generation page; obtain a selected component in response to a selection operation on the landing page generation component; generate a landing page based on the selected component and regionalize the selected component to obtain component region information; determine skeleton screen protocol data based on the component region information; and combine the skeleton screen protocol data with a landing page loading address corresponding to the landing page to obtain loading address information for loading the landing page. An operation response module, used to respond to a page loading operation; An information parsing module is used to parse the landing page loading address and the skeleton screen protocol data from the loading address information, wherein the landing page loading address is used to load the landing page rendering data, the landing page rendering data is used to display the landing page, and the skeleton screen protocol data is used to display the skeleton screen page corresponding to the landing page; The page display module is used to display the skeleton screen page by parsing the skeleton screen protocol data when the landing page rendering data is loaded based on the landing page loading address.

11. The device according to claim 10, characterized in that The information combination module is further used to determine the target component category corresponding to each target component in the selected components based on a first specified relationship between the component and the component category, wherein the component category includes at least one of a media component, a text component, a button component and a form component; determine the target skeleton screen style corresponding to the target component category based on a second specified relationship between the component category and the skeleton screen style, wherein the skeleton screen style includes at least one area graphic; determine the target skeleton screen protocol corresponding to the target skeleton screen style based on a third specified relationship between the skeleton screen style and the skeleton screen protocol, and obtain at least one target skeleton screen protocol corresponding to the selected component, wherein the skeleton screen protocol includes at least one of component category, height, style, margin and row information; and combine at least one target skeleton screen protocol into the component area information.

12. The device according to claim 11, characterized in that The page display device further includes a relationship determination module for classifying the landing page generation components to obtain the first specified relationship; determining the skeleton screen style corresponding to each component category in the first specified relationship, and combining the skeleton screen styles corresponding to each component category to obtain the second specified relationship; The skeleton screen protocol corresponding to the skeleton screen style is determined, and the skeleton screen protocols corresponding to the respective skeleton screen styles are combined to obtain the third designated relationship.

13. The device according to any one of claims 10 to 12, characterized in that The information combination module is also used to compress the component area information to obtain component compressed area information; based on the comparison result of the length of the component compressed area information and the length of the component area information, the information with the shortest length between the component compressed area information and the component area information is determined as the skeleton screen protocol data.

14. A page display device, characterized in that: The page display device includes: a memory for storing executable instructions; The processor is configured to implement the page display method according to any one of claims 1 to 9 when executing the executable instructions stored in the memory.

15. A computer-readable storage medium storing executable instructions, characterized in that: The executable instructions are used to implement the page display method according to any one of claims 1 to 9 when executed by a processor.

16. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed by a processor, the page display method according to any one of claims 1 to 9 is implemented.

Citation Information

Patent Citations

  • Page display method and device, computer equipment and readable storage medium

    CN109902248A

  • Page loading method, device and system

    CN113656721A

Cited By

  • Data fusion-based instant hot boiled water dispenser state monitoring method and system

    CN122653559A