Vue component dynamic layout offset repairing method and device, equipment and storage medium

Abstract

The invention discloses a Vue component dynamic layout offset repairing method and device, equipment and a storage medium, and is used for solving the technical problem that the existing Vue component dynamic layout offset repairing effect is poor. The method comprises the following steps: monitoring a layout offset event; removing a non-user operation associated event from the layout offset event to obtain a target event; extracting a displacement amount, an influence area and a trigger timestamp from the target event; positioning a source Vue component instance generating layout offset according to the coordinates of the influence area, and acquiring component information of the source Vue component instance; and repairing the source Vue component instance according to the displacement and the component information.

Description

Technical Field

[0001] This invention relates to the field of Vue component technology, and in particular to a method, apparatus, device and storage medium for correcting dynamic layout offset of Vue components. Background Technology

[0002] Modern web applications face severe challenges in layout stability under dynamic content scenarios. Cumulative Layout Offset (CLS), one of Google's core web metrics, has become a key factor affecting user experience. Statistics show that 73% of CLS issues on e-commerce websites stem from sudden changes in component size caused by asynchronous data loading, such as product images squeezing the description text below, or user review areas squeezing the footer element when expanded. These issues are particularly prominent in responsive frameworks like Vue: when using the v-if directive to dynamically render components, the reconstruction of the DOM structure triggers a chain reaction of subsequent element displacements; and traditional placeholder solutions in responsive layouts often fail to adapt to multi-platform size changes, resulting in excessive white space on mobile devices or insufficient space on desktop. Existing solutions, such as Lighthouse, can detect CLS, but their offline reporting mode means that the average time from problem discovery to code fix exceeds 24 hours, continuously impacting the user experience. Even more seriously, the layout offset behavior of conditional branches in dynamic components (such as v-if and v-else switching) is almost impossible to predict through static analysis due to the lack of runtime monitoring.

[0003] To address the above issues, existing solutions include static placeholder solutions, global style injection solutions, and offline analysis and repair solutions.

[0004] However, static placeholder solutions require developers to manually preset placeholder containers of fixed sizes. In responsive layouts, the actual rendering size after data return cannot be predicted (e.g., differences in text length between different languages), leading to incorrect space allocation on mobile devices.

[0005] The global style injection approach attempts to stabilize the layout by forcibly adding a min-height constraint to all dynamic components. However, this method crudely ignores component characteristics; for example, injecting a fixed height into a carousel component will disrupt the responsive aspect ratio, causing image distortion. More seriously, this approach cannot handle DOM structure changes caused by v-if switching; downstream element displacement will still be triggered when conditionally rendered components are shown or hidden.

[0006] The offline analysis and remediation solution relies on tools like Lighthouse to generate CLS reports, followed by manual code modification. Because layout offsets are context-dependent (e.g., user device size, network latency), it's impossible to reproduce all scenarios in the production environment, resulting in insufficient remediation coverage. Summary of the Invention

[0007] This invention provides a method, apparatus, device, and storage medium for repairing dynamic layout offsets of Vue components, which solves the technical problem of poor performance in existing Vue component dynamic layout offset repair methods.

[0008] This invention provides a method for correcting dynamic layout offset of Vue components, including:

[0009] Listen for layout offset events;

[0010] Remove non-user operation-related events from the layout offset events to obtain the target event;

[0011] Extract the displacement, affected area, and trigger timestamp from the target event;

[0012] The source Vue component instance that generates the layout offset is located based on the coordinates of the affected area, and the component information of the source Vue component instance is obtained.

[0013] Repair the source Vue component instance based on the displacement and the component information.

[0014] Optionally, the step of locating the source Vue component instance that generates the layout offset based on the coordinates of the affected area, and obtaining the component information of the source Vue component instance, includes:

[0015] Match the nearest Vue component in the preset rendering tree based on the coordinates of the affected area;

[0016] By tracing the source of the most recent Vue component, the root component is obtained;

[0017] Obtain the stability fingerprint injected during the Vue template compilation phase;

[0018] The source Vue component instance is determined based on the root component and the stability fingerprint, and the component information of the source Vue component instance is obtained.

[0019] Optionally, the displacement includes vertical displacement; the step of repairing the source Vue component instance based on the displacement and the component information includes:

[0020] Determine whether the vertical displacement is greater than a preset displacement amount;

[0021] If so, extract rendering instructions from the component information;

[0022] When the rendering directive is a v-if directive, the source Vue component instance is switched to v-show mode;

[0023] If the rendering instruction is not a v-if instruction or the vertical displacement is not greater than the preset displacement, then it is determined whether the source Vue component instance depends on asynchronous data.

[0024] If the source Vue component instance depends on asynchronous data, then inject a dynamic placeholder into the source Vue component instance;

[0025] If the source Vue component instance does not depend on asynchronous data, then add a minimum height constraint to the source Vue component instance.

[0026] Optionally, the calculation steps for the dynamic placeholder include:

[0027] Obtain the historical median width of the source Vue component instance, the historical median width of the parent container, the width of the parent container, the device type factor, the historical median rendered height, the actual height after rendering a preset number of historical times, and the content type;

[0028] Calculate the historical proportion coefficient based on the median historical width and the median historical width of the parent container;

[0029] Calculate the responsive proportion coefficient based on the historical proportion coefficient and the device type factor;

[0030] Calculate the expected width based on the parent container width and the responsive proportion coefficient;

[0031] The maximum height and average height are determined based on the actual height.

[0032] Historical size fluctuations are calculated based on the maximum height and the average height.

[0033] The coefficient addition is determined based on the content type;

[0034] The content growth factor is calculated based on the historical size fluctuations and the coefficient addition.

[0035] The expected height is calculated based on the content growth factor and the median historical rendered height.

[0036] A dynamic placeholder is generated using the expected width and the expected height.

[0037] Optionally, after the step of repairing the source Vue component instance based on the displacement and the component information, the method further includes:

[0038] Open the monitoring window and monitor whether the source Vue component instance experiences layout offset again through the monitoring window.

[0039] The present invention also provides a Vue component dynamic layout offset repair device, comprising:

[0040] The layout offset event listener module is used to listen for layout offset events;

[0041] The target event acquisition module is used to remove non-user operation-related events from the layout offset events to obtain the target event;

[0042] The displacement, affected area, and trigger timestamp extraction module is used to extract the displacement, affected area, and trigger timestamp from the target event.

[0043] The source Vue component instance positioning module is used to locate the source Vue component instance that generates the layout offset based on the coordinates of the affected area, and to obtain the component information of the source Vue component instance.

[0044] The repair module is used to repair the source Vue component instance based on the displacement and the component information.

[0045] Optionally, the source Vue component instance locator module includes:

[0046] The most recent Vue component matching submodule is used to match the most recent Vue component in the preset rendering tree based on the coordinates of the affected area;

[0047] The tracing submodule is used to trace the source of the most recent Vue component to obtain the root component;

[0048] The stability fingerprint acquisition submodule is used to obtain the stability fingerprint injected during the Vue template compilation stage;

[0049] The source Vue component instance determination submodule is used to determine the source Vue component instance based on the root component and the stability fingerprint, and to obtain the component information of the source Vue component instance.

[0050] Optionally, the displacement includes vertical displacement; the repair module includes:

[0051] The displacement determination submodule is used to determine whether the vertical displacement is greater than a preset displacement amount;

[0052] The rendering instruction extraction submodule is used to extract rendering instructions from the component information if the condition is met.

[0053] The mode switching submodule is used to switch the source Vue component instance to v-show mode when the rendering instruction is a v-if instruction;

[0054] The dependency judgment submodule is used to determine whether the source Vue component instance depends on asynchronous data when the rendering instruction is not a v-if instruction or the vertical displacement is not greater than a preset displacement amount.

[0055] The dynamic placeholder injection submodule is used to inject dynamic placeholders into the source Vue component instance if the source Vue component instance depends on asynchronous data.

[0056] A minimum height constraint submodule is added to add a minimum height constraint to the source Vue component instance if the source Vue component instance does not depend on asynchronous data.

[0057] The present invention also provides an electronic device, the device comprising a processor and a memory:

[0058] The memory is used to store program code and transmit the program code to the processor;

[0059] The processor is used to execute the Vue component dynamic layout offset repair method as described above, according to the instructions in the program code.

[0060] The present invention also provides a computer-readable storage medium for storing program code for executing the Vue component dynamic layout offset repair method as described in any of the preceding claims.

[0061] As can be seen from the above technical solution, the present invention has the following advantages: The present invention listens for layout offset events; removes non-user operation-related events from the layout offset events to obtain the target event; extracts the displacement, affected area, and trigger timestamp from the target event; locates the source Vue component instance that caused the layout offset based on the coordinates of the affected area, and obtains the component information of the source Vue component instance; and repairs the source Vue component instance based on the displacement and the component information. This improves the layout offset repair effect of Vue components. Attached Figure Description

[0062] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0063] Figure 1 A flowchart illustrating the steps of a method for correcting dynamic layout offset of a Vue component, as provided in this embodiment of the invention.

[0064] Figure 2 A flowchart illustrating the steps of a method for correcting dynamic layout offset of a Vue component, as provided in another embodiment of the present invention;

[0065] Figure 3 This is a structural block diagram of a Vue component dynamic layout offset repair device provided in an embodiment of the present invention. Detailed Implementation

[0066] This invention provides a method, apparatus, device, and storage medium for repairing dynamic layout offsets of Vue components, which addresses the technical problem of poor performance in existing Vue component dynamic layout offset repair methods.

[0067] To make the objectives, features, and advantages of this invention more apparent and understandable, the technical solutions of the embodiments of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the embodiments described below are only some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0068] Please see Figure 1 , Figure 1 The flowchart illustrates the steps of a method for correcting dynamic layout offset of a Vue component, as provided in an embodiment of the present invention.

[0069] This invention provides a method for correcting dynamic layout offsets in Vue components, which may specifically include:

[0070] Step 101, listen for layout offset events;

[0071] In this embodiment of the invention, a PerformanceObserver can be registered to listen for layout shift events.

[0072] The Layout-shift event is a performance event triggered by the browser that includes the shifted element, the shift distance, and the affected area.

[0073] Step 102: Remove non-user-operation-related events from the layout offset events to obtain the target event;

[0074] In this embodiment of the invention, non-user operation-related events can be offsets where the hadRecentInput flag is true. hadRecentInput is a property in the PerformanceEntry interface used to identify whether a user has recently performed an interactive operation, and is part of browser performance monitoring.

[0075] PerformanceEntry: The "master" of all performance entries. All data points recorded in the browser's performance timeline follow the basic format defined by the PerformanceEntry interface. One type is layout-shift (layout offset). Alternatively, layout-shift can be considered a "subclass" of PerformanceEntry. The layout-shift interface extends PerformanceEntry, meaning a layout-shift pair first possesses all the properties of PerformanceEntry (name, entryType, startTime, duration), and adds hadRecentInput: a boolean value indicating whether the current offset occurred after the user's most recent interaction.

[0076] Step 103: Extract the displacement, affected area, and trigger timestamp from the target event;

[0077] After filtering out non-user-related events, the displacement, affected area, and trigger timestamp can be extracted from the target event.

[0078] Where, displacement = [△x, △y]: Δx and Δy represent the horizontal and vertical displacement of the element (DOM node) in the current rendering frame relative to the previous frame, respectively.

[0079] Affected Area = [top, left, width, height]: This is an object describing the area affected by this displacement within the user's viewport. Its value is a DOM rectangle object containing:

[0080] Top: The distance from the top left corner of the affected area to the top of the viewport.

[0081] Left: The distance from the top left corner of the affected area to the left side of the viewport.

[0082] Width: The width of the area affected.

[0083] Height: The height of the affected area.

[0084] Trigger timestamp = event.startTime: The time when this layout offset event occurred.

[0085] Step 104: Locate the source Vue component instance that generates the layout offset based on the coordinates of the affected area, and obtain the component information of the source Vue component instance;

[0086] Next, based on the coordinates of the area to be affected, locate the source Vue component instance that generates the layout offset, and obtain the component information of the source Vue component instance.

[0087] Step 105: Repair the source Vue component instance based on the displacement and component information.

[0088] After determining the displacement and component information, a corresponding component repair strategy can be determined to repair the source Vue component instance.

[0089] This invention improves the layout offset repair effect of Vue components by listening to layout offset events; removing non-user-interactive related events from the layout offset events to obtain the target event; extracting the displacement, affected area, and trigger timestamp from the target event; locating the source Vue component instance that caused the layout offset based on the coordinates of the affected area, and obtaining the component information of the source Vue component instance; and repairing the source Vue component instance based on the displacement and component information.

[0090] Please see Figure 2 , Figure 2 A flowchart illustrating the steps of a method for correcting dynamic layout offset of a Vue component, provided in another embodiment of the present invention. Specifically, it may include:

[0091] Step 201, listen for layout offset events;

[0092] Step 202: Remove non-user operation related events from the layout offset events to obtain the target event;

[0093] Step 203: Extract the displacement, affected area, and trigger timestamp from the target event;

[0094] Steps 201-203 are the same as steps 101-103. For details, please refer to the description of steps 101-103. They will not be repeated here.

[0095] Step 204: Match the nearest Vue component in the preset render tree based on the coordinates of the affected area;

[0096] Step 205: Trace the source of the most recent Vue component to obtain the root component;

[0097] In this embodiment of the invention, the root component of the nearest Vue component can be obtained by matching the coordinates of the affected region in the rendering tree, and then by reverse mapping of the DOM. The corresponding traversal path is as follows:

[0098] The coordinates of the affected area → the nearest Vue component → the parent component chain → the root component.

[0099] At coordinate 206, retrieve the stability fingerprint injected during the Vue template compilation phase;

[0100] Step 207: Determine the source Vue component instance based on the root component and stability fingerprint, and obtain the component information of the source Vue component instance;

[0101] Stability fingerprint: A unique feature encoding that identifies whether rendering a Vue component causes a layout offset.

[0102] Next, obtain the stability fingerprint injected during the Vue template compilation phase, and combine it with the root component to determine the source Vue component instance where the layout offset occurred.

[0103] In one example, the rules for generating stability fingerprints are as follows:

[0104] Stability fingerprint = component ID + rendering mode (v-if / v-show) + content hash prefix.

[0105] The content hash prefix refers to the short identifier obtained by performing a hash operation (such as SHA-256) on the HTML structure of the Vue component template and / or its initial rendered static content, and then extracting the first few characters (e.g., the first 8 characters) of the resulting string.

[0106] The rendering mode is determined during Vue's compilation phase by statically analyzing directives in the template.

[0107] Step 208: Repair the source Vue component instance based on the displacement and component information.

[0108] After determining the displacement and component information, a corresponding component repair strategy can be determined to repair the layout offset of the source Vue component instance.

[0109] In one example, step 208 may include the following sub-steps:

[0110] S81, determine whether the vertical displacement is greater than the preset displacement;

[0111] S82, if so, extract rendering instructions from component information;

[0112] S83, when the rendering directive is the v-if directive, the source Vue component instance is switched to v-show mode;

[0113] The v-if directive is one of the most commonly used conditional rendering directives in Vue.js, used to conditionally render elements based on the truth value of an expression.

[0114] The v-show directive is a Vue.js directive used to conditionally display elements, controlling the visibility of elements through the CSS display property.

[0115] In this embodiment of the invention, when performing component repair, it is first determined whether the vertical displacement is greater than a preset displacement amount (such as 5px). If so, the rendering instruction is extracted from the component information, and when the rendering instruction is a v-if instruction, the v-if instruction is switched to a v-show instruction to repair the layout offset.

[0116] In one example, the seamless switching technique from the v-if directive to the v-show directive includes the following process:

[0117] a) Component state deep freeze:

[0118] Before switching instructions, a complete snapshot of the component data is created. The current data state (including nested structures such as objects and arrays) is fully preserved through deep copy technology. At the same time, the DOM subtree corresponding to the component is cloned to save the complete node structure and inline styles.

[0119] b) Dynamic instruction set rewriting:

[0120] At the Vue compilation level, replace the v-if directive in the template with the v-show directive;

[0121] Retain the original conditional judgment logic (such as the showFlag variable), and only change the rendering behavior mode;

[0122] Add visual transition effects (such as a 300-millisecond transparency gradient) to avoid interface flickering.

[0123] c) State persistence guarantee:

[0124] use <keep-alive>Wrap the target element with the component to prevent Vue from destroying the component instance;

[0125] Force the reuse of component instances by using a unique key value (e.g., key="component ID + data hash");

[0126] After the switch is complete, restore the original data state from the snapshot.

[0127] d) Residual rendering cleanup:

[0128] A forced reflow is triggered in the next browser rendering cycle (e.g., by reading the offsetHeight property).

[0129] Perform a gradual change in transparency (from 0 to 1) to ensure a smooth display.

[0130] S84: When the rendering directive is not a v-if directive or the vertical displacement is not greater than the preset displacement, determine whether the source Vue component instance depends on asynchronous data.

[0131] S85, if the source Vue component instance depends on asynchronous data, then inject a dynamic placeholder into the source Vue component instance;

[0132] In this embodiment of the invention, when the rendering instruction is not a v-if instruction or the vertical displacement is not greater than a preset displacement, it is determined whether the source Vue component instance depends on asynchronous data. If it does, a dynamic placeholder strategy is adopted to inject a dynamic placeholder into the source Vue component instance to fix the layout offset.

[0133] Dynamic space-saving strategy: a technology to prevent displacement by reserving space in advance based on the expected size of the component.

[0134] In one example, the dynamic placeholder generation process includes:

[0135] S1 retrieves the median historical width of the source Vue component instance, the median historical width of the parent container, the width of the parent container, the device type factor, the median historical rendered height, the actual height after rendering a preset number of times, and the content type;

[0136] S2, calculate the historical proportion coefficient based on the median historical width and the median historical width of the parent container;

[0137] S3, calculate the responsive proportion coefficient based on the historical proportion coefficient and the equipment type factor;

[0138] S4, calculate the expected width based on the parent container width and the responsiveness ratio;

[0139] S5, determine the maximum height and average height based on the actual height;

[0140] S6, calculates historical dimensional fluctuations based on maximum and average height;

[0141] S7, determine the coefficient bonus based on the content type;

[0142] S8 calculates the content growth factor based on historical size fluctuations and coefficient addition;

[0143] S9 calculates the expected height based on the content growth factor and the median historical rendered height.

[0144] S10 generates dynamic placeholders using the expected width and expected height.

[0145] In the implementation, the parent container refers to the direct parent node of the root element of the Vue component instance that has experienced a layout offset. The process of generating dynamic placeholders is as follows:

[0146] Expected width = parent container width * responsiveness ratio;

[0147] Expected height = Median of historical rendered height * Content growth factor;

[0148] Dynamic placeholder: css.cls-placeholder{visibility:hidden;min-height:calc(expected height);flex-basis:expected width;}

[0149] The responsiveness proportion coefficient is a value between 0 and 1, representing the proportion that the target component typically occupies in the width of its parent container. It is a value intelligently predicted based on historical data and component type.

[0150] Response ratio coefficient = Historical ratio coefficient * Device type factor;

[0151] Historical proportion coefficient = median historical width of the component itself / median historical width of the parent container;

[0152] Equipment type factor:

[0153] Viewport width < 768px (mobile): Factor = 1.0;

[0154] 768px <= viewport width < 1024px (tablet): Factor = 0.5;

[0155] Viewport width ≥ 1024px (desktop) factor = 0.33.

[0156] Historical size fluctuations can be obtained by continuously recording the actual height of the source Vue component instance after the last 20 renders, and then calculating the ratio of the maximum height to the average height.

[0157] The content type can be any of plain text, images / videos, or dynamic lists, and the corresponding coefficients are shown in Table 1:

[0158] Table 1

[0159]

[0160] For plain text types, the coefficient increases by 0.2 for every 500 characters; for dynamic list types, the coefficient increases by 0.5 for every 10 additional entries.

[0161] S86: If the source Vue component instance does not depend on asynchronous data, then add a minimum height constraint to the source Vue component instance.

[0162] In the implementation, if the source Vue component instance does not depend on asynchronous data, a minimum height constraint is added to the source Vue component instance. The minimum height constraint is the average height of the last 10 renders.

[0163] Furthermore, in this embodiment of the invention, the layout repair operation can also be bound to Vue data changes through a responsive integration interface to achieve a collaborative update mechanism, as follows:

[0164] a) Real-time monitoring of data changes:

[0165] Establish deep monitoring of component-dependent data (such as dynamic content like product information and user reviews), and immediately trigger the prediction process when key data attributes change;

[0166] b) Layout offset prediction mechanism:

[0167] Size prediction: Calculate the expected rendering size of the component based on the content growth factor;

[0168] Displacement simulation: Compare the size difference between the old and new dimensions to calculate the possible distance that adjacent elements may be pushed apart;

[0169] CLS score: The predicted value is calculated using the formula (displacement distance × width of the affected area) / viewport height.

[0170] c) Preventive repair strategies:

[0171] Automatically triggered when the predicted CLS score exceeds 0.1 (Google's "good" threshold):

[0172] For asynchronously loaded components: Inject dynamic size placeholders (height = historical maximum value × growth factor);

[0173] For conditional rendering components: temporarily switch to v-show mode and reserve space;

[0174] Inject the placeholder container before the Vue update cycle begins.

[0175] d) Adaptive deactivation:

[0176] When data changes do not cause significant size changes (predicted CLS < 0.05), the temporary placeholder container is automatically removed and the original rendering mode is restored.

[0177] Furthermore, after the step of repairing the source Vue component instance based on the displacement and component information, it also includes:

[0178] Open the monitoring window and use it to monitor whether the source Vue component instance experiences a layout offset again.

[0179] In practice, a 300ms monitoring window can be opened to capture secondary displacement events. A successful fix is ​​indicated when the CLS score of the source Vue component instance drops by 80% or more. If the fix fails, the original configuration is restored and a backup strategy is activated.

[0180] This invention improves the layout offset repair effect of Vue components by listening to layout offset events; removing non-user-interactive related events from the layout offset events to obtain the target event; extracting the displacement, affected area, and trigger timestamp from the target event; locating the source Vue component instance that caused the layout offset based on the coordinates of the affected area, and obtaining the component information of the source Vue component instance; and repairing the source Vue component instance based on the displacement and component information.

[0181] Please see Figure 3 , Figure 3 This is a structural block diagram of a Vue component dynamic layout offset repair device provided in an embodiment of the present invention.

[0182] This invention provides a device for correcting dynamic layout offset of Vue components, comprising:

[0183] The layout offset event listening module 301 is used to listen for layout offset events;

[0184] The target event acquisition module 302 is used to remove non-user operation related events from the layout offset events to obtain the target event;

[0185] The displacement, affected area and trigger timestamp extraction module 303 is used to extract the displacement, affected area and trigger timestamp from the target event;

[0186] The source Vue component instance positioning module 304 is used to locate the source Vue component instance that causes the layout offset based on the coordinates of the affected area, and to obtain the component information of the source Vue component instance.

[0187] Repair module 305 is used to repair the source Vue component instance based on the displacement and component information.

[0188] In this embodiment of the invention, the source Vue component instance locator module 304 includes:

[0189] The "Most Vue Component Matching Submodule" function is used to match the nearest Vue component in the preset render tree based on the coordinates of the affected area.

[0190] The tracing submodule is used to trace the origin of the most recent Vue component to obtain the root component;

[0191] The stability fingerprint acquisition submodule is used to obtain the stability fingerprint injected during the Vue template compilation stage;

[0192] The Source Vue Component Instance Determination Submodule is used to determine the source Vue component instance based on the root component and stability fingerprint, and to obtain the component information of the source Vue component instance.

[0193] In this embodiment of the invention, the displacement includes vertical displacement; the repair module 305 includes:

[0194] The displacement judgment submodule is used to determine whether the vertical displacement is greater than the preset displacement amount;

[0195] The rendering instruction extraction submodule is used to extract rendering instructions from component information if necessary.

[0196] The mode switching submodule is used to switch the source Vue component instance to v-show mode when the rendering directive is v-if.

[0197] The dependency judgment submodule is used to determine whether the source Vue component instance depends on asynchronous data when the rendering directive is not a v-if directive or the vertical displacement is not greater than the preset displacement amount.

[0198] The Dynamic Placeholder Injection submodule is used to inject dynamic placeholders into the source Vue component instance if the source Vue component instance depends on asynchronous data.

[0199] The minimum height constraint is added to a submodule to add a minimum height constraint to the source Vue component instance if the source Vue component instance does not depend on asynchronous data.

[0200] In this embodiment of the invention, the calculation of the dynamic placeholder includes:

[0201] The module is used to obtain the historical median width of the source Vue component instance, the historical median width of the parent container, the width of the parent container, the device type factor, the historical median rendered height, the actual height after rendering a preset number of times, and the content type.

[0202] The historical proportion coefficient calculation module is used to calculate the historical proportion coefficient based on the median historical width and the median historical width of the parent container.

[0203] The responsive proportion coefficient calculation module is used to calculate the responsive proportion coefficient based on the historical proportion coefficient and the device type factor.

[0204] The expected width calculation module is used to calculate the expected width based on the width of the parent container and the responsiveness ratio.

[0205] The maximum height and average height determination module is used to determine the maximum height and average height based on the actual height.

[0206] The historical dimensional fluctuation calculation module is used to calculate historical dimensional fluctuations based on the maximum height and average height.

[0207] The coefficient addition determination module is used to determine the coefficient addition based on the content type;

[0208] The content growth factor calculation module is used to calculate the content growth factor based on historical size fluctuations and coefficient addition.

[0209] The expected height calculation module is used to calculate the expected height based on the content growth factor and the median of historical rendered heights;

[0210] The dynamic placeholder generation module is used to generate dynamic placeholders based on the expected width and expected height.

[0211] In this embodiment of the invention, it further includes:

[0212] The monitoring module is used to open a monitoring window and monitor whether the source Vue component instance has experienced layout offset again.

[0213] This invention also provides an electronic device, which includes a processor and a memory:

[0214] The memory is used to store program code and transfer the program code to the processor;

[0215] The processor is used to execute the Vue component dynamic layout offset repair method of this invention according to the instructions in the program code.

[0216] This invention also provides a computer-readable storage medium for storing program code, which is used to execute the Vue component dynamic layout offset repair method of this invention.

[0217] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0218] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0219] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, apparatus, or computer program products. Therefore, embodiments of the present invention can take the form of entirely hardware embodiments, entirely software embodiments, or embodiments combining software and hardware aspects. Furthermore, embodiments of the present invention can take the form of computer program products implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0220] Embodiments of the present invention are described with reference to flowchart illustrations and / or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing terminal device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal device, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0221] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0222] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal equipment, causing a series of operational steps to be performed on the computer or other programmable terminal equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable terminal equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0223] Although preferred embodiments of the present invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the embodiments of the present invention.

[0224] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0225] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or terminal device that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or terminal device. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or terminal device that includes said element.

[0226] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for correcting dynamic layout offset of Vue components, characterized in that, include: Listen for layout offset events; Remove non-user operation-related events from the layout offset events to obtain the target event; Extract the displacement, affected area, and trigger timestamp from the target event; The source Vue component instance that generates the layout offset is located based on the coordinates of the affected area, and the component information of the source Vue component instance is obtained. Repair the source Vue component instance based on the displacement and the component information.

2. The method according to claim 1, characterized in that, The step of locating the source Vue component instance that generates the layout offset based on the coordinates of the affected area, and obtaining the component information of the source Vue component instance, includes: Match the nearest Vue component in the preset rendering tree based on the coordinates of the affected area; By tracing the source of the most recent Vue component, the root component is obtained; Obtain the stability fingerprint injected during the Vue template compilation phase; The source Vue component instance is determined based on the root component and the stability fingerprint, and the component information of the source Vue component instance is obtained.

3. The method according to claim 1, characterized in that, The displacement includes vertical displacement; the step of repairing the source Vue component instance based on the displacement and the component information includes: Determine whether the vertical displacement is greater than a preset displacement amount; If so, extract rendering instructions from the component information; When the rendering directive is a v-if directive, the source Vue component instance is switched to v-show mode; If the rendering instruction is not a v-if instruction or the vertical displacement is not greater than the preset displacement, then it is determined whether the source Vue component instance depends on asynchronous data. If the source Vue component instance depends on asynchronous data, then inject a dynamic placeholder into the source Vue component instance; If the source Vue component instance does not depend on asynchronous data, then add a minimum height constraint to the source Vue component instance.

4. The method according to claim 1, characterized in that, The calculation steps for the dynamic placeholder include: Obtain the historical median width of the source Vue component instance, the historical median width of the parent container, the width of the parent container, the device type factor, the historical median rendered height, the actual height after rendering a preset number of historical times, and the content type; Calculate the historical proportion coefficient based on the median historical width and the median historical width of the parent container; Calculate the responsive proportion coefficient based on the historical proportion coefficient and the device type factor; Calculate the expected width based on the parent container width and the responsive proportion coefficient; The maximum height and average height are determined based on the actual height. Historical size fluctuations are calculated based on the maximum height and the average height. The coefficient addition is determined based on the content type; The content growth factor is calculated based on the historical size fluctuations and the coefficient addition. The expected height is calculated based on the content growth factor and the median historical rendered height. A dynamic placeholder is generated using the expected width and the expected height.

5. The method according to claim 1, characterized in that, After the step of repairing the source Vue component instance based on the displacement and the component information, the method further includes: Open the monitoring window and monitor whether the source Vue component instance experiences layout offset again through the monitoring window.

6. A device for correcting dynamic layout offset of Vue components, characterized in that, include: The layout offset event listener module is used to listen for layout offset events; The target event acquisition module is used to remove non-user operation-related events from the layout offset events to obtain the target event; The displacement, affected area, and trigger timestamp extraction module is used to extract the displacement, affected area, and trigger timestamp from the target event. The source Vue component instance positioning module is used to locate the source Vue component instance that generates the layout offset based on the coordinates of the affected area, and to obtain the component information of the source Vue component instance. The repair module is used to repair the source Vue component instance based on the displacement and the component information.

7. The apparatus according to claim 6, characterized in that, The source Vue component instance locator module includes: The most recent Vue component matching submodule is used to match the most recent Vue component in the preset rendering tree based on the coordinates of the affected area; The tracing submodule is used to trace the source of the most recent Vue component to obtain the root component; The stability fingerprint acquisition submodule is used to obtain the stability fingerprint injected during the Vue template compilation stage; The source Vue component instance determination submodule is used to determine the source Vue component instance based on the root component and the stability fingerprint, and to obtain the component information of the source Vue component instance.

8. The apparatus according to claim 6, characterized in that, The displacement includes vertical displacement; the repair module includes: The displacement determination submodule is used to determine whether the vertical displacement is greater than a preset displacement amount; The rendering instruction extraction submodule is used to extract rendering instructions from the component information if the condition is met. The mode switching submodule is used to switch the source Vue component instance to v-show mode when the rendering instruction is a v-if instruction; The dependency judgment submodule is used to determine whether the source Vue component instance depends on asynchronous data when the rendering instruction is not a v-if instruction or the vertical displacement is not greater than a preset displacement amount. The dynamic placeholder injection submodule is used to inject dynamic placeholders into the source Vue component instance if the source Vue component instance depends on asynchronous data. A minimum height constraint submodule is added to add a minimum height constraint to the source Vue component instance if the source Vue component instance does not depend on asynchronous data.

9. An electronic device, characterized in that, The device includes a processor and a memory: The memory is used to store program code and transmit the program code to the processor; The processor is used to execute the Vue component dynamic layout offset repair method according to any one of the instructions in the program code.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store program code, which is used to execute the Vue component dynamic layout offset repair method according to any one of claims 1-5.

Images