Page loading method, device, computer equipment and medium based on parsing engine
By building the parsing engine to parse the page data structure and rendering the engine components, the problems of low efficiency and high cost of traditional front-end development are solved, and efficient page loading and development efficiency are achieved.
Patent Information
- Application Number
- CN202110697206.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-06-23
- Publication Date
- 2024-12-10
- Estimated Expiration
- 2041-06-23
AI Technical Summary
The traditional front-end rendering and parsing engine development model requires the implementation of logic of components and pages, resulting in low R&D efficiency and high operational costs.
By building a parsing engine, extracting and parsing the page data structure into a DOM tree structure, traversing the node to obtain component types, matching engine components and rendering page resources, directly loading the target page, avoiding changing the implementation logic.
Improves front-end development efficiency, reduces operating costs, and simplifies the page loading process.
Smart Images
Figure CN113377373B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of page rendering technology, and in particular to a page loading method, device, computer equipment and medium based on a parsing engine. Background Art
[0002] With the development of smart terminals and mobile Internet, more and more information can be displayed on the terminal for users to browse news, sports, entertainment, commodities, etc. Such applications that can display a certain page on the terminal usually use the front-end rendering and parsing engine to render the data content and then display it to the user. However, the traditional development model of the front-end rendering and parsing engine requires writing components and pages according to the corresponding implementation logic of the generated page, making it difficult to improve the overall work efficiency of the front-end R&D, and the operating costs remain high, which in turn affects customer satisfaction. Summary of the invention
[0003] The purpose of the embodiments of the present application is to propose a page loading method, device, computer equipment and medium based on a parsing engine to solve the technical problem in the related technology that the front-end development needs to write components and pages according to the implementation logic of the generated page, resulting in low overall work efficiency and high operating costs of the front-end research and development.
[0004] In order to solve the above technical problems, the embodiment of the present application provides a page loading method based on a parsing engine, which adopts the following technical solution:
[0005] Construct a parsing engine, extract the data structure required for loading the page through the parsing engine, and parse the data structure into a DOM tree structure;
[0006] Starting from the root node of the DOM tree structure, traversing the nodes in the DOM tree structure in sequence, obtaining node information of the nodes, and obtaining the component type of the nodes according to the node information;
[0007] According to a preset correspondence between the component type and the engine component in the parsing engine, matching the component type to the engine component in the parsing engine;
[0008] The page resource corresponding to the engine component is acquired through the component type, the engine component is rendered according to the page resource, and the target page is loaded.
[0009] Furthermore, the step of parsing the data structure into a DOM tree structure includes:
[0010] Parsing the data structure through the parsing engine, and obtaining the hierarchical relationship of each component from the data structure;
[0011] The parent-child relationship and the sibling relationship between the components are determined according to the hierarchical relationship, and the DOM tree structure is generated according to the sibling relationship and the parent-child relationship.
[0012] Furthermore, the step of acquiring a page resource corresponding to the engine component through the component type, rendering the engine component according to the page resource, and loading the target page includes:
[0013] Querying, according to the component type, a page resource of the node corresponding to the component type;
[0014] The page resource is transmitted to the engine component corresponding to the component type and rendered to the page.
[0015] Furthermore, the step of querying the page resource of the node corresponding to the component type according to the component type includes:
[0016] According to the component type, obtaining layout data and content data of a node corresponding to the component type;
[0017] The page resource is generated based on the content data and the layout data.
[0018] Furthermore, the step of transmitting the page resource to the engine component corresponding to the component type and rendering it to the page includes:
[0019] Input the page resource into the engine component, and generate a page rendering file according to the content data and the layout data of the page resource;
[0020] The page rendering is performed according to the page rendering file, and the engine components are drawn one by one on the display interface to obtain the target page.
[0021] Furthermore, after the step of searching for the page resource of the node corresponding to the component type according to the component type, the step further includes:
[0022] Parse the resource permissions of the page resources.
[0023] Furthermore, the step of parsing the resource permissions of the page resources includes:
[0024] Parsing the logical relationship between the engine components corresponding to each of the nodes by the parsing engine;
[0025] The page resource bound to the engine component is obtained according to the logical relationship.
[0026] In order to solve the above technical problems, the embodiment of the present application further provides a page loading device based on a parsing engine, which adopts the following technical solution:
[0027] Constructing a parsing module, which is used to construct a parsing engine, extracting the data structure required for loading the page through the parsing engine, and parsing the data structure into a DOM tree structure;
[0028] An acquisition module, used to traverse the nodes in the DOM tree structure in sequence starting from the root node of the DOM tree structure, obtain node information of the node, and obtain the component type of the node according to the node information;
[0029] A matching module, used for matching the component type to the engine component in the parsing engine according to a preset correspondence between the component type and the engine component in the parsing engine;
[0030] The rendering module is used to obtain the page resources corresponding to the engine component through the component type, render the engine component according to the page resources, and load the target page.
[0031] In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical solution:
[0032] The computer device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the page loading method based on the parsing engine as described above when executing the computer-readable instructions.
[0033] In order to solve the above technical problems, the embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:
[0034] The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the page loading method based on the parsing engine as described above are implemented.
[0035] Compared with the prior art, the embodiments of the present application have the following beneficial effects:
[0036] The present application constructs a parsing engine, extracts the data structure required for loading the page through the parsing engine, and parses the data structure into a DOM tree structure, starts from the root node of the DOM tree structure, traverses the nodes in the DOM tree structure in sequence, obtains the node information of the node, obtains the component type corresponding to the node according to the node information, matches the component type to the engine component in the parsing engine according to the correspondence between the preset component type and the engine component in the parsing engine, obtains the page resource corresponding to the engine component through the component type, renders the engine component according to the page resource, and loads the target page; the present application extracts the data structure required for page loading through the constructed parsing engine, and parses the data structure through the parsing engine to obtain the page resource of the loaded page, and can directly load the page according to the obtained data structure, avoiding the need to change the implementation logic accordingly when the page and page interaction change, thereby improving development efficiency while improving work efficiency and reducing costs. BRIEF DESCRIPTION OF THE DRAWINGS
[0037] In order to more clearly illustrate the scheme in the present application, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present application. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0038] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;
[0039] Figure 2 A flowchart of an embodiment of a page loading method based on a parsing engine according to the present application;
[0040] Figure 3 yes Figure 2 A flowchart of a specific implementation of step S201;
[0041] Figure 4 is a structural schematic diagram of an embodiment of a page loading device based on a parsing engine according to the present application;
[0042] Figure 5 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION
[0043] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present application; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present application; the terms "including" and "having" and any variations thereof in the specification and claims of the present application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.
[0044] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.
[0045] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.
[0046] In order to solve the problem in the related art that front-end development needs to write components and pages according to the implementation logic of the generated page, resulting in low overall work efficiency and high operating costs for front-end development, this application provides a page loading method based on a parsing engine, which can be applied to Figure 1 In the system architecture 100 shown, the system architecture 100 may include terminal devices 101, 102, 103, a network 104 and a server 105. The network 104 is used to provide a medium for communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.
[0047] Users can use terminal devices 101, 102, 103 to interact with server 105 through network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.
[0048] Terminal devices 101, 102, 103 can be various electronic devices with display screens and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, desktop computers, etc.
[0049] The server 105 may be a server that provides various services, such as a background server that provides support for web pages displayed on the terminal devices 101 , 102 , and 103 .
[0050] It should be noted that the page loading method based on the parsing engine provided in the embodiment of the present application is generally executed by a terminal device, and accordingly, the page loading device based on the parsing engine is generally arranged in the terminal device.
[0051] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.
[0052] Continue to refer Figure 2 , shows a flow chart of an embodiment of a method for page loading based on a parsing engine according to the present application, comprising the following steps:
[0053] Step S201, constructing a parsing engine, extracting the data structure required for loading the page through the parsing engine, and parsing the data structure into a DOM tree structure.
[0054] There are many frameworks for front-end rendering and parsing engines, and their forms and contents are constantly changing. Behind these evolutions are changes in design patterns, which ultimately come down to the evolution of functional division logic: MVC (Model-View-Controller) → MVP (Model-View-Presenter) → MVVM (Model-View-ViewModel). Frameworks such as React, Vue, and Angular that have emerged in recent years all belong to the MVVM model, which can implement complex functions such as interface rendering, event binding, and routing distribution.
[0055] In this embodiment, the role of the parsing engine is to parse the data structure generated by the designer based on the above framework, and it is named BOYA parsing engine. The BOYA parsing engine includes interface rendering engine function, event stream binding and parsing engine function, routing distribution engine function, variable parsing engine function, block permission parsing engine function and internationalization parsing engine function, etc. Data interaction can be carried out between each function.
[0056] In this embodiment, the data structure is the data structure of the entire page, including event streams, component tree node information, and resources, and can be generated by dragging components into a page through a designer.
[0057] The DOM tree structure (Document Object Mode) is a virtual DOM tree structure, and only the BOYA parsing engine can recognize and parse the virtual DOM tree structure.
[0058] In some optional implementations of this embodiment, see Figure 3 As shown, the steps of parsing the data structure into a DOM tree structure specifically include:
[0059] Step S301, parsing the data structure through a parsing engine, and obtaining the hierarchical relationship of each component from the data structure.
[0060] Hierarchical relationships are connections that are established layer by layer based on logical relationships. For example, suppose there is a data structure as follows:
[0061]
[0062] It can be seen that the first layer is layout, the second layer is title, device-width and content, and the third layer is id, type, width, height, background-color and text. When parsing this data structure, the "layout" component is obtained. According to the logical relationship, the lower components of the "layout" component are "title", "device-width" and "content", and the lower components of the "content" component are "id", "type", "width", "height", "background-color" and "text".
[0063] Step S302, determining the parent-child relationship and the sibling relationship between the components according to the hierarchical relationship, and generating a DOM tree structure according to the sibling relationship and the parent-child relationship.
[0064] In this embodiment, the parent-child relationship and the sibling relationship between components are determined according to the hierarchical relationship, and then a virtual DOM tree structure is generated, that is, one component corresponds to one node.
[0065] The DOM tree structure is a standard model used in web pages to represent objects in documents, organizing objects in documents in a tree structure. The nodes in the DOM tree structure have a hierarchical relationship with each other, and terms such as parent, child, and sibling can be used to describe these relationships. Among them, the parent node has child nodes, and child nodes of the same level are called siblings (brothers or sisters). In the node tree, the top node is called the root, and each node has a parent node, except the root (which has no parent node). A node can have any number of child nodes, and siblings are nodes with the same parent node.
[0066] A web page is composed of multiple components, such as text components, image components, horizontal layout components, vertical layout components, video components, etc. These multiple components refer to the DOM standard of the World Wide Web Consortium (W3C) to define the composition method of the page, that is, each component can be regarded as a node to form a tree structure, which is called a DOM tree structure.
[0067] In this embodiment, the data structure is parsed into a DOM tree structure, and the data required for loading the page can be represented according to the logical relationship, which facilitates the acquisition of the page object.
[0068] Step S202 , starting from the root node of the DOM tree structure, traverse the nodes in the DOM tree structure in sequence, obtain node information of the nodes, and obtain the component type of the nodes according to the node information.
[0069] In this embodiment, the DOM tree structure includes multiple nodes, and the node includes node information. One node corresponds to one component, and the node information is component information, including component type uiComponentType, style attributes, component attributes, etc. According to the node information in the DOM tree structure, the component type uiComponentType of the node can be quickly obtained, and uiComponentType is the unique identifier of the component.
[0070] In some optional implementations, the nodes in the DOM tree structure can be traversed in sequence according to preset traversal rules. For example, the traversal can be started based on the root node of the DOM tree structure, and each node in the DOM tree structure can be traversed one by one according to the top-to-bottom rule. The top-to-bottom rule is to traverse all the sibling nodes in the same level layer, and then traverse the sibling nodes in the next level layer. For another example, the traversal can be started based on the root node of the DOM tree structure, and for each node, after traversing the node, the child nodes of the node are traversed next.
[0071] Step S203, matching the component type to the engine component in the parsing engine according to the preset correspondence between the component type and the engine component in the parsing engine.
[0072] In this embodiment, the component type uiComponentType is the unique identifier of the component. After obtaining the uiComponentType, it is matched with the engine component in the parsing engine. The engine components include but are not limited to grid components, table components, button components, panel components, card components, step bar components, input box components, drop-down box components, date selector components, text components, picture components, horizontal layout components, vertical layout components, video components, etc.
[0073] In this embodiment, a correspondence between component types in the data structure and engine components in the parsing engine is preset, and the component types are mapped to engine components in the parsing engine according to the correspondence, thereby matching the component types to the engine components in the parsing engine.
[0074] For example, if the component is a button component, the parsing engine first recognizes that the button component in the data structure is hung on the page, then recognizes that the uiComponentType corresponding to the button component is button, matches the button to the button in the engine component library, and renders the button to the page through the interface rendering engine function of the parsing engine.
[0075] The use of different engine functions in the parsing engine can be determined by the events of the page during the page loading process, and the order of using different engine functions is determined by the event flow. An event is an action performed by the user or the browser itself, such as click, load and mouseover are all names of events; the event flow describes the order in which events are received from the page.
[0076] Step S204, obtaining the page resource corresponding to the engine component through the component type, rendering the engine component according to the page resource, and loading the target page.
[0077] Specifically, the page resources of the node corresponding to the component type are queried according to the component type, and the page resources are transferred to the engine component corresponding to the component type. The engine components are drawn one by one on the display interface through the interface rendering engine function of the parsing engine to generate the target page and realize the loading of the target page.
[0078] Among them, the interface rendering engine function can realize the function of component drawing. In a specific implementation method, the interface rendering engine function can be a JavaScript scripting language framework. JavaScript is a scripting language belonging to the network. It has been widely used in Web application development and is often used to add various dynamic functions to web pages to provide users with a smoother and more beautiful browsing experience.
[0079] Each node in the DOM tree structure stores the page resources corresponding to the component. The page resources include the layout data and content data of each component. The layout data includes the location information and attribute data of the component. The location information is the location information of the component in the current page. The nested relationship between the components can be obtained based on the location information. The attribute data includes style attributes and component attributes. The style attributes are the display style of the data content, including color, size, position, etc. Component attributes include fields, actions, field rules, linkage rules, and component status, etc.
[0080] The component type is the unique identifier of the component. Since the correspondence between the component type in the pre-set data structure and the engine component in the parsing engine is based on the correspondence, the engine component corresponding to the node can be obtained according to the component type, thereby transferring the page resources in the node to the engine component.
[0081] It should be emphasized that in order to further ensure the privacy and security of page resources, the above page resources can also be stored in a blockchain node.
[0082] The blockchain referred to in this application is a new application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanism, encryption algorithm, etc. Blockchain is essentially a decentralized database, a string of data blocks generated by cryptographic methods. Each data block contains a batch of network transaction information, which is used to verify the validity of its information (anti-counterfeiting) and generate the next block. Blockchain can include the underlying blockchain platform, platform product service layer, and application service layer.
[0083] In some optional implementations of this embodiment, the step of querying the page resource of the node corresponding to the component type according to the component type specifically includes:
[0084] According to the component type, the layout data and content data of the node corresponding to the component type are obtained;
[0085] Generate page resources based on content data and layout data.
[0086] Specifically, each node in the DOM tree structure stores the content data and layout data corresponding to the node. According to the component type, the node corresponding to the component type can be queried, the layout data and content data in the node can be obtained, and the page resources are generated based on the content data and layout data. The page resources are transmitted as parameters to the corresponding engine components, and the interface rendering engine function of the parsing engine draws the engine components one by one according to the layout data and content data, thereby rendering the engine components to the page.
[0087] For example, by querying the custom node CustomView component in the DOM tree structure according to the component type, the layout data and content data of the component can be obtained from the CustomView component, and the page resources generated according to the layout data and content data can be transmitted to the CustomView component.
[0088] In this embodiment, the page resources are obtained according to the corresponding relationship between the nodes and the engine components, which can improve the efficiency of obtaining the loading page data.
[0089] In some optional implementations of this embodiment, the step of transmitting the page resource to the engine component corresponding to the component type and rendering it to the page specifically includes:
[0090] Input the page resources into the engine component, and generate page rendering files according to the content data and layout data of the page resources;
[0091] Render the page according to the page rendering file, draw the engine components one by one on the display interface, and obtain the target page.
[0092] The engine component is a component of the web page. After the engine component is displayed, the web page can be displayed. According to the component type, the corresponding node in the DOM tree structure is queried, and the nodes in the DOM tree structure are traversed and parsed to obtain a compilable code file, that is, a page rendering file. The interface rendering engine function of the parsing engine renders the page according to the page rendering file, and draws the engine components one by one on the display interface, and then the target page can be loaded.
[0093] This embodiment transfers the page resources to the engine component corresponding to the node for rendering, and can load the acquired data structure into the page without writing the corresponding implementation logic, thereby further improving the efficiency of page development.
[0094] The present application constructs a parsing engine, extracts the data structure required for loading the page through the parsing engine, and parses the data structure into a DOM tree structure, starts from the root node of the DOM tree structure, traverses the nodes in the DOM tree structure in sequence, obtains the node information of the node, obtains the component type corresponding to the node according to the node information, matches the component type to the engine component in the parsing engine according to the correspondence between the preset component type and the engine component in the parsing engine, obtains the page resource corresponding to the engine component through the component type, renders the engine component according to the page resource, and loads the target page; the present application extracts the data structure required for page loading through the constructed parsing engine, and parses the data structure through the parsing engine to obtain the page resource of the loaded page, and can directly load the page according to the obtained data structure, avoiding the need to change the implementation logic accordingly when the page and page interaction change, thereby improving development efficiency while improving work efficiency and reducing costs.
[0095] In some optional implementations of this embodiment, after the step of querying the page resource of the node corresponding to the component type according to the component type, the following steps may also be performed:
[0096] Parse resource permissions for page resources.
[0097] Specifically, when an account is logged in, the permissions of the page resources that need to be displayed by the roles corresponding to different accounts are parsed through the permission parsing engine function in the parsing engine, and the display or hiding of the engine component corresponding to the node can be controlled. In this embodiment, the display or hiding of the component is defined in the component attributes in the page resource. For example, on the same page, Zhang San can see the query button, but Li Si cannot see the query button.
[0098] It should be noted that if the page is loaded when the account is not logged in, the data structure required for page loading when the account is not logged in is extracted through the parsing engine. At this time, there is no need to perform resource permission analysis.
[0099] In a specific implementation, parsing the resource permissions of page resources also includes processing the binding relationship of page resources. Specifically, when the page is loaded, the event stream parsing engine function of the parsing engine is used to parse the logical relationship between the engine components corresponding to each node in the page, and the page resources bound to the engine components are obtained based on the logical relationship.
[0100] For example, click a button to call the backend interface to query the service list, and the returned data is displayed on the interface through a table. The event stream parsing engine function of the parsing engine first parses the button trigger click, then calls the backend interface through the corresponding service method, assigns the returned data to the table through the event stream engine function of the parsing engine, and synchronously renders it to the page through the rendering engine function of the parsing engine.
[0101] Optionally, it can be determined whether the data returned by the backend is the data structure required for page display. Specifically, the data is parsed into the required data structure through the variable parsing engine function of the parsing engine. For example, if the data returned by the backend is 0 and the front end is displayed as invalid, the variable parsing engine function will convert the data 0 into invalid for display.
[0102] While the page is running, the parsing engine in this embodiment can display different internationalized languages on the page through the internationalization rendering engine function of the parsing engine according to the different languages corresponding to the data returned by the backend.
[0103] Specifically, each web page corresponds to an HTML (Hyper Text Makeup Language) file, and an XML file is written for each national language. The language strings in the HTML file are extracted and associated with the strings in each XML file through indexes. When loading web pages or switching languages, the internationalization rendering engine function of the parsing engine is used to replace the strings in the HTML file through indexes from the XML file of the corresponding national language according to the different languages corresponding to the data returned by the backend, and then different internationalized languages are displayed on the page.
[0104] This application can ensure the security of page resources and the standardization of management by parsing the resource permissions of page resources.
[0105] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.
[0106] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).
[0107] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.
[0108] Further references Figure 4 , as a response to the above Figure 2 The present application provides an embodiment of a page loading device based on a parsing engine, and the device embodiment is similar to Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.
[0109] like Figure 4 As shown, the page loading device 400 based on the parsing engine described in this embodiment includes: a construction module 401, an acquisition module 402, a matching module 403 and a rendering module 404. Among them:
[0110] The parsing module 401 is used to build a parsing engine, extract the data structure required for loading the page through the parsing engine, and parse the data structure into a DOM tree structure;
[0111] The acquisition module 402 is used to traverse the nodes in the DOM tree structure in sequence starting from the root node of the DOM tree structure, obtain the node information of the node, and obtain the component type of the node according to the node information;
[0112] The matching module 403 is used to match the component type to the engine component in the parsing engine according to the preset corresponding relationship between the component type and the engine component in the parsing engine;
[0113] The rendering module 404 is used to obtain the page resources corresponding to the engine component through the component type, render the engine component according to the page resources, and load the target page.
[0114] It should be emphasized that in order to further ensure the privacy and security of page resources, the above page resources can also be stored in a blockchain node.
[0115] The above-mentioned page loading device based on the parsing engine constructs a parsing engine, extracts the data structure required for loading the page through the parsing engine, and parses the data structure into a DOM tree structure, starting from the root node of the DOM tree structure, traverses the nodes in the DOM tree structure in turn, obtains the node information of the node, obtains the component type corresponding to the node according to the node information, matches the component type to the engine component in the parsing engine according to the correspondence between the preset component type and the engine component in the parsing engine, obtains the page resource corresponding to the engine component through the component type, renders the engine component according to the page resource, and loads the target page; the present application extracts the data structure required for page loading through the constructed parsing engine, and parses the data structure through the parsing engine to obtain the page resource of the loaded page, and can directly load the page according to the obtained data structure, avoiding the need to change the implementation logic accordingly when the page and page interaction change, thereby improving development efficiency while improving work efficiency and reducing costs.
[0116] In this embodiment, the construction parsing module 401 is further used for:
[0117] Parsing the data structure through the parsing engine, and obtaining the hierarchical relationship of each component from the data structure;
[0118] The parent-child relationship and the sibling relationship between the components are determined according to the hierarchical relationship, and the DOM tree structure is generated according to the sibling relationship and the parent-child relationship.
[0119] In this embodiment, the data structure is parsed into a DOM tree structure, and the data required for loading the page can be represented according to the logical relationship, which facilitates the acquisition of the page object.
[0120] In this embodiment, the rendering module 404 includes an acquisition module and a rendering module. The acquisition module is used to query the page resources of the node corresponding to the component type according to the component type; the rendering module is used to transfer the page resources to the engine component corresponding to the component type and render them to the page.
[0121] In some optional implementations of this embodiment, the acquisition module is further used for:
[0122] According to the component type, obtaining layout data and content data of a node corresponding to the component type;
[0123] The page resource is generated based on the content data and the layout data.
[0124] In this embodiment, the page resources are obtained according to the corresponding relationship between the nodes and the engine components, which can improve the efficiency of obtaining the loading page data.
[0125] In some optional implementations of this embodiment, the rendering module includes a transmission unit and a rendering unit. The transmission unit is used to input the page resources into the engine component and generate a page rendering file based on the content data and the layout data of the page resources; the rendering unit is used to render the page according to the page rendering file and draw the engine components one by one onto the display interface to obtain the target page.
[0126] This embodiment transfers the page resources to the engine component corresponding to the node for rendering, and can load the acquired data structure into the page without writing the corresponding implementation logic, thereby further improving the efficiency of page development.
[0127] In some optional implementations of this embodiment, the parsing engine-based page loading device 400 further includes a permission module for parsing resource permissions of the page resources.
[0128] In this embodiment, the permission module is further used to:
[0129] Parsing the logical relationship between the engine components corresponding to each of the nodes by the parsing engine;
[0130] The page resource bound to the engine component is obtained according to the logical relationship.
[0131] This application can ensure the security of page resources and the standardization of management by parsing the resource permissions of page resources.
[0132] To solve the above technical problems, the present application also provides a computer device. Figure 5 , Figure 5 This is a basic structural block diagram of the computer device in this embodiment.
[0133] The computer device 5 includes a memory 51, a processor 52, and a network interface 53 that are interconnected through a system bus. It should be noted that the figure only shows a computer device 5 with components 51-53, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASIC), programmable gate arrays (Field-Programmable Gate Array, FPGA), digital processors (Digital Signal Processor, DSP), embedded devices, etc.
[0134] The computer device may be a computing device such as a desktop computer, a notebook, a PDA, a cloud server, etc. The computer device may interact with a user through a keyboard, a mouse, a remote controller, a touch pad, or a voice control device.
[0135] The memory 51 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 51 can be an internal storage unit of the computer device 6, such as a hard disk or memory of the computer device 5. In other embodiments, the memory 51 can also be an external storage device of the computer device 5, such as a plug-in hard disk equipped on the computer device 5, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. Of course, the memory 51 can also include both the internal storage unit of the computer device 5 and its external storage device. In this embodiment, the memory 51 is generally used to store the operating system and various application software installed on the computer device 5, such as computer-readable instructions of a page loading method based on a parsing engine, etc. In addition, the memory 51 can also be used to temporarily store various types of data that have been output or are to be output.
[0136] The processor 52 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 52 is generally used to control the overall operation of the computer device 5. In this embodiment, the processor 52 is used to run computer-readable instructions stored in the memory 51 or process data, such as computer-readable instructions for running the page loading method based on the parsing engine.
[0137] The network interface 53 may include a wireless network interface or a wired network interface. The network interface 53 is generally used to establish a communication connection between the computer device 5 and other electronic devices.
[0138] This embodiment implements the steps of the page loading method based on the parsing engine in the above embodiment when the processor executes computer-readable instructions stored in the memory. The data structure required for page loading is extracted through the constructed parsing engine, and the data structure is parsed by the parsing engine to obtain the page resource of the loaded page. The page can be loaded directly according to the obtained data structure, avoiding the need to change the implementation logic accordingly when the page and page interaction change, thereby improving development efficiency while improving work efficiency and reducing costs.
[0139] The present application also provides another implementation mode, namely, providing a computer-readable storage medium, wherein the computer-readable storage medium stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor so that the at least one processor executes the steps of the page loading method based on the parsing engine as described above, extracts the data structure required for page loading through the constructed parsing engine, and parses the data structure through the parsing engine to obtain the page resource of the loaded page, and can directly load the page according to the obtained data structure, avoiding the need to change the implementation logic accordingly when the page and page interaction change, thereby improving development efficiency while improving work efficiency and reducing costs.
[0140] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.
[0141] Obviously, the embodiments described above are only some embodiments of the present application, rather than all embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application is described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific implementation methods, or to perform equivalent replacement of some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of this application, directly or indirectly used in other related technical fields, is similarly within the scope of patent protection of this application.
Claims
1. A page loading method based on a parsing engine, characterized in that: The steps include: Construct a parsing engine, extract the data structure required for loading the page through the parsing engine, and parse the data structure into a DOM tree structure; wherein the parsing engine includes an interface rendering engine function, an event stream binding and parsing engine function, a routing distribution engine function, a variable parsing engine function, a block authority parsing engine function, and an internationalization parsing engine function; the data structure includes an event stream, component tree node information, and resources, and the event stream describes the order in which events are received from the page; Starting from the root node of the DOM tree structure, traversing the nodes in the DOM tree structure in sequence, obtaining node information of the nodes, and obtaining the component type of the nodes according to the node information; According to a preset correspondence between the component type and the engine component in the parsing engine, matching the component type to the engine component in the parsing engine; Obtaining the page resource corresponding to the engine component through the component type, rendering the engine component according to the page resource, and loading the target page; The steps of acquiring the page resource corresponding to the engine component through the component type, rendering the engine component according to the page resource, and loading the target page include: Querying, according to the component type, a page resource of the node corresponding to the component type; Transferring the page resource to the engine component corresponding to the component type, and rendering it to the page; The step of querying the page resource of the node corresponding to the component type according to the component type includes: According to the component type, obtaining layout data and content data of a node corresponding to the component type; The page resource is generated based on the content data and the layout data.
2. The page loading method based on the parsing engine according to claim 1, characterized in that: The step of parsing the data structure into a DOM tree structure comprises: Parsing the data structure through the parsing engine, and obtaining the hierarchical relationship of each component from the data structure; The parent-child relationship and the sibling relationship between the components are determined according to the hierarchical relationship, and the DOM tree structure is generated according to the sibling relationship and the parent-child relationship.
3. The page loading method based on the parsing engine according to claim 1, characterized in that: The step of transmitting the page resource to the engine component corresponding to the component type and rendering it to the page includes: Input the page resource into the engine component, and generate a page rendering file according to the content data and the layout data of the page resource; The page rendering is performed according to the page rendering file, and the engine components are drawn one by one on the display interface to obtain the target page.
4. The page loading method based on the parsing engine according to claim 1, characterized in that: After the step of querying the page resource of the node corresponding to the component type according to the component type, the method further includes: Parse the resource permissions of the page resources.
5. The page loading method based on the parsing engine according to claim 4 is characterized in that: The step of parsing the resource permissions of the page resources includes: Parsing the logical relationship between the engine components corresponding to each of the nodes by the parsing engine; The page resource bound to the engine component is obtained according to the logical relationship.
6. A page loading device based on a parsing engine, characterized in that: include: Construct a parsing module, which is used to construct a parsing engine, extract the data structure required for loading the page through the parsing engine, and parse the data structure into a DOM tree structure; wherein the parsing engine includes an interface rendering engine function, an event stream binding and parsing engine function, a routing distribution engine function, a variable parsing engine function, a block authority parsing engine function, and an internationalization parsing engine function; the data structure includes an event stream, component tree node information, and resources, and the event stream describes the order in which events are received from the page; An acquisition module, used to traverse the nodes in the DOM tree structure in sequence starting from the root node of the DOM tree structure, obtain node information of the node, and obtain the component type of the node according to the node information; A matching module, used for matching the component type to the engine component in the parsing engine according to a preset correspondence between the component type and the engine component in the parsing engine; A rendering module, used to obtain the page resources corresponding to the engine component through the component type, render the engine component according to the page resources, and load the target page; The rendering module includes an acquisition module and a rendering module: The acquisition module is used to query the page resource of the node corresponding to the component type according to the component type; The rendering module is used to transfer the page resource to the engine component corresponding to the component type and render it to the page; Wherein, the acquisition module is further used for: According to the component type, obtaining layout data and content data of a node corresponding to the component type; The page resource is generated based on the content data and the layout data.
7. A computer device, comprising a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the page loading method based on the parsing engine as described in any one of claims 1 to 5 are implemented.
8. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the page loading method based on the parsing engine as described in any one of claims 1 to 5 are implemented.