Front-end page on-demand rendering method and device, electronic equipment and medium

Abstract

Embodiments of the present disclosure disclose a front-end page on-demand rendering method and device, electronic equipment and a medium. A specific embodiment of the method comprises: obtaining a front-end page template file set and a cascading style sheet file set; performing syntax tree analysis and extraction on the front-end page template file set to obtain a front-end page style identifier information set; performing syntax analysis on the cascading style sheet file set to obtain a selection style abstract syntax tree; performing selector index construction on the selection style abstract syntax tree to obtain a style selector index information set; determining a page style dependency relationship graph; generating a cascading style hierarchy execution information; and performing on-demand rendering processing of the cascading style on the front-end page to obtain a target front-end page. The embodiment can be applied to non-modular, modular and hybrid stack front-end engineering, realize style rendering of the page and on-demand loading of style resources, reduce waste of front-end resources, shorten the duration of front-end page rendering, and improve rendering efficiency and front-end page performance.

Description

Technical Field

[0001] The embodiments disclosed herein relate to the field of computer technology, and more specifically to methods, apparatus, electronic devices, and media for on-demand rendering of front-end pages. Background Technology

[0002] As the complexity of front-end applications continues to increase, component-based development has become the mainstream approach. The management and loading strategies of CSS (Cascading Style Sheets) have a crucial impact on the loading speed and rendering performance of front-end pages. However, many outdated or non-modular front-end projects still exist. These projects typically refer to those built without adopting modern component-based and CSS modularization standards. They often contain early technologies such as jQuery, Backbone, and Ember.js, and may even include native code that directly manipulates the DOM. The core characteristic of outdated or non-modular front-end projects is the lack of style scope isolation; all front-end styles are written in the global environment. This leads to a class name being repeatedly defined by multiple libraries or different pages, causing style overriding and debugging difficulties. Furthermore, when introducing third-party UI libraries, a full load is usually used, but only a small portion of the components are actually used, resulting in redundant and bloated CSS selectors. Traditional global CSS loading methods suffer from serious problems such as excessive redundant code, slow initial page load times, and frequent style conflicts. To improve the above issues, the common approach for on-demand rendering of non-modular front-end pages is to use modular CSS style development, dynamically binding CSS styles to front-end page components to achieve precise on-demand loading of CSS styles.

[0003] However, in practice, it has been found that when using the above method to render non-modular front-end pages on demand, the following technical problems often arise: Modular CSS style development usually requires the front-end page to be a modular front-end page. For non-modular and hybrid technology stack front-end pages, structural adjustments are required, which are difficult, costly, and risky. In addition, modular CSS style development focuses more on CSS style isolation to avoid global style pollution, which makes it difficult to solve the problem of redundant loading of CSS style resources in non-modular front-end projects. This leads to a waste of front-end resources, longer front-end page rendering time, and reduced front-end page rendering speed and performance.

[0004] The information disclosed in this background section is only intended to enhance the understanding of the background of the present disclosure concept, and therefore may contain information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0005] The summary portion of this disclosure is intended to provide a brief overview of the concepts, which will be described in detail in the detailed description portion. This summary portion is not intended to identify key or essential features of the claimed technical solutions, nor is it intended to limit the scope of the claimed technical solutions.

[0006] Some embodiments of this disclosure provide methods, apparatus, electronic devices, and media for on-demand rendering of front-end pages to address one or more of the technical problems mentioned in the background section above.

[0007] In a first aspect, some embodiments of this disclosure provide a method for on-demand rendering of a front-end page, comprising: obtaining a set of front-end page template files and a set of cascading style sheets (CSS) files containing target layout information, wherein the target layout information includes at least one of the following: non-modular layout information, hybrid technology stack layout information, and weakly modular layout information; performing syntax tree parsing on the front-end page template file set to obtain a set of front-end page style identifier information; performing syntax parsing on the CSS file set to obtain a selection style abstract syntax tree; constructing a selector index on the selection style abstract syntax tree to obtain a style selector index information set; determining a page style dependency graph between the template elements included in the front-end page template file set and the style information included in the CSS file set based on the front-end page style identifier information set and the style selector index information set; generating CSS hierarchy execution information based on the page style dependency graph; and, in response to determining that the front-end page set corresponding to the front-end page template file set is invoked, performing CSS on-demand rendering processing on the front-end page set based on the CSS hierarchy execution information to obtain a target front-end page set.

[0008] Secondly, some embodiments of this disclosure provide a front-end page on-demand rendering apparatus, including: an acquisition unit configured to acquire a front-end page template file set and a cascading style sheet file set containing target layout information, wherein the target layout information includes at least one of the following: non-modular layout information, hybrid technology stack layout information, and weakly modular layout information; a syntax tree parsing and extraction unit configured to perform syntax tree parsing and extraction on the front-end page template file set to obtain a front-end page style identifier information set; a syntax parsing unit configured to perform syntax parsing on the cascading style sheet file set to obtain a selected style abstract syntax tree; and an index building unit configured to index the selected style abstract syntax tree. A selector index is constructed to obtain a style selector index information set; a determination unit is configured to determine a page style dependency graph between the template elements included in the front-end page template file set and the style information included in the cascading style sheet file set, based on the aforementioned front-end page style identifier information set and the aforementioned style selector index information set; a generation unit is configured to generate cascading style hierarchy execution information based on the aforementioned page style dependency graph; and an on-demand rendering unit is configured to, in response to the determination that the front-end page set corresponding to the aforementioned front-end page template file set is invoked, perform cascading style on-demand rendering processing on the aforementioned front-end page set based on the aforementioned cascading style hierarchy execution information to obtain the target front-end page set.

[0009] Thirdly, some embodiments of this disclosure provide an electronic device, including: one or more processors; and a storage device having one or more programs stored thereon, such that when the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any implementation of the first aspect.

[0010] Fourthly, some embodiments of this disclosure provide a computer-readable medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the method as described in any implementation of the first aspect.

[0011] The various embodiments of this disclosure have the following beneficial effects: the on-demand rendering method for front-end pages in some embodiments of this disclosure can be applied to non-modular, modular, and hybrid stack front-end projects, realizing on-demand rendering of front-end components and loading of style resources, reducing waste of front-end resources, shortening the rendering time of front-end pages, and improving rendering efficiency and front-end page performance. Specifically, the reasons for the waste of related front-end resources, the long rendering time of front-end pages, and the reduction in front-end page rendering speed and performance are as follows: CSS style modular development usually requires the front-end page to be a modular front-end page. For non-modular and hybrid technology stack front-end pages, structural adjustments are required, which are difficult, costly, and risky. In addition, CSS style modular development focuses more on CSS style isolation to avoid global style pollution, making it difficult to solve the problem of redundant loading of CSS style resources in non-modular front-end projects, resulting in waste of front-end resources, long rendering time of front-end pages, and reduced rendering speed and performance of front-end pages. Based on this, the front-end page on-demand rendering method of some embodiments of this disclosure can first obtain a front-end page template file set and a cascading style sheet file set containing target layout information. The target layout information includes at least one of the following: non-modular layout information, hybrid technology stack layout information, and weakly modular layout information. Here, the front-end page template file set and cascading style sheet file set containing the target layout information are used for subsequent syntax tree parsing and extraction, and syntax parsing. Secondly, syntax tree parsing is performed on the aforementioned front-end page template file set to obtain a front-end page style identifier information set. Here, syntax tree parsing and extraction can identify whether components are actually used, providing basic data for subsequent generation of page style dependency graphs. Thirdly, syntax parsing is performed on the aforementioned cascading style sheet file set to obtain a selection style abstract syntax tree. Here, syntax parsing is used for subsequent selection index construction. Next, a selector index is constructed on the aforementioned selection style abstract syntax tree to obtain a style selector index information set. Here, index construction facilitates quick searching and matching of the corresponding front-end page style identifier information set, improving the efficiency and accuracy of subsequent generation of page style dependency graphs. Subsequently, based on the aforementioned front-end page style identifier information set and style selector index information set, a page style dependency graph is determined between the template elements included in the aforementioned front-end page template file set and the style information included in the aforementioned Cascading Style Sheets (CSS) file set. Here, the generation of the page style dependency graph explicitly displays the explicit dependencies between template elements and style information, facilitating the identification and marking of selectors not referenced by any template as potentially redundant styles. Then, based on the aforementioned page style dependency graph, CSS hierarchy execution information is generated. Here, the generation of CSS hierarchy execution information allows only the CSS rules used by the front-end page to be loaded, merging duplicate CSS references, reducing the number of HTTP requests, reducing unnecessary resource requests, and reducing resource waste.Finally, in response to the determination that the front-end page set corresponding to the aforementioned front-end page template file set has been invoked, the aforementioned front-end page set is subjected to on-demand rendering of cascading styles according to the aforementioned cascading style hierarchy execution information, resulting in the target front-end page set. Here, by precisely controlling the loading timing of CSS resources, on-demand loading is achieved, reducing initial loading time and improving user experience. At the same time, by eliminating redundant styles, the browser's burden is reduced, improving overall performance and solving the problem of inaccurate loading of style resources in old or non-modular front-end projects, while effectively reducing the existence of redundant styles. Therefore, this on-demand rendering method for front-end pages is suitable for front-end projects with non-modular, mixed technology stacks, and weakly modular layout information. Without large-scale refactoring, it establishes explicit dependencies between template components and style resources, and generates style loading strategies accordingly to achieve on-demand loading, which can reduce the waste of front-end resources, shorten the front-end page rendering time, and improve rendering efficiency and front-end page performance. Attached Figure Description

[0012] 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 elements are not necessarily drawn to scale.

[0013] Figure 1 This is a flowchart of some embodiments of the front-end page on-demand rendering method according to this disclosure; Figure 2 This is a schematic diagram of the structure of some embodiments of the front-end page on-demand rendering method apparatus according to the present disclosure; Figure 3 This is a schematic diagram of the structure of an electronic device suitable for implementing some embodiments of the present disclosure. Detailed Implementation

[0014] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0015] It should also be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings. Unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other.

[0016] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0017] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0018] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0019] This disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0020] Figure 1 A flow 100 of some embodiments of a front-end page on-demand rendering method according to the present disclosure is shown. This front-end page on-demand rendering method includes the following steps: Step 101: Obtain the front-end page template file set and cascading style sheet file set of the target layout information.

[0021] In some embodiments, the execution entity (e.g., an electronic device) of the aforementioned on-demand rendering method for front-end pages can obtain the front-end page template file set and cascading style sheet file set of target layout information via wired or wireless connection. The target layout information includes at least one of the following: non-modular layout information, hybrid technology stack layout information, and weakly modular layout information. The front-end page template files in the aforementioned front-end page template file set can be front-end source code files describing the DOM (Document Object Model) structure of the front-end page. These front-end page template files serve as the skeleton of the front-end page set, determining the style identifier information and style information (e.g., style mounting points, i.e., bound CSS selectors, and component lifecycle callback functions) included in the front-end page. The style identifier information can be the identifier information of CSS selectors used to locate HTML (Hypertext Markup Language) elements (e.g., block-level elements, inline elements, empty elements, form elements, etc.) and apply styles. For example, the aforementioned front-end page template file can be a non-modular layout .vue file or a .jsx file for a Single Page Application (SPA). The Cascading Style Sheets (CSS) files in the aforementioned Cascading Style Sheets (CSS) fileset can be source code files used to define the visual information of front-end page elements (e.g., colors, layout, fonts, animations, etc.) and control the rendering style of front-end components through CSS selectors. The aforementioned CSS selectors can be style information used to locate HTML elements. The aforementioned target layout can be information describing the project architecture, code organization, and technical implementation background of the front-end page set corresponding to the front-end page template fileset and Cascading Style Sheets fileset. The aforementioned non-modular layout information can be the layout information of a traditional front-end page (e.g., a PHP (Hypertext Preprocessor) page) where the front-end page template fileset organizes styles and components according to page or functional block stacking, relies on the global scope, and loads scripts sequentially through tags. The aforementioned hybrid technology stack layout information can be the layout information of multiple front-end frameworks and engines existing within the same front-end page. The aforementioned weakly modular layout information can be information about both modular and non-modular layout methods. The aforementioned modularization can be a code block that encapsulates a component's program into multiple blocks or files based on rule information and combines them together, where the data implementation inside the block or file is private and communicates with other modules only through exposed interface methods.

[0022] Step 102: Extract the syntax tree from the set of front-end page template files to obtain the set of front-end page style identifier information.

[0023] In some embodiments, the execution entity can perform syntax tree parsing and extraction on the aforementioned front-end page template file set to obtain a front-end page style identifier information set. The front-end page style identifier information in this set can be the identifier information of HTML elements in the aforementioned front-end page template file set that can establish a mapping relationship with CSS selectors. For example, the aforementioned front-end page style identifier information set may include, but is not limited to, at least one of the following: class (class name), id (encoding identifier), div (block identifier), and input (input identifier). In practice, the execution entity can use an AST (Abstract Syntax Tree) parsing algorithm to perform syntax tree parsing and extraction on the aforementioned front-end page template file set to obtain a front-end page template tree. The aforementioned front-end page template tree can be a tree-like JavaScript object describing the source code syntax structure of the aforementioned front-end page template file set. The nodes in the aforementioned front-end page template tree can be each front-end page style identifier information, and the connecting edges can represent the parent-child and sibling relationships between front-end page style identifier information. Then, a depth-first traversal is performed on the aforementioned front-end page template tree to obtain the front-end page style identifier information set.

[0024] In some optional implementations of certain embodiments, the above-mentioned syntax tree parsing and extraction of the front-end page template file set to obtain the front-end page style identifier information set may include the following steps: The first step is to determine the template type information of the aforementioned front-end page template file set. This template type information can be the type information of the front-end framework used by the aforementioned front-end page template file set. This template type information may include, but is not limited to, at least one of the following: template type information for the Vue framework, template type information for the React framework, and template type information for the Angular framework.

[0025] The second step is to determine the front-end page parser information for the aforementioned front-end page template file set based on the template type information. This front-end page parser information can be information about the parsing tool used to parse the aforementioned front-end page template file set. In practice, the executing entity can utilize a template type parsing mapping table to determine the front-end page parser information for the aforementioned front-end page template file set based on the template type information. This template type parsing mapping table can be a form used to record the mapping relationship between the template type information and the corresponding front-end page parser. For example, the template type parsing mapping table mentioned above can record the following: template type information can be Vue framework template type information, and the front-end page parser can be @vue / compiler-sfc parser information or Vue Loader parser information; template type information can be React framework template type information, and the front-end page parser can be @babel / parser parser information; template type information can be Angular framework template type information, and the front-end page parser can be @angular / compiler parser information; template type information can be any type of template type information, and the front-end page parser can be a general parser, such as parse5 parser information or htmlparser2 parser information.

[0026] The third step involves parsing the aforementioned front-end page template file set based on the front-end page parser information, resulting in a template abstract syntax tree (TLS). This TLS can be a tree-like JavaScript object describing the source code syntax structure of the front-end page template file set. The nodes in the TLS can be the set of front-end page style identifiers, and the connecting edges can represent parent-child and sibling relationships between these style identifiers. In practice, the executing entity can input the front-end page template file set into the front-end page parser corresponding to the aforementioned front-end page parser information for template parsing to obtain the TLS.

[0027] The fourth step involves performing node traversal on the aforementioned template abstract syntax tree (AST) to determine whether to extract the node from the current template node. This node traversal can be a depth-first traversal of the AST using an AST traversal tool. For example, the AST traversal tool could be the @babel / traverse standard library for JavaScript, or the estree-walker tool for traversing ASTs conforming to the ESTree specification. The current template node can be any node within the AST being traversed. Node extraction is performed when the current template node is an HTML element associated with a CSS selector; that is, the current template node can be a Class identifier, ID identifier, or pseudo-class identifier. The pseudo-class identifier can be a special classification mechanism used in Cascading Style Sheets (CSS) files to extend selector functionality, controlling style through element state or structural characteristics (e.g., interaction state, position) rather than names or attributes, and is the identifier of the corresponding code in the aforementioned front-end page template file set. For example, the pseudo-class identifier mentioned above can be front-end page style identifier information used to declare the global scope, front-end page style identifier information used to declare the local scope, or front-end page style identifier information used to select the host element.

[0028] Fifth, in response to determining that the current template node is the first target template node, perform multi-type node extraction on the current template node to obtain node identification information. The first target template node can be the node corresponding to the Class identifier. The node identification information can be a string obtained by extracting the string syntax (separated by spaces), object expression syntax (e.g., ObjectExpression), and array expression syntax (ArrayExpression) of the first target template node, or information about computed property values, keys (usually class names) in object key-value pairs in object expressions, and dynamically bound values.

[0029] Step 6: In response to determining that the current template node is the second target template node, perform dynamic and static extraction on the current template node to obtain node identification information. The second target template node can be the node corresponding to an ID identifier. The node identification information can be the extracted static ID attribute value and the attribute value of the variable name in the dynamically bound ID expression.

[0030] Step 7: In response to determining that the current template node is the third target template node, perform node context extraction on the current template node to obtain node identification information. The third target template node can be a node corresponding to a pseudo-class identifier. When the third target template node is a node that declares a native boolean property for front-end page style identification information in the global scope, extract the attribute name of the third target template node as node identification information; when it is a node that declares the dynamically bound state of front-end page style identification information in the global scope, extract the attribute key name and dynamically bound feature information of the third target template node as node identification information. When the third target template node is a node that selects a pseudo-class for front-end page style identification information of the host element, use the connection edge to extract the position information of the third target template node among its sibling nodes at the same level as node identification information. When the third target template node is a node that selects a pseudo-class for front-end page style identification information of the host element, use the connection edge to extract the node identification information of the root node corresponding to the third target template node as node identification information. The root node mentioned above can be the third target template node itself, or it can be the root node determined by the third target template node through the connecting edges.

[0031] Step 8: In response to the completion of node traversal, the obtained node identification information is used as a set of front-end page style identification information.

[0032] Step 103: Perform syntax parsing on the Cascading Style Sheets (CSS) file set to obtain the Select Style Abstract Syntax Tree (SLS).

[0033] In some embodiments, the execution entity can perform syntax parsing on the Cascading Style Sheets (CSS) file set to obtain a Select Style Abstract Syntax Tree (SLS). The SLS can be a tree structure describing the relationships between the front-end page styles corresponding to the CSS files. The front-end page styles can be styles of rules and declaration blocks that control the appearance and layout of front-end page elements, using CSS selectors as carriers. The nodes in the SLS can be rule information for CSS selectors. The declaration blocks can be code blocks containing rule information for at least one style of an HTML element consisting of attributes and values. For example, if the CSS selector rule information in the CSS files is ".header{color:red;font-size:16px;}", then the node is ".header{color:red;font-size:16px;}", including the CSS selector part (.header) and the declaration block part ({color:red;font-size:16px;}). The connecting edges in the SLS can be the CSS selector rule information, i.e., the nesting and logical relationships between nodes. As an example, the above cascading style sheet file could be "@media(max-width:768px){.header{display:none;}}", in which case the nodes include: the parent node (@media(max-width:768px)) representing the media query rule itself, and the child node (.header{display:none;}) representing the style rule that takes effect under the condition of the media query rule itself. The parent and child nodes are nested. The above cascading style sheet file could also be "button:hover[disabled]{opacity:0.5;cursor:not-allowed;}", in which case the nodes include: the parent node (button) representing the element selector, and the child node (hover[disabled]) representing the composite pseudo-class and attribute selector. The connecting edge could be the logical relationship of applying the combination of opacity and cursor styles when the parent node is simultaneously in a hover state and has the disabled property. In practice, the above execution entity can use PostCSS front-end tools to perform syntax parsing on the above cascading style sheet file set to obtain the selection style abstract syntax tree. The aforementioned PostCSS front-end tool can be a tool for parsing the aforementioned cascading style sheet files.

[0034] In addressing the technical challenges of the aforementioned background technologies, and considering the application scenario—large-scale front-end projects with chaotic layouts (e.g., non-modular layout information, mixed technology stack layout information, weakly modular layout information) and frequent refactoring of front-end page sets based on the abstract syntax tree constructed from cascading stylesheet files (CSS files)—the following technical issues often arise: When CSS files contain invalid syntax that browsers cannot parse (e.g., vendor prefixes from unknown vendors, syntax errors), exceptions are thrown directly, preventing syntax tree construction. Furthermore, traditional abstract syntax trees are flat structures, making it difficult to accurately express the complex relationships such as priority and scope nesting within CSS files. A single full parsing consumes significant memory, prolonging the build time and resulting in longer front-end page rendering times, excessive memory consumption, and reduced front-end page quality. Considering the following requirements for this application scenario: adaptability to high performance, high fault tolerance, lazy parsing, memory optimization, and the complex relationships and high syntactic complexity of CSS files including implicit nesting and context modeling, we have decided to adopt the following solution: In some optional implementations of certain embodiments, the above-described syntax parsing of the cascading style sheet file set to obtain a selection style abstract syntax tree may include the following steps: The first step is to construct a style scenario profile for the aforementioned cascading stylesheet (CSS) file set, obtaining style scenario information. This style scenario information can include the environment information, feature information, and configuration information of the CSS file set. In practice, the executing entity can first extract the configuration information from the CSS files to obtain CSS configuration information. This CSS configuration information can be the browser compatibility information of the CSS file build tool. For example, the CSS configuration information could be "targets:["chrome 90","safari 15"]". Then, feature information and file headers are extracted from the CSS files to obtain style feature information and style file environment information. The style feature information can be responsive scene information (e.g., @media queries) and animation definition information (e.g., motion effect scene information) within the CSS files. The style file environment information can be the filename, version number, creation and / or modification date, and brief file description information (e.g., reset style information, navigation bar style information) in the comments of the CSS file header content. Finally, the cascading style configuration information, style feature information, and style file environment information are determined as style scenario information.

[0035] The second step involves filtering the comment instructions within the aforementioned Cascading Style Sheets (CSS) file set to obtain a comment instruction CSS file. This comment instruction CSS file can be a CSS file from which byte order markers and regular comments have been removed, retaining only comments containing instruction information. In practice, the executing entity can first identify and remove byte order markers from the CSS files, resulting in a de-marked CSS file. The byte order marker can be a hidden character at the beginning of the CSS file, used to identify the text file's encoding format and byte order (BOM). Next, the de-marked CSS file undergoes encoding format conversion to obtain a converted CSS file. This conversion can be to UTF-8 (8-bit, Universal Character Set / Unicode Transformation Format). Then, regular expressions are used to extract the comment information from the converted CSS file, resulting in a style comment information set. Next, key comments are extracted from the aforementioned style comment information set using a preset keyword form, resulting in a key comment information set, which serves as the comment instruction cascading style file. The preset keyword form can be a set of keywords from a pre-defined cascading style sheet file, based on expert experience, used to convey instructions to the build tool / parser. For example, the preset keyword form could be "source map". Finally, the code including the aforementioned key comment information set and the aforementioned cascading style sheet file is determined as the comment instruction cascading style file.

[0036] The third step involves performing state machine lexical analysis on the aforementioned comment instruction stacked style file to obtain a stacked style lazy-loaded word segmentation sequence. The stacked style lazy-loaded word segmentation sequence can be achieved by lexically dividing the comment instruction stacked style file into the smallest indivisible unit. However, instead of generating all word segments at once, these segments are placed in a queue data structure for the lexical parser to retrieve as needed. For example, the stacked style word segmentation sequence could be [type:“IDENT”,value:“width”], [type:“DIMENSION”,value:“100px”]. In practice, the executing entity can utilize a target lexical analysis state machine to perform state machine lexical analysis on the comment instruction stacked style file to obtain the stacked style word segmentation sequence. This target lexical analysis state machine can be a state machine that determines the next state based on the currently processed character and the current state of the comment instruction stacked style file for lexical analysis. The aforementioned target lexical analysis state machine can be a state machine that uses the Rust system-level programming language to encode lexical analysis code and compiles it into WebAssembly (Wasm) binary format. As an example, the initial state of the target lexical analysis state machine is set to DataState. The aforementioned comment directive cascading stylesheet file is scanned character by character to read the character stream. When a "." is encountered, the state switches to ClassSelectorState (class selector state, used by the parser to read the class name of the CSS selector). When a "{" is encountered, the state switches to DeclarationBlockState (declaration block state, used by the parser to read style attribute information such as attribute name and attribute value), storing it in a queue so that subsequent lexical parsers can extract it as needed, resulting in a lazy-loaded tokenization sequence for the cascading stylesheets.

[0037] The fourth step involves generating a target character parsing node set for the target character sequence in response to its detection during state machine lexical analysis, based on the aforementioned style scenario information. This target character sequence can be a pre-defined sequence of illegal characters or characters that cause errors in state machine lexical analysis, as defined by the style scenario information. For example, the target character sequence could be a character sequence that does not conform to CSS standard syntax. The target character parsing nodes in the target character parsing node set can include the region code metadata and row / column position information of the metadata in the Cascading Style Sheets (CSS) file corresponding to the target character, and are used to characterize nodes that cannot be parsed correctly. In practice, the execution entity can first use the aforementioned style scenario information and expert experience to determine non-character sequences that browsers cannot parse as target character sequences, using these non-character sequences as defined by expert experience. Secondly, utilizing Error Recovery rules, when a target character sequence is detected during state machine lexical analysis, the analysis is not interrupted. The set of row / column position information for the Cascading Style Sheets region code set that cannot be parsed correctly corresponding to the target character sequence is determined, and a parsing node set is created. The aforementioned cascading style region code can be a cascading style region code located between the target character sequence and the next character in normal lexical parsing. The aforementioned parsing node set can be an empty node set. The aforementioned Error Recovery rule information can be rules that, when an illegal character sequence is encountered, do not interrupt parsing, generate an empty node, and store the cascading style region code and its corresponding row and column position information in the empty node, skipping the cascading style region code and continuing to scan forward. Then, the aforementioned row and column position information set and the aforementioned cascading style region code set are stored correspondingly in the aforementioned parsing node set to obtain the target character parsing node set.

[0038] The fifth step involves detecting a set of segmentation sequences containing nested style syntax blocks within the aforementioned lazy-loaded segmentation sequence. This is followed by constructing a hierarchical implicit nesting node set for the corresponding segmentation sequence, resulting in a set of hierarchical implicit nesting related nodes. Specifically, the nested style syntax blocks in the segmentation sequence corresponding to the aforementioned set of nested style syntax blocks can be code blocks containing nested selectors and parent selectors within the segmentation sequence set, i.e., a CSS selector containing another CSS selector. For example, the nested style syntax block could be `.navbar{background-color:#333;&.nav-item{color:white;&:hover{color:yellow;}}.nav-logo{width:100px;}}`. The hierarchical implicit nesting related information can be nodes obtained by performing parent-child dependency relationships and node construction on the aforementioned set of nested style syntax blocks. In practice, the aforementioned execution entity can first store the nested style syntax block set into a stack data structure, i.e., pushing "{" onto the stack and popping "}" from the stack when parsing. Then, it constructs a parent-child hierarchical subtree from the nested style syntax block set stored in the stack data structure, resulting in a parent-child hierarchical subtree set. The parent node in this parent-child hierarchical subtree can be `.navbar`, including the attribute `background-color:#333`. The child nodes can be `.nav-item`, including the attribute `color:white`, the position of the parent node symbol `&` (e.g., the 4th character in the 3rd line), and a nesting marker; the child node `.hover`, including the attribute `color:yellow`, the position of the parent node symbol `&` (e.g., the 6th character in the 5th line), and a nesting marker; and the child node `.nav-logo`, including the attribute `width:100px`. The nesting marker can be used to indicate that a child node is nested within a parent node. Finally, the parent and child nodes included in the parent-child hierarchical subtree set are determined as a hierarchical implicit nested related node set.

[0039] Step 6: In response to the detection of a set of segmentation sequences containing scope cascading syntax blocks in the aforementioned lazy-loading segmentation sequence of cascading styles, cascading context nodes are constructed for the segmentation sequence set of the aforementioned scope cascading syntax block set, resulting in a set of segmentation cascading context associated nodes. The scope cascading syntax blocks in the aforementioned scope cascading syntax block set can be syntax blocks composed of segmentation sequence sets that contain declaration blocks with CSS cascading layer (@layer) and scope (@scope) rules. The segmentation cascading context associated nodes in the aforementioned set of segmentation cascading context associated nodes can be a set of nodes including parent and child nodes, composed of CSS selectors located in the CSS cascading layer and scope layer of the scope cascading syntax block. In practice, the aforementioned execution entity can perform the following node construction steps for each scope cascading syntax block: First, determine the cascading layer code block and scope code block of the aforementioned scope cascading syntax block. For example, the scope cascading syntax block mentioned above could be `@layer base, components, utilities`, which refers to the code portion for the hierarchy declaration; `@layer components{.button{padding:10px;}}` refers to the code portion wrapped by `@layer`; and `@scope (.card) to (.card-footer) {.card-content{color:black;}}` refers to the code portion defining the boundaries of `@scope`. Then, parent-child nodes are constructed for the above cascading layer code block and the above scope code block, resulting in a cascading parent-child node group and a scope parent-child node set, which serve as the tokenization cascading context association node group. The cascading parent-child node group can include: a parent node that can be a `components` node with a hierarchy priority marker, a child node that can be `.button`, and an attribute that can be `padding:10px`. The scope parent-child node set can include: a parent node `scope` that records the scope boundaries `.card` and `.card-footer`, a child node that can be `.card-content`, and an attribute that can be `color:black`.

[0040] Step 7: In response to the detection of a set of word segments containing pseudo-class style syntax blocks in the aforementioned cascading style lazy loading word segmentation sequence, boundary nodes are constructed for the word segmentation sequence set of the aforementioned pseudo-class style syntax blocks to obtain a set of style boundary nodes. The pseudo-class style syntax blocks in the aforementioned set of pseudo-class style syntax blocks can be syntax blocks of the :import and :export pseudo-class CSS selectors, composed of the aforementioned word segmentation sequence set and used for cross-file communication, injected by the front-end engineering toolchain. The style boundary nodes in the aforementioned set of style boundary nodes can be nodes obtained by mapping the key-value pairs within the curly braces {} in the aforementioned pseudo-class style syntax blocks. In practice, the aforementioned execution entity can extract key-value pair code blocks from each pseudo-class style syntax block to obtain a group of key-value pair code blocks. For example, the pseudo-class style syntax block mentioned above could be: `import("path / to / variables.css") {i-am-importing-this:primary-color;}:export{primaryButton:btn-primary-123 (123 is the hash value generated by CSS Modules);secondaryButton:btn-secondary-abc;}`. Then, the key-value pair code block could be `i-am-importing-this (variable name used in the cascading stylesheet file):primary-color (variable name exported from the imported file), `primaryButton (logical name or local name used in the cascading stylesheet file):btn-primary-123 (the actual class name generated by CSS Modules compilation, i.e., the name with the hash value suffix),` `secondaryButton:btn-secondary-abc`. Then, nodes are constructed from the above key-value pair code blocks to obtain the style boundary node group, which serves as the style boundary node group. The style boundary node corresponding to `i-am-importing-this:primary-color` can be a key-value pair node that includes cross-file file routing information, location information, and keys and values. For example, the style boundary node could be `{"type":"ImportBlock","from":"path / to / variables.css(file routing information)","specifiers":[{"type":"ImportSpecifier","localName":"i-am-importing-this","importedName":"primary-color","loc(location information)":{"line":2","column":3}}]}`.

[0041] Step 8: In response to the detection of a set of node declaration block strings, lazy on-demand parsing is performed on the aforementioned target character parsing node set, the aforementioned hierarchical implicit nested related node set, the aforementioned word segmentation cascade context related node set, and the aforementioned style boundary node set to obtain a set of style attribute nodes. The declaration block strings in the aforementioned set of node declaration block strings can be code blocks describing the actual properties of CSS selectors (e.g., strings for color, font, etc.). In practice, the executing entity can directly use the set of node declaration block strings included in the aforementioned target character parsing node set, the aforementioned hierarchical implicit nested related node set, the aforementioned word segmentation cascade context related node set, and the aforementioned style boundary node set as attribute information for each node. Only when dependency parsing parses to that node is a secondary lexical and syntactic parsing performed on the aforementioned declaration block character set to obtain attribute information and attribute values, which are then used as the set of style attribute nodes.

[0042] Step nine involves constructing an abstract syntax tree source mapping for the aforementioned target character parsing node set, the aforementioned hierarchical implicit nesting association node set, the aforementioned word segmentation concatenation context association node set, the aforementioned style boundary node set, and the aforementioned style attribute node set, resulting in a selection style abstract syntax tree. In practice, the executing entity can associate nodes with the aforementioned target character parsing node set, the aforementioned hierarchical implicit nesting association node set, the aforementioned word segmentation concatenation context association node set, and the aforementioned style boundary node set according to the position association information of the syntax blocks in the Cascading Style Sheets (CSS) file set, thus obtaining an initial abstract syntax tree. Then, the aforementioned style attribute node set is associated with the corresponding target character parsing node set / hierarchical implicit nesting association node set / the aforementioned word segmentation concatenation context association node set / the aforementioned style boundary node set to obtain the target abstract syntax tree. Afterward, the position offsets of the aforementioned target character parsing node set, the aforementioned hierarchical implicit nesting association node set, the aforementioned word segmentation concatenation context association node set, the aforementioned style boundary node set, and the aforementioned style attribute node set are determined and added to the target abstract syntax tree to obtain the selection style abstract syntax tree. The aforementioned position offsets can be the starting row, starting column, absolute byte offset, ending row, ending column, absolute byte offset, and identifier of each node in the cascading stylesheet file set.

[0043] The above technical solution, combined with steps 104-107 and related content, serves as an inventive point of this disclosure, solving the technical problem of "long front-end page rendering execution time, consumption of large amounts of memory resources, and reduced front-end page quality." Factors leading to long front-end page rendering execution time, large amounts of memory resources, and reduced front-end page quality often include: when the cascading stylesheet (CSS) file set contains invalid syntax that the browser cannot parse (e.g., unknown vendor prefixes, syntax errors), an exception is thrown directly, preventing syntax tree construction. Furthermore, traditional abstract syntax trees are flat structures, making it difficult to accurately express the complex relationships such as priority and scope nesting within the CSS file set. Moreover, a full parsing at once consumes a large amount of memory, extending the construction time, resulting in long front-end page rendering execution time, large amounts of memory resources, and reduced front-end page quality. Solving these factors can shorten front-end page rendering execution time, reduce memory resource consumption, and improve front-end page quality. To achieve this effect, this disclosure firstly, the scene profile construction to obtain file-related information can provide a basis for subsequent decision-making; BOM removal and encoding conversion in the annotation instruction filtering can eliminate the risk of parsing exceptions and crashes caused by cross-platform encoding conflicts, reducing the amount of file data. Secondly, lexical analysis based on the target lexical analysis state machine achieves non-one-time full generation, which reduces memory consumption for extremely large CSS files. Analyzing only when needed at the lexical level improves lexical analysis efficiency. Thirdly, non-interruptional fault tolerance is implemented when a target character sequence is detected. Instead of throwing exceptions, code metadata nodes with precise row and column positions are generated, solving the problem of existing methods failing to construct abstract syntax trees when exceptions occur. Subsequently, hierarchical implicit nested node construction achieves tree-like reconstruction of the flat syntax tree, deconstructing it into clear parent-child hierarchical subtrees through a stack data structure. Cascading context node construction achieves cascading context boundary capture, accurately identifying the boundaries and levels of CSS cascading layers and scopes, and accurately identifying global and local styles to avoid subsequent style conflicts. Boundary node construction implements bridging of the build toolchain and associated file routing information, reducing the occurrence of situations where old projects mix CSS Modules and global styles. It clearly records the mapping relationship between logical names and obfuscated class names and avoids the accidental deletion of hidden class names during on-demand loading, achieving accurate identification of complex relationships such as priority and scope nesting. Then, lazy on-demand parsing can achieve attribute-level lazy loading, so that detailed parsing is only performed when it is actually parsed. This can improve the parsing speed and efficiency of the preceding steps and can adapt to the frequent builds of very large front-end projects. The generation of style abstract syntax trees can achieve full-link traceability. When styles are lost, the original code can be accurately traced, improving the quality of the abstract syntax tree.Finally, by selecting the style abstract syntax tree for on-demand loading, the target front-end page set is obtained, which can shorten the front-end page rendering execution time, reduce memory resource consumption, and improve the quality of the front-end pages.

[0044] Step 104: Construct a selector index for the style abstract syntax tree to obtain a style selector index information set.

[0045] In some embodiments, the execution entity may construct a selector index on the style abstract syntax tree to obtain a style selector index information set. The style selector index information in this set may be key-value pairs recording information from the cascading style sheet file sets containing different types of CSS selectors (e.g., class selectors, ID selectors, element selectors, attribute selectors). For example, the style selector index information set may be ["header":" / src / styles / main.css", "header":" / src / components / header / header.css"]. The class selector may be a CSS selector starting with ".". The ID selector may be a CSS selector starting with "#". The element selector may be an elementSelectors selector. The attribute selector may be an attributeSelector selector.

[0046] In some optional implementations of certain embodiments, the above-described construction of a selector index for the selected style abstract syntax tree to obtain a style selector index information set may include the following steps: The first step is to extract selector nodes from the above-mentioned selection style abstract syntax tree to obtain a style selector node set. The style selector nodes in this set can be nodes that use CSS selectors as the basis of the selection style abstract syntax tree. This style selector node set can include, but is not limited to, at least one of the following: ID selectors, class selectors, tag selectors, adjacent selectors, child selectors, descendant selectors, universal selectors, attribute selectors, and pseudo-class selectors.

[0047] The second step is to construct a selector master index information set based on the selector type information set of the aforementioned style selector node set. The selector type information in this set can be type information representing the style selector node. This selector type information set can include, but is not limited to, at least one of the following: type selector, class selector, ID selector, attribute selector, pseudo-class selector, pseudo-element selector, complex selector, and compound selector. The type selector can be an element type selector. For example, it can be a div (partition / block) selector or a span (inline content tag) selector. The class selector can be a selector that begins with a ".". The attribute selector can be a selector that includes attribute conditions. The pseudo-class selector can be a :hover selector or a :active selector. The pseudo-element selector can be a ::before selector or a ::after selector. The complex selector can be a selector formed by combining selectors that include combinators. The compound selector can be a selector sequence that does not contain combinators. The selector master index information in the aforementioned selector master index information set can be index information that facilitates quick node lookup in the aforementioned selection style abstract syntax tree. As an example, when the selector type information is the type information of a class selector, the selector master index information can be the master index information of a mapping table that uses the class name of the class selector as the search key and stores CSS selectors matching that class name as the storage value. When the selector type information is the type information of an ID selector, the selector master index information can be the master index information of a mapping table that uses the ID value of the ID selector as the search key and stores CSS selectors matching that ID value as the storage value. When the selector type information is the type information of a tag selector, the selector master index information can be the master index information of a mapping table that uses the HTML tag name of the tag selector as the search key and stores CSS selectors matching that HTML tag name as the storage value. When the selector type information is the type information of an attribute selector, the selector master index information can be the master index information of a mapping table that uses both the attribute value and attribute name of the attribute selector as the search key and stores CSS selectors matching the combined search key as the storage value. When the selector type information is that of a complex selector or a compound selector, the selector master index information can be obtained through the following steps: First, the complex selector and compound selector are split into multiple independent selectors. Then, the CSS rule information corresponding to these multiple independent selectors is added to the inverted index list to obtain the selector master index information. In practice, the above-mentioned execution entity can use an inverted index construction algorithm to construct the selector master index information set based on the selector type information set of the style selector node set.

[0048] The third step involves extracting style boundaries and scope from the aforementioned set of style selector nodes, resulting in a set of selector node boundary information, a set of selector node scope information, and a set of selector node hash values. Specifically, the selector node boundary information in the selector node boundary information set can be the physical start and end positions of the CSS selectors within the aforementioned Cascading Style Sheets (CSS) file set, i.e., the line number, column number range, and source file identifier information of the CSS selectors in the aforementioned Select Style Abstract Syntax Tree. The selector node scope information in the selector node scope information set can be the effective range of the style selector corresponding to the aforementioned style selector node within the CSS file set. The selector node hash values ​​in the selector node hash value set can be the hash values ​​of the names of the selectors corresponding to the aforementioned style selector nodes. In practice, the execution entity can first traverse the aforementioned Select Style Abstract Syntax Tree to extract the selector node boundary information set of the aforementioned set of style selector nodes. Secondly, it can perform scope priority matching on the aforementioned set of style selector nodes to obtain the selector node scope information set. If the style selector node includes scoped attribute selector information, the hash value of the attribute selector information is extracted, and the selector node's scope information can be scoped:{hash value}. If the style selector node's name conforms to the hash naming pattern of CSS Modules (CSS style localization) (e.g., _btn_1a2b3c), the selector node's scope information can be module identifier information (e.g., module:{moduleId}). If the style selector node is wrapped by the @scope rule or :host, the selector node's scope information can be the information of the root node shadow of the independent closed DOM subtree attached to the style selector node in the style abstract syntax tree, or it can be the information of the selector scope-root, the starting point of the style selector node's scope. Otherwise, the selector node's scope information is the global scope information. Then, the style selector node set is normalized to obtain a normalized node set. This normalization process can include removing redundant whitespace and standardizing the spelling of combiners. Finally, the normalized node set is hashed using the SHA256 algorithm to obtain the selector node hash value set. If the style selector node itself carries a scoped hash, then the selector node hash value can be a scoped hash.

[0049] The fourth step is to determine the selector complexity information set and selector efficiency information set of the aforementioned style selector node set. The selector complexity information in the selector complexity information set can be an indicator that quantifies the cost of CSS selector matching. This selector complexity information can be obtained by summing the number of descendant / child combinators, the number of conditions in compound selectors (i.e., the number of compound selectors), and the number of pseudo-class / attribute selectors included. The selector efficiency information in the selector efficiency information set can be the efficiency information obtained by the browser engine executing CSS selectors. In practice, the executing entity can first determine the set of descendant / child combinators, the set of compound selectors, and the set of attributes of pseudo-class / attribute selectors for the aforementioned style selector node set by selecting the style abstract syntax tree. Then, the sum of the set of descendant / child combinators, the set of compound selectors, and the set of attributes of pseudo-class / attribute selectors is determined as the selector complexity information set. Finally, the selector efficiency information set of the aforementioned style selector node set is determined through a selector matching efficiency mapping table. This selector matching efficiency mapping table can be a table used to record the matching efficiency of different types of CSS selectors. The selector matching efficiency mapping table mentioned above can be a mapping table that records the matching efficiency of ID selectors (fast matching efficiency), class selectors (fast matching efficiency), tag selectors (medium matching efficiency), and target selectors (slow matching efficiency) in descending order. The target selectors mentioned above can include general selectors, attribute selectors, and pseudo-class selectors.

[0050] The fifth step involves constructing a selector auxiliary index information set based on the aforementioned selector node boundary information set, selector node scope information set, selector node hash value set, selector complexity information set, and selector efficiency information set. The selector auxiliary index information in this set can be a multi-dimensional inverted index built upon these sets. The primary selector index information set is used for quickly finding candidate rule information, while the secondary selector index information set is used for scope filtering, complexity sorting, and efficiency degradation of candidate rules. In practice, the execution entity can first use the selector node scope information set as the key to invert and mount all style selector nodes under that set, creating the secondary selector index information set. Secondly, a selector deduplication table is built using the selector node hash value set as the key, serving as a secondary index information set for selectors. Selectors with the same hash value are considered equivalent rules for merging or pruning in subsequent on-demand loading. Next, an ordered list is built using the selector complexity information set, serving as a secondary index information set for selectors. High-complexity rules are filtered out according to this secondary index information set, allowing subsequent on-demand loading to determine whether to split or delay loading. Then, selector efficiency information is used for bucketing, serving as a secondary index information set for selectors. Inefficient selectors can be marked for delayed injection or downgraded to inline styles in subsequent on-demand loading. Finally, a forward sorted table is built using the file and line number of the selector node boundary information set as the key, serving as a secondary index information set for selectors, enabling accurate write-back after style pruning during subsequent on-demand loading.

[0051] The sixth step is to determine the above-mentioned main index information set of selectors and the above-mentioned auxiliary index information set of selectors as the style selector index information set.

[0052] Step 105: Based on the front-end page style identifier information set and style selector index information set, determine the page style dependency graph between the template elements included in the front-end page template file set and the style information included in the cascading style sheet file set.

[0053] In some embodiments, the execution entity can determine a page style dependency graph between the template elements included in the front-end page template file set and the style information included in the cascading style sheet file set, based on the front-end page style identifier information set and the style selector index information set. The template elements can be HTML elements included in the front-end page set. The style information can be CSS selectors. The page style dependency graph can be a graph representing the dependency relationship between template elements and style information. The nodes included in the page style dependency graph can be template element information, style information, the front-end page template file set, and the cascading style sheet file set. The connecting edges can be dependencies that determine whether style information matching a template element is valid in the front-end page template file set by using scope. The scope can be the valid range within which the template element can be accessed in the cascading style sheet file set. For example, if the cascading style sheet file set can be ":global(.classname)", then the scope of the style information can be the global scope of the cascading style sheet file set.

[0054] In some optional implementations of certain embodiments, determining the page style dependency graph between the template elements included in the front-end page template file set and the style information included in the cascading style sheet file set, based on the front-end page style identifier information set and the style selector index information set, may include the following steps: The first step involves, in response to determining that the selector type information included in the aforementioned style selector index information set is the first selector type information, performing identifier matching on the aforementioned front-end page style identifier information set and the aforementioned style selector index information set to obtain a first candidate selector information set. The aforementioned first selector type information can be the type information of a class selector, attribute selector, or ID selector. The first candidate selector information in the aforementioned first candidate selector information set can be successfully matched selector information including a class name or ID string. In practice, the aforementioned execution entity can first filter out the class name information set, ID string set, or attribute information of the aforementioned first selector type information from the aforementioned front-end page style identifier information set. Then, using the aforementioned class name information set, the aforementioned ID string set, or attribute information as the search key, it queries the main selector index information set included in the aforementioned style selector index information set to obtain the CSS selector information set mounted in the main selector index information set, which serves as the first candidate selector information set.

[0055] The second step involves, in response to determining that the selector type information included in the style selector index information set is the second selector type information, performing a fuzzy match between the front-end page style identifier information set and the style selector index information set to obtain a second candidate selector information set. The second selector type information can be the type information of a compound selector. The second candidate selector information in the second candidate selector information set can be information from compound selectors that have successfully undergone fuzzy matching and simultaneously satisfy tag and class / attribute conditions. In practice, the execution entity can first filter out the front-end page style identifier information set that matches the second selector type information from the front-end page style identifier information set, using this as the target identifier information set. Then, the target identifier information set undergoes syntactic decomposition processing to obtain a target decomposition semantic information set. The target decomposition semantic information in the target decomposition semantic information set can include class name information, ID strings, and tag names from the front-end page style identifier information. Finally, using the aforementioned target decomposition semantic information set as the query key, a query is performed in the aforementioned style selector index information set. As long as any one of the target identifier semantic information, namely class name information / ID string / tag name, matches in the style selector index information set, the matching CSS selector information is determined as the second candidate selector information set.

[0056] The third step involves determining that the selector type information included in the style selector index information set is the third selector type information. A fuzzy match is then performed between the front-end page style identifier information set and the style selector index information set to obtain a third candidate selector information set. This third selector type information can be the type information of a combinatorial selector or a complex selector. The third candidate selector information in this set can be the identifier information that matches the third selector type information, as well as information about complex selectors that require verification. In practice, the executing entity can first filter out the front-end page style identifier information set that matches the third selector type information from the front-end page style identifier information set, using this as the target style identifier information set. Then, the target style identifier information set is syntactically decomposed to obtain a decomposed identifier semantic information set. This decomposed identifier semantic information set can include class name information, ID strings, and tag names, among other things. Finally, using the above-mentioned set of semantic information of the identifier as the query key, a fuzzy search is performed on the above-mentioned style selector index information set. As long as any one of the identifier information in the target identifier semantic information, namely class name information / ID string / tag name, is matched in the style selector index information set, the matched CSS selector information is determined as the third candidate selector information set.

[0057] The fourth step involves filtering the first, second, and third candidate selector information sets using scope rules to obtain a filtered candidate selector information set. In practice, the executing entity can first determine the scope information of the first, second, and third candidate selector information sets as selector scope information sets. Then, it can filter at least one selector scope information set that satisfies preset scope conditions from these sets. These preset scope conditions can be pre-defined conditions for determining the scope of CSS selectors. The aforementioned preset scope condition information may include: local scope condition information, which can only match the front-end page style identifier information set within a local scope; global scope condition information, which can match the front-end page style identifier information set in any location except those restricted by the Shadow DOM (DOM isolation technology); pseudo-class selector (:host selector) scope condition information, which can match all host elements included in the Shadow DOM; and isolation scope condition information, which detects Shadow boundaries, where ordinary selectors cannot penetrate the boundaries, while the ::part() selector can. Finally, the first candidate selector information set, the second candidate selector information set, and the third candidate selector information set corresponding to at least one of the above selector scope information are determined as the filtered candidate selector information set.

[0058] The fifth step involves performing a matching verification process on the aforementioned filtered candidate selector information set to obtain a matching verification result set. The matching verification results in this set can represent whether the filtered candidate selector information satisfies the structural hierarchy verification. In practice, the executing entity can first, in response to determining that composite selector information exists in the filtered candidate selector information set, split the composite selector information set into individual selector condition verifications to obtain condition verification results, which serve as the matching verification result set. Specifically, the splitting of individual selector condition verification can be a verification of whether the individual selector conditions included after splitting the composite selector information are simultaneously satisfied by a single front-end page style identifier in the aforementioned front-end page style identifier information set. For example, when the above composite selector information can be `div.btn.active[type="submit"]`, the above single selector conditions can be tag conditions: the tag element included in the front-end page style identifier information is the `div` tag; first type of condition: the class list of the class elements included in the front-end page style identifier information needs to include `btn`; second type of condition: the class list of the class elements included in the front-end page style identifier information needs to include `active`; attribute conditions: the attribute element included in the front-end page style identifier information needs to have the attribute `type="submit"`. Then, for the combined selector, using the hierarchical information included in the template abstract syntax tree, the parent-child structure or sibling structure is verified from right to left and upward to check whether it conforms to the structural relationship and identifier feature verification to obtain the matching verification result. As an example, the above combined selector can be `.parent>.child`. The verification of the above structural relationship and identifier feature can be the front-end page style identifier information ( <span class=""child”">The identifier feature (.child) on the right side of the combinatorial selector is matched. The hierarchical relationship is verified by backtracking upwards through the template abstract syntax tree to determine the direct parent node. The parent node is then verified to see if it meets the condition on the left (.parent), that is, whether the parent node contains the identifier feature of style identifier information.

[0059] Step 6: Determine the association information set representing the relationship between the at least one filtered candidate selector information that passed the verification and the template element set corresponding to the front-end page style identifier information set in the above-mentioned matching verification result set. The association information in the above-mentioned association information set can represent the dependency relationship between the at least one filtered candidate selector information that passed the verification and the template element set, that is, the relationship of the selector information that the template element needs to depend on when loading the page.

[0060] Step 7: Input the aforementioned front-end page template file set, the aforementioned cascading style sheet file set, the aforementioned at least one filtered candidate selector information, the aforementioned front-end page style identifier information set, and the aforementioned relationship information set into the graph database to obtain the page style dependency graph. In practice, the aforementioned execution entity can first perform triple format conversion on the aforementioned at least one filtered candidate selector information, the aforementioned front-end page style identifier information set, and the aforementioned relationship information set to obtain a style selection triple set. The aforementioned style selection triple set can be <filtered candidate selector information, relationship information, front-end page style identifier information>. Secondly, determine the reference relationship between the aforementioned front-end page template file set and the aforementioned front-end page style identifier information set, and construct a template style triple set. The template style triple set in the aforementioned template style triple set can be <front-end page template file, reference relationship, front-end page style identifier information>. Then, determine the definition reference relationship between the aforementioned cascading style sheet file set and the aforementioned at least one filtered candidate selector information, and construct a selection cascading triple set. The aforementioned defined reference relationships can be those that identify the source of at least one filtered candidate selector and are defined by the aforementioned Cascading Style Sheets (CSS) file set. The selection cascading triplet in the aforementioned selection cascading triplet set can be <CSS file, defined reference relationship, filtered candidate selector information>. Finally, the aforementioned style selection triplet set, template style triplet set, and selection cascading triplet set are input into a graph database to obtain a page style dependency graph. For example, the aforementioned graph database can be a Neo4j database.

[0061] Step 106: Generate cascading style hierarchy execution information based on the page style dependency graph.

[0062] In some embodiments, the execution entity can generate cascading style hierarchy execution information based on the page style dependency graph. This cascading style hierarchy execution information can be information about the loading order and loading time of CSS files at the component level or front-end page level, formed by optimizing and combining HTML elements.

[0063] In addressing the technical problems mentioned above, the application scenario—refactoring an outdated, non-modular front-end project with multiple front-end pages / routes—often presents the following challenges: different pages within the multiple front-end pages frequently reference the same common styles, requiring repeated packaging of these styles, resulting in wasted style resources and increased resource consumption during page loading. Furthermore, the loading order of components is easily overlooked in multiple front-end pages, and using the same loading method for all front-end styles makes it difficult to accurately determine the actual front-end styles required by each page. This lack of differentiated style loading strategies leads to longer front-end page loading times, lower page quality, and wasted resources. Considering the following requirements for this application scenario: adapting to inconsistent naming conventions across different front-end pages, adapting to complex and chaotic style dependencies, adapting to large styles on front-end pages, and adapting to numerous front-end page routes, we have decided to adopt the following solution: In some optional implementations of certain embodiments, generating cascading style hierarchy execution information based on the page style dependency graph may include the following steps: The first step is to extract rule-based style resources from the style information set included in the aforementioned page style dependency graph, obtaining a style resource information set. The style information in this set can be information composed of a set of nodes related to front-end styles in the aforementioned page style dependency graph. For example, the style information set may include: a Cascading Style Sheets (CSS) file set, filtered candidate selector information, and a set of front-end page style identifiers. The style resource information can be resource information obtained by grouping the aforementioned style information set. In practice, the executing entity can first determine the number of times each front-end page style identifier in the aforementioned page style dependency graph is called by the component set included in the front-end page set corresponding to the aforementioned front-end page template file set and CSS file set, obtaining a set of identifier call counts. The components in the aforementioned component set can be logical units of the aforementioned front-end page set, and these components need to call a set of HTML elements at runtime, while CSS selectors limit the scope of HTML elements through scope. Secondly, from the aforementioned set of front-end page style identifiers, at least one front-end page style identifier whose corresponding identifier call count is greater than or equal to a preset call count threshold is selected. The filtered candidate selector information set associated with at least one front-end page style identifier, along with the at least one front-end page style identifier, is determined as basic style resource information. Then, from the aforementioned page style dependency graph, the set of front-end page style identifiers marked as dynamic identifiers is selected as dynamic identifier information set. The dynamic identifier information set and the filtered candidate selector information associated with the dynamic identifier information set are determined as dynamic style resource information. Here, the aforementioned dynamic identifier can be a tag with the label "component". Afterwards, the style information set after removing the aforementioned basic style resource information and the aforementioned dynamic style resource information is determined as business style resource information. Finally, the aforementioned business style resource information, the aforementioned basic style resource information, and the aforementioned dynamic style resource information are determined as the style resource information set.

[0064] The second step involves extracting entry-level components from the aforementioned front-end page template file set to obtain a route entry-level component information set. This information can be from the entry page in the front-end page set or from components required for the actual rendering of the selected route. In practice, the executing entity can first filter page route configuration files and / or entry files for multi-page applications from the aforementioned front-end page template file set to obtain the target route entry file set. The entry files for the multi-page application can be page entry files (e.g., .vue files, .jsx files) or HTML files. Secondly, in response to the determination that page route configuration files exist in the target route entry file set, the front-end page style identifier information set corresponding to each route is determined within these configuration files, serving as the route style identifier information set. Thirdly, in response to the determination that entry files for multi-page applications exist in the target route entry file set, these entry files are identified as route keys, and the front-end page style identifier information set associated with these route keys is also determined, serving as the route style identifier information set. Subsequently, in response to the determination that both page route configuration files and entry files exist in the aforementioned target route entry file set, the front-end page style identifier information sets corresponding to each route and the front-end page style identifier information sets associated with the route keys are identified as route style identifier information sets. Then, the front-end page style identifier information is recursively traversed in the aforementioned page style dependency graph, starting from the route style identifier information set, to obtain the traversed style identifier information set. Finally, the component set corresponding to the aforementioned traversed style identifier information set is determined and identified as the route entry-level component information set.

[0065] The third step involves aggregating and deduplicating the aforementioned route entry-level component information set to obtain a page-level style information set. This page-level style information set can include the front-end page style identifier information set and filtered candidate selector information required to compose the front-end page set. In practice, the execution entity can first determine the node set corresponding to the front-end page template file set associated with the route entry-level component information set in the aforementioned page style dependency graph, using this as the route template file set. Secondly, the route template file set is grouped into routes to obtain route template file sets under different routes, serving as route template file group sets. Then, page-level deduplication is performed on the aforementioned cascading style sheet file set using the route template file group sets to obtain the page-level style information set. For example, if both the header and homeMain route components reference the layout.css file, only one copy of the layout.css file is retained in the aforementioned page-level style information set.

[0066] The fourth step involves extracting lazy-loaded components from the aforementioned front-end page style identifier information set to obtain a lazy-loaded component information set. This set includes front-end components that are not executed during the initial rendering of the front-end page, but are executed during user interaction, along with their corresponding cascading style sheet (CSS) file sets. In practice, the execution entity can first use the front-end page style identifier information set with dynamic markers in the page style dependency graph as the dynamic style identifier information set. Secondly, it can trace back the CSS file nodes associated with the dynamic style identifier information set in the page style dependency graph to obtain the dynamic CSS file set. Finally, the dynamic CSS file set and the corresponding dynamic front-end components are identified as the lazy-loaded component information set.

[0067] The fifth step is to determine the above-mentioned style resource information set, page-level style information set, and lazy-loaded component information set as the component style loading manifest information.

[0068] Step 6: Based on the aforementioned Cascading Style Sheets (CSS) file set, prioritize the component style loading manifest information to obtain a component style loading priority information set. This priority information can be the loading order of front-end components. In practice, the executing entity can first determine the loading priority information of the CSS file set from the import code statements (e.g., @import statements), using this as the cascading loading priority information set. Then, through the connection edges defining the relationships in the page style dependency graph, topologically sort the component sets included in the component style loading manifest information to obtain the component loading priority information set. Finally, the component loading priority information set and the aforementioned cascading loading priority information set are combined to determine the final component style loading priority information set.

[0069] Step 7: Add the component style loading priority information set to the target list following the component style loading manifest information for deep optimization to obtain cascading style hierarchy execution information. In practice, the execution entity can first deduplicate the filtered candidate selector information set included in the target list to obtain a deduplicated candidate selector information set. Secondly, abbreviate the attribute value set included in the deduplicated candidate selector information set to obtain abbreviated candidate selector information set. For example, the abbreviation could be "margin-top:1px;margin-bottom:1px" to "margin:1px 0". Then, determine the hash value set of the cascading style sheet file node set included in the target list. Afterwards, replace the routes in the page-level style information set included in the target list with routes containing the hash value set to obtain a hashed page-level style information set. Finally, replace the filtered candidate selector information set and page-level style information set in the target list with the hashed page-level style information set and the abbreviated candidate selector information set to obtain the cascading style hierarchy execution information.

[0070] The above-described technical solution and its related content, as an inventive point of this disclosure, solve the technical problem of "long front-end page loading time, low front-end page quality, and wasted resources for loading the front-end page." Factors contributing to long front-end page loading time, low front-end page quality, and wasted resources often include: multiple front-end pages frequently referencing the same common styles, requiring repeated packaging of these styles, resulting in wasted style resources and increased resource consumption during page loading; and the tendency for multiple front-end pages to overlook component loading order and use the same loading method for all front-end styles, making it difficult to accurately determine the actual front-end styles required by the page, failing to implement differentiated style loading strategies, thus causing long front-end page loading time, low front-end page quality, and wasted resources. Solving these factors can shorten front-end page loading time, improve front-end page quality, and reduce wasted resources. To achieve this effect, this disclosure firstly, through rule-based style resource extraction, accurately divides styles by determining the number of calls and identifying dynamic tags. This isolates frequently called common styles, improving the reusability and stability of basic styles. Decoupling dynamic styles from business styles allows for on-demand import, reducing business code pollution. Secondly, entry-level component extraction iterates from route configurations and entry files, retaining only components and styles referenced by routes, reducing file bundle size and wasted loading resources. Thirdly, aggregation and deduplication removes duplicate style files referenced by multiple components and groups them by route, eliminating page-level redundancy and reducing browser load during subsequent loading. Finally, lazy-loaded component extraction separates user-interactive loaded styles, enabling on-demand delayed loading of non-first-screen styles. This improves loading performance for both first-screen and non-first-screen front-end pages, forming a dual-barrier lazy loading mechanism for routes and components, maximizing front-end performance optimization. Next, after determining the component style loading manifest information, priority is applied in a hierarchical manner. Topological sorting of the page style dependency graph accurately determines the style file loading order, reducing style overriding failures and unexpected style overriding caused by file concatenation order, thus improving the accuracy of style cascading rules. Finally, after adding and deeply optimizing the manifest, on-demand loading is performed to obtain the target front-end page set. Selector deduplication and attribute abbreviation are further compressed at the syntax and file levels. Utilizing browser caching mechanisms through hash values ​​avoids users repeatedly downloading unmodified style resources, reducing resource waste, shortening front-end page loading time, and improving front-end page quality.

[0071] Step 107: In response to the determination that the front-end page corresponding to the front-end page template file set is called, the front-end page set is rendered on demand according to the cascading style hierarchy execution information to obtain the target front-end page set.

[0072] In some embodiments, the execution entity may, in response to determining that the front-end page set corresponding to the front-end page template file set has been invoked, perform cascading style on-demand rendering processing on the front-end page set according to the cascading style hierarchy execution information to obtain a target front-end page set. The target front-end page in the target front-end page set may be a front-end page obtained by loading, grouping, and injecting the front-end styles actually used by the front-end page according to the cascading style hierarchy execution information to achieve on-demand loading. The front-end page set may be a collection including at least one front-end page. There is a one-to-one correspondence between the front-end page set and the target front-end page.

[0073] In some optional implementations of certain embodiments, the process of performing on-demand rendering of the front-end page set based on the cascading style hierarchy execution information to obtain the target front-end page set may include the following steps: The first step involves filtering the Cascading Style Sheets (CSS) file set based on the aforementioned CSS hierarchy execution information, resulting in a filtered CSS file. This filtered CSS file can be a file composed of code corresponding to the abbreviated candidate selector information set included in the aforementioned CSS hierarchy execution information. In practice, the executing entity can first obtain the front-end page style identifier information set required for loading the front-end page set from the aforementioned CSS hierarchy execution information, using it as the page identifier information set. Secondly, it matches the selection style abstract syntax tree corresponding to the aforementioned CSS file set with the front-end page style identifier information set included in the aforementioned CSS hierarchy execution information, obtaining a selector matching result set. Then, it removes the selector information set representing the failed match from the selection style abstract syntax tree, obtaining the target selector information set. Finally, the code string corresponding to the target selector information set is determined as the filtered CSS file.

[0074] The second step involves dividing the filtered Cascading Style Sheet (CSS) files into sub-files based on the aforementioned Cascading Style Sheet (CSS) hierarchy execution information. These sub-files can be physical CSS files obtained by splitting the CSS hierarchy execution information. This sub-file set may include: base style CSS files, page style CSS files, and lazy-loaded style files. In practice, the executing entity can first group the filtered CSS files into base-level CSS files, page-level CSS files, and dynamic-level CSS files using the component style loading priority information set included in the CSS hierarchy execution information. Then, the hash values ​​of the base-level, page-level, and dynamic-level CSS files are determined to obtain the base hash value, page hash value, and dynamic hash value. Next, the base hash value, page hash value, and dynamic hash value are added to the corresponding cascading file names to obtain the base hash-level cascading file, page hash-level cascading file, and dynamic hash-level cascading file, which serve as the cascading stylesheet sub-file name set for browser cache management. The aforementioned cascading file names can be the filenames of the base-level cascading file, page-level cascading file, and dynamic-level cascading file. Finally, the aforementioned cascading stylesheet sub-file name set, base-level cascading file, page-level cascading file, and dynamic-level cascading file are determined as the cascading stylesheet sub-file set.

[0075] The third step involves injecting asynchronous loading logic into the aforementioned cascading stylesheet (CSS) sub-file set to obtain the injected CSS sub-file set, which serves as the stylesheet sub-file set. The stylesheet sub-files in this set can include files containing instructions to load CSS files, allowing the browser loading the front-end page set to be aware of the CSS file's address and download time. It also includes loading logic code (e.g., JavaScript code) for loading CSS files. In practice, the executing entity can first extract information from the cascading style hierarchy execution information to determine the loading time of the CSS sub-file set. The loading time of the CSS sub-file name set can be the initialization time of the front-end page set. The loading time of the dynamic cascading files can be the loading time during user interaction. Then, a style loading code set for the CSS sub-file set is generated. The loading code for the base cascading files and page cascading files included in the cascading style hierarchy execution information can be added to the HTML file. <link> The code snippet is as follows. The loading code for lazy-loaded styles in the dynamic cascading stylesheet files included in the above cascading stylesheet execution information can be JavaScript logic code, that is, converting dynamic cascading styles into JavaScript loading functions (e.g., `loadLazyCSS('modal')`) to bind to the corresponding interactive events. Finally, the above style loading code set is injected into the entry file included in the above front-end page template file set to obtain the injected cascading stylesheet sub-file set, which serves as the stylesheet sub-file set.

[0076] The fourth step involves performing a fallback fault-tolerance process on the aforementioned stylesheet sub-file set to obtain a fault-tolerant stylesheet sub-file set. This fault-tolerant stylesheet sub-file set can be achieved by adding a fault-tolerance mechanism to the stylesheet sub-file set to ensure front-end page loading. This means adding loading logic and CSS files wrapped in error handling, so that the front-end page can still be loaded by loading the basic styles even if the stylesheet sub-file set fails to load or there is a network error. In practice, the execution entity can first inject loading logic with error handling function code into the aforementioned stylesheet sub-file set to obtain a stylesheet error-handling sub-file set. For example, the error handling function code can be a try-catch function or a .catch() error handling function. Secondly, in response to the detection of an execution error in the aforementioned stylesheet error-handling sub-file set, the files corresponding to the basic styles included in the stylesheet error-handling sub-file set and the fault-tolerance fallback code snippet are identified as the fault-tolerant stylesheet sub-file set. The fault-tolerance fallback code snippet can be injected inline into the code section of the HTML file by the build tool (e.g., a Webpack plugin) when generating the HTML page. <style>兜底的代码片段，还可以是监听CSS文件加载失败的onerror事件处理逻辑的代码片段。上述内联<style>兜底可以是在HTML文件中的<head>代码部分嵌入精简的基础CSS样式，作为外部样式加载失败时的最低可读性保障，以防止页面呈现为纯文本状态进行的兜底。

[0077] 第五步，根据上述容错后样式表子文件集，对上述前端页面集进行层叠样式执行处理，得到目标前端页面集。其中，上述目标前端页面可以是通过上述容错后样式表子文件集进行页面渲染显示在终端屏幕上、页面的样式正确且无冗余的前端页面。

[0078] 进一步参考图2，作为对上述各图所示方法的实现，本公开提供了一种前端页面按需渲染装置的一些实施例，这些装置实施例与图1所示的那些方法实施例相对应，该前端页面按需渲染装置具体可以应用于各种电子设备中。

[0079] 如图2所示，一种前端页面按需渲染装置200包括：获取单元201、语法树解析提取单元202、语法解析单元203、索引构建单元204、确定单元205、生成单元206和按需渲染单元207。其中，获取单元201被配置成：获取目标布局信息的前端页面模板文件集和层叠样式表文件集，其中，上述目标布局信息包括以下至少一项：非模块化布局信息、混合技术栈布局信息、弱模块化布局信息。语法树解析提取单元202被配置成：对上述前端页面模板文件集进行语法树解析提取，得到前端页面样式标识信息集。语法解析单元203被配置成：对上述层叠样式表文件集进行语法解析，得到选择样式抽象语法树。索引构建单元204被配置成：对上述选择样式抽象语法树进行选择器索引构建，得到样式选择器索引信息集。确定单元205被配置成：根据上述前端页面样式标识信息集和上述样式选择器索引信息集，确定上述前端页面模板文件集包括的模板元素和上述层叠样式表文件集包括的样式信息之间的页面样式依赖关系图。生成单元206被配置成：根据上述页面样式依赖关系图，生成层叠样式层级执行信息。按需渲染单元207被配置成：响应于确定上述前端页面模板文件集对应的前端页面集被调用，根据上述层叠样式层级执行信息，对上述前端页面集进行层叠样式按需渲染处理，得到目标前端页面集。

[0080] 可以理解的是，前端页面按需渲染装置200中记载的诸单元与参考图1描述的方法中的各个步骤相对应。由此，上文针对方法描述的操作、特征以及产生的有益效果同样适用于前端页面按需渲染装置200及其中包含的单元，在此不再赘述。

[0081] 下面参考图3，其示出了适于用来实现本公开的一些实施例的电子设备300的结构示意图。图3示出的电子设备仅仅是一个示例，不应对本公开的实施例的功能和使用范围带来任何限制。

[0082] 如图3所示，电子设备300可以包括处理装置（例如中央处理器、图形处理器等）301，其可以根据存储在只读存储器（ROM）302中的程序或者从存储装置308加载到随机访问存储器（RAM）303中的程序而执行各种适当的动作和处理。在RAM 303中，还存储有电子设备300操作所需的各种程序和数据。处理装置301、ROM 302以及RAM 303通过总线304彼此相连。输入 / 输出（I / O）接口305也连接至总线304。

[0083] 通常，以下装置可以连接至I / O接口305：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置306；包括例如液晶显示器（LCD）、扬声器、振动器等的输出装置307；包括例如磁带、硬盘等的存储装置308；以及通信装置309。通信装置309可以允许电子设备300与其他设备进行无线或有线通信以交换数据。虽然图3示出了具有各种装置的电子设备300，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图3中示出的每个方框可以代表一个装置，也可以根据需要代表多个装置。

[0084] 特别地，根据本公开的一些实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的一些实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的一些实施例中，该计算机程序可以通过通信装置309从网络上被下载和安装，或者从存储装置308被安装，或者从ROM 302被安装。在该计算机程序被处理装置301执行时，执行本公开的一些实施例的方法中限定的上述功能。

[0085] 需要说明的是，本公开的一些实施例上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、光纤、便携式紧凑磁盘只读存储器（CD-ROM）、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开的一些实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开的一些实施例中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF（射频）等等，或者上述的任意合适的组合。

[0086] 在一些实施方式中，客户端、服务器可以利用诸如HTTP（Hyper Text TransferProtocol，超文本传输协议）之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信（例如，通信网络）互连。通信网络的示例包括局域网（"LAN”），广域网（"WAN”），网际网（例如，互联网）以及端对端网络（例如，ad hoc端对端网络），以及任何当前已知或未来研发的网络。

[0087] 上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取目标布局信息的前端页面模板文件集和层叠样式表文件集，其中，上述目标布局信息包括以下至少一项：非模块化布局信息、混合技术栈布局信息、弱模块化布局信息；对上述前端页面模板文件集进行语法树解析提取，得到前端页面样式标识信息集；对上述层叠样式表文件集进行语法解析，得到选择样式抽象语法树；对上述选择样式抽象语法树进行选择器索引构建，得到样式选择器索引信息集；根据上述前端页面样式标识信息集和上述样式选择器索引信息集，确定上述前端页面模板文件集包括的模板元素和上述层叠样式表文件集包括的样式信息之间的页面样式依赖关系图；根据上述页面样式依赖关系图，生成层叠样式层级执行信息；响应于确定上述前端页面模板文件集对应的前端页面集被调用，根据上述层叠样式层级执行信息，对上述前端页面集进行层叠样式按需渲染处理，得到目标前端页面集。

[0088] 可以以一种或多种程序设计语言或其组合来编写用于执行本公开的一些实施例的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如"C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网（LAN）或广域网（WAN）——连接到用户计算机，或者，可以连接到外部计算机（例如利用因特网服务提供商来通过因特网连接）。

[0089] 附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和 / 或流程图中的每个方框、以及框图和 / 或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

[0090] 描述于本公开的一些实施例中的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括获取单元、语法树解析提取单元、语法解析单元、索引构建单元、确定单元、生成单元和按需渲染单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，获取单元还可以被描述为"获取目标布局信息的前端页面模板文件集和层叠样式表文件集的单元”。

[0091] 本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列（FPGA）、专用集成电路（ASIC）、专用标准产品（ASSP）、片上系统（SOC）、复杂可编程逻辑设备（CPLD）等等。

[0092] 以上描述仅为本公开的一些较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开的实施例中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开的实施例中公开的（但不限于）具有类似功能的技术特征进行互相替换而形成的技术方案。< / style>

Claims

1. A method for on-demand rendering of front-end pages, characterized in that, include: The front-end page template file set and cascading style sheet file set that obtain target layout information are obtained, wherein the target layout information includes at least one of the following: non-modular layout information, hybrid technology stack layout information, and weakly modular layout information; The syntax tree of the front-end page template file set is parsed and extracted to obtain the front-end page style identifier information set; The cascading style sheet file set is parsed to obtain a selection style abstract syntax tree; The selector index is constructed by the selected style abstract syntax tree to obtain the style selector index information set; Based on the front-end page style identifier information set and the style selector index information set, determine the page style dependency graph between the template elements included in the front-end page template file set and the style information included in the cascading style sheet file set; Based on the page style dependency graph, generate cascading style hierarchy execution information; In response to determining that the front-end page set corresponding to the front-end page template file set is invoked, the front-end page set is subjected to on-demand rendering of cascading styles according to the cascading style hierarchy execution information to obtain the target front-end page set.

2. The method according to claim 1, characterized in that, The step of parsing and extracting the syntax tree from the set of front-end page template files to obtain a set of front-end page style identifier information includes: Determine the template type information of the front-end page template file set; Based on the template type information, determine the front-end page parser information of the front-end page template file set; Based on the front-end page parser information, the front-end page template file set is parsed to obtain a template abstract syntax tree; The template abstract syntax tree is traversed to determine whether the current template node to be traversed should be extracted. In response to determining that the current template node is the first target template node, multi-type node extraction is performed on the current template node to obtain node identification information; In response to determining that the current template node is the second target template node, dynamic and static extraction is performed on the current template node to obtain node identification information; In response to determining that the current template node is the third target template node, the node context is extracted from the current template node to obtain node identification information; In response to the completion of node traversal, the obtained node identification information is used as a set of front-end page style identification information.

3. The method according to claim 1, characterized in that, The process of constructing a selector index on the abstract syntax tree of the selection style to obtain a style selector index information set includes: Extract selector nodes from the selected style abstract syntax tree to obtain a set of style selector nodes; Based on the selector type information set of the style selector node set, construct the selector master index information set; The style selector node set is subjected to style boundary and scope extraction to obtain selector node boundary information set, selector node scope information set and selector node hash value set; Determine the selector complexity information set and selector efficiency information set of the style selector node set; Based on the selector node boundary information set, the selector node scope information set, the selector node hash value set, the selector complexity information set, and the selector efficiency information set, construct a selector auxiliary index information set; The selector primary index information set and the selector secondary index information set are determined as the style selector index information set.

4. The method according to claim 1, characterized in that, The step of determining the page style dependency graph between the template elements included in the front-end page template file set and the style information included in the cascading style sheet file set, based on the front-end page style identifier information set and the style selector index information set, includes: In response to determining that the selector type information included in the style selector index information set is the first selector type information, identifier matching is performed on the front-end page style identifier information set and the style selector index information set to obtain the first candidate selector information set. In response to determining that the selector type information included in the style selector index information set is the second selector type information, a fuzzy match is performed on the front-end page style identifier information set and the style selector index information set to obtain the second candidate selector information set. In response to determining that the selector type information included in the style selector index information set is the third selector type information, a fuzzy match is performed on the front-end page style identifier information set and the style selector index information set to obtain the third candidate selector information set. The first candidate selector information set, the second candidate selector information set, and the third candidate selector information set are subjected to scope rule filtering to obtain the filtered candidate selector information set. The filtered candidate selector information set is subjected to matching and verification processing to obtain a matching and verification result set; Determine the association information set between the template element set corresponding to at least one filtered candidate selector information that has passed the verification and the front-end page style identifier information set in the matching verification result set; The front-end page template file set, the cascading style sheet file set, the information of at least one filtered candidate selector, the front-end page style identifier information set, and the association relationship information set are input into the graph database to obtain the page style dependency graph.

5. The method according to claim 1, characterized in that, The step of performing on-demand rendering of the front-end page set according to the cascading style hierarchy execution information to obtain the target front-end page set includes: Based on the cascading style hierarchy execution information, the cascading style sheet file set is subjected to style selection and filtering processing to obtain the filtered cascading style sheet files; Based on the cascading style hierarchy execution information, the filtered cascading style sheet files are divided into blocks to obtain a set of cascading style sheet sub-files. Asynchronous loading logic injection is performed on the cascading style sheet sub-file set to obtain the injected cascading style sheet sub-file set, which is used as the style sheet sub-file set. The stylesheet sub-file set is subjected to degradation and fault tolerance processing to obtain a fault-tolerant stylesheet sub-file set; Based on the fault-tolerant stylesheet sub-file set, the front-end page set is subjected to cascading style processing to obtain the target front-end page set.

6. A front-end page on-demand rendering device, characterized in that, include: The acquisition unit is configured to acquire a set of front-end page template files and a set of cascading style sheets for the target layout information, wherein the target layout information includes at least one of the following: non-modular layout information, hybrid technology stack layout information, and weakly modular layout information; The syntax tree parsing and extraction unit is configured to perform syntax tree parsing and extraction on the front-end page template file set to obtain a set of front-end page style identifier information; The syntax parsing unit is configured to perform syntax parsing on the cascading style sheet file set to obtain a selection style abstract syntax tree; An index building unit is configured to build a selector index on the selected style abstract syntax tree to obtain a style selector index information set. The determining unit is configured to determine a page style dependency graph between the template elements included in the front-end page template file set and the style information included in the cascading style sheet file set, based on the front-end page style identifier information set and the style selector index information set. The generation unit is configured to generate cascading style hierarchy execution information based on the page style dependency graph; The on-demand rendering unit is configured to, in response to determining that the front-end page set corresponding to the front-end page template file set is invoked, perform on-demand rendering of the front-end page set according to the cascading style hierarchy execution information to obtain the target front-end page set.

7. An electronic device, characterized in that, include: One or more processors; Storage device, on which one or more programs are stored, When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-5.

8. A computer-readable medium, characterized in that, It stores a computer program that, when executed by a processor, implements the method as described in any one of claims 1-5.

Images