Page loading method and related device

Abstract

The invention discloses a page loading method and a related device, and relates to the technical field of page development, and the page loading method comprises the following steps: constructing an equipment capability matrix which comprises real-time values of a plurality of equipment parameters, and adjusting a preset static layout breakpoint based on an equipment pixel ratio, an aspect ratio and a screen extension state parameter to obtain a real-time layout breakpoint. And determining the resource type of the to-be-loaded static resource and the style type of the to-be-loaded style based on the equipment capability matrix. Based on the equipment capability matrix, a target weight coefficient set is determined, and the target weight coefficient set comprises target weight coefficients of the priority parameters. And based on the target weight coefficient set, performing weighted addition on each priority parameter, and determining to obtain a loading grade score of the to-be-loaded component. And sequentially and synchronously loading the to-be-loaded component, the to-be-loaded static resource and the to-be-loaded style according to the loading grade score of the to-be-loaded component. Therefore, the page loading flexibility and the equipment adaptation degree are improved.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence technology, and in particular to a page loading method and related apparatus. Background Technology

[0002] Currently, there are over 200 active device types, ranging from 240×320px feature phones to 3840×2160px 4K desktop screens. The pixel density difference between different types of devices is as high as 8 times. Current page loading methods are difficult to adapt to the trend of device fragmentation and cannot achieve multi-terminal adaptation. Summary of the Invention

[0003] In view of the above problems, this application provides a page loading method and related apparatus to improve the flexibility and adaptability of page loading. The specific solution is as follows:

[0004] The first aspect of this application provides a page loading method, including:

[0005] Construct a device capability matrix, which includes real-time values ​​of multiple device parameters, including device pixel ratio, aspect ratio, and screen expansion status parameters;

[0006] Based on the device pixel ratio, the aspect ratio, and the screen expansion state parameters, the preset static layout breakpoint is adjusted to obtain the real-time layout breakpoint.

[0007] Based on the device capability matrix, determine the resource type of the static resource to be loaded and the style type of the style to be loaded;

[0008] Based on the device capability matrix, a target weight coefficient set is determined, which includes the target weight coefficients for each priority parameter.

[0009] Based on the target weight coefficient set, the priority parameters are weighted and summed to determine the loading level score of the component to be loaded;

[0010] According to the loading level score, the components to be loaded, the static resources to be loaded, and the styles to be loaded are loaded synchronously in sequence.

[0011] In one possible implementation, based on the device pixel ratio, the aspect ratio, and the screen expansion state parameters, a preset static layout breakpoint is adjusted to obtain a real-time layout breakpoint, including:

[0012] Determine the aspect ratio compensation coefficient based on the aspect ratio;

[0013] The device form compensation coefficient is determined based on the screen expansion status parameters.

[0014] Based on the device pixel ratio, determine the device pixel compensation coefficient to adjust the device pixel ratio.

[0015] The real-time layout breakpoint is obtained by multiplying the baseline layout breakpoint, the device pixel compensation coefficient, the device shape compensation coefficient, and the aspect ratio compensation coefficient.

[0016] In one possible implementation, based on the device capability matrix, the resource type of the static resource to be loaded and the style type of the style to be loaded are determined, including:

[0017] Based on the current device type and the device capability matrix, the current device is evaluated to obtain the performance evaluation result of the current device. The device capability matrix also includes performance evaluation parameters.

[0018] Based on the performance evaluation results, the resource type of the static resource to be loaded and the style type of the style to be loaded are determined.

[0019] In one possible implementation, based on the device capability matrix, a target weight coefficient set is determined, including:

[0020] Based on the real-time value of at least one target device parameter, determine whether the corresponding dynamic weight allocation timing has been reached; if so, determine the target weight coefficient set based on the baseline weight coefficient set and the corresponding dynamic weight set.

[0021] The set of baseline weight coefficients includes the baseline weight coefficients of each of the priority parameters, the set of dynamic weights includes the dynamic weight coefficients of the target priority parameters, the priority parameters include component size parameters, resource priority, visible area weight, and network quality score, and the target priority parameters include at least one priority parameter.

[0022] In one possible implementation, the page loading method also includes:

[0023] In response to the achievement of preset trigger conditions, update the loading threshold;

[0024] If the loading level score is lower than the loading threshold, a preset loading degradation scheme is triggered.

[0025] In one possible implementation, the page loading method also includes:

[0026] Based on the device pixel ratio, determine the real-time pixel density;

[0027] The page is rendered based on the loaded data, which includes the real-time layout breakpoints, style loading results, component loading results, static resource loading results, and the real-time pixel density.

[0028] A second aspect of this application provides a page loading apparatus, comprising:

[0029] A parameter monitoring unit is used to construct a device capability matrix, which includes real-time values ​​of multiple device parameters, including device pixel ratio, aspect ratio, and screen expansion status parameters.

[0030] The breakpoint dynamic determination unit is used to adjust the preset static layout breakpoint based on the device pixel ratio, the aspect ratio and the screen expansion state parameters to obtain the real-time layout breakpoint.

[0031] The loading type determination unit determines the resource type of the static resource to be loaded and the style type of the style to be loaded based on the device capability matrix.

[0032] The weight determination unit is used to determine a target weight coefficient set based on the device capability matrix, wherein the target weight coefficient set includes the target weight coefficients of each priority parameter;

[0033] The loading level scoring unit is used to perform a weighted summation of each priority parameter based on the target weight coefficient set to determine the loading level score of the component to be loaded.

[0034] The page loading unit loads the components to be loaded, the static resources to be loaded, and the styles to be loaded in sequence according to the loading level score.

[0035] A third aspect of this application provides a computer program product including computer-readable instructions that, when executed on an electronic device, cause the electronic device to implement the page loading method of the first aspect or any implementation thereof.

[0036] A fourth aspect of this application provides an electronic device, including at least one processor and a memory connected to the processor, wherein:

[0037] The memory is used to store computer programs;

[0038] The processor is used to execute the computer program so that the electronic device can implement the page loading method of the first aspect or any implementation thereof.

[0039] The fifth aspect of this application provides a computer storage medium carrying one or more computer programs, which, when executed by an electronic device, enable the electronic device to perform the page loading method described in the first aspect or any implementation thereof.

[0040] By employing the above technical solution, this application provides a page loading and related apparatus that constructs a device capability matrix. The device capability matrix includes real-time values ​​of multiple device parameters, including device pixel ratio, aspect ratio, and screen expansion status parameters. Based on the device pixel ratio, aspect ratio, and screen expansion status parameters, preset static layout breakpoints are adjusted to obtain real-time layout breakpoints. Based on the device capability matrix, the resource type of the static resource to be loaded and the style type of the style to be loaded are determined. Based on the device capability matrix, a target weight coefficient set is determined, including the target weight coefficients of each priority parameter. Based on the target weight coefficient set, each priority parameter is weighted and summed to determine the loading level score of the component to be loaded. According to the loading level score of the component to be loaded, the component to be loaded, the static resource to be loaded, and the style to be loaded are loaded synchronously in sequence. Therefore, this solution quantifies multi-dimensional device parameters into a device capability matrix, monitors the device capability matrix in real time, and achieves on-demand resource loading based on the real-time values ​​of multiple dimensions of device parameters in the device capability matrix, thereby improving page loading efficiency and enhancing page loading flexibility and device adaptability. Attached Figure Description

[0041] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0042] Figure 1 A system architecture diagram for page loading is provided in this application;

[0043] Figure 2 A flowchart illustrating a page loading method provided in this application;

[0044] Figure 3 A schematic diagram illustrating the specific implementation process of a page loading method provided in this application;

[0045] Figure 4 A schematic diagram of a page loading device provided in this application;

[0046] Figure 5 This is a schematic diagram of the structure of an electronic device provided in this application. Detailed Implementation

[0047] The embodiments of this application are described below with reference to the accompanying drawings. The terminology used in the implementation section of this application is for explaining specific embodiments only and is not intended to limit the scope of this application.

[0048] The embodiments of this application will now be described with reference to the accompanying drawings. Those skilled in the art will recognize that, with technological advancements and the emergence of new scenarios, the technical solutions provided in the embodiments of this application are equally applicable to similar technical problems.

[0049] The terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such terms are interchangeable where appropriate; this is merely a way of distinguishing objects with the same attributes in the embodiments of this application. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion, so that a process, method, system, product, or apparatus that comprises a series of elements is not necessarily limited to those elements, but may include other elements not explicitly listed or inherent to those processes, methods, products, or apparatuses.

[0050] Traditional page loading methods rely on static breakpoint systems that use preset fixed breakpoints (such as Bootstrap's 576px / 768px / 992px) to classify device types, loading separate codebases for mobile or PC through conditional rendering. For example, e-commerce platforms develop separate hamburger menu navigation (mobile) and full-view navigation (PC) for different device types. However, static breakpoint systems depend on only the viewport width, leading to foldable devices being incorrectly classified as "tablets," and their near-square screen ratio (1.25:1) causing a layout misalignment rate of up to 19.3%. Furthermore, multiple codebase versions result in redundant development of features, with mobile / PC component duplication rates reaching 45%-68%, and unused CSS rules accounting for 35%.

[0051] Furthermore, traditional page loading methods employ a full-resource loading strategy, forcibly loading all CSS rules, high-resolution images, and functional components regardless of the user's device performance. Statistics show that this full-resource loading strategy results in a first-screen loading time of up to 8.2 seconds on 3G networks, a 22% increase in memory overflow crashes on low-end devices, and 38% of the loaded resources being completely invisible on the first screen. In summary, the mismatch between dynamically changing device environments (such as the opening and closing state of foldable screens and network fluctuations) and preset rules ultimately leads to reduced adaptation accuracy and performance.

[0052] In summary, the embodiments of this application provide a page loading method that improves page loading flexibility and device compatibility.

[0053] This application may be applied, but is not limited to, to applications with page loading capabilities or cloud services provided by cloud-side servers, which will be described in detail below:

[0054] See Figure 1 , Figure 1A schematic diagram of a system architecture is shown. The system may include a terminal 100 and a server 200. The server 200 can provide the methods provided in the embodiments of this application to one or more terminals.

[0055] The terminal 100 may have a page loading application installed. The application and the webpage can provide an interface. The terminal 100 can receive relevant parameters input by the user on the page loading interface and send the parameters to the server 200. The server 200 can obtain the processing result based on the received parameters and return the processing result to the terminal 100.

[0056] It should be understood that in some optional implementations, the terminal 100 can also complete the action of obtaining the processing result based on the received parameters on its own, without the need for the server to cooperate. This application embodiment is not limited to this.

[0057] The following description Figure 1 The product form of the mid-terminal 100;

[0058] The terminal 100 in this application embodiment can be a mobile phone, tablet computer, wearable device, vehicle device, augmented reality (AR) / virtual reality (VR) device, laptop computer, ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), etc., and this application embodiment does not impose any restrictions on it.

[0059] Terminal 100 may include a radio frequency unit, memory, input unit, display unit, camera (optional), audio circuitry (optional), speaker (optional), microphone (optional), headphone jack (optional), processor, external interface, power supply, and other components. Those skilled in the art will understand that the above-mentioned components are merely examples and do not constitute a limitation on the terminal or multifunctional device; it may include more or fewer components, or a combination of certain components, or different components.

[0060] The input unit can be used to receive input numeric or character information, and to generate key signal inputs related to user settings and function control of the portable multi-functional device. Specifically, the input unit may include a touchscreen (optional) and / or other input devices. Other input devices may include, but are not limited to, one or more of a physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, etc.

[0061] Among them, the input device can receive input data, etc.

[0062] The display unit can be used to display information input by the user or information provided to the user, various menus of the terminal, interactive interfaces, file display, and / or playback of any multimedia file. In the embodiments of this application, the display unit can be used to display the page loading interface, processing results, etc.

[0063] The memory can be used to store software code related to the page loading method, the processor can execute the steps of the page loading method, and can also schedule other units (such as the input unit and display unit mentioned above) to achieve the corresponding functions.

[0064] This radio frequency unit (optional) can be used to receive and send signals during information transmission or calls.

[0065] In this embodiment of the application, the radio frequency unit can send data to the server 200 and receive the processing results sent by the server 200.

[0066] It should be understood that this radio frequency unit is optional and can be replaced with other communication interfaces, such as a network port.

[0067] Terminal 100 also includes a power source (such as a battery) for supplying power to the various components.

[0068] Terminal 100 also includes an external interface, which can be a standard Micro USB interface or a multi-pin connector, which can be used to connect terminal 100 to other devices for communication or to connect a charger to charge terminal 100.

[0069] Server 200 includes a bus, a processor, a communication interface, and memory. The processor, memory, and communication interface communicate with each other via the bus.

[0070] The memory can be used to store software code related to the page loading method, the processor can execute the steps of the chip's page loading method, and can also schedule other units to achieve the corresponding functions.

[0071] The page loading method of this application embodiment will be described in detail below with reference to the accompanying drawings.

[0072] Reference Figure 2 , Figure 2 This is a flowchart illustrating a page loading method provided in an embodiment of this application, such as... Figure 2 As shown in the figure, the page loading method provided in this application embodiment may include steps S201 to S206, which are described in detail below.

[0073] S201. Construct the device capability matrix, which includes real-time values ​​of multiple device parameters.

[0074] In this embodiment, the multiple device parameters include at least the device pixel ratio, aspect ratio, and screen expansion status parameters.

[0075] In one optional embodiment, the device capability matrix includes real-time values ​​of device parameters in multiple dimensions. Specifically, the device parameters in the display parameter dimension include screen extension status parameters (indicating whether the device is in screen extension state), aspect ratio, logical width, physical pixels, resolution, device pixel ratio, and color depth, etc. The device parameters in the interaction parameter dimension include touch support, input type, and hover, etc. The device parameters in the performance parameter dimension include device memory and number of CPU cores, etc.

[0076] S202. Based on the device pixel ratio, aspect ratio, and screen expansion status parameters, adjust the preset static layout breakpoints to obtain real-time layout breakpoints.

[0077] S203. Based on the device capability matrix, determine the resource type of the static resource to be loaded and the style type of the style to be loaded.

[0078] S204. Based on the equipment capability matrix, determine the target weight coefficient set.

[0079] In this embodiment, the target weight coefficient set includes the target weight coefficients of each priority parameter, which are used to indicate the degree of influence of each priority parameter on the loading level score.

[0080] S205. Based on the target weight coefficient set, the priority parameters are weighted and summed to determine the loading level score of the component to be loaded.

[0081] S206. Based on the loading level score, load the components to be loaded, static resources to be loaded, and styles to be loaded in sequence.

[0082] As can be seen from the above technical solution, the page loading method provided in this application constructs a device capability matrix, which includes real-time values ​​of multiple device parameters, including device pixel ratio, aspect ratio, and screen expansion status parameters. Based on the device pixel ratio, aspect ratio, and screen expansion status parameters, preset static layout breakpoints are adjusted to obtain real-time layout breakpoints. Based on the device capability matrix, the resource type of the static resource to be loaded and the style type of the style to be loaded are determined. Based on the device capability matrix, a target weight coefficient set is determined, which includes the target weight coefficients of each priority parameter. Based on the target weight coefficient set, each priority parameter is weighted and summed to determine the loading level score of the component to be loaded. According to the loading level score of the component to be loaded, the component to be loaded, the static resource to be loaded, and the style to be loaded are loaded synchronously in sequence. Thus, this solution quantifies multi-dimensional device parameters into a device capability matrix, monitors the device capability matrix in real time, and realizes on-demand resource loading based on the real-time values ​​of multiple dimensions of device parameters in the device capability matrix, thereby improving page loading efficiency and enhancing page loading flexibility and device adaptability.

[0083] See Figure 3 , Figure 3 This is a schematic diagram illustrating the specific implementation process of a page loading method provided in an embodiment of this application, as shown below. Figure 3 As shown, this method specifically includes steps S301 to S312, which are described in detail below.

[0084] S301. Through a preset interface, real-time values ​​of device parameters in multiple dimensions are collected and updated to construct a device capability matrix.

[0085] In this embodiment, the changes of each device parameter are monitored in parallel through the interface used to obtain each device parameter. After the device parameter changes, the device capability matrix is ​​updated in real time. For example, the preset `ResizeObserver` interface monitors the window changes, determines the device pixel ratio, and senses the hinge angle of the folding screen through the `DeviceOrientationEvent` interface, thereby determining whether it is in the screen expansion state, that is, whether it is in the folding screen expansion state.

[0086] S302. Based on the device pixel ratio, aspect ratio, and screen expansion status parameters, adjust the preset static layout breakpoints to obtain real-time layout breakpoints.

[0087] In this embodiment, the specific method for adjusting the preset static layout breakpoint to obtain the real-time layout breakpoint based on the device pixel ratio, aspect ratio, and screen expansion status parameters includes:

[0088] A1. Determine the aspect ratio compensation coefficient based on the aspect ratio.

[0089] Specifically, the aspect ratio satisfies the following conditions: when it is less than the first preset aspect ratio threshold or greater than the second preset aspect ratio threshold, the aspect ratio compensation coefficient is determined to be the first preset value; when it is not satisfied, that is, when the aspect ratio is not less than the first preset aspect ratio threshold and not greater than the second preset aspect ratio threshold, the aspect ratio compensation coefficient is determined to be 1.

[0090] Wherein, the first preset value is less than 1, optionally, the first preset value = 0.9, the first preset aspect ratio threshold = 0.8, and the second preset aspect ratio threshold = 1.5, then, when the aspect ratio is less than 0.8 or greater than 1.5, the aspect ratio compensation coefficient is determined to be 0.9.

[0091] A2. Determine the device form compensation coefficient based on the screen expansion state parameters.

[0092] Specifically, if the screen expansion status parameter indicates that the screen is not in foldable expansion, the device form compensation coefficient is determined to be equal to 1; if the screen expansion status parameter indicates that the screen is in foldable expansion, the device form compensation coefficient is equal to the second preset value.

[0093] Wherein, the second preset value is greater than 1. Optionally, if the second preset value is 1.2, then if the screen expansion status parameter indicates that the screen is in foldable expansion, the device form compensation coefficient is adjusted to 1.2.

[0094] A3. Based on the device pixel ratio, determine the device pixel compensation coefficient.

[0095] Specifically, the device pixel compensation factor is equal to the sum of the product of the device pixel ratio minus 1 and 0.2, and 1. That is, device pixel compensation factor = 1 + 0.2 × (DPR - 1), where DPR represents the device pixel ratio.

[0096] A4. Calculate the product of the baseline layout breakpoint, device pixel compensation coefficient, device shape compensation coefficient, and aspect ratio compensation coefficient to obtain the real-time layout breakpoint.

[0097] Specifically, the method for calculating the real-time layout breakpoint by adjusting the preset baseline layout breakpoint based on device pixel ratio, aspect ratio, and screen expansion state parameters is shown in the following formula:

[0098] In summary, this step automatically calculates real-time layout breakpoints based on the device's real-time characteristics, thereby improving the device's automatic adaptation capabilities.

[0099] S303. Determine the real-time pixel density based on the device pixel ratio.

[0100] In this embodiment, the rem reference is dynamically set according to the device pixel ratio, and the root element font size is determined based on the rem reference, thereby determining the real-time pixel density.

[0101] Specifically, this is based on setting the font size in the root HTML of the rem baseline project so that the font size is equal to 10 times the dpr, where dpr is the real-time value of the device pixel ratio (DPR). That is:

[0102] document.documentElement.style.fontSize=`${10×dpr}px`.

[0103] S304. Based on the current device type and device capability matrix, perform a performance evaluation on the current device to obtain the performance evaluation result of the current device.

[0104] In this embodiment, the device type of the current device is determined through a device capability matrix. The performance evaluation result includes one of several preset performance levels, such as high performance and low performance.

[0105] In this embodiment, since different device types correspond to different performance evaluation rules, the performance evaluation rules include multiple first device parameters, i.e. performance evaluation parameters, and their correspondence with multiple preset performance levels. For example, the performance evaluation rules include DPR≥2 and memory greater than or equal to 2GB, which corresponds to high performance.

[0106] S305. Based on the performance evaluation results of the current device, determine the resource type of the static resource to be loaded and the style type of the style to be loaded.

[0107] In this embodiment, different preset performance levels correspond to different resource types and style types.

[0108] S306. Based on the real-time value of at least one target device parameter, determine whether the corresponding dynamic weight allocation timing has been reached. If so, determine the target weight coefficient set based on the baseline weight coefficient set and the corresponding dynamic weight set.

[0109] In this embodiment, the baseline weight coefficient set includes the baseline weight coefficients of each priority parameter, the dynamic weight set includes the dynamic weight coefficients of the target priority parameter, and the target weight coefficient set includes the target weight coefficients of each priority parameter. The priority parameters include component size parameter, resource priority, visible area weight, and network quality score. Specifically, the component size parameter is equal to 1 / component size, the network quality score is obtained based on the device parameter matrix, and the resource priority is determined based on the static resources to be loaded corresponding to the component.

[0110] In this embodiment, at least one target device parameter includes network bandwidth, device memory, and screen extension status. The corresponding dynamic weight allocation timings are network bandwidth less than the bandwidth threshold (3G), device memory not greater than the memory threshold (2GB), and being in screen extension status, respectively. The corresponding dynamic weight sets are a first weight set, a second weight set, and a third weight set. The first weight set includes dynamic weight coefficients for component size parameters and network quality scores. The second weight set includes dynamic weight coefficients for component size parameters and resource priority. The third weight set includes dynamic weight coefficients for component size parameters and visible area weights.

[0111] Specifically, when the network bandwidth is less than 3G, the target weight coefficients for component size and resource priority will be configured as dynamic weight coefficients from the first weight set, while the target weight coefficients for resource priority and visible area weight will be configured as baseline weight coefficients. Thus, dynamic weight allocation places greater emphasis on network conditions.

[0112] When the memory device reaches ≤2GB, the target weight coefficients for component size and resource priority will be configured as dynamic weight coefficients from the second weight set, while the target weight coefficients for network quality score and visible area weight will be configured as baseline weight coefficients. This dynamic weight allocation prioritizes and ensures core functionality.

[0113] When in screen expansion mode, the target weight coefficients for component size parameters and visible area weights are configured with dynamic weight coefficients from the third weight set, while the target weight coefficients for resource priority and network quality scores are configured with baseline weight coefficients. This dynamically allocates weights to improve the visible area weight.

[0114] S307. Based on the target weight coefficient set, the component size parameter, resource priority, visible area weight, and network quality score are weighted and summed to determine the loading level score of the component to be loaded.

[0115] In this embodiment, the method for determining the loading level score of the component to be loaded is as follows:

[0116]

[0117] Where FileSize represents the component size, Criticism represents the resource priority, ViewportWeight represents the viewport weight, and NetworkScore represents the network quality score. α, β, γ, and θ represent the target weight coefficients for the component size parameter, resource priority, viewport weight, and network quality score, respectively. Optionally, the baseline weight coefficients are α = 0.4, β = 0.3, γ = 0.2, and θ = 0.1.

[0118] It should be noted that the load rank scoring model is applied to resource loading decisions. For example, when a user opens a page, core content (such as product images) needs to be displayed as quickly as possible. This is calculated using the load rank scoring model.

[0119] Product images are given a resource priority of 0.9 (highest level), and the visible area weight is 1.0. Product images will be loaded first, while non-first-screen modules will be loaded later.

[0120] S308. Based on the loading level score of the components to be loaded, load the components, static resources, and styles to be loaded in sequence.

[0121] In this embodiment, components to be loaded, static resources to be loaded, and styles to be loaded are loaded synchronously according to the loading level score from high to low.

[0122] It should be noted that the loading of a component will only be performed if the loading level score of the component to be loaded is greater than the loading threshold.

[0123] S309. Render the page based on real-time pixel density, real-time layout breakpoints, style loading results, component loading results, and static resource loading results.

[0124] S310. In response to the achievement of the preset trigger condition, update the loading threshold.

[0125] In this embodiment, the system determines whether the triggering conditions are met by real-time monitoring of the device parameter matrix. The triggering conditions include:

[0126] Network quality change: Switching from WiFi to 4G / 3G.

[0127] Device performance fluctuations: Memory usage exceeds a threshold (e.g., >80%).

[0128] Interaction state changes: screen rotation, folding screen opening and closing.

[0129] User behavior detection: rapid scrolling, frequent page switching.

[0130] If any of the triggering conditions are met, update the loading threshold:

[0131] Threshold=Math.min(0.8,0.6+(memory / 8)*0.2)-(isSlowNetWork?0.3:0))

[0132] memory=navigator.deviceMemory||4

[0133] isSlowNetwork=navigator.connection.saveData;

[0134] Here, `memory` refers to the device's memory, and `sSlowNetwork` indicates whether the network is slow. If a slow network is detected, the threshold is reduced by 0.3. The minimum value between 0.8 and the values ​​calculated based on memory and network conditions is taken as the priority threshold.

[0135] S311. If the loading level score is lower than the loading threshold, the preset loading degradation scheme is triggered.

[0136] In this embodiment, the downgrade loading scheme includes:

[0137] Replace high-resolution images in the component with standard-resolution images. High-resolution images are usually large files, which consume more network bandwidth and memory, while standard-resolution images are relatively small files, which can reduce resource loading time and memory usage, and improve component loading speed.

[0138] Removing non-core JavaScript code from components, such as scripts used for advanced interactive effects but not essential for the component's basic functionality, can reduce browser parsing and execution time and speed up component response.

[0139] Turn off complex animation effects in components, such as some cool transition animations and particle animations. These animations consume a lot of CPU and GPU resources. Turning them off can reduce device load and improve overall performance.

[0140] S312. If the loading level score is not lower than the loading threshold, maintain the status quo.

[0141] The loading level score should not be lower than the loading threshold, and the current resource and functional state of the component should be maintained to ensure the full functionality of the component and a high-quality visual experience.

[0142] As can be seen from the above technical solutions, the page loading method provided in the application embodiments, based on a dynamic perception and collaborative optimization mechanism, achieves the following technical effects by dynamically identifying device information and dynamic resource loading strategies:

[0143] First, overcome the technical shortcomings of single-dimensional adaptation and improve page loading and device compatibility:

[0144] Traditional solutions use a fixed viewport width breakpoint (e.g., 768px / 992px) as the sole basis for adaptation. They fail to recognize the device's physical characteristics (e.g., screen ratio, pixel density) and interaction methods (touch / keyboard / mouse). Foldable devices (e.g., the Galaxy Z Fold4 in its folded state at 840px) are incorrectly classified as "tablets," and their 1.25:1 screen ratio causes grid layout compression and distortion, with a measured misalignment rate of 19.3%. High-resolution screens (e.g., 4K displays) do not perceive DPR (Display Rendering Per Pixel), resulting in the loading of low-quality resources; 2x / 3x screens still use 1x images.

[0145] This solution quantifies device characteristics such as screen parameters (width, DPI), interaction methods (touch / keyboard / mouse), and hardware performance (memory / CPU) into mathematical matrices, thereby constructing a device capability matrix. Based on the real-time values ​​of device parameters in multiple dimensions of the device capability matrix, resources are loaded on demand, thereby improving the device adaptability of the page and increasing page loading efficiency.

[0146] Furthermore, it breaks through the traditional single-dimensional judgment based solely on viewport width, and dynamically adjusts loading strategies based on factors such as memory, CPU core count, and network type. This reduces first-screen loading time, decreases the proportion of redundant resources, lowers server bandwidth costs, reduces crash rates on low-end devices, improves the real-time device adaptability of page loading, and enhances user retention.

[0147] Furthermore, dynamic layout breakpoints overcome the limitations of fixed breakpoints, improving adaptation accuracy. Specifically, layout thresholds are calculated based on parameters such as device pixel density (DPR), screen ratio, and folding shape to reduce the layout misalignment rate of foldable screens, improve the adaptation accuracy of high-resolution screens, thereby reducing user visual fatigue and solving the adaptation challenges of new devices such as foldable screens and high-resolution screens. Precise adaptation enhances operational smoothness.

[0148] Second, improve page loading performance.

[0149] Traditional solutions load all resources (CSS / JS / images) uniformly regardless of device capabilities, leading to memory overflow on low-end devices (memory ≤ 2GB) and wasted network bandwidth (loading invisible content).

[0150] This solution adjusts resource allocation based on equipment classification and performance grading, and introduces joint decision-making based on equipment memory and network quality to reduce the crash rate of low-end equipment.

[0151] Third, improve the interactive experience.

[0152] Traditional solutions handle styles (CSS media queries) and logic (JS conditional loading) independently, leading to asynchronous resource loading sequences and causing layout jitter. Misaligned CSS and JS loading orders can cause sudden button placement changes, increasing the rate of accidental clicks by users.

[0153] This solution uses a load rating system to synchronize the loading times of three types of resources, avoiding loading conflicts. Specifically, by synchronizing the loading times of CSS / JS / media resources, it reduces cumulative layout offsets, lowers the rate of accidental button clicks, and thus enhances interaction stability.

[0154] In summary, the page loading method provided in this application solves the technical problems of code redundancy, inaccurate device adaptation, and poor loading performance in traditional responsive development.

[0155] The above describes a page loading method provided by an embodiment of this application. The following describes the apparatus for performing the above page loading method.

[0156] Please see Figure 4 , Figure 4 This is a schematic diagram of a page loading device provided in an embodiment of this application. Figure 4 As shown, the page loading device 400 includes:

[0157] The parameter monitoring unit 401 is used to construct a device capability matrix, which includes real-time values ​​of multiple device parameters, including device pixel ratio, aspect ratio and screen expansion status parameters.

[0158] The breakpoint dynamic determination unit 402 is used to adjust the preset static layout breakpoint based on the device pixel ratio, the aspect ratio and the screen expansion state parameters to obtain the real-time layout breakpoint.

[0159] The loading type determination unit 403 determines the resource type of the static resource to be loaded and the style type of the style to be loaded based on the device capability matrix.

[0160] The weight determination unit 404 is used to determine a target weight coefficient set based on the device capability matrix, wherein the target weight coefficient set includes the target weight coefficients of each priority parameter;

[0161] The loading level scoring unit 405 is used to perform a weighted summation of each priority parameter based on the target weight coefficient set to determine the loading level score of the component to be loaded.

[0162] Page loading unit 406 loads the components to be loaded, the static resources to be loaded, and the styles to be loaded in sequence according to the loading level score.

[0163] In one possible implementation, the breakpoint dynamic determination unit, used to adjust a preset static layout breakpoint based on the device pixel ratio, the aspect ratio, and the screen expansion state parameters, specifically for obtaining a real-time layout breakpoint, is used to:

[0164] Determine the aspect ratio compensation coefficient based on the aspect ratio;

[0165] The device form compensation coefficient is determined based on the screen expansion status parameters.

[0166] Based on the device pixel ratio, determine the device pixel compensation coefficient to adjust the device pixel ratio.

[0167] The real-time layout breakpoint is obtained by multiplying the baseline layout breakpoint, the device pixel compensation coefficient, the device shape compensation coefficient, and the aspect ratio compensation coefficient.

[0168] In one possible implementation, when the loading type determination unit determines the resource type of the static resource to be loaded and the style type of the style to be loaded based on the device capability matrix, it is specifically used for:

[0169] Based on the current device type and the device capability matrix, the current device is evaluated to obtain the performance evaluation result of the current device. The device capability matrix also includes performance evaluation parameters.

[0170] Based on the performance evaluation results, the resource type of the static resource to be loaded and the style type of the style to be loaded are determined.

[0171] In one possible implementation, when the weight determination unit determines the target weight coefficient set based on the device capability matrix, it is specifically used for:

[0172] Based on the real-time value of at least one target device parameter, determine whether the corresponding dynamic weight allocation timing has been reached; if so, determine the target weight coefficient set based on the baseline weight coefficient set and the corresponding dynamic weight set.

[0173] The set of baseline weight coefficients includes the baseline weight coefficients of each of the priority parameters, the set of dynamic weights includes the dynamic weight coefficients of the target priority parameters, the priority parameters include component size parameters, resource priority, visible area weight, and network quality score, and the target priority parameters include at least one priority parameter.

[0174] In one possible implementation, the page loading device further includes: a loading degradation unit, used to update a loading threshold in response to reaching a preset triggering condition; and to trigger a preset loading degradation scheme if the loading level score is lower than the loading threshold.

[0175] In one possible implementation, the page loading device also includes:

[0176] A pixel density acquisition unit is used to determine the real-time pixel density based on the pixel ratio of the device;

[0177] The page rendering unit is used to render the page based on the loaded data, which includes the real-time layout breakpoints, style loading results, component loading results, static resource loading results, and the real-time pixel density.

[0178] This application also provides an electronic device in its embodiments. (See reference...) Figure 5 The diagram illustrates a structural schematic suitable for implementing the electronic device in the embodiments of this application. The electronic device in the embodiments of this application may include, but is not limited to, fixed terminals such as mobile phones, laptops, PDAs (personal digital assistants), PADs (tablet computers), desktop computers, etc. Figure 5 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0179] like Figure 5 As shown, the electronic device may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 501, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 502 or a program loaded from a storage device 508 into a random access memory (RAM) 503. When the electronic device is powered on, the RAM 503 also stores various programs and data required for the operation of the electronic device. The processing unit 501, ROM 502, and RAM 503 are interconnected via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0180] Typically, the following devices can be connected to I / O interface 505: input devices 506 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 507 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 508 including, for example, memory cards, hard drives, etc.; and communication devices 509. Communication device 509 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 5 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown. More or fewer devices may be implemented or have alternatively.

[0181] This application also provides a computer program product including computer-readable instructions, which, when executed on an electronic device, cause the electronic device to implement any of the page loading methods provided in this application.

[0182] This application also provides a computer-readable storage medium that carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement any of the page loading methods provided in this application.

[0183] It should also be noted that the device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. In addition, in the device embodiment drawings provided in this application, the connection relationship between modules indicates that they have a communication connection, which can be implemented as one or more communication buses or signal lines.

[0184] Through the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary general-purpose hardware, or it can be implemented by special-purpose hardware including application-specific integrated circuits, special-purpose CPUs, special-purpose memory, special-purpose components, etc. Generally, any function performed by a computer program can be easily implemented by corresponding hardware, and the specific hardware structure used to implement the same function can also be diverse, such as analog circuits, digital circuits, or special-purpose circuits. However, for this application, software program implementation is more often the preferred implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a readable storage medium, such as a computer floppy disk, USB flash drive, mobile hard disk, ROM, RAM, magnetic disk, or optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, training equipment, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0185] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product.

[0186] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, training device, or data center to another website, computer, training device, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a training device or data center that integrates one or more available media. The available media may be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., DVDs), or semiconductor media (e.g., solid-state drives (SSDs)).

Claims

1. A page loading method, characterized in that, include: Construct a device capability matrix, which includes real-time values ​​of multiple device parameters, including device pixel ratio, aspect ratio, and screen expansion status parameters; Based on the device pixel ratio, the aspect ratio, and the screen expansion state parameters, the preset static layout breakpoint is adjusted to obtain the real-time layout breakpoint. Based on the device capability matrix, determine the resource type of the static resource to be loaded and the style type of the style to be loaded; Based on the device capability matrix, a target weight coefficient set is determined, which includes the target weight coefficients for each priority parameter. Based on the target weight coefficient set, the priority parameters are weighted and summed to determine the loading level score of the component to be loaded; According to the loading level score, the components to be loaded, the static resources to be loaded, and the styles to be loaded are loaded synchronously in sequence.

2. The page loading method according to claim 1, characterized in that, The step of adjusting a preset static layout breakpoint based on the device pixel ratio, the aspect ratio, and the screen expansion state parameters to obtain a real-time layout breakpoint includes: Determine the aspect ratio compensation coefficient based on the aspect ratio; The device form compensation coefficient is determined based on the screen expansion status parameters. Based on the device pixel ratio, determine the device pixel compensation coefficient to adjust the device pixel ratio. The real-time layout breakpoint is obtained by multiplying the baseline layout breakpoint, the device pixel compensation coefficient, the device shape compensation coefficient, and the aspect ratio compensation coefficient.

3. The page loading method according to claim 1, characterized in that, The step of determining the resource type of the static resource to be loaded and the style type of the style to be loaded based on the device capability matrix includes: Based on the current device type and the device capability matrix, the current device is evaluated to obtain the performance evaluation result of the current device. The device capability matrix also includes performance evaluation parameters. Based on the performance evaluation results, the resource type of the static resource to be loaded and the style type of the style to be loaded are determined.

4. The page loading method according to claim 1, characterized in that, The determination of the target weight coefficient set based on the device capability matrix includes: Based on the real-time value of at least one target device parameter, determine whether the corresponding dynamic weight allocation timing has been reached; if so, determine the target weight coefficient set based on the baseline weight coefficient set and the corresponding dynamic weight set. The set of baseline weight coefficients includes the baseline weight coefficients of each of the priority parameters, the set of dynamic weights includes the dynamic weight coefficients of the target priority parameters, the priority parameters include component size parameters, resource priority, visible area weight, and network quality score, and the target priority parameters include at least one priority parameter.

5. The page loading method according to claim 1, characterized in that, The page loading method also includes: In response to the achievement of preset trigger conditions, update the loading threshold; If the loading level score is lower than the loading threshold, a preset loading degradation scheme is triggered.

6. The page loading method according to claim 1, characterized in that, The page loading method also includes: Based on the device pixel ratio, determine the real-time pixel density; The page is rendered based on the loaded data, which includes the real-time layout breakpoints, style loading results, component loading results, static resource loading results, and the real-time pixel density.

7. A page loading device, characterized in that, include: A parameter monitoring unit is used to construct a device capability matrix, which includes real-time values ​​of multiple device parameters, including device pixel ratio, aspect ratio, and screen expansion status parameters. The breakpoint dynamic determination unit is used to adjust the preset static layout breakpoint based on the device pixel ratio, the aspect ratio and the screen expansion state parameters to obtain the real-time layout breakpoint. The loading type determination unit determines the resource type of the static resource to be loaded and the style type of the style to be loaded based on the device capability matrix. The weight determination unit is used to determine a target weight coefficient set based on the device capability matrix, wherein the target weight coefficient set includes the target weight coefficients of each priority parameter; The loading level scoring unit is used to perform a weighted summation of each of the priority parameters based on the target weight coefficient set to determine the loading level score of the component to be loaded. The page loading unit loads the components to be loaded, the static resources to be loaded, and the styles to be loaded in sequence according to the loading level score.

8. A computer program product, characterized in that, It includes computer-readable instructions that, when executed on an electronic device, cause the electronic device to implement the page loading method as described in any one of claims 1 to 6.

9. An electronic device, characterized in that, It includes at least one processor and a memory connected to the processor, wherein: The memory is used to store computer programs; The processor is used to execute the computer program to enable the electronic device to implement the page loading method as described in any one of claims 1 to 5.

10. A computer storage medium, characterized in that, The storage medium carries one or more computer programs that, when executed by an electronic device, enable the electronic device to implement the page loading method as described in any one of claims 1 to 5.

Images