Skeleton screen generation method and device, computer equipment and storage medium
By determining the category and weight of page elements, skeleton placeholder components are generated, core layout elements are retained, and non-core elements are deleted or merged, thus solving the problem of page structure complexity in skeleton screens and improving loading performance and user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- 湖南长银五八消费金融股份有限公司
- Filing Date
- 2026-01-14
- Publication Date
- 2026-05-12
AI Technical Summary
In traditional skeleton screen generation methods, the complex page structure of skeleton screens leads to a decrease in page loading performance.
By responding to loading requests, the category and weight of page elements are determined, skeleton placeholder components are generated, and target skeleton screens are generated based on weight and layout information. Core layout elements are retained, and non-core elements are deleted or merged.
It reduces the complexity of the skeleton screen page structure, improves loading speed, alleviates user anxiety while waiting, and enhances the overall browsing experience.
Smart Images
Figure CN122019900A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of front-end development technology, and in particular to a method, apparatus, computer device, and storage medium for generating a skeleton screen. Background Technology
[0002] In World Wide Web (Web) applications, page content loading is often delayed, and displaying a blank page directly can mislead users into thinking the page is abnormal. To improve user experience, skeleton screens are typically used as placeholder images for page loading. Skeleton screens use gray placeholder blocks to indicate the final page structure, giving users a visual cue that "content is loading."
[0003] In traditional techniques, the generated skeleton screen often retains some Document Object Model (DOM) structures that are unrelated to the skeleton screen in the original page, resulting in a complex skeleton screen page structure and reduced page loading performance. Summary of the Invention
[0004] Therefore, it is necessary to provide a skeleton screen generation method, apparatus, computer equipment, and storage medium to address the above-mentioned technical problems, which can reduce the complexity of the skeleton screen page structure and improve page loading performance.
[0005] Firstly, this application provides a method for generating a skeleton screen, including:
[0006] In response to a loading request for a target page, the category and weight of each element in the target page are determined based on the page element information of the target page;
[0007] Based on the category of each element and its layout information on the target page, a skeleton placeholder component is generated for each element; wherein, the skeleton placeholder component for each element is the component of the element in the target skeleton screen corresponding to the target page.
[0008] The target skeleton screen is generated based on the weights of each element and the skeleton placeholder components.
[0009] In one embodiment, generating the target skeleton screen based on the weights of each element and the skeleton placeholder component includes:
[0010] For each element, the skeleton placeholder component corresponding to the element is processed according to the relationship between the weight of the element and the preset threshold.
[0011] The target skeleton screen is generated based on the processing results of the skeleton placeholder components corresponding to each element.
[0012] In one embodiment, processing the skeleton placeholder component corresponding to the element based on the relationship between the weight corresponding to the element and a preset threshold includes:
[0013] If the weight of the element is greater than a preset threshold, then the skeleton placeholder component of the element is retained.
[0014] If the weight of the element is less than or equal to the preset threshold, the skeleton placeholder component of the element is deleted or merged with the skeleton placeholder components of other elements.
[0015] In one embodiment, generating the target skeleton screen based on the processing results of the skeleton placeholder components corresponding to each element includes:
[0016] Based on the processing results of the skeleton placeholder components corresponding to each element, the initial skeleton screen corresponding to the target page is generated.
[0017] In response to the adjustment operation on the initial skeleton screen, the initial skeleton screen is adjusted to obtain the target skeleton screen.
[0018] In one embodiment, adjusting the initial skeleton screen in response to an adjustment operation for the initial skeleton screen to obtain the target skeleton screen includes:
[0019] In response to the adjustment operation on the initial skeleton screen, the initial skeleton screen is adjusted to obtain an intermediate skeleton screen;
[0020] Redundant components are determined based on the degree of influence of the skeleton spacer components corresponding to each element on the integrity of the skeleton screen;
[0021] The redundant components in the intermediate skeleton screen are removed to obtain the target skeleton screen.
[0022] In one embodiment, generating skeleton placeholder components corresponding to each element based on the category of each element and the layout information of the target page includes:
[0023] For each element, determine the size and position of the element on the target page based on the element's layout information on the target page;
[0024] Based on the element's category, as well as its size and position on the target page, a skeleton placeholder component corresponding to the element is generated.
[0025] In one embodiment, the step of responding to a loading request for a target page and determining the category and weight of each element in the target page based on the page element information of the target page includes:
[0026] In response to a loading request for a target page, an IFrame architecture embedded in the management page is adopted, and MessageChanne is used as a cross-domain communication channel between the management end and the target page within the IFrame to obtain page element information of the target page.
[0027] The page element information is input into the element recognition model to obtain the category and weight of each element in the target page.
[0028] Secondly, this application also provides a skeleton screen generating apparatus, comprising:
[0029] The determination module is used to respond to a loading request for a target page by determining the category and weight of each element in the target page based on the page element information of the target page.
[0030] The first generation module is used to generate skeleton placeholder components corresponding to each element based on the category of each element and the layout information of the target page; wherein, the skeleton placeholder component corresponding to each element is the component of the element in the target skeleton screen corresponding to the target page.
[0031] The second generation module is used to generate the target skeleton screen based on the weights of each element and the skeleton placeholder components.
[0032] Thirdly, this application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to perform the following steps:
[0033] In response to a loading request for a target page, the category and weight of each element in the target page are determined based on the page element information of the target page;
[0034] Based on the category of each element and its layout information on the target page, a skeleton placeholder component is generated for each element; wherein, the skeleton placeholder component for each element is the component of the element in the target skeleton screen corresponding to the target page.
[0035] The target skeleton screen is generated based on the weights of each element and the skeleton placeholder components.
[0036] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, performs the following steps:
[0037] In response to a loading request for a target page, the category and weight of each element in the target page are determined based on the page element information of the target page;
[0038] Based on the category of each element and its layout information on the target page, a skeleton placeholder component is generated for each element; wherein, the skeleton placeholder component for each element is the component of the element in the target skeleton screen corresponding to the target page.
[0039] The target skeleton screen is generated based on the weights of each element and the skeleton placeholder components.
[0040] Fifthly, this application also provides a computer program product, including a computer program that, when executed by a processor, performs the following steps:
[0041] In response to a loading request for a target page, the category and weight of each element in the target page are determined based on the page element information of the target page;
[0042] Based on the category of each element and its layout information on the target page, a skeleton placeholder component is generated for each element; wherein, the skeleton placeholder component for each element is the component of the element in the target skeleton screen corresponding to the target page.
[0043] The target skeleton screen is generated based on the weights of each element and the skeleton placeholder components.
[0044] The aforementioned skeleton screen generation method, apparatus, computer device, and storage medium, in response to a loading request for a target page, determine the category and weight of each element in the target page based on the page element information; generate skeleton placeholder components corresponding to each element based on the category and layout information of each element on the target page; wherein, the skeleton placeholder component corresponding to each element is the component of the element in the target skeleton screen corresponding to the target page; and generate the target skeleton screen based on the weight of each element and the skeleton placeholder components. This scheme generates the target skeleton screen based on the weight of each element and the skeleton placeholder components, ensuring that the skeleton screen retains only the core layout elements, reduces irrelevant DOM structures, lowers the complexity of the skeleton screen page structure, improves loading speed, thereby reducing page loading latency, alleviating user waiting anxiety, and improving the overall browsing experience. Attached Figure Description
[0045] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments of this application or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.
[0046] Figure 1 This is a flowchart illustrating a skeleton screen generation method in one embodiment;
[0047] Figure 2 This is a schematic diagram of the process for generating a target skeleton screen in one embodiment;
[0048] Figure 3 This is a timing diagram of the skeleton screen generation in one embodiment;
[0049] Figure 4 This is a flowchart illustrating the skeleton screen generation method in another embodiment;
[0050] Figure 5 This is a structural block diagram of a skeleton screen generation device in one embodiment;
[0051] Figure 6 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation
[0052] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.
[0053] The skeleton screen generation method provided in this application embodiment can be applied to application scenarios that reduce user waiting anxiety during page content loading.
[0054] This method can be executed by a server or a terminal. The server can be a standalone physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server providing cloud computing services. The terminal can be, but is not limited to, various personal computers, laptops, smartphones, tablets, IoT devices, and portable wearable devices. IoT devices can include smart speakers, smart TVs, smart air conditioners, smart in-vehicle systems, and projection devices. Portable wearable devices can include smartwatches, smart bracelets, and head-mounted displays. Head-mounted displays can be virtual reality (VR) devices, augmented reality (AR) devices, and smart glasses.
[0055] In one exemplary embodiment, such as Figure 1 As shown, a method for generating a skeleton screen is provided. Taking the application of this method to a server as an example, the method includes the following steps:
[0056] S101, in response to a loading request for the target page, determines the category and weight of each element in the target page based on the page element information of the target page.
[0057] The target page refers to the web page for which a skeleton screen needs to be generated, such as an e-commerce product detail page or a news article page. It contains various user interface (UI) elements (such as images, text, buttons, etc.) and layout structures.
[0058] Page element information includes the target page's HTML structure (DOM tree), Cascading Style Sheets (CSS) (size, position, margins, rounded corners, etc.), and dynamic area information (asynchronously loaded comment section, real-time inventory, etc.).
[0059] Element category refers to the type of UI element, including common UI elements such as buttons, checkboxes, drop-down menus, images, text, and containers.
[0060] Element weight is a numerical value assigned based on the visual importance and functional priority of an element on the page. For example, in the range of 0-1, core elements (such as the main image and the purchase button) have a weight close to 1, while secondary elements (such as decorative icons and copyright text) have a weight close to 0.
[0061] For example, a user enters the target page URL on the management page, such as an e-commerce product page https: / / item.taobao.com / item.htm?id=123, and clicks the "Generate Skeleton Screen" button to trigger a loading request; the server can dynamically create an IFrame element using JavaScript, set its src attribute to the target page URL, embed it in the IFrame container on the management side, and complete the loading of the target page.
[0062] Furthermore, page element information of the target page can be extracted, and the category of each element in the target page can be determined based on the attributes corresponding to the element information of the pre-set elements; and the weight of each element in the target page can be determined according to the pre-set correspondence between element categories and weights.
[0063] For example, in response to a loading request for a target page, an IFrame architecture embedded in the management page can be adopted, with MessageChannel serving as the cross-domain communication channel between the management end and the target page within the IFrame, to obtain page element information of the target page; and the page element information can be input into the element recognition model to obtain the category and weight of each element in the target page.
[0064] For example, in response to a loading request for the target page, the target page can be loaded. After the target page is loaded, a cross-domain communication channel can be established between the management end (parent page) and the IFrame (child page) through the MessageChannel API. The child page obtains the complete HTML structure of the target page through document.documentElement.outerHTML, parses the CSS style of the target page through window.getComputedStyle, identifies the dynamic areas of the target page, such as the #comment-list asynchronous comment area, and uses this information as page element information, packages it into JSON data and returns it to the parent page.
[0065] The parent page uses the browser's built-in DOMParser to convert the HTML string into a DOM tree, and then traverses the tree nodes to extract information such as tag name, attributes, position (getBoundingClientRect), and size.
[0066] Furthermore, the extracted node information can be input into a lightweight AI model based on the Transformer structure. The model automatically identifies the element category and assigns weights based on the element's visual proportion on the page and its functional importance, such as a main image weight of 0.9 and decorative icons weight of 0.2.
[0067] S102, Generate skeleton placeholder components for each element based on the category of each element and its layout information on the target page.
[0068] Among them, the skeleton placeholder component corresponding to each element is the component in the target skeleton screen corresponding to the element on the target page, that is, the placeholder module that simulates the element on the target page. It can correspond to different shapes (such as bar, square, circle, etc.) according to the element category, and has size and position attributes that match the element.
[0069] For example, the shape of a preset skeleton placeholder component can be matched according to the element category. For example, text corresponds to a bar, images correspond to a square, avatars correspond to a circle, and buttons correspond to a rounded square. Then, the attributes of the skeleton placeholder component can be calculated by combining the layout information of the element in the target page (including size (width / height), position (top / left), and margin (margin / padding)). For example, a text element can generate a bar placeholder with a height of 16px based on the font size, and an image element can generate a square placeholder of 300px × 300px based on the original image size. A basic gray background (#f0f0f0) and a loading animation are added to generate the skeleton placeholder component corresponding to each element.
[0070] For example, for each element, the size and position of the element on the target page can be determined based on the element's layout information on the target page; and a corresponding skeleton placeholder component can be generated based on the element's category and its size and position on the target page.
[0071] The layout information consists of spatial layout data for elements on the target page, including the element's display properties (flex / block / inline), positioning method (static / relative / absolute), margins (margin / padding), z-index, and parent container layout constraints. Size and position include the element's actual display size on the page (width / height, including the actual size after `box-sizing: border-box`) and absolute position (top / left, relative to the viewport or positioned parent element). Skeleton placeholder components are placeholder modules that match the original element's category, size, and position one-to-one; for example, image elements correspond to square placeholders, and text elements correspond to bar placeholders, possessing the same spatial properties as the original elements.
[0072] For example, the attributes of an element can be determined based on the element's layout information on the target page, and then the size and position of the element on the target page can be determined based on the element's attributes.
[0073] Furthermore, based on the element category, preset placeholder templates can be called, such as text corresponding to bars, images to squares, avatars to circles, and buttons to rounded squares. The calculated dimensions (width / height), position (top / left), and margins (margin / padding) are assigned to the skeleton placeholder component to ensure that the space properties are consistent with the original element. Default styles (background color #f0f0f0, border none, animation skeleton-loading) are added to the skeleton placeholder component, and a unique skeleton-id is added for subsequent adjustments and optimizations.
[0074] In the above embodiments, by parsing the element layout information, accurately calculating the size and position, and matching and generating placeholder components, it is ensured that the target skeleton screen can truly restore the target page structure, and there will be no visual disconnect during loading due to the placeholder not matching the actual elements; at the same time, the placeholder form based on category matching further improves the recognizability of the skeleton screen, allowing users to clearly predict the distribution of page content and reduce waiting anxiety; in addition, accurate position and size calculation avoids layout offset when loading actual content, improving the smoothness of page loading.
[0075] S103, Generate the target skeleton screen based on the weights of each element and the skeleton placeholder components.
[0076] For example, skeleton placeholder components can be filtered and optimized by combining the element weights of each element. For instance, skeleton placeholder components corresponding to high-weight elements retain their complete style and size, while skeleton placeholder components corresponding to low-weight elements are merged or simplified to generate the target skeleton screen.
[0077] For example, we will use a product details page from an e-commerce platform as the target page for illustration.
[0078] Users enter the product page URL https: / / item.taobao.com / item.htm?id=123 in the management interface and click the "Generate" button. The server creates an IFrame and loads the product page, which includes elements such as the main image, product title, price, "Add to Cart" button, decorative icons, and a comment section (dynamic area).
[0079] The server obtains the HTML of the product page (including...) through MessageChannel.<imgclass="main-img"> ,<h1class="title"> ,<buttonclass="add-cart"> Tags, CSS (main-img width 300px, add-cart height 40px with rounded corners 20px), and information about the comment section being a dynamic area.
[0080] After parsing the DOM, extract the information of each element and input it into the AI model to identify main-img as "image" (weight 0.9), title as "text" (weight 0.8), add-cart as "button" (weight 0.85), decorative icon as "icon" (weight 0.2), and comment area container as "container" (weight 0.7).
[0081] Generate skeleton placeholder components: Image type → 300px×300px square placeholder, Text type → 20px high bar placeholder, Button type → 40px high rounded square placeholder, Icon type → 16px×16px circular placeholder, Container type → 400px×300px rectangle placeholder.
[0082] Combined with weight optimization: retain the placeholder components for the main image, title, button, and comment section container, simplify the circular placeholders of decorative icons into small squares of 10px × 10px; merge 3 consecutive text bar placeholders into 2, and finally generate the target skeleton screen of the product page.
[0083] Furthermore, the optimized target skeleton screen can be converted into a standard HTML file, and the HTML file can be compressed (removing spaces, comments, and redundant characters), ultimately outputting a "directly usable target skeleton screen HTML file," which users can obtain through a download link.
[0084] In the above embodiments, a target skeleton screen is generated based on the weight of each element and the skeleton placeholder component. This ensures that the skeleton screen retains only the core layout elements, reduces irrelevant DOM structures, lowers the complexity of the skeleton screen page structure, improves loading speed, thereby reducing page loading latency, alleviating user waiting anxiety, and improving the overall browsing experience.
[0085] In some alternative implementations, see [link to relevant documentation]. Figure 2 , Figure 2 A flowchart illustrating the generation of a target skeleton screen is provided, specifically including the following steps:
[0086] S201: For each element, process the skeleton placeholder component corresponding to the element according to the relationship between the weight of the element and the preset threshold.
[0087] The preset threshold is a pre-defined weight judgment benchmark value, such as 0.7, used to distinguish the importance of elements. Elements with a value higher than the preset threshold are high-weight elements, and elements with a value lower than or equal to the preset threshold are low-weight elements.
[0088] For example, all elements can be traversed, and the skeleton placeholder component corresponding to the element can be processed according to the relationship between the weight of the element and the preset threshold.
[0089] For example, if the weight of an element is greater than a preset threshold, the element's skeleton placeholder component is retained; if the weight of an element is less than or equal to the preset threshold, the element's skeleton placeholder component is deleted or merged with the skeleton placeholder components of other elements.
[0090] For example, the weight of each element component can be compared with a preset threshold. If the weight is greater than the preset threshold, the original properties of the skeleton placeholder component (such as size, rounded corners, and animation) are preserved. If the weight is less than or equal to the preset threshold, component simplification logic is executed, such as shrinking a 16px×16px icon skeleton placeholder component to 10px×10px, merging three consecutive low-weight text bar skeleton placeholder components into one long bar placeholder, or deleting the skeleton placeholder components of low-weight elements.
[0091] S202, Generate the target skeleton screen based on the processing results of the skeleton placeholder components corresponding to each element.
[0092] It can collect all processed skeleton placeholder components, rearrange them according to the layout order and positional relationship of the target page, and generate the target skeleton screen by splicing the DOM.
[0093] In the above embodiments, by setting a preset threshold and differentiating the skeleton placeholder components according to weight, this differentiation not only ensures the user's expected perception of the core structure of the page, but also simplifies redundant content, reduces the size of the HTML file of the target skeleton screen, and improves the loading speed.
[0094] For example, an initial skeleton screen corresponding to the target page can be generated based on the processing results of the skeleton placeholder components corresponding to each element; in response to the adjustment operation of the initial skeleton screen, the initial skeleton screen can be adjusted to obtain the target skeleton screen.
[0095] The initial skeleton screen is a basic version of the skeleton screen generated based on the element weight processing results (retaining high-weight skeleton placeholders and deleting or merging low-weight skeleton placeholders). It has the core layout of the target page, but has not been customized by the user.
[0096] Adjustment operations are customized operations performed by users through the visual editing interface of the management terminal, including but not limited to dragging and adjusting the position or size of components, modifying the color, rounded corners or animation in the property panel, manually adding or deleting placeholder components, undoing or redoing operations, etc.
[0097] For example, the management interface can provide a visual editing toolset, including tools for element selection, drag-and-drop adjustment, attribute editing, undo or redo, and final generation.
[0098] Element selection can be achieved by listening to the mouse hover event, highlighting the currently selected skeleton component, and simultaneously displaying adjustment handles (edge drag points) and attribute editing access; drag-and-drop adjustment can be bound to mousedown+mousemove+mouseup events to calculate the mouse offset in real time and synchronously update the component's style.width / style.height / style.top / style.left properties; attribute editing can provide a pop-up panel with a color picker (background color, border color), numerical input boxes (rounded corners, animation duration), and drop-down boxes (animation type: blinking or gradient), and the preview is refreshed immediately after editing; undo or redo can record each adjustment operation through a stack structure, such as "modify the button's corner radius to 20px", supporting undoing or restoring the historical state.
[0099] After the user confirms the adjustments, all modified attributes can be integrated, the DOM structure and CSS styles can be updated, and the target skeleton screen can be output.
[0100] In the above embodiments, by adding a user-visualized adjustment step on the basis of AI automatic weight processing, the skeleton screen not only has performance advantages, but also can be deeply adapted to business scenarios, ultimately improving the user's visual expectations for page loading.
[0101] In some alternative implementations, the initial skeleton screen can be adjusted in response to the adjustment operation on the initial skeleton screen to obtain an intermediate skeleton screen; and redundant components can be determined according to the degree of influence of the skeleton placeholder components corresponding to each element on the integrity of the skeleton screen; then the redundant components in the intermediate skeleton screen can be removed to obtain the target skeleton screen.
[0102] The degree of impact refers to the contribution of the skeleton placeholder component to the user's perception of the page's structural integrity. This can be evaluated by an AI model, with core evaluation dimensions including whether it is a core functional element of the page (such as the main image or purchase button), whether it affects layout stability (such as containers supporting the positioning of other components), and whether it is the user's visual focus (such as elements visible on the first screen). Redundant components are placeholder components whose impact on the integrity of the skeleton screen is lower than their contribution (e.g., contribution < 0.3). These include decorative elements that are too small (< 10x10px), hidden elements that are completely covered by other components, and secondary elements that are not on the first screen and have no core function. Target elements are the elements on the target page other than those corresponding to redundant components, whose skeleton placeholder components are the key parts constituting the core structure of the skeleton screen.
[0103] For example, the AI model receives the attributes (size, position, element type, weight) of the skeleton placeholder component, the layout information of the target page (display attribute, z-index), and the first screen range (the viewport area is calculated by getBoundingClientRect()). Then, it adopts a scoring mechanism based on the BAAI General Embedding (BGE) model to convert the features of the skeleton placeholder component corresponding to each element into vectors and calculate the relevance score with the "skeleton screen integrity" task, for example, the range is 0-1 points, and a score <0.3 is judged as "low impact". Then, combined with rule filtering, such as width<10px&&height<10px, z-index<0, getBoundingClientRect().bottom<0 (not the first screen), the low impact component is marked as a redundant component.
[0104] For example, in response to an adjustment operation on the initial skeleton screen, the initial skeleton screen can be adjusted to obtain an intermediate skeleton screen. The adjustment operation is a customized operation performed by the user through the management terminal's visual editing interface, including but not limited to dragging and adjusting the position or size of components, modifying colors, rounded corners, or animations in the properties panel, manually adding or deleting placeholder components, and undoing or redoing operations.
[0105] Furthermore, redundant components in the intermediate skeleton screen can be removed. For example, the DOM nodes corresponding to redundant components can be removed from all skeleton placeholder components to avoid useless nodes occupying resources. The layout of the filtered core components (placeholders corresponding to the target element) can be validated. If the layout gaps are too large due to the removal of redundant components, the margins of the core components can be automatically adjusted to ensure a compact layout. Finally, the skeleton placeholder components of the target element can be integrated to generate a target skeleton screen with a simplified structure and stable layout.
[0106] In the above embodiments, an AI model is used to evaluate the impact of skeleton placeholder components on the integrity of the skeleton screen, accurately identify and eliminate redundant components, thereby reducing the size of the skeleton screen file, improving loading speed, and enhancing the browsing experience.
[0107] In some alternative implementations, see [link to relevant documentation]. Figure 3 , Figure 3 A sequence diagram for skeleton screen generation is provided. The management console serves as the user interaction entry point, providing a URL input box, a skeleton screen preview area, manual adjustment tools (such as element selection and attribute editing), and a file download entry. The SDK is the core tool library embedded in the management console, responsible for basic operations such as initialization communication, DOM structure capture, skeleton placeholder component generation, and event interception. The target page is the webpage from which the user needs to generate a skeleton screen (such as an e-commerce product page or news page), which is embedded in the management console via an IFrame for structure extraction. The AI model includes a lightweight AI classification model (responsible for DOM element classification) and an AI optimization engine (responsible for redundant element removal and structure simplification).
[0108] Specifically, the following steps are included:
[0109] Step 1: Startup and Communication Establishment.
[0110] After the user enters the target page URL in the management console and clicks "Generate", the SDK initializes and dynamically creates an IFrame, sets the IFrame's src to the target page URL, and completes the loading of the target page.
[0111] A two-way communication channel is established through MessageChannel: the management console, as the "parent page", sends requests through port1, and the target page (within the IFrame), as the "child page", responds through port2, thus achieving secure cross-domain communication (avoiding direct cross-domain access restrictions).
[0112] Step 2: Obtaining the DOM structure and AI classification.
[0113] After communication is established, the SDK intercepts DOM events of the target page (to avoid interference from the target page's interactions), obtains the complete DOM structure through document.documentElement.outerHTML, and extracts information such as CSS styles, element positions, and sizes.
[0114] The DOM structure data is fed into a lightweight AI classification model. The model automatically identifies the element and adds a unique skeleton-id tag to each element (for subsequent identification and adjustment). At the same time, it generates the corresponding skeleton component style, such as bar placeholders for text and square placeholders for images.
[0115] Step 3: Initial skeleton screen generation.
[0116] Based on the AI classification results, the SDK replaces various elements with corresponding skeleton placeholder components, overlays basic loading animations (such as blinking and gradient), generates an initial skeleton screen, and displays it in the management console preview area.
[0117] Step 4: User manually adjusts.
[0118] Supports user interaction: Users can click / hover the skeleton component using the "selection tool" in the management console to adjust its style (color, size, rounded corners, animation). The adjusted element will synchronously update the attribute data associated with the skeleton-id to ensure that it can be recognized during subsequent optimization.
[0119] Step 5: AI optimization engine processing.
[0120] After manual adjustments are completed, the adjusted skeleton screen DOM structure is passed to the AI optimization engine. The AI optimization engine, in conjunction with the skeleton-id tag, identifies useless elements (such as decorative elements <10×10px, covered hidden elements), and deletes redundant DOM nodes, merges adjacent similar components (such as merging multiple consecutive text bar placeholders into one), simplifies nesting levels, and streamlines CSS styles, removing code unrelated to the skeleton screen.
[0121] Step 6: Final file output.
[0122] The optimized DOM structure is converted into a standard HTML file. The system compresses the file (removing spaces, comments, and redundant characters) and finally outputs a "target skeleton screen HTML file that can be used directly," which users can obtain through the download link in the management console.
[0123] In some alternative implementations, see [link to relevant documentation]. Figure 4 , Figure 4 A flowchart illustrating another method for generating skeleton screens is provided, which includes the following steps:
[0124] Step 1: Input the initial skeleton screen DOM structure.
[0125] Receive the DOM tree after "AI classification to generate initial skeleton screen" and "user manual adjustment", such as the initial skeleton screen of e-commerce product page, which includes main image placeholder, title placeholder, button placeholder, etc., and each placeholder component has a unique skeleton-id tag, such as data-skeleton-id="sk-img-001".
[0126] Step 2: Iterate through all elements marked with skeleton-id.
[0127] The document.querySelectorAll('[data-skeleton-id]') iterates through all components with skeleton-id in the DOM tree, only processing placeholder components specific to skeleton screens and ignoring irrelevant tags such as scripts and styles remaining on the target page.
[0128] Step 3: Determine if the skeleton-id attribute is included.
[0129] If not, meaning the element has no skeleton-id, it is judged as a "non-skeleton screen component", such as the link tag of the target page or a hidden decorative div. It will be skipped directly and will not participate in subsequent optimization. Subsequent optimization will be carried out in "DOM structure optimization" to clean it up.
[0130] If so, the element has a skeleton-id, proceed to the next round of useless element judgment.
[0131] Step 4: Determine if it is a useless element.
[0132] If so, mark it as "element to be deleted" (such as a decorative icon placeholder with a size of 8×8px);
[0133] If not, then it is a non-useless element and will proceed to the "AI Large Model Evaluation" stage (to avoid accidentally deleting key components, such as placeholders in the main image).
[0134] Step 5: The AI large-scale model assesses the impact of deletion.
[0135] The evaluation module based on the BAAI general embedding model is called to convert the features (type, size, position, and weights corresponding to skeleton-id) of non-useless elements into vectors and calculate the "impact score on skeleton screen integrity after deleting the component". For example, the impact score of the main image placeholder is 0.9 and the impact score of the secondary text placeholder is 0.3.
[0136] If the score is greater than 0.5, it is judged as "deletion will affect integrity" (such as main image, purchase button placeholder); if the score is less than or equal to 0.5, it is judged as "deletion has no impact" (such as "after-sales instructions" text placeholder on non-first screen).
[0137] Step 6: Determine whether deletion will affect the skeleton screen display.
[0138] If so, mark it as a "retained element" (such as a main image placeholder or title placeholder; if deleted, users will not be able to predict the core layout of the page).
[0139] If not, delete the component directly (such as the "Logistics Instructions" text placeholder that is not on the first screen; deleting it will not affect the integrity of the first screen).
[0140] Step 7: Loop through all elements to see if they have been processed.
[0141] If there are untraversed elements with skeleton-id, return to step two to continue traversing; if all elements have been processed, proceed to step eight.
[0142] Step 8: DOM structure optimization.
[0143] Remove redundant nesting (e.g., simplify div>div>skeleton-block to skeleton-block), and merge similar elements, such as merging adjacent text placeholders (e.g., 3 consecutive bar text placeholders) into 1 large bar placeholder (reducing the number of DOM nodes), and simplify the structure, such as removing empty containers (e.g., empty divs used only for wrapping).
[0144] Step 9: Generate optimized HTML and compressed CSS.
[0145] The optimized DOM tree is converted into a standard HTML string; and the necessary CSS styles for the skeleton screen (such as placeholder background color and rounded corners) are extracted and inlined into the HTML. <style>标签中（避免外部CSS请求），进而压缩代码。
[0146] 应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
[0147] 基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的骨架屏生成方法的骨架屏生成装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个骨架屏生成装置实施例中的具体限定可以参见上文中对于骨架屏生成方法的限定，在此不再赘述。
[0148] 在一个示例性的实施例中，如图5所示，提供了一种骨架屏生成装置，包括：
[0149] 确定模块10，用于响应于针对目标页面的加载请求，根据目标页面的页面元素信息，确定目标页面中各元素的类别和权重；
[0150] 第一生成模块20，用于根据各元素的类别和在目标页面的布局信息，生成各元素对应的骨架占位组件；其中，每一元素对应的骨架占位组件为元素在目标页面对应的目标骨架屏中的组件；
[0151] 第二生成模块30，用于根据各元素对应的权重和骨架占位组件，生成目标骨架屏。
[0152] 在其中一个实施例中，第二生成模块30具体用于：
[0153] 针对每一元素，根据元素对应的权重与预设阈值之间的大小关系，对元素对应的骨架占位组件进行处理；根据各元素对应的骨架占位组件的处理结果，生成目标骨架屏。
[0154] 在其中一个实施例中，第二生成模块30具体用于：
[0155] 若元素的权重大于预设阈值，则保留元素的骨架占位组件；若元素的权重小于或等于预设阈值，则将元素的骨架占位组件进行删除，或与其他元素的骨架占位组件进行合并。
[0156] 在其中一个实施例中，第二生成模块30具体用于：
[0157] 根据各元素对应的骨架占位组件的处理结果，生成目标页面对应的初始骨架屏；响应于针对初始骨架屏的调整操作，对初始骨架屏进行调整，得到目标骨架屏。
[0158] 在其中一个实施例中，第二生成模块30具体用于：
[0159] 响应于针对初始骨架屏的调整操作，对初始骨架屏进行调整，得到中间骨架屏；根据各元素对应的骨架占位组件对骨架屏完整性的影响程度，确定冗余组件；将中间骨架屏中的冗余组件进行剔除，得到目标骨架屏。
[0160] 在其中一个实施例中，第一生成模块20具体用于：
[0161] 针对每一元素，根据元素在目标页面的布局信息，确定元素在目标页面中的尺寸和位置；根据元素的类别，以及元素在目标页面中的尺寸和位置，生成元素对应的骨架占位组件。
[0162] 在其中一个实施例中，确定模块10具体用于：
[0163] 响应于针对目标页面的加载请求，采用管理端页面嵌入的IFrame的架构，以MessageChanne为管理端与IFrame内目标页面的跨域通信通道，获取目标页面的页面元素信息；将页面元素信息输入至元素识别模型中，得到目标页面中各元素的类别和权重。
[0164] 上述骨架屏生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
[0165] 在一个示例性的实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图6所示。该计算机设备包括处理器、存储器、输入 / 输出（Input / Output，简称I / O）接口和通信接口。其中，处理器、存储器和输入 / 输出接口通过系统总线连接，通信接口通过输入 / 输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储页面数据和骨架屏。该计算机设备的输入 / 输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种骨架屏生成方法。
[0166] 本领域技术人员可以理解，图6中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
[0167] 在一个示例性的实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述任一实施例描述的骨架屏生成方法的步骤。
[0168] 在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述任一实施例描述的骨架屏生成方法的步骤。
[0169] 在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述任一实施例描述的骨架屏生成方法的步骤。
[0170] 需要说明的是，本申请所涉及的用户信息（包括但不限于用户设备信息、用户个人信息等）和数据（包括但不限于用于分析的数据、存储的数据、展示的数据等），均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要符合相关规定。
[0171] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性存储器和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（Read-Only Memory，ROM）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（Resistive Random Access Memory，ReRAM）、磁变存储器（Magnetoresistive RandomAccess Memory，MRAM）、铁电存储器（Ferroelectric Random Access Memory，FRAM）、相变存储器（Phase Change Memory，PCM）、石墨烯存储器等。易失性存储器可包括随机存取存储器（Random Access Memory，RAM）或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器（Static Random Access Memory，SRAM）或动态随机存取存储器（Dynamic Random Access Memory，DRAM）等。本申请提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器、人工智能（Artificial Intelligence，AI）处理器等，不限于此。
[0172] 以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本申请记载的范围。
[0173] 以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。< / style>
Claims
1. A method for generating a skeleton screen, characterized in that, The method includes: In response to a loading request for a target page, the category and weight of each element in the target page are determined based on the page element information of the target page; Based on the category of each element and its layout information on the target page, a skeleton placeholder component is generated for each element; wherein, the skeleton placeholder component for each element is the component of the element in the target skeleton screen corresponding to the target page. The target skeleton screen is generated based on the weights of each element and the skeleton placeholder components.
2. The method according to claim 1, characterized in that, The step of generating the target skeleton screen based on the weights of each element and the skeleton placeholder components includes: For each element, the skeleton placeholder component corresponding to the element is processed according to the relationship between the weight of the element and the preset threshold. The target skeleton screen is generated based on the processing results of the skeleton placeholder components corresponding to each element.
3. The method according to claim 2, characterized in that, The step of processing the skeleton placeholder component corresponding to the element based on the relationship between the weight corresponding to the element and a preset threshold includes: If the weight of the element is greater than a preset threshold, then the skeleton placeholder component of the element is retained. If the weight of the element is less than or equal to the preset threshold, the skeleton placeholder component of the element is deleted or merged with the skeleton placeholder components of other elements.
4. The method according to claim 2, characterized in that, The step of generating the target skeleton screen based on the processing results of the skeleton placeholder components corresponding to each element includes: Based on the processing results of the skeleton placeholder components corresponding to each element, the initial skeleton screen corresponding to the target page is generated. In response to the adjustment operation on the initial skeleton screen, the initial skeleton screen is adjusted to obtain the target skeleton screen.
5. The method according to claim 4, characterized in that, The step of adjusting the initial skeleton screen in response to an adjustment operation for the initial skeleton screen to obtain the target skeleton screen includes: In response to the adjustment operation on the initial skeleton screen, the initial skeleton screen is adjusted to obtain an intermediate skeleton screen; Redundant components are determined based on the degree of influence of the skeleton spacer components corresponding to each element on the integrity of the skeleton screen; The redundant components in the intermediate skeleton screen are removed to obtain the target skeleton screen.
6. The method according to any one of claims 1-5, characterized in that, The step of generating skeleton placeholder components for each element based on its category and layout information on the target page includes: For each element, determine the size and position of the element on the target page based on the element's layout information on the target page; Based on the element's category, as well as its size and position on the target page, a skeleton placeholder component corresponding to the element is generated.
7. The method according to any one of claims 1-5, characterized in that, In response to a loading request for a target page, the method of determining the category and weight of each element in the target page based on the page element information of the target page includes: In response to a loading request for a target page, an IFrame architecture embedded in the management page is adopted, and MessageChanne is used as a cross-domain communication channel between the management end and the target page within the IFrame to obtain page element information of the target page. The page element information is input into the element recognition model to obtain the category and weight of each element in the target page.
8. A skeleton screen generating device, characterized in that, The device includes: The determination module is used to respond to a loading request for a target page by determining the category and weight of each element in the target page based on the page element information of the target page. The first generation module is used to generate skeleton placeholder components corresponding to each element based on the category of each element and the layout information of the target page; wherein, the skeleton placeholder component corresponding to each element is the component of the element in the target skeleton screen corresponding to the target page. The second generation module is used to generate the target skeleton screen based on the weights of each element and the skeleton placeholder components.
9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 7.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.