A page component loading method, device, equipment and storage medium

Abstract

The application relates to the technical field of page development, and provides a page component loading method and device, equipment and a storage medium, the method comprises the following steps: adding a first component in a visible area of a current browsing page to a loading list; adding a second component outside the visible area of the current browsing page to a to-be-loaded list and calculating a loading sequence; loading each first component in turn according to the priority of all the first components or according to the loading time consumption of all the first components from low to high; and loading each second component in turn according to the loading sequence. According to the method, the components are divided into components in the visible area and components outside the visible area; when the browsing page is browsed, only the components in the visible area need to be loaded according to a loading strategy, so that the speed of first-screen loading is improved, the white screen time is shortened, and the user experience is improved.

Description

Technical Field

[0001] This application relates to the field of page development technology, and in particular to a method, apparatus, device and storage medium for loading page components. Background Technology

[0002] With the development of computer technology, more and more technologies are being applied in the financial field, and the traditional financial industry is gradually transforming into fintech. Currently, browsing financial information is usually done on the apps of banks and other financial institutions. During the browsing process, slow page loading often results in long periods without content, i.e., a blank screen. Currently, financial institution app or web development typically uses lazy loading, preloading, and asynchronous loading to solve the blank screen problem. While these solutions can optimize page loading efficiency to some extent, they still have the following drawbacks: 1. Incomplete handling of the first screen loading problem: Lazy loading and asynchronous loading only postpone the loading of non-first screen content, without truly solving the first screen loading speed issue. Although preloading can load non-first screen content in advance, the first screen content still needs to wait for preloading to complete before loading, resulting in the blank screen problem. 2. Unstable loading efficiency: Existing solutions struggle to dynamically adjust loading strategies based on different pages, user devices, and other factors, leading to unstable loading efficiency and potentially causing excessively long loading times for some users, impacting user experience. 3. Insufficient priority control: Most existing solutions rely on static configuration or simple conditional judgments to determine the loading order, lacking the ability to dynamically adjust component priorities. Summary of the Invention

[0003] In view of this, embodiments of this application provide a page component loading method, apparatus, device, and storage medium. The method determines the loading order of components by the priority and loading time of each component in the visible area, which can effectively solve the problems of slow first-screen loading and blank screen.

[0004] In a first aspect, embodiments of this application provide a page component loading method, including:

[0005] Add the first component in the visible area of ​​the currently viewed page to the loading list;

[0006] Add the second component outside the visible area of ​​the currently viewed page to the list to be loaded and calculate the loading order;

[0007] The first components are loaded sequentially according to their priority or loading time from low to high.

[0008] Each of the second components is loaded sequentially according to the loading order.

[0009] In some embodiments, before adding the first component within the visible area of ​​the currently viewed page to the loading list, the method further includes:

[0010] Get the position information of all components in the component list of the currently viewed page;

[0011] Compare the position of each component in the component list with the position of the visible area;

[0012] If the sum of the top position of the visible area and the height of the visible area is greater than or equal to the top position of the component, and the sum of the top position of the component and the height of the component is less than or equal to the top position of the visible area, then the current component is designated as the first component within the visible area; otherwise, it is designated as the second component outside the visible area.

[0013] In some embodiments, loading each of the first components sequentially according to their priority or according to their loading time from low to high includes:

[0014] Determine whether the component within the visible area is being loaded for the first time;

[0015] If so, obtain the preset weight priority of all the first components that are currently loaded for the first time, and load the first components in order of priority.

[0016] If not, obtain the loading time of all the first components, and load the current first component in order of its loading time from low to high.

[0017] In some embodiments, the process of loading each of the first components sequentially from low to high loading time according to all the first components further includes:

[0018] If multiple first components have the same execution time, then

[0019] Obtain the priority of each of the first components with equal execution time, and load the first components in order of priority.

[0020] In some embodiments, before loading each of the first components sequentially according to their loading times from low to high, the method further includes:

[0021] When displaying the currently viewed page, record the start time and end time of loading for all components on the currently viewed page;

[0022] Calculate the loading time of each component based on its loading start time and loading end time;

[0023] Save the loading time of each component to the browser cache.

[0024] In some embodiments, adding a second component outside the visible area of ​​the currently viewed page to the loading list and calculating the loading order includes:

[0025] Determine if a second component outside the visible area has been loaded;

[0026] If so, obtain the loading time of all second components outside the current visible area, and arrange the loading order in ascending order according to the loading time of the current second components;

[0027] If not, obtain the weight priority of all second components outside the current visible area, and arrange the loading order according to the current priority of the second components;

[0028] If multiple second components have the same loading time, the priority of each second component with the same loading time is obtained, and the loading order is arranged in descending order of priority.

[0029] Secondly, embodiments of this application provide a page component loading device, including:

[0030] The first add module is used to add the first component in the visible area of ​​the currently viewed page to the loading list;

[0031] The second addition module is used to add second components outside the visible area of ​​the currently viewed page to the list to be loaded and calculate the loading order;

[0032] The first loading module is used to load each of the first components sequentially according to their priority or according to the loading time of each of the first components from low to high.

[0033] The second loading module is used to load each of the second components sequentially according to the loading order.

[0034] In some embodiments, the apparatus further includes:

[0035] The retrieval module is used to retrieve the position information of all components in the component list of the currently viewed page;

[0036] The comparison module is used to compare the position of each component in the component list with the position of the visible area; if the sum of the top position of the visible area and the height of the visible area is greater than or equal to the top position of the component, and the sum of the top position of the component and the height of the component is less than or equal to the top position of the visible area, then the current component is regarded as the first component within the visible area; otherwise, it is regarded as the second component outside the visible area.

[0037] Thirdly, embodiments of this application provide a terminal device, including a processor and a memory, wherein the memory stores a computer program, and the processor is used to execute the computer program to implement the page component loading method described above.

[0038] Fourthly, embodiments of this application provide a readable storage medium storing a computer program, which, when executed on a processor, implements the page component loading method described above.

[0039] The embodiments of this application have the following beneficial effects:

[0040] The page component loading method of this application embodiment adds a first component within the visible area of ​​the currently viewed page to a loading list and adds a second component outside the visible area to a loading list, calculates the loading order, and then loads each of the first components sequentially according to actual needs, based on their priority or loading time from lowest to highest. Then, it loads each of the second components sequentially according to the loading order. This method divides components into those within the visible area and those outside the visible area. When browsing the page, only components within the visible area need to be loaded first according to the loading strategy, thus improving the initial screen loading speed and shortening the white screen time. When the browser page scrolls, the visible area changes, and the above process is repeated. Furthermore, since the loading order of the second components outside the visible area is simultaneously arranged in the loading list when browsing the content within the visible area, if the browser page scrolls, the loading speed of the components within the changed visible area will also be fast, thus greatly reducing the white screen time. Attached Figure Description

[0041] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0042] Figure 1 This paper illustrates a first flowchart of a page component loading method according to an embodiment of the present application.

[0043] Figure 2 This paper illustrates a second flowchart of a page component loading method according to an embodiment of this application.

[0044] Figure 3 A schematic diagram of the visible area and the first component according to an embodiment of this application is shown;

[0045] Figure 4This paper illustrates a flowchart of loading a second component in an embodiment of this application.

[0046] Figure 5 This paper illustrates a flowchart of loading a first component in an embodiment of this application.

[0047] Figure 6 This illustration shows a third flowchart of a page component loading method according to an embodiment of this application;

[0048] Figure 7 A schematic diagram of a page component loading device according to an embodiment of this application is shown. Detailed Implementation

[0049] The technical solutions in the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments.

[0050] The components of the embodiments of this application described and illustrated in the accompanying drawings can be arranged and designed in a variety of different configurations. Therefore, the following detailed description of the embodiments of this application provided in the drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0051] In the following text, the terms "comprising," "having," and their cognates, which may be used in various embodiments of this application, are intended only to indicate a particular feature, number, step, operation, element, component, or combination thereof, and should not be construed as primarily excluding the presence of one or more other features, numbers, steps, operations, elements, components, or combinations thereof, or adding the possibility of one or more combinations thereof. Furthermore, the terms "first," "second," "third," etc., are used only for distinguishing descriptions and should not be construed as indicating or implying relative importance.

[0052] Unless otherwise specified, all terms used herein (including technical and scientific terms) shall have the same meaning as commonly understood by one of ordinary skill in the art to which the various embodiments of this application pertain. Terms (such as those defined in commonly used dictionaries) shall be interpreted as having the same meaning as in their contextual meaning in the relevant technical field and shall not be construed as having an idealized or overly formal meaning, unless clearly defined in the various embodiments of this application.

[0053] The following detailed description of some embodiments of this application is provided in conjunction with the accompanying drawings. Unless otherwise specified, the following embodiments and features can be combined with each other.

[0054] In web applications, slow component loading or unreasonable loading order can lead to prolonged blank screen times, negatively impacting the user experience. For example, when using a bank's app or logging into the official website of a bank or other financial institution, users often have to wait a while for content to appear, resulting in a poor user experience and a negative impression of the bank or other financial institution. Currently, lazy loading, preloading, and asynchronous loading are commonly used to optimize the loading efficiency of page components, but they still have some shortcomings. For instance, they don't completely address the first-screen loading issue: lazy loading and asynchronous loading only postpone the loading of non-first-screen content, without truly solving the first-screen loading speed problem. While preloading can load non-first-screen content in advance, the first-screen content still needs to be loaded after preloading is complete, resulting in a blank screen issue. Unstable loading efficiency: Existing solutions struggle to dynamically adjust loading strategies based on different pages, user devices, and other factors, leading to unstable loading efficiency and potentially causing excessively long loading times for some users, impacting the user experience. Insufficient priority control: Most existing solutions rely on static configuration or simple conditional judgments to determine the loading order, lacking the ability to dynamically adjust component priorities.

[0055] To address at least one of the aforementioned problems in the prior art, this application embodiment adds a first component within the visible area of ​​the currently viewed page to a loading list and a second component outside the visible area to a loading list, calculating the loading order. Then, according to actual needs, the first components are loaded sequentially based on their priority or loading time from lowest to highest. The second components are then loaded sequentially according to this loading order. This method categorizes components into those within and outside the visible area. When browsing the page, only components within the visible area need to be loaded first, thus improving the initial screen loading speed and shortening the white screen time. When the browser page scrolls, the visible area changes, and the above process is repeated. Furthermore, since the loading order of the second components outside the visible area is simultaneously arranged in the loading list when browsing the visible area content, if the browser page scrolls, the components within the changed visible area will also load quickly, greatly reducing the white screen time.

[0056] Before describing the specific embodiments of this application, let me first explain the visible area in the embodiments of this application.

[0057] The visible area in this application refers to the visible area of ​​a webpage or app, specifically the portion of the webpage seen by the user in a browser. This typically refers to the user's visible area, excluding the browser's toolbar, address bar, tab bar, etc. For example, when logging into a bank's official website, the URL area and tools area at the top of the page are not part of the visible area, but the login area, bank news, and convenient services displayed on the page are. The size of the visible area varies across different browsers, devices, and operating systems. For instance, the visible area may be larger on a computer than on a mobile phone, and different browsers also have different visible area sizes.

[0058] The following examples illustrate the method for loading page components.

[0059] Figure 1 A first flowchart of a page component loading method according to an embodiment of this application is shown. Exemplarily, the page component loading method includes the following steps S100 to S400:

[0060] Step S100: Add the first component in the visible area of ​​the currently viewed page to the loading list.

[0061] As an example, when a user is browsing a page, the first component in the visible area is retrieved and added to the loading list. The first component is the component in the visible area of ​​the page that the user is currently browsing.

[0062] Furthermore, before step S100, it is first necessary to distinguish which components are within the visible area and which components are outside the visible area, such as... Figure 2 As shown, steps S110 to S130 are included:

[0063] Step S110: Obtain the position information of all components in the component list of the currently viewed page.

[0064] For example, when a user requests to open a browsing page, the browser retrieves all components in the component list of the currently viewed page, then obtains the position information of all components in the component list, and sends the component position information to the components.

[0065] It's important to note that when you scroll the browser window, the browser triggers a scroll event, which changes the position of components within the visible area. The browser then needs to retrieve the position information of the components within the current browser page and send that position information to the current component.

[0066] Step S120: Compare the position of each component in the component list with the position of the visible area.

[0067] In this step, it is necessary to obtain the location information of the visible area, and then compare the location information of each component in step S110 with the location information of the visible area.

[0068] Step S130: If the sum of the top position of the visible area and the height of the visible area is greater than or equal to the top position of the component, and the sum of the top position of the component and the height of the component is less than or equal to the top position of the visible area, then the current component is designated as the first component within the visible area; otherwise, it is designated as the second component outside the visible area.

[0069] Figure 3 A schematic diagram of the visible area and the first component according to an embodiment of this application is shown, as follows: Figure 3 As shown, both component 1 and component 2 are the first components within the current visible area. As illustrated, the top position of component 1 is less than the sum of the top position of the visible area and the height of the visible area, while the top position of the visible area is greater than the sum of the top position of component 1 and the height of component 1. It should be noted that there can be multiple first components within the visible area; this illustration is merely an example.

[0070] Step S200: Add the second component outside the visible area of ​​the currently viewed page to the list to be loaded and calculate the loading order.

[0071] When browsing a page, only components within the visible area need to be loaded first. The second component outside the visible area is added to the loading list, and then the loading order of components outside the visible area in the loading list is calculated. This prioritizes loading components within the visible area and delays loading components outside the visible area, improving the loading efficiency of components within the visible area and reducing the white screen time of the currently viewed page.

[0072] In one implementation, such as Figure 4 As shown, step S200 includes the following sub-steps:

[0073] Step S210: Determine whether the second component outside the visible area has been loaded.

[0074] Step S220: If yes, obtain the loading time of all second components outside the current visible area, and arrange the loading order in ascending order according to the loading time of the current second components.

[0075] In this step, the loading time of components outside the visible area is the difference between the loading end time and the loading start time of the current component. It should be noted that if multiple components outside the visible area have the same loading time, their loading order can be further arranged according to their preset weight priority.

[0076] Step S230: If not, obtain the weight priority of all second components outside the current visible area, and arrange the loading order according to the current priority of the second components.

[0077] It should be noted that if some of the second components outside the current visible area have been loaded previously, and some have not, in this case, the loading order can be determined according to the previously preset order: first, the components that have been loaded are ordered based on their loading time, and then the components that have not been loaded are ordered based on their weight priority within the second component outside the current visible area. Alternatively, the loading order can be determined by the ratio of previously loaded to previously unloaded components in the current second component; components with a higher ratio are loaded first. For example, if 60% of the components in the current second component have been loaded and 40% have not been loaded, then the loading order of the previously loaded components is first determined by their loading time from lowest to highest, and then the loading order of the previously loaded components is determined by their priority.

[0078] Step S300: Load each of the first components sequentially according to their priority or loading time from low to high.

[0079] In one implementation, such as Figure 5 As shown, step S300 includes the following sub-steps:

[0080] Step S310: Determine whether all the first components are being loaded for the first time.

[0081] Step S320: If yes, obtain the preset weight priority of all the first components currently loaded for the first time, and load the current first components in order of priority.

[0082] In this process, all components on the browsing page have their weights and priorities preset during component rendering. The weights and priorities of these components need to be managed uniformly by the backend management system. When needed, the browser retrieves the weight and priority of the first component in the current visible area from the backend management system, and then loads the first components in the visible area in order of priority.

[0083] Step S330: If not, obtain the loading time of the first component and load the first component in order of increasing loading time.

[0084] In this step, if multiple first components have the same execution time, the priority of each first component with the same execution time is obtained, and each first component is loaded in order of priority.

[0085] It should be noted that if some components of the first component within the currently visible area have been loaded previously, and some have not, then, according to a pre-set schedule, previously loaded components will be loaded first, in ascending order of loading time. Then, previously unloaded components will be loaded in descending order of priority. Alternatively, the loading order can be determined by the ratio of previously loaded to previously unloaded components within the first component. Components with a higher ratio will be loaded first. For example, if 60% of the components in the first component have been loaded and 40% have not, then previously loaded components will be loaded first, in ascending order of loading time, and then previously unloaded components will be loaded in descending order of priority.

[0086] Step S400: Load each of the second components sequentially according to the loading order.

[0087] It should be noted that when scrolling the browser window, the browser will trigger a scroll event, which will change the visible area and the first component in the visible area. At this time, the above process needs to be repeated to load the component.

[0088] As an optional solution, considering that these components may need to be reloaded later, the loading time of these components can be recorded when displaying the loading of components on the current page, so as to serve as a basis or reference for subsequent component loading.

[0089] Exemplary, such as Figure 6 As shown, the method also includes the following steps:

[0090] Step S340: When displaying the currently viewed page, record the loading start time and loading end time of all components in the currently viewed page.

[0091] Step S350: Calculate the loading time of each component based on the loading start time and loading end time of each component.

[0092] Step S360: Save the loading time of each component to the browser cache.

[0093] The following example illustrates the page component loading method of this application embodiment.

[0094] When a browsing page is opened, all components in the component list of the currently browsing page are first retrieved. If all components include component a, component b, component c, component d, component e, and component f, their position information is compared with the position information of the visible area. If a component is within the visible area, it is the first component; otherwise, it is the second component. If components a, b, and c are within the visible area, they are the first components and added to the loading list. Components d, e, and f are the second components and added to the waiting-to-load list. Their loading order is also calculated. Then, the first components (components a, b, and c) within the visible area are loaded. To improve loading efficiency and reduce white screen time, if components a, b, and c have not been loaded before, they are loaded sequentially from high to low according to a preset weight priority scheme. If components a, b, and c have been loaded before, their loading times are obtained and they are loaded sequentially from low to high loading times. Finally, components d, e, and f are loaded sequentially according to the calculated loading order. If the page scrolls, meaning that previously the first components in the visible area included components a, b, and c, after scrolling, the current first components in the visible area may include components c, d, and e, while components a, b, and f are now outside the visible area, the above steps are repeated. It's important to understand that components a, b, c, d, e, and f are just examples; the specific components will be determined based on the actual situation.

[0095] This application embodiment divides the components in the browsing page into a first component within the visible area and a second component outside the visible area. During loading, the first component within the visible area is loaded first based on priority or component loading time. This ensures that components within the visible area are displayed first, reducing page white screen time and improving user experience. Furthermore, when loading the first component within the visible area, two sorting methods are set: priority and loading time. These can be combined when necessary. For the first loading of the current component, components are loaded sequentially according to their priority, resulting in high initial loading efficiency. During subsequent loadings, since the loading times of each component are recorded in the browser cache during previous loadings, only the loading times of each first component in the browser cache need to be retrieved, and they are loaded sequentially from lowest to highest loading time. Even if some components load slightly slower, this embodiment prioritizes loading components with lower loading times. Users can directly see the improved user experience and significantly reduced page white screen time. Additionally, the priority of each component can be set in the backend management system, allowing for dynamic adjustment of the loading order during subsequent maintenance to improve page interactivity.

[0096] Figure 7 A schematic diagram of a page component loading apparatus according to an embodiment of this application is shown. Exemplarily, the page component loading apparatus 100 includes:

[0097] The first addition module 110 is used to add the first component in the visible area of ​​the currently viewed page to the loading list.

[0098] The second addition module 120 is used to add a second component outside the visible area of ​​the currently viewed page to the list to be loaded and calculate the loading order.

[0099] The first loading module 130 is used to load each of the first components sequentially according to their priority or according to the loading time of each of the first components from low to high.

[0100] The second loading module 140 is used to load each of the second components sequentially according to the loading order.

[0101] Furthermore, the page component loading device 100 also includes:

[0102] Module 150 is used to obtain the position information of all components in the component list of the currently viewed page.

[0103] The comparison module 160 is used to compare the position of each component in the component list with the position of the visible area; if the sum of the top position of the visible area and the height of the visible area is greater than or equal to the top position of the component, and the sum of the top position of the component and the height of the component is less than or equal to the top position of the visible area, then the current component is regarded as the first component within the visible area; otherwise, it is regarded as the second component outside the visible area.

[0104] It is understood that the page component loading device in this embodiment corresponds to the page component loading method in the above embodiment, and the options in the above embodiment are also applicable to this embodiment, so they will not be described again here.

[0105] This application also provides a terminal device, exemplary of which includes a processor and a memory, wherein the memory stores a computer program, and the processor executes the computer program to enable the terminal device to perform the functions of the various modules in the above-described page component loading method or page component loading apparatus.

[0106] The processor can be an integrated circuit chip with signal processing capabilities. The processor can be a general-purpose processor, including at least one of a Central Processing Unit (CPU), Graphics Processing Unit (GPU), Network Processor (NP), Digital Signal Processor (DSP), Application-Specific Integrated Circuit (ASIC), Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The general-purpose processor can be a microprocessor or any conventional processor, capable of implementing or executing the methods, steps, and logic block diagrams disclosed in the embodiments of this application.

[0107] The memory can be, but is not limited to, Random Access Memory (RAM), Read Only Memory (ROM), Programmable Read-Only Memory (PROM), Erasable Programmable Read-Only Memory (EPROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), etc. The memory is used to store computer programs, and the processor can execute the computer programs accordingly after receiving execution instructions.

[0108] This application also provides a readable storage medium for storing the computer program used in the aforementioned terminal device.

[0109] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative; for example, the flowcharts and block diagrams in the accompanying drawings load the architecture, functions, and operations of possible implementations of apparatus, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that, in alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, and combinations of blocks in the block diagram and / or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0110] In addition, the functional modules or units in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0111] If the aforementioned functions are implemented as software functional modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, essentially, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a smartphone, personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0112] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application.

Claims

1. A method for loading page components, characterized in that, include: Get the position information of all components in the component list of the currently viewed page; Compare the position of each component in the component list with the position of the visible area; If the sum of the top position of the visible area and the height of the visible area is greater than or equal to the top position of the component, and the sum of the top position of the component and the height of the component is less than or equal to the top position of the visible area, then the current component is regarded as the first component within the visible area; otherwise, it is regarded as the second component outside the visible area. Add the first component in the visible area of ​​the currently viewed page to the loading list; Add the second component outside the visible area of ​​the currently viewed page to the list to be loaded and calculate the loading order; The first components are loaded sequentially according to their priority or loading time from low to high. Each of the second components is loaded sequentially according to the loading order; wherein, when the browser window is scrolled, the browser will trigger a scroll event, at which time the visible area will change, and the first component in the visible area will also change. At this time, the above process needs to be repeated to load the components. The step of loading each first component sequentially according to its priority or loading time from low to high includes: determining whether all first components are being loaded for the first time; if so, obtaining the preset weight priority of all first components being loaded for the first time, and loading the current first component sequentially according to its priority; if not, obtaining the loading time of the current first component, and loading the current first component sequentially according to its loading time from low to high; wherein, whether it is being loaded for the first time is determined by whether there is a corresponding page component loading time record in the browser cache; Before loading each of the first components sequentially from low to high based on their loading times, the method further includes: recording the loading start time and loading end time of all components in the current browsing page when displaying the current browsing page; calculating the loading time of each component based on its loading start time and loading end time; and saving the loading time of each component to the browser cache. The process of loading each of the first components sequentially from low to high loading time based on all the first components also includes: If multiple first components have the same execution time, then obtain the priority of each first component with the same execution time, and load the first components in order of priority. The step of adding the second component outside the visible area of ​​the currently viewed page to the loading list and calculating the loading order includes: determining whether the second component outside the visible area has been loaded; if so, obtaining the loading time of all the second components outside the visible area and arranging them in order of loading time from low to high; if not, obtaining the weight priority of all the second components outside the visible area and arranging them in order of loading time from high to low; wherein, if there are multiple second components with the same loading time, obtaining the priority of each second component with the same loading time and arranging them in order of loading time from high to low.

2. A page component loading device, characterized in that, include: The acquisition module is used to obtain the position information of all components in the component list of the currently viewed page; The comparison module is used to compare the position of each component in the component list with the position of the visible area; If the sum of the top position of the visible area and the height of the visible area is greater than or equal to the top position of the component, and the sum of the top position of the component and the height of the component is less than or equal to the top position of the visible area, then the current component is regarded as the first component within the visible area; otherwise, it is regarded as the second component outside the visible area. The first add module is used to add the first component in the visible area of ​​the currently viewed page to the loading list; The second addition module is used to add second components outside the visible area of ​​the currently viewed page to the list to be loaded and calculate the loading order; The first loading module is used to load each of the first components sequentially according to their priority or according to the loading time of each of the first components from low to high. The second loading module is used to load each of the second components sequentially according to the loading order; wherein, when the browser window is scrolled, the browser will trigger a scroll event, at which time the visible area will change, and the first component in the visible area will also change. At this time, the above process needs to be repeated to load the components. The step of loading each first component sequentially according to its priority or loading time from low to high includes: determining whether all first components are being loaded for the first time; if so, obtaining the preset weight priority of all first components being loaded for the first time, and loading the current first component sequentially according to its priority; if not, obtaining the loading time of the current first component, and loading the current first component sequentially according to its loading time from low to high; wherein, whether it is being loaded for the first time is determined by whether there is a corresponding page component loading time record in the browser cache; Before loading each of the first components sequentially from low to high based on their loading times, the method further includes: recording the loading start time and loading end time of all components in the current browsing page when displaying the current browsing page; calculating the loading time of each component based on its loading start time and loading end time; and saving the loading time of each component to the browser cache. The process of loading each of the first components sequentially from low to high loading time based on all the first components also includes: If multiple first components have the same execution time, then obtain the priority of each first component with the same execution time, and load the first components in order of priority. The step of adding the second component outside the visible area of ​​the currently viewed page to the loading list and calculating the loading order includes: determining whether the second component outside the visible area has been loaded; if so, obtaining the loading time of all the second components outside the visible area and arranging them in order of loading time from low to high; if not, obtaining the weight priority of all the second components outside the visible area and arranging them in order of loading time from high to low; wherein, if there are multiple second components with the same loading time, obtaining the priority of each second component with the same loading time and arranging them in order of loading time from high to low.

3. A terminal device, characterized in that, The terminal device includes a processor and a memory, the memory storing a computer program, and the processor executing the computer program to implement the page component loading method according to any one of claims 1-2.

4. A readable storage medium, characterized in that, It stores a computer program that, when executed on a processor, implements the page component loading method according to any one of claims 1-2.

Images