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

Abstract

The invention provides a page display method which can be applied to the technical field of cloud computing and the technical field of big data. The method comprises the steps of obtaining first screen display configuration of a target page; based on the first screen display configuration, determining a classification label number range for first screen display; obtaining first classification label data from a server based on the classification label number range, and rendering the first classification label data to a first display area of the target page; and in response to a target viewing operation triggered by the user, obtaining second classification label data from the server, and rendering the second classification label data to a second display area of the target page.

Description

Technical Field

[0001] The present disclosure relates to the fields of cloud computing technology and big data technology, and more specifically to a page display method, apparatus, device, medium, and program product. Background Art

[0002] With the rapid development of internet financial services, financial institutions are integrating more and more service modules into their web pages, and users' access to information on these pages is increasing in both depth and breadth. To meet the needs of concurrent display and operation of multiple services, web pages typically use categorized tags to display content in partitioned form.

[0003] However, as the variety of services continues to grow, the number of category tags is rapidly expanding. Traditional multi-line displays or horizontal scrolling methods struggle to balance page cleanliness and access efficiency. On the one hand, multi-line displays take up a large amount of page space, compressing the core business content area. On the other hand, while horizontal scrolling saves space, it also leads to low search efficiency, cumbersome interactions, and easily affected page performance. Especially in complex financial business systems, where users demand high operational accuracy and page responsiveness, existing tag display solutions are unable to meet the usability and scalability requirements of large-scale, multi-level financial service pages. Summary of the Invention

[0004] In view of the above problems, the present disclosure provides a page display method, apparatus, device, medium and program product.

[0005] According to a first aspect of the present disclosure, a page display method is provided, which is applied to a client, and the method includes: obtaining a first-screen display configuration of a target page; determining a range of category tag quantities for first-screen display based on the first-screen display configuration; obtaining first category tag data from a server based on the range of category tag quantities, and rendering the first category tag data into a first display area of ​​the target page; and obtaining second category tag data from the server in response to a target viewing operation triggered by a user, and rendering the second category tag data into a second display area of ​​the target page.

[0006] According to an embodiment of the present disclosure, rendering the first classification label data into the first display area of ​​the target page includes: writing the first classification label data into an observable array variable of the client; and traversing and rendering the corresponding label nodes into the first display area based on the classification label items in the observable array variable.

[0007] According to an embodiment of the present disclosure, determining the range of the number of category tags for first-screen display based on the first-screen display configuration includes: obtaining display parameters of the client and category tag information preset in the first-screen display configuration; performing calculations based on the display parameters and the category tag information to obtain the maximum number of category tags for first-screen display; and determining the range of the number of category tags based on the maximum number of category tags.

[0008] According to an embodiment of the present disclosure, after writing the first classification label data into the observable array variable of the client, it also includes: splitting the first classification label data into fields, extracting the first field for page structure rendering, and constructing the initial label node in the first display area based on the first field; and loading the second field for expressing style and interaction in the first classification label data based on an asynchronous trigger mechanism, and updating the corresponding initial label node based on the second field.

[0009] According to an embodiment of the present disclosure, the method further includes: in response to a user selecting a target category tag in the second display area, setting the target category tag to an activated state; and based on the activated state, updating the display state of the corresponding category tag node in the first display area.

[0010] According to an embodiment of the present disclosure, the second display area includes a search input component for inputting a search keyword, and the method further includes: obtaining the search keyword in the search input component; and based on the search keyword, performing string relationship matching on the second classification label data, determining a target classification label set that matches the search keyword, and rendering the target classification label set into the second display area.

[0011] According to an embodiment of the present disclosure, the method further includes: setting visibility monitoring for the classification label node in the first display area; and in response to the classification label node being located in a non-visible range and lasting for more than a preset time threshold, unloading the page rendering structure corresponding to the classification label node.

[0012] A second aspect of the present disclosure provides a page display device, which is applied to a client, and the device includes: a data acquisition module, which is used to obtain the first-screen display configuration of the target page; a quantity determination module, which is used to determine the number range of category tags for first-screen display based on the first-screen display configuration; a first rendering module, which is used to obtain first category tag data from a server based on the category tag number range, and render the first category tag data into a first display area of ​​the target page; and a second rendering module, which is used to obtain second category tag data from the server in response to a target viewing operation triggered by a user, and render the second category tag data into a second display area of ​​the target page.

[0013] According to an embodiment of the present disclosure, the quantity determination module can also be used to obtain the display parameters of the client and the category label information preset in the first screen display configuration; perform calculations based on the display parameters and the category label information to obtain the maximum number of category labels for first screen display; and determine the category label quantity range based on the maximum number of category labels.

[0014] According to an embodiment of the present disclosure, the first rendering module can also be used to write the first classification label data into an observable array variable of the client; and based on the classification label items in the observable array variable, traverse and render the corresponding label nodes into the first display area.

[0015] According to an embodiment of the present disclosure, the first rendering module can also be used to split the first classification label data into fields, extract the first field for page structure rendering, and construct the initial label node in the first display area based on the first field; and load the second field for expressing style and interaction in the first classification label data based on an asynchronous trigger mechanism, and update the corresponding initial label node based on the second field.

[0016] According to an embodiment of the present disclosure, the page display device may further include a synchronization module. The synchronization module may be configured to, in response to a user selecting a target category tag in the second display area, set the target category tag to an active state; and based on the active state, update the display state of the corresponding category tag node in the first display area.

[0017] According to an embodiment of the present disclosure, the page display device may further include a retrieval module. The retrieval module may be configured to obtain a search keyword from the search input component; perform string relationship matching on the second classification tag data based on the search keyword, determine a target classification tag set that matches the search keyword, and render the target classification tag set in the second display area.

[0018] According to an embodiment of the present disclosure, the page display device may further include a monitoring module. The monitoring module may be configured to set visibility monitoring for the classification label node in the first display area; and in response to the classification label node being in a non-visible range for a period exceeding a preset time threshold, unloading the page rendering structure corresponding to the classification label node.

[0019] A third aspect of the present disclosure provides an electronic device, comprising: one or more processors; and a memory for storing one or more computer programs, wherein the one or more processors execute the one or more computer programs to implement the steps of the above method.

[0020] The fourth aspect of the present disclosure further provides a computer-readable storage medium having a computer program or instructions stored thereon, which implements the steps of the above method when the computer program or instructions are executed by a processor.

[0021] The fifth aspect of the present disclosure further provides a computer program product, comprising a computer program or instructions, which implement the steps of the above method when executed by a processor.

[0022] According to the embodiments of the present disclosure, by acquiring the first category tag data from the server on demand and rendering it only in the first display area, the simplification and structural separation of data acquisition and page display are achieved, reducing front-end resource consumption and improving the efficiency of the first page rendering. At the same time, in response to the user's viewing operation, the second category tag data is loaded and rendered in the second display area, achieving delayed loading and interactive control of the tag display, which not only ensures the scalability of the page under high classification scale, but also improves the user's operating experience and the maintainability of the page. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] The above contents and other objects, features and advantages of the present disclosure will become more apparent through the following description of the embodiments of the present disclosure with reference to the accompanying drawings, in which:

[0024] Figure 1 A diagram schematically illustrates an application scenario of the page display method, apparatus, device, medium, and program product according to an embodiment of the present disclosure;

[0025] Figure 2 The following schematically shows a flow chart of a page display method according to an embodiment of the present disclosure;

[0026] Figure 3 Schematically shows a running sequence diagram of a page display method according to some exemplary embodiments of the present disclosure;

[0027] Figure 4 Schematically shows an example diagram of using classification labels according to an embodiment of the present disclosure;

[0028] Figure 5 A schematic diagram of a structure of a page display device according to an embodiment of the present disclosure is shown; and

[0029] Figure 6 A block diagram of an electronic device suitable for implementing the page display method according to an embodiment of the present disclosure is schematically shown. DETAILED DESCRIPTION

[0030] Hereinafter, embodiments of the present disclosure will be described with reference to the accompanying drawings. However, it should be understood that these descriptions are merely exemplary and are not intended to limit the scope of the present disclosure. In the detailed description below, for ease of explanation, many specific details are set forth to provide a comprehensive understanding of the embodiments of the present disclosure. However, it is apparent that one or more embodiments may also be implemented without these specific details. In addition, in the following description, descriptions of well-known structures and technologies are omitted to avoid unnecessary confusion of the concepts of the present disclosure.

[0031] The terms used herein are only for describing specific embodiments and are not intended to limit the present disclosure. The terms "comprise," "include," etc. used herein indicate the presence of the features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0032] All terms used herein (including technical and scientific terms) have the meanings commonly understood by those skilled in the art unless otherwise defined. It should be noted that the terms used herein should be interpreted as having a meaning consistent with the context of this specification and should not be interpreted in an idealized or overly rigid manner.

[0033] When expressions such as "at least one of A, B, and C, etc." are used, they should generally be interpreted in accordance with the meaning commonly understood by those skilled in the art (for example, "a system having at least one of A, B, and C" should include but is not limited to a system having A alone, B alone, C alone, A and B, A and C, B and C, and / or A, B, C, etc.).

[0034] First, the technical terms described in this article are explained and illustrated as follows.

[0035] First screen display configuration: This refers to the configuration information used to control the content of the initial rendering area of ​​the page when the client page is first loaded. This configuration may include the default number of category tags, the style and size of each tag, the display area width limit, whether horizontal scrolling is allowed, and other information. It is used to determine the number of tags that can be displayed in the initial visible area.

[0036] Label node: refers to the page UI component or DOM element generated by rendering based on category label data, usually including text labels, icons, background styles, click areas, etc., used to display specific category information on the page and support user click or highlight operations.

[0037] Observable array variables: These are array objects built based on the data responsiveness implemented in front-end frameworks like Vue. Changes in these arrays can be monitored in real time by the view layer, automatically driving page rendering updates. Once category tag data is written to these variables, tag nodes can be dynamically inserted, updated, and synchronized.

[0038] Category label pop-up panel: Use pop-up windows to assist in displaying page category labels, not only on the home page.

[0039] With the rapid development of internet technology and the growing demand for online financial services, web pages, the primary interface for users accessing financial institutions such as banks, securities firms, and insurance companies, have seen a significant increase in content and functionality complexity. Traditional static pages are no longer able to meet the diverse needs of financial users for services, frequent switching operations, and aggregated information. Financial services websites often integrate multiple business modules, including account overview, transaction inquiries, financial product purchases, loan applications, risk assessments, and message centers. Different users have significantly different preferences for page functionality, necessitating a flexible and efficient way to display diverse content within a single page to accommodate diverse business scenarios.

[0040] In this context, category tabs have become a common method for improving page information organization efficiency and user interaction experience. Category tabs not only clearly group different financial function modules, allowing users to quickly switch to their target service, but also reduce page jumps and improve overall browsing efficiency. For example, on a corporate online banking platform, users may need to frequently switch between multiple function pages such as "Payment Management," "Fund Collection," "Account Reconciliation," and "Report Export." The category tab design allows each module to be integrated into a unified page, avoiding redundant operations caused by excessively deep page hierarchies.

[0041] However, as business functions continue to expand, the number of tab categories that financial platforms need to display has also increased significantly, often exceeding dozens or even reaching hundreds. For example, some large financial management systems have configured exclusive function entrances for different business lines, different roles, and different permissions. This makes the one-line display method that was originally suitable for a small number of tabs unsustainable. In order to adapt to the surge in the number of tabs, some systems have adopted a solution that divides the tabs into multiple rows for display. However, this will seriously squeeze the page content area, affecting the visibility and ease of operation of the main business information. Especially on financial pages, data tables, chart components, real-time quotes and other content have extremely high requirements for page space. Excessive use of the tab area will directly affect the efficiency of users in obtaining key data.

[0042] To alleviate the problem of insufficient space, one of the current solutions is to display tab labels through horizontal scrolling, keeping only some tabs in the user's visible area, and the remaining tabs can be viewed by sliding. Although this solution saves space to a certain extent, it also exposes a series of problems in actual financial business scenarios: on the one hand, the horizontal scrolling operation is inefficient when there are too many tabs, making it difficult for users to quickly locate the target functional module, which can easily cause business process interruptions or misoperations; on the other hand, the scrolling loading process involves frequent DOM redrawing and page reflow, especially when the number of categories reaches hundreds. The pressure on the first screen to load the page increases sharply, the browser rendering performance decreases, and this may cause page freezes and reduce the user experience. At the same time, requesting all tab data at once not only wastes network bandwidth, but also increases the interface load of the core financial system, which is contrary to the financial system design concept of "on-demand loading and fine interaction."

[0043] Based on this, an embodiment of the present disclosure provides a page display method, including: obtaining the first screen display configuration of the target page; based on the first screen display configuration, determining the range of the number of category tags for first screen display; based on the range of the number of category tags, obtaining first category tag data from the server, and rendering the first category tag data into the first display area of ​​the target page; and in response to the target viewing operation triggered by the user, obtaining second category tag data from the server, and rendering the second category tag data into the second display area of ​​the target page. According to an embodiment of the present disclosure, by obtaining the first category tag data from the server on demand and rendering it only to the first display area, the simplification and structural separation of data acquisition and page display are achieved, the front-end resource consumption is reduced, and the efficiency of the first rendering of the page is improved. At the same time, in response to the user's viewing operation, the second category tag data is loaded and rendered to the second display area, which realizes the delayed loading and interactive control of the tag display, which not only ensures the scalability of the page under high classification scale, but also improves the user's operating experience and the maintainability of the page.

[0044] It should be noted that the page display methods, devices, equipment, media, and program products identified in this disclosure can be used in the fields of cloud computing technology, big data technology, and financial technology, and can also be used in various fields other than cloud computing technology, big data technology, and financial technology. The application fields of the page display methods, devices, equipment, media, and program products provided in the embodiments of this disclosure are not limited.

[0045] In the technical solutions disclosed herein, the user information (including but not limited to user personal information, user image information, user device information, such as location information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved are all information and data authorized by the user or fully authorized by all parties, and the collection, storage, use, processing, transmission, provision, disclosure and application of the relevant data comply with relevant laws, regulations and standards, take necessary confidentiality measures, do not violate public order and good morals, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0046] In scenarios where personal information is used for automated decision-making, the methods, devices, and systems provided by the embodiments of the present disclosure all provide users with corresponding operation portals for them to choose to agree or reject the automated decision-making results; if the user chooses to reject, the expert decision-making process will be entered. The expression "automated decision-making" here refers to the activity of automatically analyzing and evaluating an individual's behavioral habits, interests and hobbies, or economic, health, credit status, etc. through computer programs and making decisions. The expression "expert decision-making" here refers to the activity of making decisions by people who specialize in a certain field, have specialized experience, knowledge, and skills, and have reached a certain level of professionalism.

[0047] Figure 1 The application scenario diagram of the page display method, apparatus, device, medium and program product according to the embodiments of the present disclosure is schematically shown.

[0048] like Figure 1 As shown, the application scenario 100 according to this embodiment may include a first terminal device 101, a second terminal device 102, a third terminal device 103, a network 104, and a server 105. The network 104 is used as a medium for providing a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 may include various connection types, such as wired or wireless communication links or optical fiber cables.

[0049] A user may use a first terminal device 101, a second terminal device 102, or a third terminal device 103 to interact with a server 105 via a network 104 to receive or send messages, etc. Various communication client applications may be installed on the first terminal device 101, the second terminal device 102, or the third terminal device 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (for example only).

[0050] The first terminal device 101 , the second terminal device 102 , and the third terminal device 103 may be various electronic devices having display screens and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, desktop computers, and the like.

[0051] The server 105 may be a server that provides various services, such as a background management server (for example only) that supports websites browsed by users using the first terminal device 101, the second terminal device 102, and the third terminal device 103. The background management server may analyze and process received data such as user requests, and feed back processing results (e.g., web pages, information, or data obtained or generated based on user requests) to the terminal devices.

[0052] It should be noted that the page display method provided in the embodiment of the present disclosure can generally be executed by the server 105. Accordingly, the page display device provided in the embodiment of the present disclosure can generally be set in the server 105. The page display method provided in the embodiment of the present disclosure can also be executed by a server or server cluster that is different from the server 105 and can communicate with the first terminal device 101, the second terminal device 102, the third terminal device 103 and / or the server 105. Accordingly, the page display device provided in the embodiment of the present disclosure can also be set in a server or server cluster that is different from the server 105 and can communicate with the first terminal device 101, the second terminal device 102, the third terminal device 103 and / or the server 105.

[0053] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0054] The following will be based on Figure 1 The scene described by Figures 2 to 4 The page display method of the disclosed embodiment is described in detail.

[0055] Figure 2 The flowchart of the page display method according to an embodiment of the present disclosure is schematically shown.

[0056] like Figure 2 As shown, the page display method 200 of this embodiment includes operations S210 to S240, and the page display method can be executed by the server 105.

[0057] In operation S210 , a home screen display configuration of a target page is obtained.

[0058] In the embodiments of the present disclosure, the first-screen display configuration is used to guide the core content, layout structure, and data range required to be presented during the initial page load phase. The first-screen display configuration can be pre-set in a front-end engineering configuration file or dynamically obtained through page structure description information issued by the server.

[0059] For example, the home screen display configuration can be pre-stored in a server-side database. For example, the home screen configuration of a product detail page on an e-commerce platform may include core information such as the product title, main image, price, etc. When a user requests the page, the server will query and retrieve this configuration data from the database based on the page ID.

[0060] For example, the above-the-fold display configuration can be deployed as a static file on a content delivery network (CDN). For example, the configuration of the above-the-fold news list on the homepage of a news portal might be stored in a JSON file. When a user's browser requests it, the CDN will directly return this file, reducing server load and accelerating content delivery.

[0061] Furthermore, the home screen display configuration can also be dynamically generated. For example, in a personalized recommendation system, the list of products or articles displayed on the home screen is generated in real time based on the user's historical behavior, interests, and preferences. In this case, operation S210 can trigger a calculation process to dynamically assemble a home screen configuration unique to the current user based on the user ID and other relevant parameters.

[0062] In some embodiments, the first screen display configuration may include but is not limited to the following: the width and height of the page display area, the upper limit of the number of category label components that can be displayed, the label arrangement method (horizontal scrolling or line wrap display), the default activated label identifier, the label style type (compact / regular / grouped), and whether to enable the lazy loading mechanism, etc.

[0063] For example, on a financial services platform's product category page, the home screen display configuration can be set to "display up to 9 category tags," with each tag no wider than 100 pixels, single-line scrolling enabled, and lazy icon loading enabled to ensure that users can quickly see the core categories when they first open the page without being affected by the excessive number of tags. For example, on an information portal page, the home screen display configuration can be set to "display the first 6 column tags sorted by publication time by default," and enable a style with a reading status indicator to enhance user perception.

[0064] In the embodiments of the present disclosure, the home screen display configuration can also be adaptively adjusted based on differences in client environments. For example, on a PC device, a wider display area can be set and the number of label rows can be increased, while on a mobile device, the label width can be compressed and more scrolling interactions can be enabled. In a multilingual page environment, the home screen display configuration can also specify a label name length threshold and multilingual text adaptation rules to ensure a beautiful interface layout and complete information.

[0065] Furthermore, the first-screen display configuration can not only be used to define the static layout of the page, but also serve as an input parameter for subsequent access control and rendering optimization. In certain scenarios, the first-screen display configuration can be used in conjunction with information such as user role permissions, user behavior history, and dynamic interface return values ​​to achieve dynamic customization of the first-screen display content based on user characteristics. For example, for newly registered users, the configuration can point to the "Guidance Category" tag for priority display; for high-frequency users, their recently visited categories can be loaded first, improving operational consistency and page responsiveness.

[0066] In operation S220 , based on the above-the-fold display configuration, a range of the number of category tags for above-the-fold display is determined.

[0067] In an embodiment of the present disclosure, the range of the number of category tags can be determined based on a combined calculation of the display parameters of the client's current device and the layout information in the home screen display configuration. Specifically, the process can include: obtaining the client's display parameters and the category tag information preset in the home screen display configuration; performing calculations based on the display parameters and the category tag information to obtain the maximum number of category tags for home screen display; and determining the range of the number of category tags based on the maximum number of category tags.

[0068] Specifically, the display parameters of the client may include the screen width, height, pixel density, browser window size, horizontal and vertical screen status, font zoom level, etc. of the current device, which are used to characterize the actual rendering space available for the current page. The basic display properties of the category labels are preset in the first screen display configuration, such as the fixed width and height of each label, the horizontal spacing and margin between labels, whether automatic line wrapping or scrolling display is supported, etc. The system can obtain the maximum number of category labels that can be fully presented on the first screen of the page in the current terminal environment by combining the above parameters. For example, in a certain configuration scenario, if the width of each label is set to 100 pixels, the spacing between labels is 16 pixels, and the available width of the first screen of the page is 1080 pixels, the maximum number of labels that can be displayed is 1080 ÷ (100+16)=9.

[0069] In some scenarios, the range of category tags can also be adjusted based on dynamic factors. For example, some pages can limit the number of displayed tags to the top N within a maximum range, such as displaying a fixed number of six primary tags, leaving a margin for dynamic tag switching triggered by subsequent interactions. This number can also be used as an upper limit for tag filtering logic, limiting the number of tags displayed on the first screen during tag sorting and filtering, thereby avoiding information congestion or tag stacking on the first screen.

[0070] Furthermore, in responsive page structures, the calculation logic for the range of category tags must adapt to different display strategies based on different device types. For example, on a PC, where page width is ample, a wider range of tags can be calculated; on a mobile device, however, due to limited width, only one or two tags may be displayed, with the remaining content being added via sliding. On a multi-column page with content in both left and right columns, the proportion of the tag display area on the home screen must be further compressed, and the tag range must be adjusted accordingly.

[0071] According to the embodiments of the present disclosure, the page can accurately estimate the amount of tag data that needs to be loaded before the first screen rendering, which not only avoids redundant resource loading, but also prevents visual gaps caused by insufficient display content, thereby ensuring a balance between performance and experience during the page initialization phase.

[0072] In operation S230 , first category label data is obtained from a server based on the category label quantity range, and the first category label data is rendered in a first display area of ​​the target page.

[0073] Specifically, after the range of the number of category tags is determined, the client can construct a request parameter containing the quantity information and send it to the server to obtain the corresponding number of first category tag data. The server can return the first several tag items filtered by specific sorting rules based on the request, such as selecting display tags based on tag popularity, default order, historical usage frequency or content recommendation strategy. The structure of the tag data may include tag identifier, tag name, basic style information, jump path, and necessary interactive control parameters. The acquired first category tag data can be written into the front-end responsive data model (such as an array or key-value pair form) to drive the rendering process of the first display area in the page.

[0074] In the front-end page, the first display area can be a fixed block at the top of the page or in the navigation area, which is designed to centrally present the core functional modules or recommended categories of the page. The client constructs the corresponding label node elements item by item based on the first category label data, and inserts them into the display area to ensure that users can intuitively access the main content entrance on the first screen. For example, in an e-commerce platform, the first display area can display commonly used labels such as "hot recommendations", "new products on the shelves", and "limited time sale"; in a financial service platform, this area can present core functional labels such as "account overview", "financial products", and "loan application". The system can also automatically adjust the node width, style theme, or bind click events according to the label content to ensure the uniformity of the page style and the smoothness of interaction.

[0075] In some embodiments, the client can also introduce a lazy loading mechanism, rendering the structural nodes first, and then completing the style after the label icons, background images and other resources have been loaded, thereby further improving the first screen rendering speed. In platforms with user profiling capabilities, the first category label data obtained can also be personalized based on user behavior. For example, for users who frequently browse a certain type of information, relevant labels will be returned first, improving the relevance of the interface content and operational efficiency.

[0076] According to the embodiments of the present disclosure, since the first category label data is only used for display in the initial rendering stage of the page, the system can control the number range of the category labels to a smaller interval, for example, no more than 10. At this time, the page only needs to display a number of label nodes within one row, avoiding network congestion and page structure complexity caused by large-scale label loading. Since the amount of first category label data is small, the request parameters constructed by the client are more streamlined, the server processing load is significantly reduced, and data retrieval and response can be completed quickly. At the same time, the front end only needs to construct a small number of DOM nodes to complete the first screen rendering, which significantly shortens the interactive time of the first screen of the page and reduces the CPU rendering pressure.

[0077] In operation S240 , in response to a target viewing operation triggered by the user, second category label data is obtained from the server, and the second category label data is rendered in a second display area of ​​the target page.

[0078] In the embodiments of the present disclosure, the target viewing operation triggered by the user can be set to a variety of interactive modes. For example, the user can trigger the target viewing operation by clicking the "View More" button, sliding the page to the end of the category, activating the category search function, or clicking a specific interactive component. After the system receives the target viewing operation of the user interaction signal, it can initiate a request to the server to supplement the category label data. The server returns all the category label data or its visual subset corresponding to the current page according to the preset strategy, and can also attach label grouping information, label priority, label icon, search keywords and related interaction parameters.

[0079] After receiving the second category label data, the client can load the data into the responsive data model used to drive the rendering of the second display area. The second display area can be constructed in a variety of display forms, such as a floating panel sliding out from the right, a label selection box popping up in the center of the page, a drop-down expansion block at the bottom of the page, or a separate rendering through a label navigation page. The specific form can be flexibly adjusted according to the page style and business logic. This display area usually supports enhanced interactive functions such as label scrolling, click selection, fuzzy search filtering, etc., aiming to assist users in quickly locating the target category and completing page jumps, content filtering or operation selection.

[0080] Furthermore, the second category tags can be dynamically sorted based on user history, for example, prioritizing recently visited tags, frequently used tags, or recommended tags. This helps highlight user-focused items within a large tag collection and improves user efficiency. Furthermore, the selected tag status in the second display area can be updated synchronously with the first display area, ensuring consistency and contextual coherence across user actions.

[0081] According to the embodiments of the present disclosure, operation S240 is in the deferred loading phase of the page rendering process, i.e., it is triggered by user interaction after the first screen display is complete, enabling dynamic display and functional expansion of all category tags. Through this on-demand loading mechanism, the system can flexibly support the visualization of large-scale category tags while maintaining the performance advantages of the first screen, meeting the classification management needs under complex page structures.

[0082] The method of selecting a target rendering mode based on access frequency will be specifically described below in the form of a preferred embodiment.

[0083] In an embodiment of the present disclosure, rendering the first classification label data into the first display area of ​​the target page may include: writing the first classification label data into an observable array variable of the client; and traversing and rendering the corresponding label nodes into the first display area based on the classification label items in the observable array variable.

[0084] Specifically, after receiving the first category tag data returned by the server, the client can first write this data into a preset observable data structure, such as a responsive array variable in the front-end framework. Observable array variables can support a two-way binding mechanism with the page view. Once the data structure changes, the view layer will automatically detect and trigger an update, thus implementing a data-driven page rendering mode for dynamically controlling the display of category tags, effectively avoiding the performance burden and maintenance complexity caused by manual DOM manipulation.

[0085] After the data is written, the client can construct the corresponding label nodes in sequence according to the field content of each category label item in the array. Each label node may include a label name, a unique identifier, a jump link, style information, and a bound click event, etc. The constructed node will be inserted into the first display area of ​​the page. Since this area is only used to display the first screen content, the number of nodes is relatively small, the rendering speed is fast, and the page structure construction process is efficient and stable. At the same time, the label node can support a variety of layout methods, such as horizontal arrangement, line break display, horizontal sliding, etc., which can be flexibly controlled by the first screen display configuration.

[0086] In an embodiment of the present disclosure, after writing the first category label data into the observable array variable of the client, it may also include: splitting the first category label data into fields, extracting the first field for page structure rendering, and constructing an initial label node in the first display area based on the first field; and loading the second field for expressing style and interaction in the first category label data based on an asynchronous trigger mechanism, and updating the corresponding initial label node based on the second field.

[0087] Specifically, each data item in the first category tag data can be divided into fields, and the first field used for page structure rendering can be extracted. Based on this first field, the initial tag node in the first display area is constructed first. The first field can include the tag's text content, unique identifier, basic layout attributes (such as arrangement order and whether to display), etc., to support the structure generation and basic display of the tag node.

[0088] When constructing the initial label node, a responsive rendering mechanism can be used to traverse the label data items written to the observable array variable and dynamically generate label elements based on the contents of the first field. The initial label node is inserted into the first display area, completing the basic label framework for the first screen of the page. Because this stage relies only on structure fields to complete layout rendering and does not involve icons, style details, or event binding operations, the overall rendering cost is low and the DOM structure is lightweight, which helps achieve faster page loading speeds and a smoother user experience.

[0089] After the initial tag node is constructed, the second field content related to each tag item can be loaded based on an asynchronous trigger mechanism. This second field can include a tag icon, background style, font color, hover animation, click events, etc., to enrich the visual effects and interactive capabilities of the tag. By delaying the loading of the second field, the system can gradually complete the page style and behavior logic while ensuring that the user's first screen is quickly visible, avoiding rendering blocking and resource competition caused by loading all resources at once.

[0090] Furthermore, the asynchronous loading process can be automated by combining the browser's idle time strategy, visibility detection mechanisms, or the deferred binding features of front-end frameworks like Vue, further reducing the burden on the main thread. As the second field is loaded, the corresponding initial tag node can be updated based on its content, enhancing the tag's appearance and enabling interactive features.

[0091] According to the embodiments of the present disclosure, without affecting the visibility of the first screen, the page initialization performance and the tag component loading efficiency can be significantly optimized. It is suitable for network page structures with a large number of tags, complex resource loading, or a large number of dynamic styles, thereby improving user experience and system responsiveness.

[0092] In an embodiment of the present disclosure, when the user selects a target category tag in the second display area, the system can set the target category tag to an activated state, and based on the activated state, link and update the display state of the corresponding category tag node in the first display area to achieve synchronous control of the tag state and consistent feedback of the page view.

[0093] Specifically, the second display area can display all category tags, with complete tag information and interactive capabilities. Users can select any target tag by clicking, searching, locating, scrolling, etc. When a user selects a category tag, the system first marks the tag as currently active and updates the responsive state variable bound to it. The activation state mark not only records the current user's operation intention, but also serves as an important basis for subsequent page content display, style switching, and logical judgment.

[0094] While the activation state is changing, the label nodes in the first display area can be further synchronized. Specifically, the rendered label nodes in the first display area can be traversed to find the node items that match the activated label identifier, and status update operations can be performed on them, including visual feedback effects such as style highlighting, font bolding, border marking, and icon changes, to ensure that the user can intuitively identify the currently selected label in the first display area. If the label is not originally in the first display area, the system can also insert, replace, or scroll it to the visible area according to the configuration selection to enhance the continuity of user perception and interactive experience.

[0095] Furthermore, the activation state can also be used to drive content loading operations associated with the tag, such as switching content lists under categories, refreshing module data, adjusting page jump paths, etc., to achieve logical linkage between tag selection and business content.

[0096] In the disclosed embodiment, the second display area includes a search input component for entering search keywords, enabling users to quickly locate target tags within a large number of categorized tags, thereby improving interaction efficiency and page usability. Once all categorized tags are displayed in the second display area, users can use the search input component to enter keywords to perform tag filtering and locating operations.

[0097] Specifically, the search input component can be presented as an input box at the top or in a fixed position in the second display area, allowing users to enter keywords related to the target category tag in free text form. After monitoring the input behavior, the system obtains the search keyword in the current input box and performs a matching operation based on the keyword in the loaded second category tag data.

[0098] The tag data matching process can be judged based on string inclusion or prefix relationships. The system can traverse all the data items of the classification tags and perform string analysis on each tag name field to determine whether it contains the keywords entered by the user. The matched tag items will form the target classification tag set and will be rendered in real time in the second display area for the user to further click and select. To enhance the screening experience, the system can also highlight keywords in the rendered results or sort them by matching priority to enhance the visibility of the search feedback.

[0099] In the disclosed embodiments, the search process supports strategies such as fuzzy matching, multi-keyword association, and pinyin initial matching to accommodate different language environments and user input habits. Furthermore, to improve processing performance, the system can employ a front-end cache structure or segmented filtering to perform keyword matching operations locally, avoiding repeated requests to the server and ensuring the immediacy of search responses.

[0100] In an embodiment of the present disclosure, in order to further optimize the running performance and memory resource usage of the page, a visibility monitoring mechanism can be set for the category label nodes in the first display area, and an unloading operation can be performed on some label nodes when specific conditions are met. This is suitable for page scenarios containing a large number of category labels and with horizontal or vertical scrolling displays. It can effectively reduce the occupation of invalid DOM elements on the browser rendering thread and improve the overall page response speed and interaction smoothness.

[0101] Specifically, the system monitors the visibility of each category tag node in the first display area in real time based on the browser's visible area determination mechanism. When a tag node is in the invisible range and remains so for a period exceeding a preset threshold (e.g., 500 milliseconds or 1 second), the system determines that the tag is no longer of interest to the user and, in doing so, executes an uninstall operation, removing the page rendering structure corresponding to the tag node from the DOM, freeing up memory resources and reducing redraw costs.

[0102] Unloading a label node does not affect its existence in the data model. The system still retains the classification label data corresponding to the node, facilitating the rapid reconstruction of page elements when the node re-enters the visible area, achieving dynamic scheduling of visibility and resource usage. In some embodiments, to avoid jitter caused by frequent loading and unloading, the system can set a buffer area for entering and exiting the visible range or adopt a throttling strategy to control the unloading frequency, thereby balancing performance and stability.

[0103] Figure 3 The following schematically illustrates a running sequence diagram of a page display method according to some exemplary embodiments of the present disclosure.

[0104] like Figure 3 As shown, this embodiment takes the web page as the core and shows the interaction process between the user and the client page, the category label (tab) panel, and the business server, mainly including the entire process of loading the first screen tab, displaying all tabs, and selecting categories.

[0105] First, after a user accesses the target web page, the client's homepage module initiates a request to load the tab data for the home screen. This request is transmitted to the service server via HTTP to retrieve a portion of the category tag data for home screen display. Upon receiving the request, the service server selects a limited number of tags (e.g., nine or fewer) from the entire category tag set that meet the home screen display criteria based on a preset tag sorting strategy or home screen display configuration. The server then returns this tag data in a structured format to the web page.

[0106] Next, after receiving some tab data, the homepage module binds this data to the homepage tab component using front-end responsive mechanisms like observable array variables, and renders the tabs in the first display area. This phase involves only building and styling a small number of tab nodes, resulting in a concise DOM structure and fast loading. The page renders the visual content on the homepage in a fraction of the time, significantly improving homepage performance and user experience.

[0107] Subsequently, if the user clicks "View More Tabs" on the page (e.g., by clicking the "...More" icon or swiping), the system enters the category tab panel display phase. The category tab panel module is activated and can initiate an operation to request all tab data, sending a request to the business server to obtain the complete set of category tags associated with the page. The business server responds to this request and returns a complete tag data set, which may include various fields such as tag ID, name, icon, search keyword, grouping information, etc.

[0108] After receiving all the tab data, the category tab panel module renders it into the second display area, usually displayed in the form of a floating window panel, sliding drawer, or pop-up layer. This display area allows users to quickly browse and locate the target category tab by scrolling or searching.

[0109] When a user selects a target tab in the secondary display area, the system sets that tab to the currently active state and simultaneously triggers a status update in the home screen tab area. Specifically, the home page module locates the corresponding tab node on the home screen based on the activation indicator, highlights it, and scrolls it back into view if necessary, ensuring real-time feedback on the user's selection in the main view.

[0110] Figure 4 The figure schematically shows an example of using classification labels according to an embodiment of the present disclosure.

[0111] like Figure 4 As shown, the top of the page is the first display area of ​​the home screen, in which some category labels are displayed in a horizontal arrangement, including "All", "Category tab1", "Category tab2" to "Category tab8", etc. Each label is marked with a number in brackets to indicate the number of content items under the current category. The currently active label is "Category tab1", and its text is highlighted with a red horizontal line at the bottom, indicating that the category label has been selected by the user, and the corresponding category content is presented in the list area below.

[0112] Since the total number of category labels on the page exceeds the number that can be accommodated in the first screen viewing area, a "more" operation entrance is set on the right side of the first display area. When the user clicks on the entrance, the second display area of ​​the page will pop up. Figure 4 The floating panel shown in . This panel is used to display all available category tags and provides a search input box at the top to support tag filtering.

[0113] The user enters a keyword (e.g., "category tab1") in the search input box. The system then performs a string match operation across all tag sets based on the keyword, filtering out the target category tag set that meets the criteria. In the illustrated scenario, after the user enters "category tab1," the search results display multiple tag items containing the keyword, such as "category tab1," "category tab11," "category tab12," and "category tab13." The system renders these results in real time in a floating panel for the user to click and select.

[0114] When the user clicks the desired category label in the second display area, for example, re-clicking "Category tab 1," the system activates that label and simultaneously updates the status of the corresponding label in the first display area (e.g., highlighting it), ensuring that the user perceives the same selection in both areas. The page content then automatically refreshes based on the selected category, displaying the business data or list information corresponding to that label.

[0115] Corresponding to the above-mentioned page display method, an embodiment of the present disclosure further provides a page display device.

[0116] Figure 5 The structural block diagram of the page display device according to an embodiment of the present disclosure is schematically shown.

[0117] like Figure 5 As shown, the page display device 500 of this embodiment includes a data acquisition module 510 , a quantity determination module 520 , a first rendering module 530 and a second rendering module 540 .

[0118] The data acquisition module 510 can be used to obtain the home screen display configuration of the target page. In one embodiment, the data acquisition module 510 can be used to perform the operation S210 described above, which will not be repeated here.

[0119] The quantity determination module 520 may be configured to determine a quantity range of category labels for first screen display based on the first screen display configuration. In one embodiment, the quantity determination module 520 may be configured to perform the operation S220 described above, which will not be described in detail here.

[0120] The first rendering module 530 can be used to obtain first category label data from the server based on the category label quantity range, and render the first category label data into the first display area of ​​the target page. In one embodiment, the first rendering module 530 can be used to perform the operation S230 described above, which will not be repeated here.

[0121] The second rendering module 540 can be used to obtain the second category label data from the server in response to the target viewing operation triggered by the user, and render the second category label data into the second display area of ​​the target page. In one embodiment, the second rendering module 540 can be used to perform the operation S240 described above, which will not be repeated here.

[0122] According to an embodiment of the present disclosure, the quantity determination module 520 can also be used to obtain the display parameters of the client and the category label information preset in the first screen display configuration; perform calculations based on the display parameters and the category label information to obtain the maximum number of category labels for first screen display; and determine the category label quantity range based on the maximum number of category labels.

[0123] According to an embodiment of the present disclosure, the first rendering module 530 can also be used to write the first classification label data into an observable array variable of the client; and based on the classification label items in the observable array variable, traverse and render the corresponding label nodes into the first display area.

[0124] According to an embodiment of the present disclosure, the first rendering module 530 can also be used to perform field splitting on the first classification label data, extract the first field for page structure rendering, and construct the initial label node in the first display area based on the first field; and load the second field for expressing style and interaction in the first classification label data based on an asynchronous trigger mechanism, and update the corresponding initial label node based on the second field.

[0125] According to an embodiment of the present disclosure, the page display device 500 may further include a synchronization module. The synchronization module may be configured to set the target category tag to an active state in response to a user selecting the target category tag in the second display area; and based on the active state, update the display state of the corresponding category tag node in the first display area.

[0126] According to an embodiment of the present disclosure, the page display device 500 may further include a retrieval module. The retrieval module may be configured to obtain a search keyword from the search input component, perform string relationship matching on the second category label data based on the search keyword, determine a target category label set that matches the search keyword, and render the target category label set in the second display area.

[0127] According to an embodiment of the present disclosure, the page display device 500 may further include a monitoring module. The monitoring module may be configured to set visibility monitoring for the category label node in the first display area; and in response to the category label node being in a non-visible range for a period exceeding a preset time threshold, unloading the page rendering structure corresponding to the category label node.

[0128] According to embodiments of the present disclosure, any multiple of the data acquisition module 510, quantity determination module 520, first and second rendering modules 530, and second rendering module 540 may be combined into a single module, or any one of these modules may be split into multiple modules. Alternatively, at least part of the functionality of one or more of these modules may be combined with at least part of the functionality of other modules and implemented in a single module. According to embodiments of the present disclosure, at least one of the data acquisition module 510, quantity determination module 520, first and second rendering modules 530, and second rendering module 540 may be at least partially implemented as a hardware circuit, such as a field programmable gate array (FPGA), a programmable logic array (PLA), a system on a chip, a system on a substrate, a system on a package, an application-specific integrated circuit (ASIC), or may be implemented in hardware or firmware through any other reasonable means of circuit integration or packaging, or implemented in any one of software, hardware, and firmware, or any suitable combination thereof. Alternatively, at least one of the data acquisition module 510 , the quantity determination module 520 , the first and second rendering modules 530 , and the second rendering module 540 may be at least partially implemented as a computer program module, which may perform corresponding functions when executed.

[0129] Figure 6 A block diagram of an electronic device suitable for implementing the page display method according to an embodiment of the present disclosure is schematically shown.

[0130] like Figure 6 As shown, an electronic device 600 according to an embodiment of the present disclosure includes a processor 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage portion 608 into a random access memory (RAM) 603. The processor 601 may include, for example, a general-purpose microprocessor (e.g., a CPU), an instruction set processor and / or a related chipset and / or a special-purpose microprocessor (e.g., an application-specific integrated circuit (ASIC)), etc. The processor 601 may also include onboard memory for caching purposes. The processor 601 may include a single processing unit or multiple processing units for performing different actions of the method flow according to an embodiment of the present disclosure.

[0131] Various programs and data required for the operation of the electronic device 600 are stored in the RAM 603. The processor 601, ROM 602, and RAM 603 are connected to each other via a bus 604. The processor 601 executes the various operations of the method flow according to the embodiment of the present disclosure by executing the programs in the ROM 602 and / or RAM 603. It should be noted that the programs may also be stored in one or more memories other than the ROM 602 and RAM 603. The processor 601 may also execute the various operations of the method flow according to the embodiment of the present disclosure by executing the programs stored in the one or more memories.

[0132] According to an embodiment of the present disclosure, electronic device 600 may further include an input / output (I / O) interface 605, which is also connected to bus 604. Electronic device 600 may also include one or more of the following components connected to I / O interface 605: an input section 606 including a keyboard, mouse, etc.; an output section 607 including devices such as a cathode ray tube (CRT), liquid crystal display (LCD), and speakers; a storage section 608 including a hard disk; and a communication section 609 including a network interface card such as a LAN card or modem. Communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to I / O interface 605 as needed. Removable media 611, such as a magnetic disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed in drive 610 as needed, so that computer programs read from the removable media can be installed into storage section 608 as needed.

[0133] The present disclosure also provides a computer-readable storage medium, which may be included in the device / apparatus / system described in the above embodiments, or may exist independently and not be incorporated into the device / apparatus / system. The computer-readable storage medium carries one or more programs, and when executed, implements the method according to the embodiments of the present disclosure.

[0134] According to an embodiment of the present disclosure, a computer-readable storage medium may be a non-volatile computer-readable storage medium, and may include, for example, but not limited to: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present disclosure, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. For example, according to an embodiment of the present disclosure, a computer-readable storage medium may include the ROM 602 and / or RAM 603 described above, and / or one or more memories other than ROM 602 and RAM 603.

[0135] The embodiments of the present disclosure also include a computer program product, which includes a computer program containing program code for executing the method shown in the flowchart. When the computer program product is run in a computer system, the program code is used to enable the computer system to implement the page display method provided by the embodiments of the present disclosure.

[0136] The computer program executes the above functions defined in the system / device of the embodiment of the present disclosure when the processor 601 executes the computer program. According to the embodiment of the present disclosure, the system, device, module, unit, etc. described above can be implemented by a computer program module.

[0137] In one embodiment, the computer program may be stored on a tangible storage medium such as an optical storage device or a magnetic storage device. In another embodiment, the computer program may be transmitted and distributed in the form of a signal on a network medium, downloaded and installed via the communication portion 609, and / or installed from a removable medium 611. The program code contained in the computer program may be transmitted using any appropriate network medium, including but not limited to wireless, wired, or any suitable combination thereof.

[0138] In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 609, and / or installed from a removable medium 611. When the computer program is executed by the processor 601, the above-described functions defined in the system of the embodiment of the present disclosure are performed. According to the embodiment of the present disclosure, the systems, devices, means, modules, units, etc. described above can be implemented by computer program modules.

[0139] According to an embodiment of the present disclosure, the program code for executing the computer program provided by the embodiment of the present disclosure can be written in any combination of one or more programming languages. Specifically, these computer programs can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. Programming languages ​​include, but are not limited to, languages ​​such as Java, C++, Python, "C" or similar programming languages. The program code can be executed entirely on the user computing device, partially on the user device, partially on a remote computing device, or entirely on a remote computing device or server. In cases involving a remote computing device, the remote computing device can be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (for example, using an Internet service provider to connect via the Internet).

[0140] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0141] Those skilled in the art will appreciate that the features described in the various embodiments of the present disclosure may be combined and / or coupled in various ways, even if such combinations or couplings are not explicitly described in the present disclosure. In particular, the features described in the various embodiments of the present disclosure may be combined and / or coupled in various ways without departing from the spirit and teachings of the present disclosure. All such combinations and / or couplings fall within the scope of the present disclosure.

[0142] The above describes the embodiments of the present disclosure. However, these embodiments are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although each embodiment has been described separately above, this does not mean that the measures in each embodiment cannot be advantageously used in combination. Without departing from the scope of the present disclosure, those skilled in the art may make various substitutions and modifications, which should all fall within the scope of the present disclosure.

Claims

1. A page display method, applied to a client, characterized in that: The method comprises: Get the first screen display configuration of the target page; Based on the above-the-fold display configuration, determine the range of the number of category tags to be displayed on the above-the-fold display; Based on the category tag quantity range, obtaining first category tag data from the server, and rendering the first category tag data into the first display area of ​​the target page; and In response to a target viewing operation triggered by a user, second category label data is obtained from a server, and the second category label data is rendered into a second display area of ​​the target page.

2. The method according to claim 1, characterized in that Rendering the first classification label data into the first display area of ​​the target page includes: Writing the first classification label data into the observable array variable of the client; and Based on the category label items in the observable array variable, traverse and render the corresponding label nodes into the first display area.

3. The method according to claim 1, characterized in that The determining, based on the first screen display configuration, a range of the number of category tags for first screen display includes: Obtaining the display parameters of the client and the category label information preset in the first screen display configuration; Performing calculations based on the display parameters and the category label information to obtain a maximum number of category labels for display on the first screen; and The range of the number of classification labels is determined based on the maximum number of classification labels.

4. The method according to claim 2, characterized in that After writing the first classification label data into the observable array variable of the client, the method further includes: Performing field splitting on the first classification label data, extracting a first field for page structure rendering, and constructing an initial label node in the first display area based on the first field; and A second field for representing style and interacting in the first classification label data is loaded based on an asynchronous trigger mechanism, and a corresponding initial label node is updated based on the second field.

5. The method according to any one of claims 1 to 4, characterized in that The method further comprises: In response to a user selecting a target classification label in the second display area, setting the target classification label to an activated state; and Based on the activation state, the display state of the corresponding category label node in the first display area is updated.

6. The method according to claim 5, characterized in that The second display area includes a search input component for inputting a search keyword, and the method further includes: Obtaining search keywords in the search input component; and Based on the search keyword, a string relationship matching is performed on the second classification label data to determine a target classification label set that matches the search keyword, and the target classification label set is rendered in the second display area.

7. The method according to any one of claims 1 to 4 and 6, characterized in that: The method further comprises: Setting visibility monitoring for the category label nodes in the first display area; and In response to the classification tag node being located in a non-visible range and lasting for more than a preset time threshold, the page rendering structure corresponding to the classification tag node is unloaded.

8. A page display device, applied to a client, characterized in that: The device comprises: The data acquisition module is used to obtain the first screen display configuration of the target page; A quantity determination module is used to: determine the quantity range of the category labels for the first screen display based on the first screen display configuration; A first rendering module is configured to: obtain first category label data from a server based on the category label quantity range, and render the first category label data into a first display area of ​​the target page; and The second rendering module is used to: in response to a target viewing operation triggered by a user, obtain second category label data from the server, and render the second category label data into a second display area of ​​the target page.

9. An electronic device comprising: one or more processors; a memory for storing one or more computer programs, It is characterized in that the one or more processors execute the one or more computer programs to implement the steps of the method according to any one of claims 1 to 7.

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

11. 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 steps of the method according to any one of claims 1 to 7 are implemented.

Images