Web page design method, device, computer equipment, storage medium and product
By generating the virtual document object model and responding to layout change information, only the candidate page module is updated, which solves the problem of computing resource consumption during web page updates, and achieves more efficient and stable page updates.
Patent Information
- Application Number
- CN202111682427.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-12-30
- Publication Date
- 2025-04-25
- Estimated Expiration
- 2041-12-30
AI Technical Summary
The prior art requires traversing the entire DOM tree when updating web pages, resulting in high consumption of computing resources and jittering of pages, and frequent flashing of screens.
By generating a virtual document object model, obtaining layout change information in response to user operations, only the virtual document object node of the candidate page module is updated, and the number of real DOM tree operations is reduced.
Improve page update efficiency, reduce computing resource consumption, and the page is more stable, avoiding jitter and flash screen.
Smart Images
Figure CN114327395B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of the Internet, and in particular to a web page design method, apparatus, computer equipment, computer-readable storage medium, and computer program product. Background Art
[0002] When the browser renders a web page, it builds a DOM (Document Object Model) tree based on the loaded HTML document, then loads the CSS file to get the style sheet of the page, associates the DOM tree with the style sheet to get a DOM tree with style attributes. The browser then starts layout and calculates the precise coordinate values for each DOM node on the DOM tree. Finally, it performs visual rendering to form the final web page.
[0003] Among them, when the DOM node needs to be updated, the browser will execute the process from beginning to end starting from building the DOM tree.
[0004] However, in actual applications, for example, in an update operation, 10 DOM nodes need to be updated, and the browser needs to execute the above process 10 times from beginning to end, consuming a large amount of computing resources. Summary of the invention
[0005] Based on this, it is necessary to provide a web page design method, device, computer equipment, computer-readable storage medium and computer program product that can save computing resources and improve page update efficiency in response to the above technical problems.
[0006] In a first aspect, the present application provides a webpage design method, the method comprising:
[0007] After receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0008] In response to the operation, obtaining layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation;
[0009] Determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0010] In one embodiment, generating a virtual document object model corresponding to the target webpage according to the source code of the target webpage includes:
[0011] Parse the source code to build a real document object model, where the real document object model includes multiple document object nodes;
[0012] Traverse the real document object model, create a JS object for each document object node scanned, and record the attribute information of the document object node;
[0013] Generate a virtual document object model based on the JS object corresponding to each document object node.
[0014] In one embodiment, generating a virtual document object model according to the JS object corresponding to each document object node includes:
[0015] Get the JS objects corresponding to multiple page elements in the target web page;
[0016] For each page module, the JS object corresponding to the page module is obtained according to the JS objects corresponding to the multiple page elements constituting the page module;
[0017] Generate a virtual document object model based on the JS objects corresponding to each page module.
[0018] In one embodiment, the method further comprises:
[0019] Build a module pool based on each page module;
[0020] Key attributes and layout objects are configured for each page module in the module pool. The key attributes of the page module include at least one of the module identifier, module attributes and module style class. The module attributes include the size and coordinates of the page module. The layout object represents the area of the page module in the target web page.
[0021] In one embodiment, obtaining layout change information corresponding to at least one target page module in response to an operation includes:
[0022] Determine a module identifier of at least one target page module according to the operation;
[0023] A layout object before the operation of at least one target page module and a layout object after the operation of at least one target page module are acquired from the module pool according to the module identifier.
[0024] In one embodiment, configuring a layout object for each page module in the module pool includes:
[0025] Divide the target web page into multiple areas, each area is a layout object;
[0026] The layout object corresponding to each page module is determined according to the coordinate position of each page module.
[0027] In one embodiment, determining the candidate page module that needs to be updated according to the layout change information includes:
[0028] The candidate page module is determined according to the page module corresponding to the layout object before the operation of at least one target page module and the page module corresponding to the layout object after the operation of at least one target page module.
[0029] In a second aspect, the present application further provides a webpage design device, the device comprising:
[0030] A virtual document object model generation module is used to generate a virtual document object model corresponding to the target webpage according to the source code of the target webpage after receiving the user's operation on the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0031] A response module, configured to obtain layout change information corresponding to at least one target page module in response to an operation, wherein the layout change information includes a layout object of the target page module before the operation and a layout object of the target page module after the operation;
[0032] The rendering module is used to determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; and render the target web page based on the updated virtual document object model.
[0033] In a third aspect, the present application further provides a computer device, the computer device comprising a memory and a processor, the memory storing a computer program, and the processor implementing the following steps when executing the computer program:
[0034] After receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0035] In response to the operation, obtaining layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation;
[0036] Determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0037] In a fourth aspect, the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the following steps are implemented:
[0038] After receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0039] In response to the operation, obtaining layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation;
[0040] Determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0041] In a fifth aspect, the present application further provides a computer program product, the computer program product comprising a computer program, which implements the following steps when executed by a processor:
[0042] After receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0043] In response to the operation, obtaining layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation;
[0044] Determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0045] The web page design method, device, computer equipment, computer-readable storage medium and computer program product described above, after receiving the user's operation on the target web page, generates a virtual document object model corresponding to the target web page according to the source code of the target web page, the virtual document object model includes virtual document object nodes corresponding to each page module in the target web page; obtains layout change information corresponding to at least one target page module in response to the above operation, the layout change information includes the layout object of the target page module before the operation and the layout object after the operation; determines the candidate page module that needs to be updated according to the layout change information, and updates the virtual document object node corresponding to the candidate page module to obtain the updated virtual document object model; renders the target web page based on the updated virtual document object model. In an embodiment of the present application, the page elements are constructed as page modules, and a layout object is configured for each page module, the layout change information is obtained in response to the user's operation, and then the virtual document object node corresponding to the candidate page module is updated based on the layout change information. In this way, the target web page is rendered at one time based on the layout change information corresponding to multiple target page modules, avoiding a large amount of useless calculations and saving computing resources. BRIEF DESCRIPTION OF THE DRAWINGS
[0046] Figure 1 A diagram of an application environment of a webpage design method in one embodiment;
[0047] Figure 2 A schematic diagram of a flow chart of a webpage design method in one embodiment;
[0048] Figure 3 A schematic diagram showing the layout of at least one target page module before dragging;
[0049] Figure 4 A schematic diagram of dragging at least one target page module is shown;
[0050] Figure 5 A schematic diagram showing the layout of at least one target page module after dragging;
[0051] Figure 6 A schematic diagram of a flow chart of a method for generating a virtual document object model corresponding to a target web page according to a source code of the target web page in one embodiment;
[0052] Figure 7 A schematic diagram of a simple DOM tree is shown;
[0053] Figure 8 A schematic diagram of a flow chart of a webpage design method in another embodiment;
[0054] Fig. 9 A schematic diagram showing a method of constructing a layout object;
[0055] Fig.10 is a structural block diagram of a webpage design device in one embodiment;
[0056] Fig.11 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION
[0057] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.
[0058] With the development of society, users have an increasingly strong demand for personalized software settings. Therefore, when designing a web page, it may be necessary to modify or update the color, position, shape, etc. of the elements in the web page multiple times. In the existing custom layout technology, when the browser renders the web page, the browser will build a DOM tree based on the loaded HTML document, and then obtain the style sheet of the page by loading the CSS file, and associate the DOM tree with the style sheet to obtain a DOM tree with style attributes. Then the browser starts the layout and calculates the precise coordinate value for each DOM node on the DOM tree. Finally, visual rendering is performed to form the final web page.
[0059] When a web page is updated, the existing custom layout method can only change the content displayed on the page by traversing the DOM tree to find the DOM node that needs to be modified, and then modify the style behavior or structure to achieve the purpose of updating the view. This method consumes a lot of computing resources, because each query of the DOM node almost requires traversing the entire DOM tree, so the existing custom layout is prone to page jitter and screen flashing.
[0060] Based on virtual DOM technology, this application proposes a web design method for page custom layout, which is applicable to mobile Web and PC Web pages, as well as any page rendered using virtual DOM. Users can freely arrange page modules on the rendered page to complete custom layout settings. The web design method provided by this application reduces the number of operations on the real DOM tree, improves page update efficiency, and makes the page more stable.
[0061] The webpage design method provided in the embodiment of the present application can be applied to Figure 1In the application environment shown. Among them, the terminal 101 communicates with the server 102 through the network. The data storage system can store data that the server 102 needs to process. The data storage system can be integrated on the server 102, or it can be placed on the cloud or other network servers. Among them, the terminal receives the user's operation on the target web page, and sends the user's operation to the server, and the server generates a virtual document object model corresponding to the target web page according to the source code of the target web page, obtains the layout change information corresponding to at least one target page module in response to the operation, determines the candidate page module that needs to be updated according to the layout change information, and updates the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; renders the target web page based on the updated virtual document object model.
[0062] The terminal 101 may be, but is not limited to, various personal computers, laptop computers, smart phones, and tablet computers, and the server 102 may be implemented as an independent server or a server cluster consisting of multiple servers.
[0063] In another embodiment, the application environment may only include a terminal, which receives an operation performed by a user on a target web page, generates a virtual document object model corresponding to the target web page based on the source code of the target web page, obtains layout change information corresponding to at least one target page module in response to the operation, determines a candidate page module that needs to be updated based on the layout change information, and updates the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; and renders the target web page based on the updated virtual document object model.
[0064] In one embodiment, Figure 2 As shown, a web page design method is provided, which is applied to Figure 1 The terminal in is used as an example to illustrate, including the following steps:
[0065] Step 201 : after receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage.
[0066] Among them, the target web page refers to the web page that currently needs to adjust the design. The target web page contains multiple page modules. When the user needs to update the page module such as position, color, shape, etc., the user's operation can be entered on the target web page. The user's operation on the target web page can be, for example, sliding operation, dragging operation, clicking operation, etc.
[0067] The page module is composed of at least one page element, such as an input box, a drop-down menu, a button, etc.
[0068] When the terminal receives the user's operation on the target web page, it means that the user updates the page module in the target web page, which can be, for example, position update, shape update, size update, color update, etc. Often, this update is completed by multiple operations. In order to reduce the number of operations on the real document object model, in the embodiment of the present application, the terminal can use JS (JavaScript) objects to simulate the document object nodes in the real document object model to obtain a virtual document object model, and then save multiple updates on the virtual document object model and then map the final JS object to the real document object model, which is then handed over to the browser for drawing.
[0069] The following is a detailed description of the process of generating a virtual document object model:
[0070] Optionally, in an embodiment of the present application, after reading the source code of the target webpage, the browser of the terminal can generate a real document object model, and then simulate the document object nodes in the real document object model through the JS object to obtain a virtual document object model. Optionally, after receiving the user's operation on the target webpage, the browser of the terminal simulates the document object nodes in the real document object model through the JS object to obtain a virtual document object model.
[0071] Step 202: acquiring layout change information corresponding to at least one target page module in response to the operation, wherein the layout change information includes a layout object of the target page module before the operation and a layout object after the operation.
[0072] The following uses the drag operation as an example to explain. Please refer to Figure 3 , Figure 3 A schematic diagram showing the layout of at least one target page module before dragging is shown. Figure 3 The target web page shown in is divided into multiple columns, represented by column1, column2, column3, column..., each column represents a layout object, and each layout object can have different numbers of page modules. These page modules have module identifiers in the layout object. For example, the module identifiers of the page modules in column1 are represented as module11, module12, module13, module14,...
[0073] Please refer to Figure 4 , Figure 4 The schematic diagram of dragging at least one target page module is shown. Obviously, when performing the dragging operation, the user needs to select a dragging object, which is the target page module. The number of the target page modules can be one or more. Figure 4 The target page module exemplarily shown in FIG. 1 is module12.
[0074] Please refer to Figure 5 , Figure 5 A schematic diagram showing the layout of at least one target page module after dragging is shown.
[0075] according to Figures 3 to 5 It can be seen that the user's dragging operation drags the target page module module12 from the layout object column1 to the layout object column2. It can be determined that the layout object of the target page module module12 is column1 before dragging, and the layout object of the target page module module12 is column2 after dragging. Based on this, the terminal can obtain the layout change information corresponding to the target page module module12.
[0076] It should be noted that in the embodiment of the present application, the layout change information of the target page module may also refer to a change in size, color, shape, etc., and is not limited to the above. Figure 3-5 The position changes shown.
[0077] Step 203, determining the candidate page module that needs to be updated according to the layout change information, and updating the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; rendering the target web page based on the updated virtual document object model.
[0078] Continue to refer Figure 3-5 Since the position of the target page module has changed, the remaining page modules in the layout object column1 and the remaining page modules in the layout object column2 also need to change based on the position of the target page module module12, and these correspond to the changed page modules and candidate page modules.
[0079] For example Figure 5 As shown, the multiple candidate page modules related to the target page module module12 in column1 are, for example, module13, module14, module... The multiple candidate page modules related to the target page module module12 in column2 are, for example, module22, module23, module24, module...
[0080] Among them, after the target page module module12 is removed from column1, the module identifiers of the candidate page modules module13, module14, module... in column1 are changed, for example, to module12, module13, module...
[0081] After the target page module module12 is moved into column2, the module identifiers of the candidate page modules module22, module23, module24, module... in column2 are changed, for example, to module23, module24, module25, module...
[0082] In the embodiment of the present application, updating the virtual document object node corresponding to the candidate page module refers to updating the key attributes of the virtual document object node of the candidate page module, wherein the key attributes of the candidate page module include module attributes, module identifiers, and module style classes. Among them, the module attributes include the size and coordinates of the page module, the module identifier is a unique identifier, and the module style class is the color, shape, and other ancillary information of the module.
[0083] In the embodiment of the present application, the terminal can obtain the layout change information of multiple target page modules in sequence in response to the user's operation input based on time sequence, and then update the candidate page modules that need to be updated according to the layout change information of the multiple target page modules, and update the virtual document object nodes corresponding to the candidate page modules, so as to obtain an updated virtual document object model. In this way, the page update can be fully reflected in the JS object (virtual document object model) first, and the speed of operating the JS object in the memory is obviously faster. After the update is completed, the final virtual document object model is mapped into a real document object model and handed over to the browser for drawing.
[0084] In the embodiment of the present application, when updating the target web page, the update operation is not directly performed on the real DOM tree, but is updated based on the virtual DOM tree to obtain an updated virtual DOM tree, and finally the updated virtual DOM tree is mapped to the real DOM tree for rendering at one time. In this way, the update of the target web page can be fully reflected in the JS object (virtual DOM) first, and the speed of operating the JS object in the memory is obviously faster. After the update is completed, the final JS object is mapped to the real DOM and handed over to the browser to draw and render the target web page, which reduces the number of operations on the real DOM tree, improves the page update efficiency, and makes the page more stable.
[0085] In one embodiment of the present application, Figure 6 As shown, the process of generating a virtual document object model corresponding to a target webpage according to the source code of the target webpage may include the following contents:
[0086] Step 601, parse the source code to build a real document object model, where the real document object model includes a plurality of document object nodes.
[0087] In the embodiment of the present application, the terminal can parse the source code based on the HTML interpreter, build a DOM tree, receive the CSS code to parse the style sheet rules, correspond the style sheet rules to the DOM tree nodes, and obtain a DOM tree with style attributes. Figure 7 As shown, it shows a schematic diagram of a simple DOM tree, wherein h1 and h2 are document object nodes.
[0088] Step 602, traverse the real document object model, create a JS object for each scanned document object node, and record the attribute information of the document object node.
[0089] Traverse as Figure 7 The DOM tree shown can use JS to simulate each scanned document object node (i.e., tree node) to obtain a JS object. When creating a JS object, it is necessary to record the attribute information of the document object node, where the attribute information includes module attributes, module identifiers, and module style classes.
[0090] Step 603: Generate a virtual document object model according to the JS object corresponding to each document object node.
[0091] Optionally, the JS object corresponding to each document object node is the JS object corresponding to each page module, and the JS object corresponding to each document object node is used as a virtual document object model.
[0092] Optionally, the method of generating a virtual document object model based on the JS objects corresponding to each document object node may also include: obtaining JS objects corresponding to multiple page elements in the target web page; for each page module, obtaining the JS object corresponding to the page module based on the JS objects corresponding to the multiple page elements constituting the page module.
[0093] Among them, in the embodiment of the present application, JS objects can be used to simulate page elements, and then the JS objects of multiple page elements are spliced to obtain the JS object of the page module, and the JS object of each page module is used as a virtual document object model.
[0094] The solution provided by the embodiment of the present application maps the real document object model into a virtual document object model represented in the form of a JS object, thereby facilitating updates on the virtual document object model first, and then uniformly mapping the updates on the virtual document object model to the real document object model, thereby reducing the number of operations on the real document object model and reducing the amount of calculation.
[0095] In one embodiment of the present application, Figure 8 As shown, it shows a schematic diagram of the process of the technical solution of this application:
[0096] Step 801, constructing a page module.
[0097] According to the page design of the target web page, the page is divided into relatively independent page modules, and the JS object corresponding to each page module design is obtained in the form of<Component 1 / > ,<Component 2 / > ,<Component 3 / > ,<Component 4 / > wait.
[0098] Optionally, according to the page design of the target web page, the page is divided into multiple independent page elements, such as buttons, input boxes, drop-down menus, etc. Based on the page design principles, multiple related page elements are merged into a page module to obtain the JS object corresponding to each page module.
[0099] Step 802: construct a module pool based on each page module.
[0100] When constructing a page module, it is necessary to configure key attributes and layout object module attributes for each page module, wherein the key attributes of the page module include at least one of the module identifier, module attributes, and module style class, wherein the module attributes include the size and coordinates of the page module, and the layout object represents the area of the page module in the target web page. The module identifier is the unique identifier of the page module, and the module style class is the color, shape, and other ancillary information of the module.
[0101] Furthermore, in the process of constructing the module pool, it is also necessary to configure a layout object for each page module, and the layout object represents the area of the page module in the target web page.
[0102] Among them, Fig. 9 As shown, the process of constructing a layout object may include the following:
[0103] Step 901: divide the target web page into multiple areas, each area being a layout object.
[0104] Optionally, the target web page may be divided into a plurality of columns. Optionally, the target web page may be divided into a plurality of regions by a preset grid. Figures 3 to 5 column1, column2, column3, column... shown in.
[0105] Step 902: Determine the layout object corresponding to each page module according to the coordinate position of each page module.
[0106] By comparing the coordinate position of each page module with the coverage of each layout object, multiple page modules can be divided into different layout objects, and within each layout object, the page modules can be sorted to obtain the sorting of the page modules in each layout object. For example, the module identifiers of the page modules in column1 are represented as module11, module12, module13, module14, ...
[0107] At the same time, each layout object may also be configured with a corresponding unique identifier and layout style attributes, such as color, shape, coordinate position, size, and the like.
[0108] Among them, the page module is defined according to the layout object, and then when rendering the page, the page module is queried in the module pool according to the unique identification key of the page module and rendered on the page.
[0109] Step 803: After receiving the user's operation on the target webpage, obtain layout change information corresponding to at least one target page module in response to the operation.
[0110] The module identifier of at least one target page module is determined according to the user's operation; the target page module may refer to the page module selected by the user's operation, and the module identifier of the target page module can be determined according to the user's operation. The module identifier is a unique identifier of the page module. According to the module identifier, a layout object before the operation of at least one target page module and a layout object after the operation of at least one target page module are obtained from the module pool.
[0111] After obtaining the module identifier, the layout object of the target page module before the operation can be obtained from the module pool, and the layout object of the target page module after the operation can also be obtained.
[0112] Step 804: determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0113] The candidate page module is determined according to the page module corresponding to the layout object before the operation of at least one target page module and the page module corresponding to the layout object after the operation of at least one target page module.
[0114] Among them, a page module that is sorted after at least one target page module in the page modules corresponding to the layout object before the operation of at least one target page module is determined as a candidate page module; a page module that is sorted after at least one target page module in the page modules corresponding to the layout object after the operation of at least one target page module is determined as a candidate page module.
[0115] In the embodiment of the present application, by constructing a page module, a plurality of page elements are combined to form a page module, and then the position, color, shape, etc. of the page module are adjusted and updated as a whole. At the same time, the target page is divided into a plurality of layout objects, and the corresponding layout object of each page module is determined according to its coordinate position to realize the positioning of the page module. In this way, when the page module is moved, only the updated layout object can be updated. The updating efficiency is improved.
[0116] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.
[0117] Based on the same inventive concept, the embodiment of the present application also provides a webpage design device for implementing the webpage design method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in one or more webpage design device embodiments provided below can refer to the limitations on the webpage design method above, and will not be repeated here.
[0118] In one embodiment, Fig.10 As shown, a webpage design device is provided, including: a virtual document object model generation module 1001, a response module 1002 and a rendering module 1003, wherein:
[0119] The virtual document object model generation module 1001 is used to generate a virtual document object model corresponding to the target webpage according to the source code of the target webpage after receiving the user's operation on the target webpage, and the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0120] A response module 1002 is used to obtain layout change information corresponding to at least one target page module in response to the operation, where the layout change information includes a layout object of the target page module before the operation and a layout object after the operation;
[0121] The rendering module 1003 is used to determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; and render the target web page based on the updated virtual document object model.
[0122] In one embodiment, the virtual document object model generation module 1001 is specifically used for:
[0123] Parse the source code to build a real document object model, where the real document object model includes multiple document object nodes;
[0124] Traverse the real document object model, create a JS object for each document object node scanned, and record the attribute information of the document object node;
[0125] Generate a virtual document object model based on the JS object corresponding to each document object node.
[0126] In one embodiment, the virtual document object model generation module 1001 is specifically used for:
[0127] Get the JS objects corresponding to multiple page elements in the target web page;
[0128] For each page module, the JS object corresponding to the page module is obtained according to the JS objects corresponding to the multiple page elements constituting the page module;
[0129] Generate a virtual document object model based on the JS objects corresponding to each page module.
[0130] In one embodiment, the virtual document object model generation module 1001 is specifically used for:
[0131] Build a module pool based on each page module;
[0132] Key attributes and layout objects are configured for each page module in the module pool. The key attributes of the page module include at least one of the module identifier, module attributes and module style class. The module attributes include the size and coordinates of the page module. The layout object represents the area of the page module in the target web page.
[0133] In one embodiment, the virtual document object model generation module 1001 is specifically used for:
[0134] Determine a module identifier of at least one target page module according to the operation;
[0135] A layout object before the operation of at least one target page module and a layout object after the operation of at least one target page module are acquired from the module pool according to the module identifier.
[0136] In one embodiment, the virtual document object model generation module 1001 is specifically used for:
[0137] Divide the target web page into multiple areas, each area is a layout object;
[0138] The layout object corresponding to each page module is determined according to the coordinate position of each page module.
[0139] In one embodiment, the rendering module 1003 is specifically used for:
[0140] The candidate page module is determined according to the page module corresponding to the layout object before the operation of at least one target page module and the page module corresponding to the layout object after the operation of at least one target page module.
[0141] Each module in the webpage design device can be implemented in whole or in part by software, hardware, or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute operations corresponding to each module.
[0142] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Fig.11 As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a web page design method is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a key, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.
[0143] Those skilled in the art will understand that Fig.11The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.
[0144] In one embodiment, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the following steps are implemented:
[0145] After receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0146] In response to the operation, obtaining layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation;
[0147] Determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0148] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0149] Parse the source code to build a real document object model, where the real document object model includes multiple document object nodes;
[0150] Traverse the real document object model, create a JS object for each document object node scanned, and record the attribute information of the document object node;
[0151] Generate a virtual document object model based on the JS object corresponding to each document object node.
[0152] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0153] Get the JS objects corresponding to multiple page elements in the target web page;
[0154] For each page module, the JS object corresponding to the page module is obtained according to the JS objects corresponding to the multiple page elements constituting the page module;
[0155] Generate a virtual document object model based on the JS objects corresponding to each page module.
[0156] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0157] Build a module pool based on each page module;
[0158] Key attributes and layout objects are configured for each page module in the module pool. The key attributes of the page module include at least one of the module identifier, module attributes and module style class. The module attributes include the size and coordinates of the page module. The layout object represents the area of the page module in the target web page.
[0159] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0160] Determine a module identifier of at least one target page module according to the operation;
[0161] A layout object before the operation of at least one target page module and a layout object after the operation of at least one target page module are acquired from the module pool according to the module identifier.
[0162] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0163] Divide the target web page into multiple areas, each area is a layout object;
[0164] The layout object corresponding to each page module is determined according to the coordinate position of each page module.
[0165] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0166] The candidate page module is determined according to the page module corresponding to the layout object before the operation of at least one target page module and the page module corresponding to the layout object after the operation of at least one target page module.
[0167] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:
[0168] After receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0169] In response to the operation, obtaining layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation;
[0170] Determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0171] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0172] Parse the source code to build a real document object model, where the real document object model includes multiple document object nodes;
[0173] Traverse the real document object model, create a JS object for each document object node scanned, and record the attribute information of the document object node;
[0174] Generate a virtual document object model based on the JS object corresponding to each document object node.
[0175] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0176] Get the JS objects corresponding to multiple page elements in the target web page;
[0177] For each page module, the JS object corresponding to the page module is obtained according to the JS objects corresponding to the multiple page elements constituting the page module;
[0178] Generate a virtual document object model based on the JS objects corresponding to each page module.
[0179] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0180] Build a module pool based on each page module;
[0181] Key attributes and layout objects are configured for each page module in the module pool. The key attributes of the page module include at least one of the module identifier, module attributes and module style class. The module attributes include the size and coordinates of the page module. The layout object represents the area of the page module in the target web page.
[0182] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0183] Determine a module identifier of at least one target page module according to the operation;
[0184] A layout object before the operation of at least one target page module and a layout object after the operation of at least one target page module are acquired from the module pool according to the module identifier.
[0185] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0186] Divide the target web page into multiple areas, each area is a layout object;
[0187] The layout object corresponding to each page module is determined according to the coordinate position of each page module.
[0188] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0189] The candidate page module is determined according to the page module corresponding to the layout object before the operation of at least one target page module and the page module corresponding to the layout object after the operation of at least one target page module.
[0190] In one embodiment, a computer program product is provided, comprising a computer program, which, when executed by a processor, implements the following steps:
[0191] After receiving the user's operation on the target webpage, a virtual document object model corresponding to the target webpage is generated according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage;
[0192] In response to the operation, obtaining layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation;
[0193] Determine the candidate page module that needs to be updated according to the layout change information, and update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; render the target web page based on the updated virtual document object model.
[0194] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0195] Parse the source code to build a real document object model, where the real document object model includes multiple document object nodes;
[0196] Traverse the real document object model, create a JS object for each document object node scanned, and record the attribute information of the document object node;
[0197] Generate a virtual document object model based on the JS object corresponding to each document object node.
[0198] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0199] Get the JS objects corresponding to multiple page elements in the target web page;
[0200] For each page module, the JS object corresponding to the page module is obtained according to the JS objects corresponding to the multiple page elements constituting the page module;
[0201] Generate a virtual document object model based on the JS objects corresponding to each page module.
[0202] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0203] Build a module pool based on each page module;
[0204] Key attributes and layout objects are configured for each page module in the module pool. The key attributes of the page module include at least one of the module identifier, module attributes and module style class. The module attributes include the size and coordinates of the page module. The layout object represents the area of the page module in the target web page.
[0205] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0206] Determine a module identifier of at least one target page module according to the operation;
[0207] A layout object before the operation of at least one target page module and a layout object after the operation of at least one target page module are acquired from the module pool according to the module identifier.
[0208] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0209] Divide the target web page into multiple areas, each area is a layout object;
[0210] The layout object corresponding to each page module is determined according to the coordinate position of each page module.
[0211] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0212] The candidate page module is determined according to the page module corresponding to the layout object before the operation of at least one target page module and the page module corresponding to the layout object after the operation of at least one target page module.
[0213] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.
[0214] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.
[0215] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.
Claims
1. A webpage design method, characterized in that: The method comprises: After receiving the user's operation on the target webpage, generating a virtual document object model corresponding to the target webpage according to the source code of the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage; Construct a module pool according to each of the page modules; Configuring key attributes and layout objects for each of the page modules in the module pool; In response to the operation, acquiring layout change information corresponding to at least one target page module, the layout change information including a layout object of the target page module before the operation and a layout object after the operation; Determine, as a candidate page module, a page module that is ranked after the at least one target page module among the page modules corresponding to the layout object before the operation of the at least one target page module; and determine, as the candidate page module, a page module that is ranked after the at least one target page module among the page modules corresponding to the layout object after the operation of the at least one target page module; The virtual document object node corresponding to the candidate page module is updated to obtain an updated virtual document object model; and the target web page is rendered based on the updated virtual document object model.
2. The method according to claim 1, characterized in that The step of generating a virtual document object model corresponding to the target webpage according to the source code of the target webpage includes: Parse the source code to build a real document object model, where the real document object model includes multiple document object nodes; Traversing the real document object model, creating a JS object for each scanned document object node, and recording attribute information of the document object node; The virtual document object model is generated according to the JS object corresponding to each of the document object nodes.
3. The method according to claim 2, characterized in that The generating the virtual document object model according to the JS object corresponding to each of the document object nodes includes: Obtain JS objects corresponding to multiple page elements in the target web page; For each of the page modules, obtaining the JS object corresponding to the page module according to the JS objects corresponding to the multiple page elements constituting the page module; The virtual document object model is generated according to the JS objects corresponding to each of the page modules.
4. The method according to claim 1, characterized in that: The key attributes of the page module include at least one of a module identifier, a module attribute and a module style class, wherein the module attribute includes the size and coordinates of the page module, and the layout object represents the area of the page module in the target web page.
5. The method according to claim 4, characterized in that The acquiring, in response to the operation, layout change information corresponding to at least one target page module includes: Determine a module identifier of the at least one target page module according to the operation; The layout object before the operation of the at least one target page module and the layout object after the operation of the at least one target page module are acquired from the module pool according to the module identifier.
6. The method according to claim 4, characterized in that The configuring layout object for each of the page modules in the module pool includes: Dividing the target webpage into a plurality of regions, each of the regions being a layout object; The layout object corresponding to each of the page modules is determined according to the coordinate position of each of the page modules.
7. A webpage design device, characterized in that: The device comprises: A virtual document object model generation module is used to generate a virtual document object model corresponding to the target webpage according to the source code of the target webpage after receiving the operation of the user on the target webpage, wherein the virtual document object model includes virtual document object nodes corresponding to each page module in the target webpage; construct a module pool according to each page module; and configure key attributes and layout objects for each page module in the module pool; A response module, configured to obtain, in response to the operation, layout change information corresponding to at least one target page module, wherein the layout change information includes a layout object of the target page module before the operation and a layout object of the target page module after the operation; A rendering module is used to determine, as a candidate page module, a page module that is sorted after the at least one target page module among the page modules corresponding to the layout object before the operation of the at least one target page module; and determine, as the candidate page module, a page module that is sorted after the at least one target page module among the page modules corresponding to the layout object after the operation of the at least one target page module; update the virtual document object node corresponding to the candidate page module to obtain an updated virtual document object model; and render the target web page based on the updated virtual document object model.
8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.
10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.