WEB page rendering method and system, browser, storage medium and product
By receiving and rendering icons and contents in the atomized service list, the strong correlation between atomized service and code is reduced, the problem of insufficient flexibility in traditional WEB page rendering methods is solved, and the flexibility and efficiency of page rendering are improved.
Patent Information
- Application Number
- CN202411492219.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-24
- Publication Date
- 2025-02-18
AI Technical Summary
The traditional WEB page rendering method has poor flexibility, which leads to frequent modification of code when project requirements change or page content is updated, which increases the workload of development and maintenance.
A WEB page rendering method is proposed. By receiving the atomized service list to be displayed, including the icon list and the content list, and rendering the icons and content on the WEB page through preset rendering elements, responding to user instructions, reducing atoms Strong correlation between service and code.
It improves the flexibility of WEB page rendering, so that different atomized service lists to be displayed can be set up for different page display requirements without modifying the code, thereby reducing the workload of development and maintenance.
Smart Images
Figure CN119474584A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of program development technology, and in particular to a WEB page rendering method, system, browser, storage medium and product. Background Art
[0002] In the technical scope of Web development, there is a close binding relationship between the final display effect of the page and the code implementation behind it. Specifically, every content element and every functional module defined and arranged by the developer in the code will be accurately reflected on the user's browser page, forming the page content and layout seen by the user. This one-to-one correspondence ensures the consistency and accuracy of the page display.
[0003] However, this tight binding also brings certain limitations. When project requirements change, or when page content needs to be updated or adjusted, developers usually need to go back to the code level to make corresponding modifications and debugging. This means that every content change may be accompanied by code modifications, which increases the workload of development and maintenance. In some cases, this reliance on code may also affect the update speed and flexibility of page content.
[0004] Therefore, the traditional WEB page rendering method has the technical problem of poor flexibility. Summary of the invention
[0005] The main purpose of this application is to provide a WEB page rendering method, system, browser, storage medium and product, aiming to solve the technical problem of how to improve the flexibility of web page rendering.
[0006] To achieve the above object, the present application proposes a WEB page rendering method, which is applied to a browser and includes:
[0007] Receiving a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service;
[0008] Rendering each icon in the icon list on the WEB page by using a preset rendering element, responding to a user instruction, and using the icon corresponding to the user instruction as a target icon;
[0009] The content corresponding to the target icon in the content list is used as the target content, and the target content is rendered on the WEB page through the rendering element.
[0010] In one embodiment, before the step of rendering each icon in the icon list on the WEB page by using a preset rendering element, the method further includes:
[0011] Create atomic service creation function and atomic service mounting function in the callback method of the preset initial class;
[0012] Setting an atomic service identifier and an atomic service path in the preset initial class;
[0013] Based on the preset initial class, create a rendering element through the customElements.define method.
[0014] In one embodiment, before the step of rendering each icon in the icon list on the WEB page by using a preset rendering element, the method further includes:
[0015] Creating a sandbox instance corresponding to each of the atomic services;
[0016] The step of rendering each icon in the icon list on the WEB page by using a preset rendering element comprises:
[0017] In each of the sandbox instances, each icon in the icon list is rendered on a WEB page by using a preset rendering element;
[0018] The step of rendering the target content on the WEB page by using the rendering element comprises:
[0019] In each of the sandbox instances, the target content is rendered on the WEB page by using the rendering element.
[0020] In one embodiment, the step of rendering each icon in the icon list on a WEB page by using a preset rendering element in each of the sandbox instances includes:
[0021] Traversing each icon in the icon list, and determining a first target sandbox instance corresponding to the currently traversed icon in each of the sandbox instances;
[0022] In the first target sandbox instance, the service identifier and the service path of the current traversal icon are transmitted to the rendering element;
[0023] The currently traversed icon is rendered according to the service identifier and service path of the currently traversed icon through the atomic service creation function and the atomic service mounting function in the rendering element until the rendering of each icon in the icon list is completed.
[0024] In one embodiment, the step of rendering the target content on the WEB page by the rendering element in each of the sandbox instances includes:
[0025] In each of the sandbox instances, determining a second target sandbox instance corresponding to the target content;
[0026] In the second target sandbox instance, delivering the service identifier and the service path of the target content to the rendering element;
[0027] The target content is rendered based on the service identifier and service path of the target content through the atomic service creation function and the atomic service mounting function in the rendering element.
[0028] In one embodiment, the callback method of the preset initial class further includes: an atomic service uninstallation function; after the step of rendering the target content on the WEB page by the rendering element, the method further includes:
[0029] In response to a page closing instruction, all attributes in each of the sandbox instances are cleaned up through the atomic service uninstallation function in the rendering element.
[0030] In addition, to achieve the above purpose, the present application also proposes a WEB page rendering system, which is applied to a browser and includes:
[0031] A list receiving module, used for receiving a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service;
[0032] An icon rendering module, used to render each icon in the icon list on a WEB page through a preset rendering element, respond to a user instruction, and use the icon corresponding to the user instruction as a target icon;
[0033] The content rendering module is used to use the content corresponding to the target icon in the content list as the target content, and render the target content on the WEB page through the rendering element.
[0034] In addition, to achieve the above objectives, the present application also proposes a browser, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the WEB page rendering method described above.
[0035] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the WEB page rendering method described above are implemented.
[0036] In addition, to achieve the above-mentioned purpose, the present application also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the steps of the WEB page rendering method described above are implemented.
[0037] In an embodiment of the present application, by receiving a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service, the atomic services to be displayed can be obtained; then, each icon in the icon list is rendered on a WEB page through a preset rendering element, and in response to a user instruction, the icon corresponding to the user instruction is used as the target icon. The icon corresponding to each atomic service can be rendered first, so that the user can access the atomic service based on the service entrance represented by the icon; then, the content corresponding to the target icon in the content list is used as the target content, and the target content is rendered on the WEB page through the rendering element. The atomic service content can be rendered based on the icon selected by the user.
[0038] This application uses rendering elements to render each atomic service in the atomic service list, reducing the strong correlation between the atomic service and the code. Therefore, for different page display requirements, different atomic service lists to be displayed can be set instead of modifying the code. It can be seen that this application improves the flexibility of web page rendering. BRIEF DESCRIPTION OF THE DRAWINGS
[0039] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.
[0040] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.
[0041] Figure 1 A flowchart of the first embodiment of the web page rendering method of the present application is provided;
[0042] Figure 2 A schematic diagram of a rendering element creation process according to an embodiment of a WEB page rendering method of the present application;
[0043] Figure 3 A schematic diagram of a brief flowchart of icon rendering according to an embodiment of a WEB page rendering method of the present application;
[0044] Figure 4 This is a schematic diagram of the module structure of the WEB page rendering system according to an embodiment of the present application;
[0045] Figure 5 This is a schematic diagram of the device structure of the hardware operating environment involved in the WEB page rendering method in the embodiment of the present application.
[0046] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION
[0047] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.
[0048] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.
[0049] In the technical scope of Web development, there is a close binding relationship between the final display effect of the page and the code implementation behind it. Specifically, every content element and every functional module defined and arranged by the developer in the code will be accurately reflected on the user's browser page, forming the page content and layout seen by the user. This one-to-one correspondence ensures the consistency and accuracy of the page display.
[0050] However, this tight binding also brings certain limitations. When project requirements change, or when page content needs to be updated or adjusted, developers usually need to go back to the code level to make corresponding modifications and debugging. This means that every content change may be accompanied by code modifications, which increases the workload of development and maintenance. In some cases, this reliance on code may also affect the update speed and flexibility of page content.
[0051] Therefore, the traditional WEB page rendering method has the technical problem of poor flexibility.
[0052] To solve the above problems, the present application receives a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service, so as to obtain the atomic services to be displayed; then, each icon in the icon list is rendered on the WEB page through a preset rendering element, and in response to user instructions, the icon corresponding to the user instruction is used as the target icon. The icon corresponding to each atomic service can be rendered first, so that the user can access the atomic service based on the service entrance represented by the icon; then, the content corresponding to the target icon in the content list is used as the target content, and the target content is rendered on the WEB page through the rendering element. The atomic service content can be rendered based on the icon selected by the user.
[0053] This application uses rendering elements to render each atomic service in the atomic service list, reducing the strong correlation between the atomic service and the code. Therefore, for different page display requirements, different atomic service lists to be displayed can be set instead of modifying the code. It can be seen that this application improves the flexibility of web page rendering.
[0054] It should be noted that the execution subject of the web page rendering method of the present application can be a browser with data processing, network communication and program running functions. The following takes the browser as an example to illustrate various embodiments of the web page rendering method of the present application.
[0055] Based on this, the present application embodiment provides a WEB page rendering method, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the WEB page rendering method of the present application.
[0056] In this embodiment, the WEB page rendering method includes steps S10 to S30:
[0057] Step S10, receiving a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service;
[0058] It should be noted that atomic service is a future-oriented service provision method. It has an independent entrance (users can directly trigger it by clicking, touching, scanning, etc.), is installation-free (no explicit installation is required, it can be used after being installed in the background of the system program framework), and is a user application form that can provide users with one or more convenient services.
[0059] In this embodiment, the list of atomic services to be displayed is composed of multiple atomic services. Moreover, different atomic services usually have different icons and different display contents. Therefore, the list of atomic services to be displayed also includes an icon list composed of multiple icons and a content list composed of multiple display contents.
[0060] Step S20, rendering each icon in the icon list on the WEB page by using a preset rendering element, responding to a user instruction, and using the icon corresponding to the user instruction as a target icon;
[0061] It should be noted that a rendering element refers to an object used to render a page.
[0062] In this embodiment, in order to facilitate the user to select the atomic service he needs on the page, the icons corresponding to each atomic service are usually rendered first, and then the icon selected by the user is used as the target icon.
[0063] It is understandable that the user instruction may be an instruction output by the user based on a cursor, or an instruction input by the user based on a touch screen, and the present application does not impose any limitation on this.
[0064] Step S30: taking the content corresponding to the target icon in the content list as the target content, and rendering the target content on the WEB page by using the rendering element.
[0065] It is understandable that after determining the target icon, the content corresponding to the target icon can be determined in the content list based on the correspondence between the icon and the content, and the target content can be rendered through the rendering element, thereby responding to the user's behavior of selecting a certain icon.
[0066] In this embodiment, the present application can obtain the atomic services to be displayed by receiving a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service; then, each icon in the icon list is rendered on the WEB page through a preset rendering element, and in response to a user instruction, the icon corresponding to the user instruction is used as the target icon. The icon corresponding to each atomic service can be rendered first, so that the user can access the atomic service based on the service entrance represented by the icon; then, the content corresponding to the target icon in the content list is used as the target content, and the target content is rendered on the WEB page through the rendering element. The atomic service content can be rendered based on the icon selected by the user.
[0067] This application uses rendering elements to render each atomic service in the atomic service list, reducing the strong correlation between the atomic service and the code. Therefore, for different page display requirements, different atomic service lists to be displayed can be set instead of modifying the code. It can be seen that this application improves the flexibility of web page rendering.
[0068] Furthermore, based on the above-mentioned first embodiment of the WEB page rendering method of the present application, a second embodiment of the WEB page rendering method of the present application is proposed.
[0069] Please refer to Figure 2 In this embodiment, before the above step S20, the method further includes:
[0070] Step S100, creating an atomic service creation function and an atomic service mounting function in a preset initial class callback method;
[0071] It should be noted that the preset initial class is the basis of the rendering element, and the rendering element is an instance of the preset initial class. The preset initial class can be a pre-set class for page rendering (a template that defines the properties and behaviors of an object). In this embodiment, the atomic service creation function refers to a function used to create an atomic service on a page, and the atomic service mounting function refers to a function used to mount an atomic service on a page.
[0072] Step S200, setting an atomic service identifier and an atomic service path in the preset initial class;
[0073] It is understandable that since the preset initial class is used to render the page, and multiple atomic services need to be mounted on the page. Therefore, it is necessary to distinguish multiple atomic services. In this embodiment, the atomic service identifier is name, and the atomic service path is url, which refers to the address that needs to be accessed to implement the atomic service.
[0074] Step S300: creating a rendering element based on the preset initial class through the customElements.define method.
[0075] It should be noted that window.customElements.define is part of the Web Components technology and is used to define a new custom element in the browser.
[0076] In this embodiment, if the rendering element is defined as micro-service and the preset initial class is defined as MySerice, the steps of creating the rendering element may be:
[0077] window.customElements.define('micro-service',MySerice).
[0078] Therefore, in this embodiment, the atomic services in the atomic service list can be rendered based on the preset rendering elements, thereby solving the problem of strong binding between the rendering of the atomic services and the code and improving the flexibility of the atomic service rendering.
[0079] In a feasible implementation manner, before the above step S20, the method further includes:
[0080] Step S400, creating a sandbox instance corresponding to each of the atomic services;
[0081] It should be noted that in order to avoid the problem of mutual influence of running data generated by each atomic service (such as mutual contamination of variables and objects), when rendering the atomic service, it is necessary to create a sandbox instance corresponding to each atomic service based on a pre-set sandbox operation class.
[0082] Based on this, the above step S20 includes:
[0083] Step S201, in each of the sandbox instances, rendering each icon in the icon list on a WEB page by using a preset rendering element;
[0084] The above step S30 includes:
[0085] Step S301: In each of the sandbox instances, the target content is rendered on the WEB page by using the rendering element.
[0086] It is understandable that after creating a sandbox instance corresponding to each atomic service, when rendering the icon corresponding to each atomic service and the target content corresponding to the target icon, the properties, functions and other data set during rendering need to be saved in the sandbox instance corresponding to the atomic service. This ensures that the data between different atomic services are isolated and will not be contaminated by each other.
[0087] Furthermore, the method of using sandbox isolation when rendering atomic services proposed in this application can not only avoid mutual contamination between data of different atomic services, but also avoid mutual contamination between atomic services and global objects, thereby reducing the probability of rendering errors.
[0088] Please refer to Figure 3 In a feasible implementation manner, the above step S201 includes:
[0089] Step S2011, traversing each icon in the icon list, and determining a first target sandbox instance corresponding to the currently traversed icon in each of the sandbox instances;
[0090] It should be noted that the first target sandbox instance refers to the sandbox instance corresponding to the current traversal icon.
[0091] It is understandable that in order to render all icons in the icon list to the page and ensure that data of different atomic services do not affect each other, when rendering icons, it is necessary to traverse the icons in the icon list, determine a sandbox instance for the currently traversed icon, and then render the icon in the sandbox instance.
[0092] Step S2012: in the first target sandbox instance, transferring the service identifier and service path of the current traversal icon to the rendering element;
[0093] It can be understood that the service identifier of the current traversal icon refers to the name of the icon, and the service path of the current icon refers to the storage path of the icon.
[0094] Exemplarily, assuming that the currently traversed icon is a, the name of icon a and the storage path of icon a may be passed to the rendering element, so that the rendering element renders icon a in the first target sandbox instance.
[0095] Step S2013: Render the current traversal icon according to the service identifier and service path of the current traversal icon through the atomic service creation function and the atomic service mounting function in the rendering element until all the icons in the icon list are rendered.
[0096] It can be understood that the rendering element is an instance of the preset initial class, and therefore, the rendering element also has an atomic service creation function and an atomic service mounting function of the preset initial class.
[0097] When rendering icons, the rendering element will obtain the service identifier and service path of the currently traversed icon through the atomic service creation function in the sandbox instance corresponding to each icon, thereby obtaining the static resource (image) for displaying the icon. Then, the obtained static resource is mounted on the page through the atomic service mounting function to achieve the purpose of rendering the icon.
[0098] In a feasible implementation manner, the above step S301 further includes:
[0099] Step S3011, determining a second target sandbox instance corresponding to the target content in each of the sandbox instances;
[0100] It should be noted that the second target sandbox instance refers to the sandbox instance corresponding to the target content.
[0101] Step S3012: in the second target sandbox instance, delivering the service identifier and service path of the target content to the rendering element;
[0102] It is understandable that the target content refers to the content that needs to be rendered after the user clicks the icon. The service identifier of the target content refers to the code or name of the content, and the service path of the target content refers to the storage path of the content.
[0103] Step S3013: Rendering the target content based on the service identifier and service path of the target content through the atomic service creation function and the atomic service mounting function in the rendering element.
[0104] In this embodiment, when rendering the target content, the rendering element will obtain the service identifier and service path of the target content through the atomic service creation function in the sandbox instance corresponding to the target content, thereby obtaining the static resources (images, texts, etc.) of the target content. Then, the obtained static resources are mounted on the page through the atomic service mounting function to achieve the purpose of rendering the target content.
[0105] In this embodiment, the present application further improves data security by rendering icons and target content through sandbox instances.
[0106] Furthermore, based on the above-mentioned first and second embodiments of the WEB page rendering method of the present application, a third embodiment of the WEB page rendering method of the present application is proposed.
[0107] In this embodiment, the callback method of the preset initial class further includes: an atomic service uninstallation function, wherein the atomic service uninstallation function is used to destroy the atomic service.
[0108] After the above step S30, the method further includes:
[0109] Step S40 , in response to a page closing instruction, clearing all attributes in each of the sandbox instances through the atomic service uninstallation function in the rendering element.
[0110] It is understandable that after detecting a page closing instruction, all properties in each sandbox instance need to be cleaned up to reduce memory loss in the browser and to improve the operating efficiency of the browser.
[0111] Furthermore, based on the above-mentioned various embodiments of the WEB page rendering method of the present application, a specific embodiment of the WEB page rendering method of the present application is proposed.
[0112] In this embodiment, the steps of the WEB page rendering method include:
[0113] 1) Run the WEB atomic service framework;
[0114] 2) Use the window.customElements.define('micro-service',MySerice) function to define the rendering element micro-service; specifically, the connectedCallback and disconnectedCallback static methods in the MySerice class contain unified processing logic for creation, mounting, and unmounting, and the required name and url attributes are preset in the MySerice class to respectively identify the globally unique name and access path of the atomic service it carries.
[0115] 3) Implement the sandbox operation class SandBox and the publishing and subscription class EventCenter, and instantiate the EventCenter instance; specifically, define a sandbox operation class: SandBox at the framework layer. In its own construction method, this class uses the ES6 Proxy proxy to proxy the window object's property acquisition, setting, and deletion operations to the custom microWindow object in the class, so that the mutual pollution of global objects between the service and the framework can be isolated. Then, when each Icon (icon) or Content (content) is created, a SandBox instance will be created synchronously, and when the js file is loaded and run, the scope of js is modified through the with function, and the window in it points to the proxy object (the atomic service currently being processed); and when each service is uninstalled and destroyed, all the properties of the proxy in the SandBox instance are cleaned up to avoid duplicate proxy. In addition, it is also necessary to define the publishing and subscription class EventCenter at the framework layer, use Map() in this class to initialize a cache object of the full subscription event, and implement the binding listening on method and the unlistening off method, as well as the data sending notification method dispatch when the data changes. Then, create an EventCenter instance at the entrance of the framework, and create a global method based on this instance to send data to the specified service and clear a service listening function. Finally, when each Icon or Content starts to be created, the EventCenter instance created above will be injected into its SandBox construction method, and based on this instance, the method of listening to the data sent by the framework layer, canceling the listening function, and sending data to the framework layer will be implemented.
[0116] 4) Pull the atomic service list from the server and cache it in the global Icon list and Content list;
[0117] 5) Traverse the Icon list and render them one by one using a custom micro-service; Specifically, traverse the Icon list, and set the service's workbench universal card (Icon) entry component information (name, url, service ID, etc.) and the service's specific business content (Content) component information (name, url, service ID, etc.) based on the static resource path of each service. In the workbench panel, traverse the Icon list and render them one by one using a custom micro-service, passing in the name and url of each Icon;
[0118] 6) When an Icon is detected to be clicked, the Content corresponding to the Icon is rendered; specifically, when an Icon is clicked, the corresponding service ID (unique identifier of the atomic service) is updated to the global variable of the currently activated service, and the latest value of the variable is monitored in the atomic service business bearing component of the framework, and the list item of the latest value is matched from the Content list, and then the custom micro-service is used for rendering, and the name and URL of the Content are passed in. Thus, the functions developed by the service developer can be displayed on the browser page.
[0119] 7) In the rendering process of each atomic service, first create a SandBox instance, and proxy the operations on global variables to the proxy object in the SandBox instance. At the same time, inject the EventCenter instance of step 3), and based on this instance, implement the method of monitoring the data sent by the framework layer, canceling the monitoring function, and sending data to the framework layer, and finally complete the page rendering of the atomic service.
[0120] Therefore, the present application can improve the rendering efficiency and communication efficiency of atomic services on the basis of realizing atomic service data isolation.
[0121] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the WEB page rendering method of the present application. More simple transformations based on this technical concept are all within the scope of protection of the present application.
[0122] This application also provides a WEB page rendering system, please refer to Figure 4 , the WEB page rendering system includes:
[0123] A list receiving module 10 is used to receive a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service;
[0124] An icon rendering module 20, for rendering each icon in the icon list on a WEB page by using a preset rendering element, in response to a user instruction, and using the icon corresponding to the user instruction as a target icon;
[0125] The content rendering module 30 is used to use the content corresponding to the target icon in the content list as the target content, and render the target content on the WEB page through the rendering element.
[0126] In one embodiment, the WEB page rendering system further includes:
[0127] Function creation module, used to create atomic service creation function and atomic service mounting function in the callback method of the preset initial class;
[0128] A parameter configuration module, used to set an atomic service identifier and an atomic service path in the preset initial class;
[0129] The element creation module is used to create a rendering element based on the preset initial class through the customElements.define method.
[0130] In one embodiment, the WEB page rendering system further includes:
[0131] A sandbox creation module, used to create a sandbox instance corresponding to each of the atomic services;
[0132] The icon rendering module 20 is further used for:
[0133] In each of the sandbox instances, each icon in the icon list is rendered on a WEB page by using a preset rendering element;
[0134] The content rendering module 30 is further used for:
[0135] In each of the sandbox instances, the target content is rendered on the WEB page by using the rendering element.
[0136] In one embodiment, the icon rendering module 20 is further configured to:
[0137] Traversing each icon in the icon list, and determining a first target sandbox instance corresponding to the currently traversed icon in each of the sandbox instances;
[0138] In the first target sandbox instance, the service identifier and the service path of the current traversal icon are transmitted to the rendering element;
[0139] The currently traversed icon is rendered according to the service identifier and service path of the currently traversed icon through the atomic service creation function and the atomic service mounting function in the rendering element until the rendering of each icon in the icon list is completed.
[0140] In one embodiment, the content rendering module 30 is further configured to:
[0141] In each of the sandbox instances, determining a second target sandbox instance corresponding to the target content;
[0142] In the second target sandbox instance, delivering the service identifier and the service path of the target content to the rendering element;
[0143] The target content is rendered based on the service identifier and service path of the target content through the atomic service creation function and the atomic service mounting function in the rendering element.
[0144] In one embodiment, the callback method of the preset initial class further includes: an atomic service uninstallation function, and the WEB page rendering system further includes:
[0145] The service uninstallation module is used to clean up all attributes in each of the sandbox instances through the atomic service uninstallation function in the rendering element in response to a page closing instruction.
[0146] The WEB page rendering system provided by the present application adopts the WEB page rendering method in the above embodiment, which can solve the technical problem of how to improve the flexibility of web page rendering. Compared with the prior art, the beneficial effects of the WEB page rendering system provided by the present application are the same as the beneficial effects of the WEB page rendering method provided by the above embodiment, and other technical features of the WEB page rendering system are the same as the features disclosed in the above embodiment method, which will not be repeated here.
[0147] The present application provides a browser, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the WEB page rendering method in the above-mentioned embodiment 1.
[0148] Reference below Figure 5 , which shows a schematic diagram of the structure of a browser suitable for implementing an embodiment of the present application. Figure 5The browser shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.
[0149] like Figure 5 As shown, the browser may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the browser are also stored. The processing device 1001, ROM1002, and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. Communication device 1009 can allow the browser to communicate with other devices wirelessly or by wire to exchange data. Although the figure shows a browser with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or have alternatively.
[0150] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.
[0151] The browser provided by the present application adopts the WEB page rendering method in the above embodiment, which can solve the technical problem of how to improve the flexibility of web page rendering. Compared with the prior art, the beneficial effects of the browser provided by the present application are the same as the beneficial effects of the WEB page rendering method provided by the above embodiment, and other technical features in the browser are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.
[0152] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.
[0153] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.
[0154] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the WEB page rendering method in the above-mentioned embodiment.
[0155] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.
[0156] The computer-readable storage medium may be included in the browser; or may exist independently without being installed in the browser.
[0157] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the browser, the browser: receives a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service; renders each icon in the icon list on a WEB page through a preset rendering element, responds to a user instruction, and uses the icon corresponding to the user instruction as a target icon; uses the content corresponding to the target icon in the content list as the target content, and renders the target content on the WEB page through the rendering element.
[0158] Computer program code for performing the operations of the present application may be written in one or more programming languages or a combination thereof, including object-oriented programming languages such as Java, Smalltalk, C++, and conventional procedural programming languages such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).
[0159] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0160] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.
[0161] The readable storage medium provided in the present application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned WEB page rendering method, and can solve the technical problem of how to improve the flexibility of web page rendering. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in the present application are the same as the beneficial effects of the WEB page rendering method provided in the above-mentioned embodiment, and will not be repeated here.
[0162] The present application also provides a computer program product, including a computer program, which implements the steps of the above-mentioned WEB page rendering method when executed by a processor.
[0163] The computer program product provided by the present application can solve the technical problem of how to improve the flexibility of web page rendering. Compared with the prior art, the beneficial effects of the computer program product provided by the present application are the same as the beneficial effects of the web page rendering method provided by the above embodiment, which will not be repeated here.
[0164] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.
Claims
1. A WEB page rendering method, characterized in that: The WEB page rendering method is applied to a browser, and the WEB page rendering method includes: Receiving a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service; Rendering each icon in the icon list on the WEB page by using a preset rendering element, responding to a user instruction, and using the icon corresponding to the user instruction as a target icon; The content corresponding to the target icon in the content list is used as the target content, and the target content is rendered on the WEB page through the rendering element.
2. The WEB page rendering method according to claim 1, characterized in that: Before the step of rendering each icon in the icon list on the WEB page by using a preset rendering element, the method further includes: Create atomic service creation function and atomic service mounting function in the callback method of the preset initial class; Setting an atomic service identifier and an atomic service path in the preset initial class; Based on the preset initial class, create a rendering element through the customElements.define method.
3. The WEB page rendering method according to claim 2, characterized in that: Before the step of rendering each icon in the icon list on the WEB page by using a preset rendering element, the method further includes: Creating a sandbox instance corresponding to each of the atomic services; The step of rendering each icon in the icon list on the WEB page by using a preset rendering element comprises: In each of the sandbox instances, each icon in the icon list is rendered on a WEB page by using a preset rendering element; The step of rendering the target content on the WEB page by using the rendering element comprises: In each of the sandbox instances, the target content is rendered on the WEB page by using the rendering element.
4. The WEB page rendering method according to claim 3, characterized in that: In each of the sandbox instances, the step of rendering each icon in the icon list on a WEB page by using a preset rendering element includes: Traversing each icon in the icon list, and determining a first target sandbox instance corresponding to the currently traversed icon in each of the sandbox instances; In the first target sandbox instance, the service identifier and the service path of the current traversal icon are transmitted to the rendering element; The currently traversed icon is rendered according to the service identifier and service path of the currently traversed icon through the atomic service creation function and the atomic service mounting function in the rendering element until the rendering of each icon in the icon list is completed.
5. The WEB page rendering method according to claim 3, characterized in that: The step of rendering the target content on the WEB page by using the rendering element in each of the sandbox instances includes: In each of the sandbox instances, determining a second target sandbox instance corresponding to the target content; In the second target sandbox instance, delivering the service identifier and the service path of the target content to the rendering element; The target content is rendered based on the service identifier and service path of the target content through the atomic service creation function and the atomic service mounting function in the rendering element.
6. The WEB page rendering method according to claim 3, characterized in that: The callback method of the preset initial class further includes: an atomic service uninstallation function; after the step of rendering the target content on the WEB page by the rendering element, the method further includes: In response to a page closing instruction, all attributes in each of the sandbox instances are cleaned up through the atomic service uninstallation function in the rendering element.
7. A WEB page rendering system, characterized in that: The WEB page rendering system is applied to a browser, and the WEB page rendering system includes: A list receiving module, used for receiving a list of atomic services to be displayed, wherein the list of atomic services to be displayed includes an icon list and a content list corresponding to each atomic service; An icon rendering module, used to render each icon in the icon list on a WEB page through a preset rendering element, respond to a user instruction, and use the icon corresponding to the user instruction as a target icon; The content rendering module is used to use the content corresponding to the target icon in the content list as the target content, and render the target content on the WEB page through the rendering element.
8. A browser, characterized in that: The browser comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the WEB page rendering method according to any one of claims 1 to 6.
9. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the WEB page rendering method according to any one of claims 1 to 6 are implemented.
10. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the steps of the WEB page rendering method according to any one of claims 1 to 6 are implemented.