A method and device for implementing a web front-end application page data synchronization loading mechanism

Abstract

The present invention discloses a method and device for implementing a data synchronization loading mechanism for a web front-end application page, which solves the technical problems in the prior art that browsers that do not support the ES7 standard cannot directly use the ES7 await / async synchronization loading mechanism; the reliability of the method of adjusting the loading order and setting a delay wait is poor; and the synchronization loading mechanism introduced by some componentized frameworks is complex to implement and has poor portability. The method includes a DOM node analysis module, a data loading module, a DOM node resource mapping table data structure, and a DOM node hierarchy tree storage data structure. The DOM node analysis module is used to obtain the DOM node hierarchy structure of the HTML page and form a corresponding DOM node hierarchy tree. The data loading module provides a callback mechanism to recursively call all secondary DOM nodes of the specified root node to complete the loading of node resources. The present invention can be supported by all browsers, does not require special adjustment of the resource loading order, does not require setting a delay wait, is independent of the computer configuration, has reliable operation effect, and has good portability.

Description

Technical Field

[0001] The present invention specifically relates to a method and device for implementing a web front-end application page data synchronization loading mechanism, and belongs to the field of Internet technology. Background Art

[0002] Web applications are implemented by three types of resource codes: HTML, CSS, and JavaScript. When a web application starts running, it will first load the HTML code, and then load the CSS and script reference tags according to the DOM style identifiers in the HTML code to load the JavaScript code. During the HTML loading process, the corresponding JavaScript code will be loaded and executed according to the definitions of tag events and their response functions in the HTML code to meet the specific business requirements of the web application.

[0003] The aforementioned HTML page loading process and JavaScript code execution both take time. For larger web applications, given the numerous DOM nodes defined in the HTML and the corresponding numerous response functions, the JavaScript code within these response functions inevitably references each other. If the DOM node referenced by the JavaScript code in the previous function or another JavaScript code has not yet finished loading, a resource-not-found error will occur, causing the entire web application to fail. This situation has become more common with the recent rise in popularity of componentized frameworks. These frameworks split HTML and CSS into multiple files, organized into sub-pages / components, and load them sequentially within the framework's master control file. However, the master control file sequentially calls the initialization entry points of each sub-page / component. Due to the nature of browser script execution, after calling one initialization function in the master control file, the next one will not be executed until it completes. This often results in resource-not-found errors for sub-pages / components that require more initialization, which takes longer to load.

[0004] To address this problem, both traditional native web development and component framework approaches generally adopt methods such as adjusting the loading order of various resources, especially JavaScript, or adding delay code in the loading code to wait for time-consuming resources to load before continuing to load other resources. However, considering that machines with different computing powers take different amounts of time to load resources, this method is not completely effective.

[0005] If you want to solve this problem perfectly, you must introduce a synchronous loading mechanism in web application development. That is, when the previous resource is loading, you must block the running process of other scripts and wait for this resource to complete all loading work before starting the loading and running process of the next resource.

[0006] There is no synchronous loading mechanism in native web development. To fully solve this problem, browsers must fully support the ES7 standard. The ES7 standard defines the await / async mechanism, but browsers that do not support this standard cannot directly use this function. Some componentized frameworks have introduced some synchronous loading mechanisms in the latest versions. Most of these mechanisms are syntactic sugar implementations of ES7 await / async or private implementations based on their own framework processes, which are difficult to be reused by other systems.

[0007] The applicant has discovered that the prior art has at least the following technical problems:

[0008] 1. In the existing technology, the synchronous loading mechanism defined by ES7 await / async cannot be directly used for browsers that do not support the ES7 standard;

[0009] 2. In existing technologies, the traditional approach of adjusting the loading order and artificially increasing the loading time of some components cannot run reliably and effectively due to the different configurations of the computers running the web application;

[0010] 3. In the existing technology, the synchronous loading mechanism introduced by some componentized frameworks is complex to implement and its application depends on the framework itself. It cannot be introduced and used in other frameworks or native methods. Summary of the Invention

[0011] The purpose of the present invention is to provide a method and device for implementing a synchronous loading mechanism for web front-end application page data, so as to solve the technical problems that the existing technology cannot directly use the synchronous loading mechanism defined by ES7 await / async for browsers that do not support the ES7 standard; the traditional method of adjusting the loading order and artificially increasing the loading time of some components cannot run reliably and effectively due to the different configurations of the computers running the web application; the synchronous loading mechanism introduced by some componentized frameworks is complex to implement, depends on the framework itself for application, and cannot be introduced and used in other frameworks or native methods.

[0012] To achieve the above objectives, the present invention provides the following technical solutions:

[0013] The present invention provides a device for realizing a synchronous loading mechanism of web front-end application page data, comprising a DOM node analysis module and a data loading module.

[0014] The operation of the DOM node analysis module in the front-end application includes: analyzing the DOM node hierarchical relationship of the HTML page of the front-end application, and saving the DOM node hierarchical relationship of the HTML page of the front-end application as a DOM node hierarchical tree reflecting the DOM node hierarchical relationship;

[0015] The operation of the data loading module in the front-end application includes: completing the resource loading of the DOM node according to the DOM node hierarchy tree and the DOM node resource mapping table.

[0016] Furthermore, the data loading module obtains the DOM node hierarchy tree reflecting the hierarchical relationship of DOM nodes saved by the DOM node analysis module, and according to the hierarchical relationship of DOM nodes of the HTML page of the front-end application analyzed by the DOM node analysis module, traverses the secondary DOM nodes of the specified root node starting from the specified root node and recursively calls the data loading module with the secondary DOM node as the root node to complete the traversal of all DOM nodes, and completes the resource loading of each DOM node when traversing to the DOM node.

[0017] Furthermore, the operation of the data loading module in the front-end application also includes:

[0018] Load the HTML resources and CSS resources corresponding to the DOM node according to the DOM node resource mapping table;

[0019] A callback interface is provided to the caller of the data loading module to add the code of the initialization resource of the DOM node according to actual needs.

[0020] Furthermore, the operation of the DOM node analysis module in the front-end application also includes:

[0021] Providing a callback interface to the caller of the DOM node analysis module, so that the caller can obtain the saved DOM node hierarchy tree reflecting the hierarchical relationship of DOM nodes;

[0022] Providing a calling interface to a caller using the DOM node analysis module, whereby the caller can obtain, through the DOM node ID, a subtree of all child nodes of the DOM node in the stored DOM node hierarchy tree reflecting the hierarchical relationship of the DOM nodes;

[0023] A calling interface is provided to the caller who uses the DOM node analysis module, and the caller can re-analyze the HTML page and refresh the DOM node hierarchy tree.

[0024] Furthermore, it also includes a DOM node resource mapping table data structure and a DOM node hierarchy tree storage data structure.

[0025] The operation of the DOM node resource mapping table data structure in the front-end application includes: saving the resource mapping table structure related to the DOM node indexed by the DOM node ID, and providing the mapping table structure indexed by the DOM node ID to the data loading module to complete the initialization loading; the resource mapping table structure related to the DOM node saves the HTML data location, CSS data location, and DOM node initialization JavaScript code callback function corresponding to the DOM node;

[0026] The operation of the DOM node hierarchy tree storage data structure in the front-end application includes: storing the DOM node hierarchy tree reflecting the hierarchical relationship of the DOM nodes saved by the DOM node analysis module.

[0027] Furthermore, the operation of the data loading module on the DOM node includes:

[0028] Loading the HTML and CSS resource codes of the DOM node: obtaining the information of the HTML and CSS resources from the DOM node resource mapping table data structure and loading the HTML and CSS resource codes of the DOM node;

[0029] Execute the initialization function of the DOM node: obtain the initialization callback function of the DOM node from the DOM node resource mapping table data structure, and execute the initialization callback function to complete the initialization loading of the DOM node;

[0030] Recursive DOM node hierarchy tree calls all DOM nodes: traverse all child nodes of the specified root node according to the DOM node hierarchy tree and recursively perform loading operations.

[0031] Furthermore, the DOM node analysis module, data loading module, DOM node resource mapping table data structure, and DOM node hierarchical tree storage data structure are provided to users in the form of JavaScript libraries or independent functions.

[0032] The present invention also provides a method for implementing a web front-end application page data synchronization loading mechanism, which is based on the above-mentioned web front-end application page data synchronization loading mechanism implementation device, and the steps of the method include:

[0033] S1, generate a DOM node hierarchy tree;

[0034] S2, selecting a starting root node, and calling the data loading module to start recursive loading of the page before the starting root node is loaded.

[0035] Furthermore, the sub-steps of step S1 include:

[0036] S11, calling the DOM node analysis module before loading the HTML page;

[0037] S12, the DOM node analysis module obtains the HTML page to be analyzed and statically analyzes the hierarchical relationship of DOM nodes in the HTML page;

[0038] S13, the DOM node analysis module saves the DOM node hierarchical relationship of the HTML page as a DOM node hierarchy tree reflecting the DOM node hierarchy relationship, and stores the DOM node hierarchy tree in the DOM node hierarchy tree storage data structure.

[0039] Furthermore, the sub-steps of step S2 include:

[0040] S21, loading the HTML and CSS resource codes of the DOM node: obtaining the information of the HTML and CSS resources of the DOM node from the DOM node resource mapping table data structure and loading the HTML and CSS resource codes of the DOM node;

[0041] S22, executing the initialization function of the DOM node: obtaining the initialization callback function of the DOM node from the DOM node resource mapping table data structure, and executing the initialization callback function to complete the initialization loading of the DOM node;

[0042] S23, recursively calling all DOM nodes in the DOM node hierarchy tree: traversing all child nodes of the starting root node according to the DOM node hierarchy tree and recursively performing a loading operation.

[0043] Furthermore, the data loading module obtains the DOM node hierarchy tree from the DOM node hierarchy tree storage data structure.

[0044] Based on the above technical solution, the embodiments of the present invention can produce at least the following technical effects:

[0045] (1) The present invention provides a method and device for implementing a synchronous loading mechanism for web front-end application page data, which does not rely on the await / async mechanism in the ES7 standard and can be supported by all browsers.

[0046] (2) The present invention provides a method and device for implementing a synchronous loading mechanism for web front-end application page data. It does not require special adjustment of the loading order of resources, nor does it require setting a delay wait. It is independent of the specific computer configuration of the operation and has a reliable operation effect.

[0047] (3) The present invention provides a method and device for implementing a web front-end application page data synchronization loading mechanism, which has good portability, does not require any dependent libraries, and can be directly ported to native or componentized code implementations. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 It is a structural diagram of an embodiment of the present invention;

[0049] Figure 2 It is a schematic diagram of a method flow of a preferred embodiment of the present invention. DETAILED DESCRIPTION

[0050] To further illustrate the purpose, technical features and advantages of the present invention, we will provide a clear and complete description of the technical solution of the present invention in conjunction with the accompanying drawings. Obviously, the embodiments described in this section are only part of the embodiments of the present invention, not all of them.

[0051] As attached Figure 1 As shown, the present invention provides a device for implementing a web front-end application page data synchronous loading mechanism, including a DOM node analysis module and a data loading module.

[0052] The operation of the DOM node analysis module in the front-end application includes: analyzing the DOM node hierarchical relationship of the HTML page of the front-end application, and saving the DOM node hierarchical relationship of the HTML page of the front-end application as a DOM node hierarchical tree reflecting the DOM node hierarchical relationship;

[0053] The operation of the data loading module in the front-end application includes: completing the resource loading of the DOM node according to the DOM node hierarchy tree and the DOM node resource mapping table.

[0054] In a preferred embodiment of the present invention, the data loading module obtains the DOM node hierarchy tree reflecting the hierarchical relationship of DOM nodes saved by the DOM node analysis module, and traverses the secondary DOM nodes of the specified root node starting from the specified root node according to the DOM node hierarchy of the HTML page of the front-end application analyzed by the DOM node analysis module, and recursively calls the data loading module with the secondary DOM node as the root node to complete the traversal of all DOM nodes, and completes the resource loading of each DOM node when traversing to the DOM node.

[0055] In a preferred embodiment of the present invention, the operation of the data loading module in the front-end application further includes:

[0056] Load the HTML and CSS resources corresponding to the specified root DOM node;

[0057] A callback interface is provided to the caller of the data loading module to add the code of the initialization resource of the DOM node according to actual needs.

[0058] In a preferred embodiment of the present invention, the operation of the DOM node analysis module in the front-end application further includes:

[0059] Providing a callback interface to the caller of the DOM node analysis module, so that the caller can obtain the saved DOM node hierarchy tree reflecting the hierarchical relationship of DOM nodes;

[0060] Providing a calling interface to a caller using the DOM node analysis module, whereby the caller can obtain, through the DOM node ID, a subtree of all child nodes of the DOM node in the stored DOM node hierarchy tree reflecting the hierarchical relationship of the DOM nodes;

[0061] A calling interface is provided to the caller who uses the DOM node analysis module, and the caller can re-analyze the HTML page and refresh the DOM node hierarchy tree.

[0062] In a preferred embodiment of the present invention, a DOM node resource mapping table data structure and a DOM node hierarchical tree storage data structure are also included.

[0063] The operations of the DOM node resource mapping table data structure in the front-end application include: saving the resource mapping table structure related to the DOM node indexed by the DOM node ID, providing the mapping table structure indexed by the DOM node ID to the data loading module to complete the initialization loading; saving the HTML data position, CSS data position, and DOM node initialization JavaScript code callback function corresponding to the DOM node;

[0064] The operation of the DOM node hierarchy tree storage data structure in the front-end application includes: storing the DOM node hierarchy tree reflecting the hierarchical relationship of the DOM nodes saved by the DOM node analysis module.

[0065] In a preferred embodiment of the present invention, the operation of the data loading module on the DOM node includes:

[0066] Loading the HTML and CSS resource codes of the DOM node: obtaining the information of the HTML and CSS resources from the DOM node resource mapping table data structure and loading the HTML and CSS resource codes of the DOM node;

[0067] Execute the initialization function of the DOM node: obtain the initialization callback function of the DOM node from the DOM node resource mapping table data structure, and execute the initialization callback function to complete the initialization loading of the DOM node;

[0068] Recursive DOM node hierarchy tree calls all DOM nodes: traverse all child nodes of the specified root node according to the DOM node hierarchy tree and recursively perform loading operations.

[0069] In a preferred embodiment of the present invention, the DOM node analysis module, data loading module, DOM node resource mapping table data structure, and DOM node hierarchical tree storage data structure are provided to users in the form of JavaScript libraries or independent functions.

[0070] The principle behind the preferred embodiment of the present invention is that a DOM node analysis module obtains the DOM node hierarchy of the entire HTML page and forms a corresponding DOM node hierarchy tree. The data loading module provides a callback mechanism to recursively call each sub-DOM node of a specified root node to complete the loading of all node resources. Because recursion occurs during the callback process, the previous DOM node is not returned until the next DOM node is loaded and executed. This prevents the execution of the processing code of the previous node from proceeding downward, thereby achieving the goal of loading all node resources synchronously and sequentially.

[0071] As attached Figure 2 As shown, the present invention also provides a method for implementing a web front-end application page data synchronization loading mechanism. In a preferred embodiment of the present invention, a JavaScript class is used to implement the DOM node analysis module, data loading module, DOM node resource mapping table data structure, and DOM node hierarchical tree storage data structure for use by the caller.

[0072] The sample code is as follows:

[0073] class CLoader{

[0074] constructor(){

[0075] this.nodesTree = {}; / / DOM node hierarchy tree

[0076] this.nodeSrcMap = {}; / / DOM node resource mapping table data structure

[0077] }

[0078] static parseNodeObjTreeByHtml(srcHtml, cbFunc);

[0079] static loadAllViews(rootNode);

[0080] }

[0081] The implementation steps are as follows:

[0082] S1: Generate a DOM node hierarchy tree. The S1 sub-steps are as follows:

[0083] S11, before loading the HTML page, call the DOM node analysis module: parseNodeObjByHtml(srcHtml, cbFunc) to obtain the DOM node hierarchy tree, such as the tag used in the HTML page. <script>标签加载并运行CLoader.parseNodeObjByHtml (srcHtml, cbFunc)；

[0084] S12，所述DOM节点分析模块按照参数srcHtml指示的位置获取HTML页面并静态分析HTML页面中的DOM节点层次关系；

[0085] S13，所述DOM节点分析模块将HTML页面的DOM节点层次关系保存为反映DOM节点层次关系的DOM节点层次树，将所述DOM节点层次树存储于所述DOM节点层次树存储数据结构CLoader.nodesTree中。

[0086] S2：选择开始的根节点，在所述开始的根节点加载之前调用所述数据加载模块启动页面递归加载。

[0087] 使用数据加载模块需要先选择开始操作的根节点，也就是用户可以选择任意一个节点来开始同步加载，这样的设计给了用户最大的灵活性。

[0088] 比如选择整个HTML的根节点<body>开始做同步加载，那么可以在<head>标签中引入CLoader并调用CLoader.loadAllViews(BodyDomID)。

[0089] S2步骤作为一个递归迭代整体，其中每一个迭代步骤，即每一个DOM节点的操作还分为以下三个子步骤：

[0090] S21，加载DOM节点的HTML、CSS资源代码：从所述DOM节点资源映射表数据结构中获得HTML、CSS资源的信息并加载DOM节点的HTML、CSS资源代码；

[0091] S22，执行DOM节点的初始化函数：从所述DOM节点资源映射表数据结构中获取DOM节点的初始化回调函数，执行所述初始化回调函数完成DOM节点的初始化加载；

[0092] S23，递归DOM节点层次树调用所有DOM节点：按照DOM节点层次树遍历所述开始的根节点的所有子节点并递归执行加载操作。

[0093] S2步骤实现样例代码如下：

[0094] / / 数据加载模块

[0095] static loadAllViews(rootNode) {

[0096] function traverseNode(node) {

[0097] / / 1.加载本DOM节点的HTML、CSS资源代码

[0098] loadHtmCss(node);

[0099] / / 2.从DOM节点资源映射表数据结构获取本DOM初始化函数并执行

[0100] var _cbIniFunc = getSrcFrmMap(node, 'cbIniFunc');

[0101] if (typeof _cbIniFunc == 'function') {

[0102] _cbIniFunc(node);

[0103] }

[0104] / / 3.递归DOM节点层次树调用所有DOM节点

[0105] var _objTree = getNodeObjByObjTree(node);

[0106] if (_objTree.childNode && _objTree.childNode.length > 0) {

[0107] for (let i = 0; i < _objTree.childView.length; i++) {

[0108] traverseNode(_objTree.childView[i]);

[0109] }

[0110] }

[0111] }

[0112] traverseNode(rootNode);

[0113] }

[0114] 本发明的技术方案不限于上述具体实施例的限制，凡是根据本发明的技术方案做出的技术变形，均落入本发明的保护范围之内。< / script>

Claims

1. A device for implementing a synchronous loading mechanism for web front-end application page data, characterized in that: Including DOM node analysis module, data loading module, The operation of the DOM node analysis module in the front-end application includes: analyzing the DOM node hierarchical relationship of the HTML page of the front-end application, and saving the DOM node hierarchical relationship of the HTML page of the front-end application as a DOM node hierarchical tree reflecting the DOM node hierarchical relationship; The operation of the data loading module in the front-end application includes: recursively calling the data loading module to complete resource loading of the DOM node; It also includes DOM node resource mapping table data structure, DOM node hierarchy tree storage data structure, The operations of the DOM node resource mapping table data structure in the front-end application include: saving the resource mapping table structure related to the DOM node indexed by the DOM node ID, providing the mapping table structure indexed by the DOM node ID to the data loading module to complete the initialization loading; saving the HTML data position, CSS data position, and DOM node initialization JavaScript code callback function corresponding to the DOM node; The operation of the DOM node hierarchy tree storage data structure in the front-end application includes: storing the DOM node hierarchy tree reflecting the hierarchical relationship of the DOM nodes saved by the DOM node analysis module; The operation of the data loading module on the DOM node includes the following sub-steps: Loading HTML and CSS resource codes of the DOM node: obtaining HTML and CSS resource information from the DOM node resource mapping table data structure and loading the HTML and CSS resource codes of the DOM node; Execute the initialization function of the DOM node: obtain the initialization callback function of the DOM node from the DOM node resource mapping table data structure, and execute the initialization callback function to complete the initialization loading of the DOM node; Recursive DOM node hierarchy tree calls all DOM nodes: traverse all child nodes starting from the specified root node according to the DOM node hierarchy tree and recursively perform the loading operation.

2. A device for implementing a web front-end application page data synchronous loading mechanism according to claim 1, characterized in that: The data loading module obtains the DOM node hierarchy tree reflecting the hierarchical relationship of DOM nodes saved by the DOM node analysis module, and traverses the secondary DOM nodes of the specified root node starting from the specified root node according to the DOM node hierarchy relationship of the HTML page of the front-end application analyzed by the DOM node analysis module, and recursively calls the data loading module with the secondary DOM node as the root node to complete the traversal of all DOM nodes, and completes the resource loading of the DOM node when traversing to each DOM node.

3. A device for implementing a web front-end application page data synchronous loading mechanism according to claim 1, characterized in that: The operations of the data loading module in the front-end application also include: Load the HTML and CSS resources corresponding to the specified root DOM node; A callback interface is provided to the caller of the data loading module to add the code of the initialization resource of the DOM node according to actual needs.

4. A device for implementing a web front-end application page data synchronous loading mechanism according to claim 1, characterized in that: The operations of the DOM node analysis module in the front-end application also include: Providing a callback interface to the caller of the DOM node analysis module, so that the caller can obtain the saved DOM node hierarchy tree reflecting the hierarchical relationship of DOM nodes; Providing a calling interface to a caller using the DOM node analysis module, whereby the caller can obtain, through the DOM node ID, a subtree of all child nodes of the DOM node in the stored DOM node hierarchy tree reflecting the hierarchical relationship of the DOM nodes; A calling interface is provided to the caller who uses the DOM node analysis module, and the caller can re-analyze the HTML page and refresh the DOM node hierarchy tree.

5. A method for implementing a web front-end application page data synchronization loading mechanism, based on a web front-end application page data synchronization loading mechanism implementation device according to any one of claims 1 to 4, characterized in that: The steps of the method include: S1, generate a DOM node hierarchy tree; S2, selecting a starting root node, and calling the data loading module to start recursive loading of the page before the starting root node is loaded.

6. A method for implementing a web front-end application page data synchronization loading mechanism according to claim 5, characterized in that: The sub-steps of step S1 include: S11, calling the DOM node analysis module before loading the HTML page; S12, the DOM node analysis module obtains the HTML page and statically analyzes the hierarchical relationship of the DOM nodes in the HTML page; S13, the DOM node analysis module saves the DOM node hierarchical relationship of the HTML page as a DOM node hierarchy tree reflecting the DOM node hierarchy relationship, and stores the DOM node hierarchy tree in the DOM node hierarchy tree storage data structure.

7. A method for implementing a web front-end application page data synchronous loading mechanism according to claim 5, characterized in that: The sub-steps of step S2 include: S21, loading the HTML and CSS resource codes of the DOM node: obtaining the information of the HTML and CSS resources from the DOM node resource mapping table data structure and loading the HTML and CSS resource codes of the DOM node; S22, executing the initialization function of the DOM node: obtaining the initialization callback function of the DOM node from the DOM node resource mapping table data structure, and executing the initialization callback function to complete the initialization loading of the DOM node; S23, recursively calling all DOM nodes in the DOM node hierarchy tree: traversing all child nodes of the starting root node according to the DOM node hierarchy tree and recursively performing a loading operation.

8. A method for implementing a web front-end application page data synchronous loading mechanism according to claim 6, characterized in that: The data loading module obtains the DOM node hierarchy tree from the DOM node hierarchy tree storage data structure.

Images