Browser rendering method, device and system

Abstract

The present invention discloses a browser rendering method, device and system. The method comprises: first obtaining original code corresponding to web page data of a configuration tag keyword, preprocessing the original code according to the introduction order and the priority of the original code, determining the preprocessed target code, and then using the target code as the input of the JavaScript engine and the browser rendering task, monitoring the blank time available for each frame of browser data, when the available blank time is monitored, reading the browser rendering task queue, and judging whether to trigger a browser rendering task scheduling request, and finally responding to the request to execute the browser rendering task scheduling, utilizing the dynamic task scheduling rules of the preset priority strategy to execute the browser rendering task. The method can fully utilize the browser rendering time through code preprocessing and blank time monitoring, reduce the blocking problem in the browser rendering process, and improve rendering efficiency and user experience.

Description

Technical Field

[0001] The present invention belongs to the technical field of web development, and in particular to a browser rendering method, device and system. Background Art

[0002] With the development of web technology and the pursuit of better user experience, browser rendering performance requirements are becoming increasingly stringent. Currently, the prominent issues with browser rendering blocking lie in rendering blocking and idle time (blank time). Browser page rendering is a single-threaded process, and the rendering engine and JavaScript engine cannot operate simultaneously, leading to the problem of JavaScript blocking. Whether it's a JavaScript script or an external link, as soon as the browser encounters a JavaScript tag, it wakes up the JavaScript parser, pauses HTML parsing, and executes the JavaScript script. Because the script may manipulate DOM elements, if the DOM elements haven't been parsed when the script is loaded and executed, the script will generate errors because the DOM elements haven't been generated and the response elements can't be retrieved. Idle time consumption mainly includes server response time, task switching time between different capture events such as loading, scripting, rendering, and painting, and time waiting for network connection.

[0003] The existing methods for solving the browser rendering blocking time include placing the JavaScript script loading at the end of the Body element. This method uses the characteristics of sequential code execution to delay the loading of JavaScript scripts, thereby reducing the white screen phenomenon caused by JavaScript script blocking. However, this method can only delay the time when the blocking occurs, and cannot fundamentally solve the problem of long first-screen rendering caused by blocking. Secondly, the method of merging multiple related JavaScript files into one JavaScript file can reduce the blocking between scripts, but this method can only reduce the script loading time caused by too many JavaScript files, and excessive script merging will increase the code maintenance cost. In addition, the async method can be used to asynchronously execute JavaScript scripts and the defer method can be used to delay the loading of JavaScript scripts to reduce rendering blocking, but this method is only effective for external JavaScript scripts. The above-mentioned existing methods for solving the browser rendering blocking problem all have certain limitations, which is a problem that needs to be solved urgently. Summary of the Invention

[0004] The object of the present invention is to provide a browser rendering method, device and system to solve the deficiencies in the prior art. It can provide a browser rendering method which, through code preprocessing and blank time monitoring, makes full use of the browser rendering time, reduces the blocking problem in the browser rendering process, improves the rendering efficiency, and obtains better response speed and user experience.

[0005] An embodiment of the present application provides a browser rendering method, and the method includes:

[0006] Obtain the original code corresponding to the web page data with configuration tag keywords, preprocess the original code according to the introduction order and the priority of the original code, and determine the target code after preprocessing;

[0007] Use the target code as the input of the JavaScript engine and the browser rendering task, and monitor the available blank time of each frame of data of the browser;

[0008] When the available blank time is monitored, read the browser rendering task queue and determine whether to trigger a browser rendering task scheduling request;

[0009] In response to the request for executing the browser rendering task scheduling, use the dynamic task scheduling rule of the preset priority strategy to execute the browser rendering task.

[0010] Optionally, the tag keyword includes keywords that exclude existing reserved words and conform to the user-defined tag specification;

[0011] Each type of the tag keyword includes factors affecting the rendering effect and weights set, and among them, the factors affecting the rendering effect at least include one or a combination of home page white screen, rendering waiting, asynchronous loading, page effect, event response, etc.;

[0012] The weight is used to determine the priority of the original code.

[0013] Optionally, the priority of the original code is determined according to the following formula:

[0014]

[0015] where block_type_pri represents the priority of the original code, λ is an adjustment factor, λ > 0, block_type_weight represents the weight of each type of tag keyword, 0 < i ≤ n, and n is a positive integer.

[0016] Optionally, the step of using the target code as the input of the JavaScript engine and the browser rendering task, and monitoring the available blank time of each frame of data of the browser includes:

[0017] When the JavaScript engine or the browser rendering engine is running, use the selenium web driver tool to monitor the available idle time of each frame of browser data, and perform a monitoring pointer annotation Idle_Flag on the available idle time, where the annotation value of the monitoring pointer annotation Idle_Flag is 0 or 1.

[0018] Optionally, the dynamic task scheduling rule of the preset priority policy includes:

[0019] Set browser rendering task monitoring pointers T_P1, T_P2, T_P3,..., T_Pi to monitor browser rendering task queues T1, T2, T3,..., Ti and the monitoring pointer annotation Idle_Flag respectively; where 0 < i ≤ n, n is a positive integer, and the browser rendering task queue uses the label keyword as the index key value;

[0020] When, for any i, the browser rendering task monitoring pointer T_Pi points to an empty state, stop monitoring the idle time, and continuously update the browser rendering task monitoring pointer T_Pi of the browser rendering task queue until there is a non-empty browser rendering task queue, and then start monitoring the idle time;

[0021] When it is detected that the monitoring pointer annotation Idle_Flag is 1, read the browser rendering task queue, and according to the Event Loop event loop principle, preferentially execute the code with a higher priority in the task queue until the browser rendering task is completed.

[0022] Optionally, the dynamic task scheduling rule of the preset priority policy further includes:

[0023] When the user triggers a browser reflow event, determine whether there is dependent data;

[0024] If there is no dependent data, perform dynamic task preemption to preferentially respond to the browser reflow event;

[0025] If there is dependent data that has not been obtained, dynamically preferentially schedule the event-dependent module and execute it according to the scheduling rule until the browser rendering task is completed. <​​​​​​A monitoring module, configured to use the target code as input to a JavaScript engine and a browser rendering task, and monitor the blank time available for each frame of data in the browser;

[0029] A judgment module is used to read the browser rendering task queue and determine whether to trigger a browser rendering task scheduling request when the available blank time is monitored;

[0030] The execution module is used to respond to a request for executing browser rendering task scheduling and execute the browser rendering task using a dynamic task scheduling rule with a preset priority policy.

[0031] Another embodiment of the present application provides a browser rendering system, the system comprising:

[0032] Communication connection preprocessing module, priority loading module and task scheduling module, among which,

[0033] The preprocessing module is used to perform the original code deconstruction operation corresponding to the web page data, perform code module configuration, perform module division, and output the deconstructed target code;

[0034] The priority loading module is used to normalize the deconstructed target code according to the specified category and priority, output the executable file corresponding to the target code, monitor the blank time during the browser rendering process, and trigger the task scheduling module after monitoring the blank time;

[0035] The task scheduling module is used to utilize idle time to process the execution file corresponding to the target code, and dynamically adjust the data input of the JavaScript engine according to the priority level of the execution file.

[0036] Yet another embodiment of the present application provides a storage medium, wherein the storage medium stores a computer program, wherein the computer program is configured to execute any of the above methods when run.

[0037] Yet another embodiment of the present application provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute any of the above methods.

[0038] Compared with the prior art, the present invention first obtains the original code corresponding to the web page data of the configuration tag keyword, preprocesses the original code according to the introduction order and the priority of the original code, determines the preprocessed target code, and then uses the target code as the input of the JavaScript engine and the browser rendering task, monitors the blank time available for each frame of browser data, and when the available blank time is monitored, reads the browser rendering task queue and determines whether to trigger the browser rendering task scheduling request, and finally responds to the request to execute the browser rendering task scheduling, uses the dynamic task scheduling rules of the preset priority strategy to execute the browser rendering task, and can provide a browser rendering method. This method fully utilizes the browser rendering time through code preprocessing and blank time monitoring, reduces the blocking problem in the browser rendering process, improves rendering efficiency, and obtains better response speed and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 A hardware structure block diagram of a computer terminal for a browser rendering method provided by an embodiment of the present invention;

[0040] Figure 2 A flowchart of a browser rendering method provided by an embodiment of the present invention;

[0041] Figure 3 A schematic diagram of original code deconstruction and integration provided by an embodiment of the present invention;

[0042] Figure 4 A schematic diagram of a browser rendering process provided by an embodiment of the present invention;

[0043] Figure 5 A schematic structural diagram of a browser rendering device provided by an embodiment of the present invention;

[0044] Figure 6 A schematic diagram of a module of a browser rendering system provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0045] The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and are not to be construed as limiting the present invention.

[0046] The embodiment of the present invention first provides a browser rendering method, which can be applied to electronic devices such as computer terminals, specifically ordinary computers, quantum computers, etc.

[0047] The following describes it in detail by taking running on a computer terminal as an example. Figure 1 The hardware structure block diagram of a computer terminal for a browser rendering method provided by an embodiment of the present invention. Figure 1As shown, the computer terminal may include one or more ( Figure 1 Only one is shown) a processor 102 (the processor 102 may include but is not limited to a microprocessor MCU or a programmable logic device FPGA and other processing devices) and a memory 104 for storing data. Optionally, the computer terminal may also include a transmission device 106 for communication functions and an input and output device 108. It will be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the above-mentioned computer terminal. For example, the computer terminal may also include Figure 1 More or fewer components than shown, or with Figure 1 Different configurations shown.

[0048] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / modules corresponding to the browser rendering method in the embodiment of the present application. The processor 102 executes various functional applications and data processing by running the software programs and modules stored in the memory 104, that is, implementing the above-mentioned method. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include a memory remotely arranged relative to the processor 102, and these remote memories can be connected to the computer terminal via a network. Examples of the above-mentioned network include but are not limited to the Internet, an intranet, a local area network, a mobile communication network and a combination thereof.

[0049] The transmission device 106 is used to receive or send data via a network. A specific example of the aforementioned network may include a wireless network provided by a communications provider of a computer terminal. In one embodiment, the transmission device 106 includes a network interface controller (NIC), which can be connected to other network devices via a base station to enable communication with the Internet. In another embodiment, the transmission device 106 may be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0050] See also Figure 2 , Figure 2 A flowchart of a browser rendering method provided in an embodiment of the present invention may include the following steps:

[0051] S201: obtaining original codes corresponding to web page data configured with tag keywords, preprocessing the original codes according to the introduction order and the priority of the original codes, and determining target codes after preprocessing.

[0052] Front-end development is the process of creating front-end interfaces such as web pages to present to users. Through HTML, CSS, JavaScript, and various derived technologies, frameworks, and solutions, the user interface interaction of Internet products is achieved. The main function of front-end development is to better present the web pages of a website to users. When a client user accesses a web page through a browser, the browser can render the web page requested by the user and present it to the user. Currently, after parsing the URL address input by the user through the browser and sending a browser page rendering request to the server, the server can obtain the page elements and data required for page display according to the user's permissions, fill the data into the corresponding page elements, generate an html file, and send it to the browser. The browser completes the browser page rendering according to the html file.

[0053] It should be understood that a web page is jointly constructed by HTML code, CSS code, and JS code to display web page content and implement human-computer interaction. HTML code, that is, HyperText Markup Language, is used to layout each element in a web page (display of web page structure and content). CSS code, that is, Cascading Style Sheets, is a language used to set the attributes of HTML elements on a web page. JS code is based on HTML code to link multiple objects in a web page to achieve interaction with customers.

[0054] Specifically, refer to Figure 3 , Figure 3 which is a schematic diagram of the deconstruction and integration of original code provided by an embodiment of the present invention. Among them, the deconstruction and integration of the original code is the process of performing preprocessing on the original code to generate target code. The label keyword block_type may include keywords that exclude existing reserved words and conform to user-defined label specifications. For example, the label keyword block_type may include JS-DOM, JS-CSS, and JS-DATA, etc.; each type of the label keyword includes an influencing rendering effect factor block_type_factor and a weight block_type_weight. Among them, the influencing rendering effect factor includes at least one or a combination of home page white screen, rendering waiting, asynchronous loading, page effect, and event response; the weight is used to determine the priority of the original code.

[0055] The priority of the original code can be determined according to the following formula:

[0056]

[0057] where block_type_pri represents the priority of the original code, λ is an adjustment factor, λ>0, block_type_weight represents the weight of each type of label keyword, 0 < i ≤ n, and n is a positive integer.

[0058] For example, see Table 1, the original code block priority configuration table:

[0059] Table 1

[0060]

[0061]

[0062] S202: Using the target code as input to the JavaScript engine and the browser rendering task, and monitoring the blank time available for each frame of data in the browser.

[0063] Specifically, using the target code as input to the JavaScript engine and the browser rendering task, and monitoring the available blank time of each frame of browser data, may include:

[0064] When the JavaScript engine or the browser rendering engine is running, the selenium web driver tool is used to monitor the available blank time of each frame data of the browser, and the monitoring pointer is marked Idle_Flag for the available blank time, wherein the marking value of the monitoring pointer Idle_Flag is 0 or 1.

[0065] For example, the preprocessed code file is used as the input for priority loading processing, that is, it can be integrated according to the function block category block_type according to the order of code file introduction, and then the code can be re-optimized from high to low according to the priority block_type_pri, and the integrated target code file is output as the input of the JavaScript engine and browser rendering task.

[0066] When the JavaScript engine or browser rendering engine is running, the Selenium web driver tool is used to monitor the available blank time of each frame of browser data, such as the white screen time, virtual DOM tree parsing, real DOM tree parsing, and request time. At the same time, a monitoring pointer is marked for the blank time with Idle_Flag. It should be noted that the value of Idle_Flag can be 0 or 1. In an optional implementation, 0 can represent unavailable blank time, and 1 can represent available blank time. When available blank time is detected, the following browser rendering task scheduling request can be triggered.

[0067] It is understandable that obtaining and parsing the preprocessed web page data and the HTML file of the browser can form a DOM tree structure. The DOM adopts a tree structure and represents each element in the web page in the form of branches. After flattening the tree structure into a list structure, in the list structure, no matter which segment is intercepted as the visible area for rendering, the structure is the same. However, each piece of data has a specific position in the tree. Therefore, it is necessary to use CSS styles to distinguish the hierarchical indentation relationship of the data in the list structure and obtain the style data. Here, CSS refers to Cascading Style Sheets. After being processed by CSS styles, the parent and child nodes of the list structure are at the same level. At this time, the rendering performance can be optimized by controlling the number of DOM renderings through the virtual long list.

[0068] It can be seen that through the above preprocessing and priority loading processing of the code, it is possible to reduce the time-consuming of multi-file reference and switching, and according to the characteristic of sequential execution of JavaScript code, the code execution order is optimized by using code block function division and priority marking, thereby improving the browser rendering efficiency.

[0069] S203: When the available blank time is detected, read the browser rendering task queue and determine whether to trigger a browser rendering task scheduling request.

[0070] S204: In response to the request for executing the browser rendering task scheduling, use the dynamic task scheduling rule of the preset priority policy to execute the browser rendering task.

[0071] Specifically, when the available blank time is detected, read the browser rendering task queue and determine whether to trigger a browser rendering task scheduling request. After confirming that the task is triggered, enable the dynamic task scheduling rule of the preset priority policy to perform dynamic task scheduling until the rendering task is completed.

[0072] Among them, the dynamic task scheduling rule of the preset priority policy includes:

[0073] Set browser rendering task monitoring pointers T_P1, T_P2, T_P3,..., T_Pi to monitor the browser rendering task queues T1, T2, T3,..., Ti and the monitoring pointer marked Idle_Flag respectively; where 0 < i ≤ n, n is a positive integer, and the browser rendering task queue uses the tag keyword as the index key value;

[0074] When for any i, the browser rendering task monitoring pointer T_Pi points to an empty state, stop monitoring the blank time, and continuously update the browser rendering task monitoring pointer T_Pi of the browser rendering task queue until there is a non-empty browser rendering task queue, and then start monitoring the blank time;

[0075] When it is detected that the monitoring pointer marked Idle_Flag is 1, the browser rendering task queue is read, and according to the Event Loop event loop principle, the code with higher priority in the task queue is executed first until the browser rendering task is completed.

[0076] In an optional implementation, the dynamic task scheduling rule of the preset priority policy may further include:

[0077] When the user triggers a browser reflow event, determine whether there is dependent data;

[0078] If there is no dependent data, dynamic task preemption is performed, giving priority to responding to the browser reordering event;

[0079] If there is any unobtained dependent data, the event-dependent module will be dynamically scheduled first and executed according to the scheduling rules until the browser rendering task is completed.

[0080] See also Figure 4 , Figure 4 A schematic diagram of a browser rendering process provided by an embodiment of the present invention, wherein the original code corresponding to the web page data is preprocessed to generate target code, an HTML document is obtained, the HTML document is parsed from top to bottom, and a DOM tree is constructed. During the parsing process, if an external style declaration and script declaration are received, the document parsing is paused, a new network connection is created, the corresponding style file is downloaded and the script is executed according to the received declaration, and after the download of the style change file is completed, the CSSDOM tree is constructed; or a compilation operation is performed through JavaScript to obtain the corresponding running result.

[0081] As can be seen, the above monitoring and scheduling of browser rendering tasks address the characteristics of the browser rendering process: JavaScript scripts are prioritized when encountered, but the browser rendering thread and the JavaScript engine are mutually exclusive. When the JavaScript engine thread is executing, browser rendering is paused and resumed only when the browser rendering task queue is free. Idle time monitoring and task scheduling can schedule prioritized JavaScript task blocks during browser rendering thread interruptions, fully improving execution efficiency and optimizing rendering results.

[0082] Therefore, the browser rendering method described in this application is universal and can be implemented as a browser plug-in to optimize browser rendering while monitoring the execution of browser rendering tasks. This method uses a preprocessing mechanism to process web page data during idle time, reducing browser rendering blocking issues, increasing web page rendering speed, and enhancing browser rendering performance.

[0083] Compared with the prior art, the present invention first obtains the original code corresponding to the web page data of the configuration tag keyword, preprocesses the original code according to the introduction order and the priority of the original code, determines the preprocessed target code, and then uses the target code as the input of the JavaScript engine and the browser rendering task, monitors the blank time available for each frame of browser data, and when the available blank time is monitored, reads the browser rendering task queue and determines whether to trigger the browser rendering task scheduling request, and finally responds to the request to execute the browser rendering task scheduling, uses the dynamic task scheduling rules of the preset priority strategy to execute the browser rendering task, and can provide a browser rendering method. This method fully utilizes the browser rendering time through code preprocessing and blank time monitoring, reduces the blocking problem in the browser rendering process, improves rendering efficiency, and obtains better response speed and user experience.

[0084] Another embodiment of the present application provides a browser rendering device, which is applied to any of the above-mentioned browser rendering methods, such as Figure 5 The schematic diagram of the structure of a browser rendering device shown in FIG. 1 includes:

[0085] The obtaining module 501 is used to obtain the original code corresponding to the webpage data configured with the tag keyword, pre-process the original code according to the introduction order and the priority of the original code, and determine the target code after pre-processing;

[0086] A monitoring module 502 is configured to use the target code as input to a JavaScript engine and a browser rendering task, and monitor the available blank time of each frame of data in the browser;

[0087] The judgment module 503 is used to read the browser rendering task queue and determine whether to trigger a browser rendering task scheduling request when the available blank time is monitored;

[0088] The execution module 504 is configured to execute the browser rendering task in response to a request for executing browser rendering task scheduling and using a dynamic task scheduling rule with a preset priority policy.

[0089] Compared with the prior art, the present invention first obtains the original code corresponding to the web page data of the configuration tag keyword, preprocesses the original code according to the introduction order and the priority of the original code, determines the preprocessed target code, and then uses the target code as the input of the JavaScript engine and the browser rendering task, monitors the blank time available for each frame of browser data, and when the available blank time is monitored, reads the browser rendering task queue and determines whether to trigger the browser rendering task scheduling request, and finally responds to the request to execute the browser rendering task scheduling, uses the dynamic task scheduling rules of the preset priority strategy to execute the browser rendering task, and can provide a browser rendering method. This method fully utilizes the browser rendering time through code preprocessing and blank time monitoring, reduces the blocking problem in the browser rendering process, improves rendering efficiency, and obtains better response speed and user experience.

[0090] Another embodiment of the present application provides a browser rendering system, which is applied to any of the above-mentioned browser rendering methods, such as Figure 6 A schematic diagram of a module of a browser rendering system is shown, wherein the system includes:

[0091] A preprocessing module, a priority loading module and a task scheduling module are communicatively connected, wherein the preprocessing module is used to perform original code deconstruction operations corresponding to web page data, execute code module configuration, execute module division, and output the deconstructed target code; the priority loading module is used to normalize the deconstructed target code according to specified categories and priorities, output the execution file corresponding to the target code, monitor the blank time during the browser rendering process, and trigger the task scheduling module after monitoring the blank time; the task scheduling module is used to use the blank time to process the execution file corresponding to the target code, and dynamically adjust the data input of the JavaScript engine according to the priority level of the execution file.

[0092] Exemplarily, the preprocessing module deconstructs the original code, executes code configuration, performs module division, and outputs the deconstructed target code file; the priority loading module normalizes the deconstructed target code file according to the specified category and priority, and outputs the execution file corresponding to the target code; at the same time, it monitors the blank time during the browser rendering process, and triggers the task scheduling module after detecting the available blank time; the task scheduling module uses the blank time to process the execution file corresponding to the target code after code integration, and adjusts the web page data input of the JavaScript engine according to the priority level of the execution file. It can be understood that the scheduling relationship between modules can be as follows: Figure 6As shown in the figure, the preprocessing module first deconstructs the original code, uses the code module configuration to divide the modules, and outputs the deconstructed target code file. Secondly, the priority loading module is responsible for normalizing the code segments according to the specified category and priority, and outputs the executable file corresponding to the target code. Finally, the idle time during the browser rendering process is monitored. The task scheduling module uses the monitored idle time to process the executable file processed by the priority loading module to complete the browser rendering.

[0093] Compared with the prior art, the present invention first obtains the original code corresponding to the web page data of the configuration tag keyword, preprocesses the original code according to the introduction order and the priority of the original code, determines the preprocessed target code, and then uses the target code as the input of the JavaScript engine and the browser rendering task, monitors the blank time available for each frame of browser data, and when the available blank time is monitored, reads the browser rendering task queue and determines whether to trigger the browser rendering task scheduling request, and finally responds to the request to execute the browser rendering task scheduling, uses the dynamic task scheduling rules of the preset priority strategy to execute the browser rendering task, and can provide a browser rendering method. This method fully utilizes the browser rendering time through code preprocessing and blank time monitoring, reduces the blocking problem in the browser rendering process, improves rendering efficiency, and obtains better response speed and user experience.

[0094] An embodiment of the present invention further provides a storage medium storing a computer program, wherein the computer program is configured to execute the steps of any one of the above method embodiments when running.

[0095] Specifically, in this embodiment, the above-mentioned storage medium may be configured to store a computer program for performing the following steps:

[0096] S201: obtaining original code corresponding to web page data configured with tag keywords, preprocessing the original code according to the introduction order and the priority of the original code, and determining a target code after preprocessing;

[0097] S202: Using the target code as input for a JavaScript engine and a browser rendering task, and monitoring the available blank time for each frame of data in the browser;

[0098] S203: When the available blank time is detected, the browser rendering task queue is read and it is determined whether a browser rendering task scheduling request is triggered;

[0099] S204: In response to the request for executing browser rendering task scheduling, the browser rendering task is executed using a dynamic task scheduling rule of a preset priority policy.

[0100] Specifically, in this embodiment, the above-mentioned storage medium may include but is not limited to: a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk, and other media that can store computer programs.

[0101] Compared with the prior art, the present invention first obtains the original code corresponding to the web page data of the configuration tag keyword, preprocesses the original code according to the introduction order and the priority of the original code, determines the preprocessed target code, and then uses the target code as the input of the JavaScript engine and the browser rendering task, monitors the blank time available for each frame of browser data, and when the available blank time is monitored, reads the browser rendering task queue and determines whether to trigger the browser rendering task scheduling request, and finally responds to the request to execute the browser rendering task scheduling, uses the dynamic task scheduling rules of the preset priority strategy to execute the browser rendering task, and can provide a browser rendering method. This method fully utilizes the browser rendering time through code preprocessing and blank time monitoring, reduces the blocking problem in the browser rendering process, improves rendering efficiency, and obtains better response speed and user experience.

[0102] An embodiment of the present invention further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to perform the steps in any one of the above method embodiments.

[0103] Specifically, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.

[0104] Specifically, in this embodiment, the processor may be configured to execute the following steps through a computer program:

[0105] S201: obtaining original code corresponding to web page data configured with tag keywords, preprocessing the original code according to the introduction order and the priority of the original code, and determining a target code after preprocessing;

[0106] S202: Using the target code as input for a JavaScript engine and a browser rendering task, and monitoring the available blank time for each frame of data in the browser;

[0107] S203: When the available blank time is detected, the browser rendering task queue is read and it is determined whether a browser rendering task scheduling request is triggered;

[0108] S204: In response to the request for executing browser rendering task scheduling, the browser rendering task is executed using a dynamic task scheduling rule of a preset priority policy.

[0109] Compared with the prior art, the present invention first obtains the original code corresponding to the web page data of the configuration tag keyword, preprocesses the original code according to the introduction order and the priority of the original code, determines the preprocessed target code, and then uses the target code as the input of the JavaScript engine and the browser rendering task, monitors the blank time available for each frame of browser data, and when the available blank time is monitored, reads the browser rendering task queue and determines whether to trigger the browser rendering task scheduling request, and finally responds to the request to execute the browser rendering task scheduling, uses the dynamic task scheduling rules of the preset priority strategy to execute the browser rendering task, and can provide a browser rendering method. This method fully utilizes the browser rendering time through code preprocessing and blank time monitoring, reduces the blocking problem in the browser rendering process, improves rendering efficiency, and obtains better response speed and user experience.

[0110] It should be noted that for the aforementioned method embodiments, for simplicity of description, they are all expressed as a series of action combinations. However, those skilled in the art should be aware that the present invention is not limited by the order of the actions described, because according to the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.

[0111] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0112] In the several embodiments provided by the present invention, it should be understood that the disclosed devices can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the above-mentioned units is merely a logical functional division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interface, and the indirect coupling or communication connection of devices or units can be electrical or other forms.

[0113] The units described above as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0114] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0115] If the above-mentioned integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable memory. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a memory and includes several instructions for enabling a computer device (which can be a personal computer, server or network device, etc.) to execute all or part of the steps of the above-mentioned methods of each embodiment of the present invention. The aforementioned memory includes: various media that can store program codes, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk.

[0116] The embodiments of the present invention are described in detail above. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core ideas. At the same time, for those skilled in the art, according to the ideas of the present invention, there may be changes in the specific implementation methods and application scopes. In summary, the contents of this specification should not be understood as limiting the present invention.

Claims

1. A browser rendering method, characterized in that: The method comprises: Obtain the original code corresponding to the web page data configured with tag keywords, pre-process the original code according to the introduction order and the priority of the original code, and determine the pre-processed target code; wherein, the deconstruction and integration of the original code is the process of performing pre-processing on the original code to generate the target code, and the tag keywords include JS-DOM, JS-CSS and JS-DATA; each type of the tag keywords includes factors affecting the rendering effect and weights, wherein the factors affecting the rendering effect include at least one of homepage white screen, rendering wait, asynchronous loading, page effect, event response or a combination thereof; the weight is used to determine the priority of the original code; the priority of the original code is determined according to the following formula: in, Indicates the priority of the original code, is the adjustment factor, , Indicates the weight of each type of tag keyword, , ; Using the target code as input to the JavaScript engine and browser rendering task, monitoring the available blank time of each frame data of the browser; When the available blank time is detected, the browser rendering task queue is read and it is determined whether a browser rendering task scheduling request is triggered; In response to a request to execute browser rendering task scheduling, the browser rendering task is executed using a dynamic task scheduling rule of a preset priority policy.

2. The method according to claim 1, characterized in that The target code is used as the input of the JavaScript engine and the browser rendering task, and the blank time available for each frame of browser data is monitored, including: When the JavaScript engine or the browser rendering engine is running, the selenium web driver tool is used to monitor the available blank time of each frame data of the browser, and the monitoring pointer is marked Idle_Flag for the available blank time, wherein the marking value of the monitoring pointer Idle_Flag is 0 or 1.

3. The method according to claim 2, characterized in that The dynamic task scheduling rules of the preset priority strategy include: Set the browser rendering task monitoring pointer , respectively monitor the browser rendering task queue and the monitoring pointer is marked Idle_Flag; wherein, , , the browser rendering task queue uses the tag keyword as the index key value; When any , browser rendering task monitoring pointer When all pointers are empty, stop blank time monitoring and continue to update the browser rendering task monitoring pointer of the browser rendering task queue , until the browser rendering task queue is not empty, start blank time monitoring; When it is detected that the monitoring pointer marked Idle_Flag is 1, the browser rendering task queue is read, and according to the EventLoop event loop principle, the code with higher priority in the task queue is executed first until the browser rendering task is completed.

4. The method according to claim 3, characterized in that The dynamic task scheduling rules of the preset priority strategy also include: When the user triggers a browser reflow event, determine whether there is dependent data; If there is no dependent data, dynamic task preemption is performed, giving priority to responding to the browser reordering event; If there is any unobtained dependent data, the event-dependent module will be dynamically scheduled first and executed according to the scheduling rules until the browser rendering task is completed.

5. A browser rendering device, characterized in that: The device comprises: An acquisition module is used to obtain the original code corresponding to the web page data configured with tag keywords, preprocess the original code according to the introduction order and the priority of the original code, and determine the preprocessed target code; wherein, the deconstruction and integration of the original code is the process of performing preprocessing on the original code to generate the target code, and the tag keywords include JS-DOM, JS-CSS and JS-DATA; each type of the tag keyword includes factors and weights that affect the rendering effect, wherein the factors that affect the rendering effect include at least one of homepage white screen, rendering wait, asynchronous loading, page effect, event response or a combination thereof; the weight is used to determine the priority of the original code; the priority of the original code is determined according to the following formula: in, Indicates the priority of the original code, is the adjustment factor, , Indicates the weight of each type of tag keyword, , ; A monitoring module, configured to use the target code as input to a JavaScript engine and a browser rendering task, and monitor the blank time available for each frame of data in the browser; A judgment module is used to read the browser rendering task queue and determine whether to trigger a browser rendering task scheduling request when the available blank time is monitored; The execution module is used to respond to a request for executing browser rendering task scheduling and execute the browser rendering task using a dynamic task scheduling rule with a preset priority policy.

6. A storage medium, characterized in that The storage medium stores a computer program, wherein the computer program is configured to execute the method according to any one of claims 1 to 4 when executed.

7. An electronic device comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to run the computer program to perform the method according to any one of claims 1 to 4.

Images