Dynamic page display method, device and electronic device

By determining the first-screen visible components and performing integrity verification during the dynamic page loading process, the problem of component ‘jumping’ or page ‘flashing’ is solved, achieving faster page loading and better user experience.

CN114840793BActive Publication Date: 2025-01-21ALIBABA (CHINA) CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202210335808.X
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-03-31
Publication Date
2025-01-21
Estimated Expiration
2042-03-31

AI Technical Summary

Technical Problem

During the dynamic page loading process, due to the uncertain time and the data height of each component return, the components may have "jumping" or "flashing" on the page, affecting the user experience.

Method used

The concept of 'above-the-screen visual components' is proposed. When receiving data returned by each component, it is determined that the component that has returned data and the data is not empty is a first-screen visible component, and performs a first-screen integrity check. If the verification passes and other components have returned data and are empty, the first screen display time point is determined and the data of the first screen visual component is displayed as a whole.

Benefits of technology

It effectively avoids component 'jumping' or page 'flashing' phenomena, while shortening page loading time and improving user experience.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114840793B_ABST
    Figure CN114840793B_ABST
Patent Text Reader

Abstract

The embodiment of the present application discloses a dynamic page display method, device and electronic device, the method comprising: in response to a request to display a target dynamic page, initiating a call to the interfaces corresponding to multiple components in the page frame configuration information associated with the target dynamic page; in the process of receiving the return data of each component, determining multiple first-screen visual components; each time a new first-screen visual component is determined, updating the parameter information of the first-screen visual component that has been determined, and performing a first-screen integrity check based on the updated parameter information; if the first-screen integrity check passes, and other components whose sorting positions meet the conditions in the configuration information have returned data and the data is empty, then starting to display the return data corresponding to each first-screen visual component as a whole. Through the embodiment of the present application, it is possible to avoid component "jumping" or page "flashing" during page loading while maintaining the loading speed.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the technical field of dynamic page display, and in particular to a dynamic page display method, device and electronic device. Background Art

[0002] Some dynamic pages may include multiple components, each of which may need to obtain data through different channels, and the timing of returning data from each channel is uncertain. Even if a channel returns data, the data may be empty (in this case, there is no need to display the component on the page). Even if data is returned and is not empty, the height of the specific data on the page is not fixed. Therefore, this may cause "jumping" of components or "flashing" of the page during page loading or cache refresh.

[0003] For example, in a specific page, the components will be sorted in advance. If these components return data at the same time and the data is not empty, the data corresponding to each component can be displayed in sequence according to the preset order. However, the actual situation is that when it is necessary to display a page, although the interfaces of multiple components can be called at the same time, the time when each component returns data may be different. For example, the third component may return data first and it is not empty. Since the first and second components have not returned data yet, it is impossible to predict whether the data returned by these two components is empty, and it is also impossible to accurately predict the height of the data in the page, it is impossible to reserve display positions for these two components in the page. Therefore, the practice in the prior art is usually: the data of the component that returns data first and is not empty (for example, component 3) is displayed at the first position in the page. If component 1 returns data and it is not empty later, then because the data of component 1 needs to be displayed in the first position, the effect seen by the user may be that the data of component 1 is inserted into the page, occupying the position where the data of component 3 was originally located, and the data of component 3 moves downward at the same time. This is the so-called component "jumping" or page "flash" phenomenon.

[0004] Another approach in the prior art is to refresh the entire page, that is, wait until all components have obtained templates and data before refreshing the entire page. In this way, although there will be no component "jumping" or page "flash" phenomenon, the page loading speed depends on the slowest component interface, and the overall page visibility time will be longer.

[0005] Therefore, how to avoid component "jumping" or page "flashing" during page loading while maintaining loading speed has become a technical problem that needs to be solved by those skilled in the art. Summary of the invention

[0006] The present application provides a dynamic page display method, device and electronic device, which can avoid component "jumping" or page "flashing" during the page loading process while maintaining the loading speed.

[0007] This application provides the following solutions:

[0008] A dynamic page display method, comprising:

[0009] In response to a request to display a target dynamic page, initiating a call to interfaces corresponding to multiple components in page frame configuration information associated with the target dynamic page;

[0010] In the process of receiving the return data of each component, a plurality of first screen visual components are determined, wherein the first screen visual components are components that have returned data and the data is not empty and whose sorting positions in the configuration information meet the conditions;

[0011] Whenever a new first-screen visual component is determined, the parameter information of the first-screen visual component is updated, and the first-screen integrity check is performed based on the updated parameter information;

[0012] If the first screen integrity check passes, and other components whose sorting positions meet the conditions in the configuration information have returned data and the data is empty, the current moment is determined as the first screen display time point, and the returned data corresponding to each first screen visual component is displayed as a whole.

[0013] A dynamic page display device, comprising:

[0014] A component call initiating unit, configured to initiate a call to interfaces corresponding to multiple components in the page frame configuration information associated with the target dynamic page in response to a request for displaying the target dynamic page;

[0015] A first screen visual component determination unit is used to determine multiple first screen visual components in the process of receiving return data from each component, wherein the first screen visual components are components that have returned data and the data is not empty and whose sorting position in the configuration information meets the conditions;

[0016] A first screen integrity check unit, used for updating parameter information of the first screen visual component determined each time a new first screen visual component is determined, and performing a first screen integrity check according to the updated parameter information;

[0017] The first screen display timing determination unit is used to determine the current moment as the first screen display time point if the first screen integrity check passes and other components whose sorting positions meet the conditions in the configuration information have returned data and the data is empty, and start to display the returned data corresponding to each first screen visual component as a whole.

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

[0019] An electronic device, comprising:

[0020] one or more processors; and

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

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

[0023] Through the embodiment of the present application, the concept of the first screen visual component is proposed. In the process of receiving the return data of each component, the component that has returned data and the data is not empty and the sorting position in the configuration information meets the conditions is determined as the first screen visual component. Since the specific first screen visual components are determined when the data has been returned and the data is not empty, after the first screen integrity check is performed according to the parameters of the first screen visual components that have been determined, when it is determined that the first screen display time has arrived, the data of each first screen visual component has been returned. Therefore, it is sufficient to directly display each first screen visual component as a whole, and there is no need to display it immediately; and because before the specific first screen display time arrives, the components that are ranked relatively high but not used as the first screen visual components have also returned data, but the data is empty and does not need to be displayed. Therefore, after the first screen display is performed according to the above timing, these components will not affect the first screen display. That is, after passing the first screen integrity check, the components displayed on the first screen will not change again, thereby avoiding the phenomenon of component "jumping" or page "flashing". In addition, as long as the first screen completeness meets the conditions and other components that meet the sorting conditions have returned data, the first screen can be displayed, instead of waiting for all components in the page to return data, so the page loading time can also be shortened. In this way, a balance can be achieved between the loading performance and user experience of the instant refresh solution and the overall refresh solution.

[0024] In a preferred embodiment, the first screen visual components can be determined and the integrity of the first screen can be verified by means of a sliding window, which has the advantages of high efficiency.

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

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

[0027] Figure 1 It is a schematic diagram of the multiple components included in the product details page;

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

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

[0030] Figure 4 is a schematic diagram of a device provided in an embodiment of the present application;

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

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

[0033] In order to facilitate understanding of the specific implementation scheme provided by the embodiment of the present application, the following first takes the product details page in the product information service system as an example to introduce the dynamic page of multi-asynchronous data. In the product details page, the specific information displayed may be composed of information of multiple components, for example, Figure 1 As shown, it may include a Banner component 11 for displaying the main image, a price component 12, a marketing component 13 (mainly used to display the activity information, coupon information, etc. of the current product), a specification component 14, a title component 15, a label component 16, a delivery component 17, a service component 18, etc. In addition, some product detail pages may also include a list component (mainly used to display the ranking of the current product in a certain list), etc. The interfaces of these components are usually different. When loading or refreshing the product detail page, it is necessary to call data from the interfaces of these components respectively, and then organize the data returned by each component according to a certain template and display it on the specific product detail page.

[0034] Usually, the details page framework is pre-generated, and the specific components to be displayed and the order of arrangement between components are configured in the framework. However, the data of different products under each component may be different. For example, a product may not be on any list, and the data about the product returned by the "List" component will be empty. For such components that return empty data, there is no need to display them on the details page of the product. For example, Figure 1 In the product detail page shown, the "list" component is not displayed. In other words, in the eyes of consumers, some product detail pages may have "list" components, while others do not. But in fact, the detail pages of these products are all generated based on the same page framework, but some products do not have "list" related data, so there is no "list" component related information in the product detail page, etc. In short, it is uncertain whether the data returned by each component on the same page is empty. In addition, for components that can return data and are not empty, the height that the specific data needs to occupy on the page is usually not fixed. For example, for the same "service" component, some products may support more services. When displaying these service information on the product detail page, they may need to occupy a higher screen height (the components are usually arranged from top to bottom in the height direction), while some products only support a few services, so they may occupy a lower height on the page, etc.

[0035] In addition, the time when each component returns data may also be different. Due to the existence of the above uncertainties, it is difficult to reserve display space for a component in the page. For example, suppose that in a page framework (for example, a product details page framework), a total of 20 components are configured, and the order from front to back is component 1, 2, 3, etc. When it is necessary to display a page of a specific object (for example, a specific product) based on the page framework, calls can be made to multiple components in parallel to obtain the specific data of the current product under each component. Afterwards, suppose that component 3 returns the data first and it is not empty, while components 1 and 2 have not returned yet. At this time, since it is impossible to predict whether there is data for the current product under components 1 and 2, and the specific screen height required if there is data, it is impossible to reserve display space for components 1 and 2 in the page, and the data of component 3 can only be displayed in the original position of component 1. However, later, if the data returned by component 1 is also received at a certain moment and it is not empty, the data of component 3 needs to be moved down, and the data of component 1 needs to be displayed above component 3, and so on.

[0036] In view of the above situation, the embodiment of the present application provides a new dynamic page display scheme. In this scheme, considering that in the process of page display, since the content of a page is usually relatively large, it is necessary to divide it into multiple screens to complete the display of all the content. However, since the first screen content is the first content viewed by the user, the first screen display efficiency usually determines the page display efficiency that the user can feel. For this reason, in the embodiment of the present application, the concept of "first screen visual component" is proposed, that is, if multiple first screen visual components can be determined in the process of asynchronously returning data from each component, and these first screen visual components can meet the first screen integrity check, it can be considered that the first screen display time has arrived, and at this time, the first screen can be refreshed and displayed. In other words, in the embodiment of the present application, it is necessary to find a time point at which the data of multiple components has been obtained and is not empty, and after this time point, the display of these components will not be affected by other non-first screen components, then this time point can be used as the first screen display time, and the data corresponding to the multiple first screen visual components that have been determined will be displayed. In this way, the page can be refreshed and displayed only when the first screen integrity requirement is met, without waiting for all components to return data, thus shortening the page visibility time. At the same time, since the first screen is displayed after the first screen integrity requirement is met, the content in the first screen will not change after the display, and there will be no component "jumping" or page "flashing" and other phenomena.

[0037] In the specific implementation, in order to realize the integrity check of the first screen, there are multiple specific implementation methods. For example, in one method, it can be realized by a sliding window method, or it can also be realized by an array method, and so on.

[0038] From the perspective of system architecture, see Figure 2 , the embodiment of the present application can provide corresponding page display functions for a variety of applications with dynamic page display requirements with multiple asynchronous data sources or specific modules in the application (for example, the product details module in the product information service system). Through this function, after receiving a display request for the target dynamic page, a call can be initiated to the interfaces of multiple components configured in the page framework. For example, in the product details page scenario, specific components may include price components, title components, list components, service components, and so on. In the process of receiving the return data of each component, multiple first-screen visual components can be determined, and when a new first-screen visual component is determined, the parameter information of the first-screen visual component that has been determined is updated, and the first-screen integrity check is performed based on the updated parameter information. If the check passes, the time point when the first-screen display can be performed can be determined, and the data returned by each first-screen visual component is displayed as a whole.

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

[0040] First, the present application embodiment provides a dynamic page display method, see Figure 3 , the method may include:

[0041] S301: In response to a request for displaying a target dynamic page, a call is initiated to interfaces corresponding to multiple components in page frame configuration information associated with the target dynamic page.

[0042] Specifically, after receiving a request to display the target dynamic page (which can be a load display, or a refresh display, etc.), for example, a user initiates an access request to the details page of a specific product in the application client of the product information service system, etc., parallel calls can be initiated to the interfaces corresponding to multiple components in the page frame configuration information associated with the target dynamic page. In other words, a specific target dynamic page is usually associated with a page frame, and the configuration information of this framework will configure which specific components and their interfaces need to be loaded. For example, if 20 components are configured in the page frame, you can use the specific data object associated with the current target dynamic page (for example, a specific product) as a parameter to initiate calls to the interfaces of these 20 components respectively to obtain the data returned by each component.

[0043] S302: in the process of receiving the return data of each component, determining a plurality of first screen visual components, wherein the first screen visual components are components that have returned data and the data is not empty and whose sorting positions in the configuration information meet the conditions;

[0044] After initiating a call to each component interface, the specific component will return data asynchronously, and different components may return at different times. In an embodiment of the present application, multiple first-screen visual components can be determined in the process of each component returning data. The so-called first-screen visual components are components that have been determined to have returned data and are not empty, and whose sorting position in the configuration information meets the conditions (for example, relatively front).

[0045] In the specific implementation, in order to determine the above-mentioned visual components on the first screen, there can be a variety of specific implementation methods. For example, in one method, a sliding window can be created, and the length of the sliding window can be in units of the number of components. The sliding window can have an initial length, and it can be determined whether the sliding window needs to be expanded later based on the return of specific components. Among them, according to the different first screen integrity verification methods used later, the initial length of the sliding window can also be set in a variety of ways. For example, in one method, an integrity check can be performed based on the estimated maximum number of components that the first screen can accommodate. At this time, the estimated number of components can be used as the initial value of the sliding window. For example, assuming that it is estimated that the first screen of the current target dynamic page can accommodate a maximum of 10 components, the initial length of the sliding window can be 10.

[0046] After determining the initial length of the sliding window, the component ranked first in the page frame configuration information can be used as the starting point of the sliding window, and the multiple components in the page frame configuration information can be divided into components within the sliding window and components outside the sliding window. In other words, since it is necessary to determine the first screen visual components through the sliding window, and the components ranked higher in the page frame configuration information should be displayed on the first screen, it is possible to start from the component ranked first as the starting point of the East China window. In this way, assuming that the initial length of the sliding window is 10, the first 10 components ranked in the page frame configuration information will become the components located within the sliding window, and the 11th and subsequent components will be components outside the sliding window, and so on. In this way, the components within the sliding window can meet the conditions in the sorting position, and the first screen visual components can be determined based on the components within the sliding window later, so that the determined first screen visual components meet the requirements in the sorting position.

[0047] After determining the components inside and outside the sliding window, you can start to make a judgment after receiving the return data of each component. The specific judgment process can be, first determine whether the component that currently returns data is located in the current sliding window. If not, exit directly, that is, the component outside the sliding window will not become the first screen visual component. If the component that currently returns data is located in the sliding window, it can be further determined whether the data returned by the component is empty. If not, it can become a first screen visual component, and the number of first screen visual components that have been determined is increased by one. If the component that currently returns data is located in the sliding window, but the returned data is empty, that is, the component has no specific data to display, then there is no need to display the content related to the component in the current dynamic page. At this time, it is equivalent to a component that may become a first screen visual component is missing in the current sliding window. Therefore, the sliding window can be expanded, that is, the length of the sliding window is increased by one, so that the first component originally located outside the sliding window enters the sliding window.

[0048] For example, the original initial length of the sliding window is 10, that is, the 1st to 10th components are in the sliding window. After the 5th component returns data, it is found that the data returned by the component is empty. At this time, the length of the sliding window can be increased by 1 to 11, so that the 11th component becomes the component in the sliding window.

[0049] After adding the components outside the original sliding window to the sliding window, it can be first determined whether the component has returned data. If it has not returned data, it can continue to wait for a new component to return data before making a judgment; if it has returned data, it can be determined whether the returned data is empty. If it is not empty, the component is determined as a first-screen visual component, and the number of first-screen visual components that have been determined is increased by one. If the data returned by the component is empty, the sliding window can be increased by one. For example, continuing with the above example, assuming that after the 11th component is added to the sliding window, it is found that the 11th component has returned data, but the data is empty, the length of the sliding window can be expanded to 12, the 12th component is added to the sliding window, and the judgment is made in the same way as the 11th component, and so on. In this way, multiple first-screen visual components can be determined. When performing the first-screen integrity check later, it can be performed based on the number of first-screen visual components determined. For example, if the number of first-screen visual components has reached 10, it can be used as the time point for the first-screen display.

[0050] The above introduces the method of determining the specific sliding window and the first-screen visual components when the first-screen integrity check is performed based on the estimated maximum number of components that the first screen can accommodate. In another way, the first-screen integrity check can also be performed based on the screen height. In other words, for a terminal device, the specific screen height is fixed. Therefore, when displaying the target dynamic page, the screen height can be determined based on the information of the current terminal device. After each first-screen visual component is determined, the screen height required for the first-screen visual component can also be calculated. Therefore, the screen height required to be occupied by multiple first-screen visual components that have been determined can be calculated. If the height is greater than or equal to the total screen height, the screen integrity condition is met.

[0051] In this case, the initial length of the sliding window can be set to one, and then the component ranked first in the page frame configuration information is still used as the starting point of the sliding window. That is to say, in the initial state, only the component ranked first is located in the sliding component. After the component returns data, it is determined whether the data returned by the component is empty. If it is empty, the length of the sliding window is increased by one, so that the second component is added to the sliding window; if the data returned by the component ranked first is not empty, the component is directly determined as the first screen visible component; otherwise, the length of the sliding window can also be increased by one, so that the second component is added to the sliding window. After the second component is added to the sliding window, it can be first determined whether the second component has returned data. If it has returned and the data is not empty, the second component is also determined as the first screen visible component. If the data returned by the second component is empty, the length of the sliding window is continued to be increased by one, and the third component is added to the sliding window; if the second component has not returned data, wait for the second component to return data before performing the aforementioned judgment process, and so on.

[0052] S303: Whenever a new first-screen visual component is determined, the parameter information of the first-screen visual component that has been determined is updated, and a first-screen integrity check is performed based on the updated parameter information.

[0053] S304: If the integrity check of the first screen passes, and other components whose sorting positions meet the conditions in the configuration information have returned data and the data is empty, the current moment is determined as the first screen display time point, and the return data corresponding to each first screen visual component is displayed as a whole.

[0054] Since the judgment is made each time a component returns data, the specific first screen visual component is gradually determined, and one first screen visual component is determined each time. Every time a new first screen visual component is determined, the parameter information of the first screen visual component can be updated. The parameter information here can be related to the specific first screen integrity check method. For example, if the integrity check is performed based on the number of visual components that have been determined as the first screen, the parameter information can be the number of visual components that have been determined as the first screen. At this time, when the first screen visual component is determined by the sliding window method, the initial length of the specific sliding window is also determined based on the estimated maximum number of components that the first screen can accommodate. At this time, when performing the first screen integrity check, it can be judged whether the updated number of visual components that have been determined as the first screen reaches the estimated maximum number of components that the first screen can accommodate. If it reaches, the first screen integrity check passes.

[0055] That is to say, in the initial state, the first n components are added to the sliding window. Every time a component returns data, it can be determined whether the component is in the sliding window. If so, the specific data returned by the component is determined. At this time, it can be divided into the following situations:

[0056] 1. If the data returned by the current component is not empty, the component is determined to be a visual component on the first screen. At this time, the number of components that have been determined to be visual components on the first screen can be increased by one, and it can be determined whether the updated number of components that have been determined to be visual components on the first screen has reached the previously estimated maximum number of components that the first screen can accommodate. If so, the first screen integrity check has passed, and the time for first screen display has arrived. Each first screen visual component can be displayed as a whole on the first screen. If the updated number of components that have been determined to be visual components on the first screen has not yet reached the previously estimated maximum number of components that the first screen can accommodate, continue to wait for other components to return data before making a judgment;

[0057] 2. If the data returned by the current component is empty, the sliding window length can be increased by 1, so that the first component that was previously outside the sliding window can be added to the sliding window. For example, if the initial length of the sliding window is 10, the 11th component can be added to the sliding window after the length is increased by 1. At this time, the data return status of the 11th component can be judged, which can be divided into the following situations:

[0058] 2.1. If the 11th component has returned data, and the data is not empty, then the 11th component is determined as the first-screen visual component. At this time, the number of components that have been determined as the first-screen visual components can also be increased by one, and it can be determined whether the updated number of components that have been determined as the first-screen visual components has reached the previously estimated maximum number of components that the first screen can accommodate. If it has reached it, the first-screen integrity check has passed, and the time for first-screen display has arrived. Each first-screen visual component can be displayed as a whole on the first screen. If the updated number of components that have been determined as the first-screen visual components has not yet reached the previously estimated maximum number of components that the first screen can accommodate, continue to wait for other components to return data before making a judgment;

[0059] 2.2. If the 11th component has returned data but the data is empty, the length of the sliding window can be increased by 1, so that the second component that was previously outside the sliding window can be added to the sliding window, that is, the 12th component is also added to the sliding window, and the data return status of the 12th component is judged in the same way as the 11th component;

[0060] 2.3. If the 11th component has not returned data, the current judgment process is terminated, so that the judgment process can be triggered again when other components in the sliding window return data, and whether the first screen display time has arrived is re-judged.

[0061] The same process is repeated until the number of components that have been determined to be visible on the first screen reaches the previously estimated maximum number of components that the first screen can accommodate. This is the time to display the components on the first screen.

[0062] It should be noted here that since the maximum number of components that the first screen can accommodate is estimated, it may happen that the sum of the screen heights ultimately required to be occupied by the various first-screen visual components is greater than the first-screen height. At this time, the data of some of the first-screen visual components that are sorted later can be displayed on the second screen without affecting the display of the first screen.

[0063] In addition, if the integrity check of the first screen is performed based on the sum of the screen heights that the visual components that have been determined to be the first screen need to occupy, then each time a visual component that has been determined to be the first screen is determined, the parameter information of the visual components that have been determined to be the first screen that is updated can specifically be the sum of the screen heights that the visual components that have been determined to be the first screen need to occupy. That is to say, in the initial state, the initial length of the sliding window is 1, and only the component that ranks first is in the sliding window. After the component that ranks first returns data, if the returned data is empty, the length of the sliding window can be increased by one, so that the second component can be added to the sliding window. If the data returned by the component ranked first is not empty, the component is directly determined as the first-screen visual component, and the sum of the screen heights required to be occupied by the components determined as the first-screen visual components is updated; then, it is determined whether the sum of the screen heights required to be occupied by the components determined as the first-screen visual components is greater than or equal to the screen height. If so, the first-screen display is directly performed; otherwise, if the sum of the screen heights required to be occupied by the components determined as the first-screen visual components is less than the screen height, the sliding window length can also be increased by one, so that the second component can be added to the sliding window.

[0064] After the second component is added to the sliding window (the data returned by the first component is empty, or after the first component becomes the first visible component, the screen height required for the data returned by the first component is less than the screen height), it can be determined whether the second component has returned data. At this time, there may be the following situations:

[0065] 1. If the second component has returned data and the data is not empty, the second component is also determined as the first-screen visual component. After updating the sum of the screen heights required to be occupied by the components that have been determined as the first-screen visual components, continue to determine whether the sum of the screen heights required to be occupied by the components that have been determined as the first-screen visual components is greater than or equal to the screen height. If so, directly display it on the first screen. Otherwise, if the sum of the screen heights required to be occupied by the components that have been determined as the first-screen visual components is less than the screen height, the sliding window length can be increased by one to add the third component to the sliding window.

[0066] 2. If the second component has returned data, but the returned data is empty, continue to increase the sliding window length by one, add the third component to the sliding window, and judge the data return status of the third component;

[0067] 3. If the second component has not returned data, end the current judgment process, wait for the second component to return data, and then re-trigger the previous judgment process.

[0068] The same process is repeated until it is determined that the sum of the screen heights required to be occupied by the visual components on the first screen is greater than or equal to the screen height, and then the first screen display can be used.

[0069] In short, whether the integrity check of the first screen is performed based on the number of visual components on the first screen or based on the screen height, a judgment is made after each data returned by a component is received. If the target component of the current returned data is a component within the sliding window and the returned data is not empty, the component can be determined as the visual component on the first screen. If the target component of the current returned data is a component within the sliding window, but the returned data is empty, the length of the sliding window is expanded so that the first component originally located outside the sliding window is added to the sliding window, and a judgment is made based on whether the component newly added to the sliding window has returned data and whether it is empty.

[0070] Specifically, if the component newly added to the sliding window has not returned data, the current judgment process is terminated, so that the judgment process can be triggered again when other components in the sliding window return data, and whether the first screen display time has arrived can be re-judged.

[0071] If the component newly added to the sliding window has returned data and the data is not empty, the component parameter information that is determined to be able to display data on the first screen can be updated, and it can be determined whether the updated parameter information meets the first screen refresh condition. If so, the first screen refresh display is started, otherwise the current judgment process is terminated, so that the judgment process can continue to be triggered when other components in the sliding window return data, and it can be re-determined whether the time for first screen display has arrived.

[0072] If the component newly added to the sliding window has returned data and the data is empty, the length of the sliding window will continue to be expanded so that the next component originally outside the sliding window can be added to the sliding window, and the judgment and processing will continue based on whether the component newly added to the sliding window has returned data and whether the data is empty.

[0073] In the above manner, in the process of receiving the return data of each component, the components that have returned data and the data is not empty and the sorting position in the configuration information meets the conditions are determined as the first screen visual components. Since the specific first screen visual components are determined when the data has been returned and the data is not empty, after the first screen integrity check is performed according to the parameters of the first screen visual components that have been determined, when it is determined that the first screen display time has arrived, the data of each first screen visual component has been returned. Therefore, it is sufficient to directly display each first screen visual component as a whole, and there is no need for immediate display; and because before the specific first screen display time arrives, the components that are ranked relatively high but not used as first screen visual components have also returned data, but the data is empty and does not need to be displayed. Therefore, after the first screen display is performed according to the above timing, these components will not affect the first screen display. That is, after passing the first screen integrity check, the components displayed on the first screen will not change again, thereby avoiding the phenomenon of component "jumping" or page "flashing". In addition, as long as the first screen completeness meets the conditions and other components that meet the sorting conditions have returned data, the first screen can be displayed, instead of waiting for all components in the page to return data, so the page loading time can also be shortened. In this way, a balance can be achieved between the loading performance and user experience of the instant refresh solution and the overall refresh solution.

[0074] In a preferred embodiment, the first screen visual components can be determined and the integrity of the first screen can be verified by means of a sliding window, which has the advantages of high efficiency.

[0075] It should be noted here that, in the specific implementation, an array with the same length as the total number of components can be used to save the status of all components instead of the sliding window. Each time a component obtains data, the loading status of the component is saved in the array, and then the loading status of all components is traversed from the beginning to determine whether the conditions for loading the first screen are met.

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

[0077] Corresponding to the above method embodiment, the present application embodiment also provides a dynamic page display device, see Figure 4 , the device may include:

[0078] The component call initiating unit 401 is used to initiate a call to the interfaces corresponding to the multiple components in the page frame configuration information associated with the target dynamic page in response to a request to display the target dynamic page;

[0079] The first screen visual component determination unit 402 is used to determine multiple first screen visual components in the process of receiving the return data of each component, wherein the first screen visual components are components that have returned data and the data is not empty and whose sorting position in the configuration information meets the conditions;

[0080] The first screen integrity check unit 403 is used to update the parameter information of the first screen visual component determined each time a new first screen visual component is determined, and perform the first screen integrity check according to the updated parameter information;

[0081] The first screen display timing determination unit 404 is used to determine the current moment as the first screen display time point if the first screen integrity check passes, and other components that meet the sorting conditions in the configuration information have returned data and the data is empty, and start to display the returned data corresponding to each first screen visual component as a whole.

[0082] Specifically, the first screen visual component determination unit may include:

[0083] A sliding window creation subunit, used to determine an initial length of the sliding window, where the initial length is in units of the number of components;

[0084] A component type classification subunit is used to classify multiple components in the page frame configuration information into components within the sliding window and components outside the sliding window, taking the component ranked first in the page frame configuration information as the starting point of the sliding window;

[0085] A first screen visual component determination subunit is used to determine whether the target component is a component in the sliding window after receiving the data return result of one of the target components, and if so, and the data returned by the target component is not empty, determine it as the first screen visual component;

[0086] A first sliding window expansion processing unit is used to expand the length of the sliding window if the data returned by the target is empty, so as to add the first component originally located outside the sliding window into the sliding window, and to perform a judgment process according to whether the component newly added to the sliding window has returned data and whether it is empty, so as to determine whether to determine the component newly added to the sliding window as a first screen visual component, or to continue to expand the length of the sliding window, or to end the current judgment process;

[0087] The first ending unit is used to end the current judgment process if the target component of the currently returned data is a component outside the sliding window.

[0088] The sliding window creation subunit can be specifically used for:

[0089] estimating the maximum number of components that can be accommodated on the first screen of the target dynamic page, and determining the estimated number of components as the initial length of the sliding window;

[0090] The parameter information of the visual components determined to be the first screen includes: the number of the visual components determined to be the first screen;

[0091] At this time, the first screen integrity verification unit can be specifically used to:

[0092] It is determined whether the number of updated visual components that have been determined to be the first screen reaches the estimated maximum number of components that the first screen can accommodate. If so, the first screen integrity check passes, and it is determined that the first screen display conditions are met at the current moment.

[0093] In addition, in the above case, the device may further include:

[0094] The second ending unit is used to end the current judgment process if the updated parameter information fails to pass the first screen integrity check, so as to continue to trigger the judgment process when other components in the sliding window return data, and re-judge whether the first screen display time has arrived.

[0095] In another way, the sliding window creation subunit can be used specifically for:

[0096] Setting the initial length of the sliding window to one;

[0097] At this time, the parameter information of the first-screen visual component determined includes: the sum of the screen heights required to be occupied by the first-screen visual component determined;

[0098] The first screen integrity check can be specifically used for:

[0099] Determine the screen height required to be occupied by the data returned by the target component, and increase the screen height required to be occupied by the data returned by the target component based on the current value of the sum of the screen heights required to be occupied by the visual components on the first screen;

[0100] Determine whether the sum of the updated screen heights is greater than or equal to the total screen height. If so, the first screen integrity check passes.

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

[0102] The second sliding window expansion processing unit is used to expand the length of the sliding window if the sum of the screen heights required to be occupied by the updated first-screen visual components is less than the total screen height, so as to add the first component originally located outside the sliding window into the sliding window, and to judge and process whether the component newly added to the sliding window has returned data and whether it is empty.

[0103] Specifically, the first sliding window enlargement processing unit or the second sliding window enlargement processing unit can be used to:

[0104] If the component newly added to the sliding window has not returned data, the current judgment process is terminated, so that the judgment process can be triggered again when other components in the sliding window return data, and whether the first screen display time has arrived can be re-judged.

[0105] Alternatively, if the component newly added to the sliding window has returned data and the data is not empty, the component newly added to the sliding window is determined as a first-screen visual component, and the parameter information determined as the first-screen visual component is updated, and a first-screen integrity check is performed based on the updated parameter information. If the first-screen integrity check passes, the current moment is determined as the first-screen display time point, otherwise the current judgment process is terminated, so as to continue to trigger the judgment process when other components in the sliding window return data, and re-judge whether the first-screen display time has arrived.

[0106] Alternatively, if the component newly added to the sliding window has returned data and the data is empty, the length of the sliding window continues to be expanded so that the next component originally outside the sliding window can be added to the sliding window, and the judgment and processing are continued based on whether the component newly added to the sliding window has returned data and whether the data is empty.

[0107] The target dynamic page includes: a detail page of the target product.

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

[0109] And an electronic device, comprising:

[0110] one or more processors; and

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

[0112] in, Figure 5 The architecture of an electronic device is exemplarily shown. For example, device 500 can be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, an aircraft, etc.

[0113] Reference Figure 5, device 500 may include one or more of the following components: a processing component 502 , a memory 504 , a power component 506 , a multimedia component 508 , an audio component 510 , an input / output (I / O) interface 512 , a sensor component 514 , and a communication component 516 .

[0114] The processing component 502 generally controls the overall operation of the device 500, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 502 may include one or more processors 520 to execute instructions to complete all or part of the steps of the method provided by the technical solution of the present disclosure. In addition, the processing component 502 may include one or more modules to facilitate the interaction between the processing component 502 and other components. For example, the processing component 502 may include a multimedia module to facilitate the interaction between the multimedia component 508 and the processing component 502.

[0115] The memory 504 is configured to store various types of data to support operations on the device 500. Examples of such data include instructions for any application or method operating on the device 500, contact data, phone book data, messages, pictures, videos, etc. The memory 504 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0116] Power supply component 506 provides power to various components of device 500. Power supply component 506 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to device 500.

[0117] The multimedia component 508 includes a screen that provides an output interface between the device 500 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 508 includes a front camera and / or a rear camera. When the device 500 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera may receive external multimedia data. Each front camera and rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

[0118] The audio component 510 is configured to output and / or input audio signals. For example, the audio component 510 includes a microphone (MIC), and when the device 500 is in an operating mode, such as a call mode, a recording mode, and a speech recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 504 or sent via the communication component 516. In some embodiments, the audio component 510 also includes a speaker for outputting audio signals.

[0119] I / O interface 512 provides an interface between processing component 502 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: a home button, a volume button, a start button, and a lock button.

[0120] The sensor assembly 514 includes one or more sensors for providing various aspects of status assessment for the device 500. For example, the sensor assembly 514 can detect the open / closed state of the device 500, the relative positioning of components, such as the display and keypad of the device 500, and the sensor assembly 514 can also detect the position change of the device 500 or a component of the device 500, the presence or absence of user contact with the device 500, the orientation or acceleration / deceleration of the device 500, and the temperature change of the device 500. The sensor assembly 514 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor assembly 514 may also include an optical sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 514 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0121] The communication component 516 is configured to facilitate wired or wireless communication between the device 500 and other devices. The device 500 can access a wireless network based on a communication standard, such as WiFi, or a mobile communication network such as 2G, 3G, 4G / LTE, 5G, etc. In an exemplary embodiment, the communication component 516 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 516 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0122] In an exemplary embodiment, the device 500 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the above methods.

[0123] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 504 including instructions, and the above instructions can be executed by a processor 520 of the device 500 to complete the method provided by the technical solution of the present disclosure. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

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

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

[0126] The above is a detailed introduction to the dynamic page display method, device and electronic device provided by the present application. The principles and implementation methods of the present application are described in detail using specific examples. The description of the above embodiments is only used to help understand the method and core idea of ​​the present application. At the same time, for those skilled in the art, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as limiting the present application.

Claims

1. A dynamic page display method, characterized in that: include: In response to a request to display a target dynamic page, initiating a call to interfaces corresponding to multiple components in page frame configuration information associated with the target dynamic page; In the process of receiving the return data of each component, a plurality of first-screen visual components are determined, and the first-screen visual components are: components that have returned data and the data is not empty, and the sorting position in the configuration information meets the conditions; wherein, the determination of the plurality of first-screen visual components includes: determining the initial length of the sliding window, and the initial length is in units of the number of components; taking the component ranked first in the page frame configuration information as the starting point of the sliding window, and distinguishing the plurality of components in the page frame configuration information into components within the sliding window and components outside the sliding window; after receiving the data return result of one of the target components, determining whether the target component is a component within the sliding window, and if so, and the data returned by the target component is not empty, determining it as the first-screen visual component; Whenever a new first-screen visual component is determined, the parameter information of the first-screen visual component is updated, and the first-screen integrity check is performed based on the updated parameter information; If the first screen integrity check passes, and other components whose sorting positions meet the conditions in the configuration information have returned data and the data is empty, the current moment is determined as the first screen display time point, and the returned data corresponding to each first screen visual component is displayed as a whole.

2. The method according to claim 1, characterized in that Also includes: If the data returned by the target is empty, the length of the sliding window is expanded so as to add the first component originally outside the sliding window into the sliding window, and a judgment is made based on whether the component newly added to the sliding window has returned data and whether it is empty, so as to determine whether to determine the component newly added to the sliding window as the first screen visual component, or continue to expand the length of the sliding window, or end the current judgment process; If the target component of the currently returned data is a component outside the sliding window, the current judgment process ends.

3. The method according to claim 1, characterized in that The determining of the initial length of the sliding window comprises: estimating the maximum number of components that can be accommodated on the first screen of the target dynamic page, and determining the estimated number of components as the initial length of the sliding window; The parameter information of the visual components determined to be the first screen includes: the number of the visual components determined to be the first screen; The first screen integrity check is performed according to the updated parameter information, including: It is determined whether the number of updated visual components that have been determined to be the first screen reaches the estimated maximum number of components that the first screen can accommodate. If so, the first screen integrity check passes, and it is determined that the first screen display conditions are met at the current moment.

4. The method according to claim 3, characterized in that: Also includes: If the updated parameter information fails to pass the first screen integrity check, the current judgment process is terminated, so that the judgment process can be triggered again when other components in the sliding window return data, and whether the first screen display time has arrived can be re-judged.

5. The method according to claim 1, characterized in that The determining of the initial length of the sliding window comprises: Setting the initial length of the sliding window to one; The parameter information of the first-screen visual component determined includes: the sum of the screen heights required to be occupied by the first-screen visual component determined; The updating of parameter information of the first screen visual component determined includes: Determine the screen height required to be occupied by the data returned by the target component, and increase the screen height required to be occupied by the data returned by the target component based on the current value of the sum of the screen heights required to be occupied by the visual components on the first screen; The first screen integrity check is performed according to the updated parameter information, including: Determine whether the sum of the updated screen heights is greater than or equal to the total screen height. If so, the first screen integrity check passes.

6. The method according to claim 5, characterized in that Also includes: If the sum of the screen heights required to be occupied by the updated visual components determined to be the first screen is less than the total screen height, the length of the sliding window is expanded so that the first component originally located outside the sliding window is added to the sliding window, and a judgment is made based on whether the component newly added to the sliding window has returned data and whether it is empty.

7. The method according to claim 2 or 6, characterized in that: The judging process according to whether the component newly added to the sliding window has returned data and whether it is empty includes: If the component newly added to the sliding window has not returned data, the current judgment process is terminated, so that the judgment process can be triggered again when other components in the sliding window return data, and whether the first screen display time has arrived can be re-judged.

8. The method according to claim 2 or 6, characterized in that: The process of judging whether the component newly added to the sliding window has returned data and whether the data is empty also includes: If the component newly added to the sliding window has returned data and the data is not empty, the component newly added to the sliding window is determined as a first-screen visual component, and the parameter information of the first-screen visual component determined is updated. The first-screen integrity check is performed according to the updated parameter information. If the first-screen integrity check passes, the current moment is determined as the first-screen display time point, otherwise the current judgment process is terminated, so as to continue to trigger the judgment process when other components in the sliding window return data, and re-judge whether the first-screen display time has arrived.

9. The method according to claim 2 or 6, characterized in that: The process of judging whether the component newly added to the sliding window has returned data and whether the data is empty also includes: If the component newly added to the sliding window has returned data and the data is empty, the length of the sliding window will continue to be expanded so that the next component originally outside the sliding window can be added to the sliding window, and the judgment and processing will continue based on whether the component newly added to the sliding window has returned data and whether the data is empty.

10. The method according to any one of claims 1 to 9, characterized in that: The target dynamic page includes: a detail page of the target product.

11. A dynamic page display device, characterized in that: include: A component call initiating unit, configured to initiate a call to interfaces corresponding to multiple components in the page frame configuration information associated with the target dynamic page in response to a request for displaying the target dynamic page; A first screen visual component determination unit is used to determine multiple first screen visual components in the process of receiving return data from each component, wherein the first screen visual components are components that have returned data and the data is not empty and whose sorting position in the configuration information meets the conditions; wherein the multiple first screen visual components are determined in the following manner: determining an initial length of the sliding window, wherein the initial length is in units of the number of components; taking the component ranked first in the page frame configuration information as the starting point of the sliding window, and distinguishing multiple components in the page frame configuration information into components within the sliding window and components outside the sliding window; after receiving the data return result of one of the target components, determining whether the target component is a component within the sliding window, and if so, and the data returned by the target component is not empty, determining it as the first screen visual component; A first screen integrity check unit, used for updating parameter information of the first screen visual component determined each time a new first screen visual component is determined, and performing a first screen integrity check according to the updated parameter information; The first screen display timing determination unit is used to determine the current moment as the first screen display time point if the first screen integrity check passes and other components whose sorting positions meet the conditions in the configuration information have returned data and the data is empty, and start to display the returned data corresponding to each first screen visual component as a whole.

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

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

Citation Information

Patent Citations

  • Webpage displaying method and device

    CN104133884A

  • Page display method, terminal and device

    CN104978181A