Information synchronization method and device, computer storage medium and electronic equipment

Abstract

The invention relates to the technical field of information processing, and provides an information synchronization method, an information synchronization device, a computer storage medium and electronic equipment.The information synchronization method comprises the steps that first to-be-synchronized information fed back by a canvas layer is received through an information synchronization layer, and the information synchronization layer and the canvas layer belong to a canvas component; the canvas component is arranged on a front-end browser, and the first to-be-synchronized information comprises interaction information generated when a user performs interaction operation on the canvas layer; judging an information type corresponding to the first to-be-synchronized information; and determining whether to immediately execute a first type of synchronization operation on the first to-be-synchronized information according to the information type, wherein the first type of synchronization operation is used for synchronizing the first to-be-synchronized information to a canvas use end. The method provided by the invention can avoid user lagging experience.

Description

Background Art

[0002] In the scenario of nested low-code canvas construction, a single data source method is usually used, that is, the layout data of the canvas is uniformly maintained by the canvas user. When the user drags, stretches, and drags and drops the canvas, the canvas layer will instantly synchronize these operations to the canvas user.

[0003] However, during the process of dragging, stretching and dropping, the operations are very frequent. Therefore, the canvas layer needs to frequently feedback data to the canvas user, which may cause the user to experience a lag.

[0004] In view of this, there is an urgent need in the art to develop a new information synchronization method and device.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure. Summary of the invention

[0006] The purpose of the present disclosure is to provide an information synchronization method, an information synchronization device, a computer storage medium and an electronic device, thereby overcoming the technical problem of user lag experience caused by the limitations of related technologies at least to a certain extent.

[0007] Other features and advantages of the present disclosure will become apparent from the following detailed description, or may be learned in part by the practice of the present disclosure.

[0008] According to a first aspect of the present disclosure, there is provided an information synchronization method, comprising:

[0009] Receiving, through the information synchronization layer, first information to be synchronized fed back by the canvas layer, wherein the information synchronization layer and the canvas layer belong to a canvas component, and the canvas component is arranged in a front-end browser, and the first information to be synchronized includes interactive information generated by a user performing an interactive operation on the canvas layer; determining an information type corresponding to the first information to be synchronized;

[0010] Determine whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, where the first type of synchronization operation is used to synchronize the first information to be synchronized to a canvas user.

[0011] In an exemplary embodiment of the present disclosure, the information type includes canvas layout update information generated by the user's interactive operation on the canvas layer;

[0012] The determining, according to the information type, whether to immediately perform a first type of synchronization operation on the first information to be synchronized includes:

[0013] When the information type is the canvas layout update information, calling the request idle callback function to push the first information to be synchronized into the information stack;

[0014] When the front-end browser is in an idle state, a first type of synchronization operation is performed on the first information to be synchronized.

[0015] In an exemplary embodiment of the present disclosure, after calling the request idle callback function to push the first information to be synchronized into the information stack, the method further includes:

[0016] The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack.

[0017] In an exemplary embodiment of the present disclosure, the information type includes preset instruction information generated by a user's interactive operation on an interactive control of the canvas layer;

[0018] The determining, according to the information type, whether to immediately perform a first type of synchronization operation on the first information to be synchronized includes:

[0019] When the information type is the preset instruction information, pushing the first information to be synchronized into the information stack;

[0020] The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack, and the first type of synchronization operation is immediately performed on the first information to be synchronized.

[0021] In an exemplary embodiment of the present disclosure, the method further includes:

[0022] receiving second information to be synchronized fed back by the canvas user and a processing priority corresponding to the second information to be synchronized, wherein the second information to be synchronized includes canvas layout information configured by the canvas user for the canvas layer;

[0023] Determining the target information type corresponding to the second information to be synchronized according to the processing priority;

[0024] Determine whether to immediately perform a second type of synchronization operation on the second information to be synchronized according to the target information type, where the second type of synchronization operation is used to synchronize the second information to be synchronized to the canvas layer.

[0025] In an exemplary embodiment of the present disclosure, the target information type includes non-instantaneous synchronization information;

[0026] The determining, according to the target information type, whether to immediately perform a second type of synchronization operation on the second information to be synchronized includes:

[0027] When the target information type is the non-instant synchronization information, calling the request idle callback function to push the second information to be synchronized into the information stack;

[0028] When the front-end browser is in an idle state, a second type of synchronization operation is performed on the second information to be synchronized.

[0029] In an exemplary embodiment of the present disclosure, the target information type includes instant synchronization information;

[0030] The determining, according to the target information type, whether to immediately perform a second type of synchronization operation on the second information to be synchronized includes:

[0031] When the target information type is the instant synchronization information, calling the request idle callback function to push the second information to be synchronized into the information stack;

[0032] The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack, so as to immediately perform the second type of synchronization operation on the second information to be synchronized.

[0033] According to a second aspect of the present disclosure, there is provided an information synchronization device, comprising:

[0034] An information receiving module, configured to receive first information to be synchronized fed back by the canvas layer through an information synchronization layer, wherein the information synchronization layer and the canvas layer belong to a canvas component, and the canvas component is arranged in a front-end browser, and the first information to be synchronized includes interactive information generated by a user performing an interactive operation on the canvas layer;

[0035] An information type determination module, used to determine the information type corresponding to the first information to be synchronized;

[0036] The information synchronization module is used to determine whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, and the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user end.

[0037] According to a third aspect of the present disclosure, a computer storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the information synchronization method described in the first aspect is implemented.

[0038] According to a fourth aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute the information synchronization method described in the first aspect above by executing the executable instructions.

[0039] It can be seen from the above technical solutions that the information synchronization method, information synchronization device, computer storage medium and electronic device in the exemplary embodiments of the present disclosure have at least the following advantages and positive effects:

[0040] In the technical solutions provided in some embodiments of the present disclosure, the present disclosure receives first information to be synchronized fed back by the canvas layer through the information synchronization layer (the first information to be synchronized includes interactive information generated by the user performing interactive operations on the canvas layer), determines the information type corresponding to the first information to be synchronized, and determines whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type (the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user end). On the one hand, by setting the information synchronization layer as an intermediate layer, the information fed back by the canvas layer is synchronized to the canvas user end, and the existing long link of "canvas layer-canvas user end" can be truncated into two links of "canvas side canvas layer-information synchronization layer" and "canvas user end-information synchronization layer", shortening the information synchronization link and compressing the information synchronization time; on the other hand, the present disclosure can distinguish whether immediate information synchronization is required according to the information type, instead of frequently feeding back data to the canvas user end in real time during the user's interactive operation as in the prior art, resulting in large-area and frequent page rendering, thereby avoiding a stuck experience for users.

[0041] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The accompanying drawings herein are incorporated into the specification and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the specification are used to explain the principles of the present disclosure. Obviously, the accompanying drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without creative work.

[0043] Figure 1 A schematic diagram showing a flow chart of an information synchronization method in an embodiment of the present disclosure is shown;

[0044] Figure 2 A schematic diagram showing a flow chart of how the information synchronization layer performs a first synchronization operation on canvas layout update information in an embodiment of the present disclosure;

[0045] Figure 3 A schematic diagram showing when the first information to be synchronized is synchronized to the canvas user terminal when the information type is canvas layout update information in an embodiment of the present disclosure;

[0046] Figure 4 A schematic diagram showing a flow chart of how the information synchronization layer performs a first synchronization operation on preset instruction information in an embodiment of the present disclosure;

[0047] Figure 5 A schematic diagram showing a flow chart of another information synchronization method in an embodiment of the present disclosure;

[0048] Figure 6 The overall architecture diagram of the information synchronization method in the embodiment of the present disclosure is shown;

[0049] Figure 7 A schematic diagram showing the structure of an information synchronization device in an exemplary embodiment of the present disclosure is shown;

[0050] Figure 8 A schematic structural diagram of an electronic device in an exemplary embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0051] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as being limited to the examples set forth herein; on the contrary, these embodiments are provided so that the present disclosure will be more comprehensive and complete, and the concepts of the example embodiments are fully conveyed to those skilled in the art. The described features, structures, or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced while omitting one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known technical solutions are not shown or described in detail to avoid obscuring various aspects of the present disclosure.

[0052] The terms "a", "an", "the" and "said" are used in this specification to indicate the presence of one or more elements / components / etc.; the terms "including" and "having" are used to express an open-ended inclusion and mean that additional elements / components / etc. may exist in addition to the listed elements / components / etc.; the terms "first" and "second" etc. are used only as labels and are not intended to limit the quantity of their objects.

[0053] In addition, the accompanying drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings represent the same or similar parts, and their repeated descriptions will be omitted. Some of the block diagrams shown in the accompanying drawings are functional entities and do not necessarily correspond to physically or logically independent entities.

[0054] In the scenario of nested low-code canvas construction, when the user performs processes such as dragging, stretching, and dropping, the canvas needs to respond to the canvas user in a timely manner and synchronize the layout information. Given that the above operation process is a continuous action, during the operation, the canvas layer needs to frequently feedback data to the canvas user, which will cause large-scale and frequent rendering, resulting in jams in the construction experience, especially in multi-layer nested scenarios, where the impact between different levels will be more frequent.

[0055] Among them, low-code is a method of quickly designing and developing software applications with minimal manual coding. It can provide faster and more reliable value to technicians. By using visual modeling in a graphical interface to assemble and configure applications, developers can skip all infrastructure to speed up development.

[0056] The concept of canvas: users can add materials to the canvas and drag / drop / layout the materials to build the page they want. This concept extends to the artist's drawing board. During the painting process, the painter will mix the paint and draw on the canvas. In the process of page building, low-code platform users need to select the corresponding materials, drag and drop them to the correct position in the canvas, and configure some properties of the materials to achieve the best display effect. The user's building process is very similar to the artist's drawing method, so this concept also comes from this.

[0057] Since the canvas layer itself needs to respond to user operations in real time, it is not suitable to throttle user operations, because after throttling, part of the user's operation data will be lost, so in terms of experience, the user will also feel that the canvas's response to operations becomes slower.

[0058] By analyzing the entire rendering link in the above-mentioned prior art, the inventors found that the core problem of the above-mentioned prior art is that the rendering link is too long due to the one-way data flow, so that multiple renderings of a large area will occur during the data synchronization process. In fact, during a user's dragging process, multiple canvas data updates will be triggered, but these data do not need to be synchronized to the application side in real time, and only need to be synchronized after the dragging ends.

[0059] Based on the above analysis, the present invention aims to provide an information flow link and synchronization solution for a low-code canvas, which is used to optimize the performance of the canvas building scene, improve the page rendering performance and operation fluency during the user building process, solve the rendering performance problem of the canvas in complex nested scenarios, and significantly improve the user experience, especially in strong interactive scenarios. It has reference value.

[0060] Specifically, the present disclosure reduces the length of the rendering link and adopts a two-way information flow link (i.e., the long link of "canvas layer-canvas user end" in the prior art is truncated and divided into two links of "canvas layer-information synchronization layer" and "canvas user end-information synchronization layer", so that the canvas layer and the canvas user end can each maintain their own related data) and a synchronization architecture, thereby avoiding the problems of user operation data loss and slow response. At the same time, information synchronization is performed when the browser is idle after dragging is completed, thereby avoiding a large amount of repeated rendering and improving the performance of the canvas and user experience.

[0061] In an embodiment of the present disclosure, firstly, an information synchronization method is provided, which at least to some extent overcomes the defect of user lag experience in related technologies.

[0062] Figure 1 A flow chart of an information synchronization method in an embodiment of the present disclosure is shown. The execution subject of the information synchronization method may be an information synchronization layer.

[0063] refer to Figure 1 According to an embodiment of the present disclosure, the information synchronization method includes the following steps:

[0064] Step S110, receiving first information to be synchronized fed back by the canvas layer through the information synchronization layer, the information synchronization layer and the canvas layer belong to a canvas component, the canvas component is set in the front-end browser, and the first information to be synchronized includes interactive information generated by the user's interactive operation on the canvas layer;

[0065] Step S120, determining the information type corresponding to the first information to be synchronized;

[0066] Step S130: Determine whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, where the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user.

[0067] exist Figure 1In the technical solution provided by the illustrated embodiment, the present disclosure receives the first information to be synchronized fed back by the canvas layer through the information synchronization layer (the first information to be synchronized includes the interactive information generated by the user performing interactive operations on the canvas layer), determines the information type corresponding to the first information to be synchronized, and determines whether to immediately perform the first type of synchronization operation on the first information to be synchronized according to the information type (the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user end). On the one hand, by setting the information synchronization layer as an intermediate layer, the information fed back by the canvas layer is synchronized to the canvas user end, and the existing long link of "canvas layer-canvas user end" can be truncated into two links of "canvas side canvas layer-information synchronization layer" and "canvas user end-information synchronization layer", shortening the information synchronization link and compressing the information synchronization time; on the other hand, the present disclosure can distinguish whether immediate information synchronization is required according to the information type, instead of frequently feeding back data to the canvas user end in real time during the user's interactive operation as in the prior art, resulting in large-area and frequent page rendering, thereby avoiding a stuck experience for users.

[0068] The following Figure 1 The specific implementation process of each step is described in detail:

[0069] First, the overall architecture of the present disclosure is described:

[0070] The present disclosure sets an information synchronization layer on the basis of the existing long link of "canvas layer-canvas user end", so as to cut the above long link into two links of "canvas layer-information synchronization layer" and "canvas user end-information synchronization layer". Thus, the information synchronization layer can receive the information to be synchronized fed back by the canvas layer, and synchronize the information to be synchronized to the canvas user end according to the synchronization strategy in the present disclosure, or the information synchronization layer can receive the information to be synchronized fed back by the canvas user end, and synchronize the information to be synchronized to the canvas layer according to the synchronization strategy in the present disclosure.

[0071] The canvas layer and the information synchronization layer belong to the canvas component, and the canvas component is set in the front-end browser. The canvas user end can be a user end that uses the canvas component, such as a user terminal.

[0072] The following first combines Figure 1 The process of "the information synchronization layer synchronizing the information to be synchronized fed back by the canvas layer to the canvas user end" is explained as follows:

[0073] In step S110, the first information to be synchronized fed back by the canvas layer is received through the information synchronization layer.

[0074] In this step, the information synchronization layer may receive first information to be synchronized fed back by the canvas layer. The first information to be synchronized may be interactive information generated by a user performing an interactive operation on the canvas layer.

[0075] In an optional implementation, the first information to be synchronized may be canvas layout update information generated by a user's interactive operation on the canvas layer or display elements on the canvas layer, wherein the interactive operation may be a drag operation, a zoom-in or zoom-out operation, etc., which may be set according to actual conditions, and the present disclosure does not make any special limitations on this. Thus, the canvas layout update information may be position or size change data for each display element on the canvas.

[0076] In another optional implementation, the first information to be synchronized may be preset instruction information generated by a user's interactive operation on an interactive control on the canvas layer, wherein the interactive control may be a forced refresh control, a deletion or addition control, which may be set according to actual conditions, and the present disclosure does not make any special limitation on this. Thus, the preset instruction information may be a forced refresh of the page, or the deletion of a display element or the addition of a new display element, etc.

[0077] In step S120, the information type corresponding to the first information to be synchronized is determined.

[0078] In this step, after receiving the first information to be synchronized in step S110, the information type corresponding to the first information to be synchronized can be determined. Exemplarily, the information type can include the above two types: canvas layout update information and preset instruction information.

[0079] In step S130, it is determined whether to immediately perform a first type synchronization operation on the first information to be synchronized according to the information type.

[0080] In this step, the information synchronization layer can determine whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type determined in the step S120, where the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user.

[0081] When the above information type is the above canvas layout update information, refer to Figure 2 , Figure 2 A flow chart showing how the information synchronization layer performs a first synchronization operation on the above-mentioned canvas layout update information in an embodiment of the present disclosure includes steps S201 and S202:

[0082] In step S201, when the information type is canvas layout update information, the request idle callback function is called to push the first information to be synchronized into the information stack.

[0083] In this step, when the type of the first information to be synchronized is canvas layout update information, the information synchronization layer can call the request idle callback function requestIdleCallback (in web pages, there are many time-consuming but not so urgent tasks. They share the event queue with urgent tasks, such as tasks that respond to user input in a timely manner. If the two conflict, the user experience will be very bad. We can use setTimout to delay these tasks. But we don't know whether the browser is idle when setTimeout executes the callback. RequestIdleCallback solves this pain point. RequestIdleCallback will execute the callback at the end of the frame and when there is idle time, or when the user does not interact with the web page) to push the above first information to be synchronized into the information stack.

[0084] Obviously, when the user frequently performs drag operations, if information synchronization is performed frequently, the browser will be stuck, affecting the smoothness of the user experience. The present disclosure allows waiting for the user's high-frequency operations by calling the requestIdleCallback API (Application Program Interface), and then synchronizes information when the browser is idle. This can effectively avoid the occurrence of stuck situations and improve the smoothness of the user experience.

[0085] It should be noted that after pushing the first information to be synchronized into the information stack, the cancelIdleCallback function may be called to cancel the historical information to be synchronized in the waiting state in the information stack to ensure that the first information to be synchronized in the waiting state is the latest canvas layout update information.

[0086] Among them, cancelIdleCallback refers to the browser's window.cancelIdleCallback method, which is used to cancel the callback of the previous call to window.requestIdleCallback.

[0087] In step S202, when the front-end browser is in an idle state, a first type of synchronization operation is performed on the first information to be synchronized.

[0088] In this step, the information synchronization layer can receive status report information fed back in real time by the front-end browser (the status report information is obtained based on monitoring user operations), and the status report information is used to indicate whether the front-end browser is in an idle state. Thus, when the status report information indicates that the front-end browser is in an idle state, the information synchronization layer can perform a first type of synchronization operation on the above-mentioned first information to be synchronized, so as to synchronize the above-mentioned first information to be synchronized to the canvas user end.

[0089] refer to Figure 3 , Figure 3 A schematic diagram showing when the first information to be synchronized is synchronized to the canvas user terminal when the information type is canvas layout update information in an embodiment of the present disclosure:

[0090] like Figure 3 As shown, the information types of the first information 1-4 to be synchronized (abbreviated as information 1-4 in the figure) are all canvas layout update information. Assuming that when the user performs an interactive operation similar to dragging on the display element, information 1, information 2, information 3 and information 4 with IDs accumulated in sequence will be generated, so that the canvas layer can feedback the above information 1-information 4 to the information synchronization layer in sequence. The information synchronization layer first receives information 1 and calls requestIdleCallback to push information 1 into the stack. At this time, information 1 is in a waiting state. Afterwards, after information 2 is pushed into the stack, cancelIdleCallback can be called to cancel information 1. At this time, information 2 is in a waiting state; after information 3 is pushed into the stack, cancelIdleCallback can be called to cancel information 2. At this time, information 3 is in a waiting state; after information 4 is pushed into the stack, cancelIdleCallback can be called to cancel information 3. At this time, information 4 is in a waiting state. Afterwards, if it is detected that the user operation is completed and the front-end browser is in an idle state, information 4 can be synchronized with the user end.

[0091] In combination with specific application scenarios, when the user performs drag operations one by one, the canvas layout data may change multiple times. However, the canvas does not need to report each change data to the canvas user end. It only needs to report the final layout change data to the canvas user end. Figure 3 The above-mentioned implementation method shown can achieve this technical effect.

[0092] When the above information type is the above preset instruction information, refer to Figure 4 , Figure 4 A flow chart showing how the information synchronization layer performs a first synchronization operation on the above-mentioned preset instruction information in an embodiment of the present disclosure includes steps S401 and S402:

[0093] In step S401, when the information type is preset instruction information, the first information to be synchronized is pushed into the information stack.

[0094] In this step, when the above information type is preset instruction information, the information synchronization layer can call requestIdleCallback to push the above first information to be synchronized into the information stack.

[0095] In step S402, a request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack, and a first type of synchronization operation is immediately performed on the first information to be synchronized.

[0096] In this step, the information synchronization layer can call the request cancellation callback function cancelIdleCallback to cancel the historical information to be synchronized in the waiting state in the above information stack, so as to set the priority of the first information to be synchronized to the highest priority, and at this time, without waiting for the browser to be idle, the first type of synchronization operation can be immediately performed on the first information to be synchronized, so as to synchronize the first information to be synchronized to the canvas user. Based on this, the present disclosure can also support the demand for instant information synchronization.

[0097] refer to Figure 5 , Figure 5 A flowchart of another information synchronization method in an embodiment of the present disclosure is shown, specifically showing a flowchart of the information synchronization layer synchronizing the information to be synchronized fed back by the canvas user end to the canvas layer, including steps S501 to S503:

[0098] In step S501, second information to be synchronized and a processing priority corresponding to the second information to be synchronized fed back by a canvas user are received.

[0099] In this step, the canvas user terminal may receive the second information to be synchronized and the processing priority corresponding to the second information to be synchronized fed back by the canvas user terminal. The processing priority may be used to indicate whether the second information to be synchronized is instant synchronization information (i.e., data that needs to be synchronized in real time) or non-instant synchronization information (i.e., data that does not need to be synchronized in real time).

[0100] The second information to be synchronized may include canvas layout information configured by the canvas user for the canvas layer. Specifically, the canvas layout information may be full canvas layout information required for initializing the canvas layer, or updated canvas layout information after the canvas user modifies the above canvas layout information.

[0101] In step S502, the target information type corresponding to the second information to be synchronized is determined according to the processing priority.

[0102] In this step, the target information type of the second information to be synchronized can be determined based on the above-mentioned processing priority. Exemplarily, when the processing priority of the second information to be synchronized is higher than or equal to the preset priority, the target information type of the second information to be synchronized may be instant synchronization information, and when the processing priority of the second information to be synchronized is lower than the above-mentioned preset priority, the target information type of the second information to be synchronized may be non-instant synchronization information.

[0103] In step S503, it is determined whether to immediately perform a second type of synchronization operation on the second information to be synchronized according to the type of the target information.

[0104] In this step, when the target information type is non-instant synchronization information, the information synchronization layer can call the request idle callback function requestIdleCallback to push the second information to be synchronized into the information stack. When the front-end browser is in an idle state, the second type of synchronization operation is performed on the second information to be synchronized, and the second information to be synchronized is synchronized to the canvas layer.

[0105] When the target information type is instant synchronization information, the information synchronization layer may push the second information to be synchronized into the information stack, and call the cancel callback function cancelIdleCallback to cancel the historical information to be synchronized in the waiting state in the information stack, so as to immediately perform the second type of synchronization operation on the second information to be synchronized, and synchronize the second information to be synchronized to the canvas layer.

[0106] It should be noted that the present disclosure only modifies the information feedback mechanism between the canvas layer and the canvas user, and does not involve changes in the way the canvas layer is used. Therefore, the canvas layer can maintain a running layout information state, and each time a user triggers a layout modification of an element on the canvas, the above layout information state will be updated, and the layout change data of the modified element will be integrated into the layout information of the canvas layer, so as to realize a one-way data flow cycle within the canvas layer.

[0107] In addition, when the information stack contains both the first information to be synchronized fed back by the canvas layer in a waiting state and the second information to be synchronized fed back by the canvas user end, the present invention can determine the order of popping out of the stack according to the order of entering the stack, for example: first in first out. Thus, bidirectional data synchronization can be performed with a reasonable strategy, solving conflicts in the information synchronization process.

[0108] refer to Figure 6 , Figure 6 The overall architecture diagram of the information synchronization method in the embodiment of the present disclosure is shown, which mainly involves three execution entities, namely the canvas layer, the information synchronization layer and the canvas user end. Specifically, Figure 6 As shown:

[0109] When the user performs a canvas construction operation (i.e., draws graphics on the canvas), 1 to n user operations will be performed, and at the same time, the display elements of the canvas layer or the overall layout of the canvas will be triggered to be updated. At this time, the canvas layer can integrate the layout information and trigger the overall layout update of the canvas layer, and at the same time, render the updated layout page; the canvas layer can synchronize the canvas layout update information or preset instruction information generated by the above user operation to the information synchronization layer in real time. The information synchronization layer acts as a real-time data pipeline and can synchronize the above information to the canvas user according to the pre-configured synchronization strategy (delayed synchronization, forced synchronization, etc.);

[0110] At the same time, the canvas user end can receive the information fed back by the above-mentioned information synchronization layer, parse the above-mentioned information, and when the canvas layout information of the canvas layer is updated, integrate the information fed back by the above-mentioned information synchronization layer into the canvas layout information to construct new canvas layout information, and synchronize the constructed new canvas layout information to the information synchronization layer in real time, so that the information synchronization layer synchronizes the above-mentioned new canvas layout information to the canvas layer according to the pre-configured synchronization strategy (delayed synchronization, forced synchronization, etc.).

[0111] In general, the present disclosure cuts off the long link of the one-way data flow and divides it into the information synchronization link of the canvas user end and the information synchronization link of the canvas layer, so that the canvas layer and the canvas user end can each maintain their own relevant data. At the same time, during the user's drag operation, the canvas layout update information fed back by the canvas layer is cached through the information synchronization layer, and then processed when the browser is idle, thereby ensuring the overall performance and smoothness of the canvas construction process. In addition, according to the different information types, an instant forced synchronization processing solution is added to ensure the instant synchronization of information.

[0112] The present disclosure also provides an information synchronization device, Figure 7 A schematic diagram showing the structure of an information synchronization device in an exemplary embodiment of the present disclosure is shown; Figure 7 As shown, the information synchronization device 700 may include an information receiving module 710, an information type determination module 720 and an information synchronization module 730. Among them:

[0113] The information receiving module 710 is used to receive the first information to be synchronized fed back by the canvas layer through the information synchronization layer, the information synchronization layer and the canvas layer belong to the canvas component, the canvas component is set in the front-end browser, and the first information to be synchronized includes the interactive information generated by the user's interactive operation on the canvas layer;

[0114] An information type determination module 720 is used to determine the information type corresponding to the first information to be synchronized;

[0115] The information synchronization module 730 is used to determine whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, where the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user.

[0116] In an exemplary embodiment of the present disclosure, the information type includes canvas layout update information generated by the user's interactive operation on the canvas layer;

[0117] The information synchronization module 730 determines whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, including:

[0118] When the information type is the canvas layout update information, calling the request idle callback function to push the first information to be synchronized into the information stack;

[0119] When the front-end browser is in an idle state, a first type of synchronization operation is performed on the first information to be synchronized.

[0120] In an exemplary embodiment of the present disclosure, after calling the request idle callback function to push the first information to be synchronized into the information stack, the information synchronization module 730 is configured as follows:

[0121] The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack.

[0122] In an exemplary embodiment of the present disclosure, the information type includes preset instruction information generated by a user's interactive operation on an interactive control of the canvas layer;

[0123] The information synchronization module 730 determines whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, including:

[0124] When the information type is the preset instruction information, pushing the first information to be synchronized into the information stack;

[0125] The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack, and the first type of synchronization operation is immediately performed on the first information to be synchronized.

[0126] In an exemplary embodiment of the present disclosure, the information synchronization module 730 is configured to:

[0127] receiving second information to be synchronized fed back by the canvas user and a processing priority corresponding to the second information to be synchronized, wherein the second information to be synchronized includes canvas layout information configured by the canvas user for the canvas layer;

[0128] Determining the target information type corresponding to the second information to be synchronized according to the processing priority;

[0129] Determine whether to immediately perform a second type of synchronization operation on the second information to be synchronized according to the target information type, where the second type of synchronization operation is used to synchronize the second information to be synchronized to the canvas layer.

[0130] In an exemplary embodiment of the present disclosure, the target information type includes non-instantaneous synchronization information;

[0131] The information synchronization module 730 determines whether to immediately perform a second type of synchronization operation on the second information to be synchronized according to the target information type, including:

[0132] When the target information type is the non-instant synchronization information, calling the request idle callback function to push the second information to be synchronized into the information stack;

[0133] When the front-end browser is in an idle state, a second type of synchronization operation is performed on the second information to be synchronized.

[0134] In an exemplary embodiment of the present disclosure, the target information type includes instant synchronization information;

[0135] The information synchronization module 730 determines whether to immediately perform a second type of synchronization operation on the second information to be synchronized according to the target information type, including:

[0136] When the target information type is the instant synchronization information, calling the request idle callback function to push the second information to be synchronized into the information stack;

[0137] The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack, so as to immediately perform the second type of synchronization operation on the second information to be synchronized.

[0138] The specific details of each module in the above-mentioned information synchronization device have been described in detail in the corresponding information synchronization method, so they will not be repeated here.

[0139] It should be noted that, although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0140] In addition, although the steps of the method in the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0141] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a mobile terminal, or a network device, etc.) to execute the method according to the implementation of the present disclosure.

[0142] The present application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiment; or may exist independently without being assembled into the electronic device.

[0143] The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0144] Computer-readable storage media can send, propagate or transmit programs for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable storage medium can be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0145] The computer-readable storage medium carries one or more programs. When the one or more programs are executed by an electronic device, the electronic device implements the method described in the above embodiments.

[0146] In addition, an electronic device capable of implementing the above method is also provided in an embodiment of the present disclosure.

[0147] Those skilled in the art will appreciate that various aspects of the present disclosure may be implemented as systems, methods or program products. Therefore, various aspects of the present disclosure may be specifically implemented in the following forms, namely: complete hardware implementation, complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which may be collectively referred to herein as "circuits", "modules" or "systems".

[0148] Refer to the following Figure 8 The electronic device 800 according to this embodiment of the present disclosure is described. Figure 8 The electronic device 800 shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0149] like Figure 8 As shown, the electronic device 800 is in the form of a general computing device. The components of the electronic device 800 may include, but are not limited to: the at least one processing unit 810, the at least one storage unit 820, a bus 830 connecting different system components (including the storage unit 820 and the processing unit 810), and a display unit 840.

[0150] The storage unit stores program codes, which can be executed by the processing unit 810, so that the processing unit 810 performs the steps according to various exemplary embodiments of the present disclosure described in the above “Exemplary Method” section of this specification. For example, the processing unit 810 can perform the following steps: Figure 1 As shown in: Step S110, receiving the first information to be synchronized fed back by the canvas layer through the information synchronization layer, the information synchronization layer and the canvas layer belong to the canvas component, the canvas component is set in the front-end browser, and the first information to be synchronized includes interactive information generated by the user's interactive operation on the canvas layer; Step S120, judging the information type corresponding to the first information to be synchronized; Step S130, determining whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user.

[0151] The storage unit 820 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM) 8201 and / or a cache memory unit 8202 , and may further include a read-only memory unit (ROM) 8203 .

[0152] The storage unit 820 may also include a program / utility 8204 having a set (at least one) of program modules 8205, such program modules 8205 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0153] Bus 830 may represent one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0154] The electronic device 800 may also communicate with one or more external devices 900 (e.g., keyboards, pointing devices, Bluetooth devices, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 800, and / or communicate with any device that enables the electronic device 800 to communicate with one or more other computing devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 850. Furthermore, the electronic device 800 may also communicate with one or more networks (e.g., local area networks (LANs), wide area networks (WANs), and / or public networks, such as the Internet) via a network adapter 860. As shown, the network adapter 860 communicates with other modules of the electronic device 800 via a bus 830. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 800, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, etc.

[0155] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure. The specification and examples are to be considered as exemplary only, and the true scope and spirit of the present disclosure are indicated by the claims.

Claims

1. An information synchronization method, characterized in that: The method comprises: Receiving, through the information synchronization layer, first information to be synchronized fed back by the canvas layer, wherein the information synchronization layer and the canvas layer belong to a canvas component, and the canvas component is arranged in a front-end browser, and the first information to be synchronized includes interactive information generated by a user performing an interactive operation on the canvas layer; Determining the information type corresponding to the first information to be synchronized; Determine whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, where the first type of synchronization operation is used to synchronize the first information to be synchronized to a canvas user.

2. The method according to claim 1, characterized in that The information type includes canvas layout update information generated by the user performing an interactive operation on the canvas layer; The determining, according to the information type, whether to immediately perform a first type of synchronization operation on the first information to be synchronized includes: When the information type is the canvas layout update information, calling the request idle callback function to push the first information to be synchronized into the information stack; When the front-end browser is in an idle state, a first type of synchronization operation is performed on the first information to be synchronized.

3. The method according to claim 2, characterized in that After calling the request idle callback function to push the first information to be synchronized into the information stack, the method further includes: The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack.

4. The method according to claim 1, characterized in that: The information type includes preset instruction information generated by the user performing interactive operations on the interactive controls of the canvas layer; The determining, according to the information type, whether to immediately perform a first type of synchronization operation on the first information to be synchronized includes: When the information type is the preset instruction information, pushing the first information to be synchronized into the information stack; The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack, and the first type of synchronization operation is immediately performed on the first information to be synchronized.

5. The method according to claim 1, characterized in that The method further comprises: receiving second information to be synchronized fed back by the canvas user and a processing priority corresponding to the second information to be synchronized, wherein the second information to be synchronized includes canvas layout information configured by the canvas user for the canvas layer; Determining, according to the processing priority, a target information type corresponding to the second information to be synchronized; Determine whether to immediately perform a second type of synchronization operation on the second information to be synchronized according to the target information type, where the second type of synchronization operation is used to synchronize the second information to be synchronized to the canvas layer.

6. The method according to claim 5, characterized in that The target information type includes non-instantaneous synchronization information; The determining, according to the target information type, whether to immediately perform a second type of synchronization operation on the second information to be synchronized includes: When the target information type is the non-instant synchronization information, calling the request idle callback function to push the second information to be synchronized into the information stack; When the front-end browser is in an idle state, a second type of synchronization operation is performed on the second information to be synchronized.

7. The method according to claim 5, characterized in that The target information type includes instant synchronization information; The determining, according to the target information type, whether to immediately perform a second type of synchronization operation on the second information to be synchronized includes: When the target information type is the instant synchronization information, calling the request idle callback function to push the second information to be synchronized into the information stack; The request cancellation callback function is called to cancel the historical information to be synchronized in the waiting state in the information stack, so as to immediately perform the second type of synchronization operation on the second information to be synchronized.

8. An information synchronization device, characterized in that: include: An information receiving module, configured to receive first information to be synchronized fed back by the canvas layer through an information synchronization layer, wherein the information synchronization layer and the canvas layer belong to a canvas component, and the canvas component is arranged in a front-end browser, and the first information to be synchronized includes interactive information generated by a user performing an interactive operation on the canvas layer; An information type determination module, used to determine the information type corresponding to the first information to be synchronized; The information synchronization module is used to determine whether to immediately perform a first type of synchronization operation on the first information to be synchronized according to the information type, and the first type of synchronization operation is used to synchronize the first information to be synchronized to the canvas user end.

9. A computer storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the information synchronization method according to any one of claims 1 to 7 is implemented.

10. An electronic device, characterized in that: include: processor; as well as A memory, configured to store executable instructions of the processor; The processor is configured to execute the information synchronization method according to any one of claims 1 to 7 by executing the executable instructions.

Images