Code processing method and device, electronic equipment, storage medium and program product
By processing web page code labeling and drawing operations in the background thread, the number of DOM nodes is reduced, the problem of low code labeling display efficiency in the prior art is solved, and more efficient code display is achieved.
Patent Information
- Application Number
- CN202410018791.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-01-03
- Publication Date
- 2025-07-04
AI Technical Summary
In the prior art, when using the document object model (DOM) to process the code, it leads to high computing resource overhead and slow code display efficiency.
The code display request and canvas data are sent to the background thread through the main thread. The background thread filters and parses the target web page code, generates a set of matching relationships, and draws the mark based on the canvas data, and finally displays the mark web page code through the main thread.
Reduces the number and operation of DOM nodes, avoids main thread blocking, and improves the efficiency of code marking display.
Smart Images
Figure CN120256759A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the technical field of code processing, and in particular to a code processing method, apparatus, electronic device, storage medium, and program product. The storage medium is a computer-readable storage medium, and the program product is a computer program product. Background Art
[0002] Scenarios where it is often necessary to display the code of a web page on the web page are frequently encountered. The code of a web page is usually string text. To improve the readability of the code, some strings in the code are marked and displayed, such as highlighted display. Marked display can refer to using a specific format or style, etc. to highlight the code, thereby helping users read more easily and making it easier for users to understand the structure and syntax of the code.
[0003] Currently, the general method for marking and displaying some strings of code is to process the code through the Document Object Model (DOM). However, this method of processing code using the Document Object Model (DOM) requires creating new DOM nodes. The more code there is, the more new DOM nodes are created, which will result in a large computational resource overhead for the electronic device and thus slower efficiency in marking and displaying the code.
[0004] In summary, there is currently a problem of slow display efficiency in marking and displaying code. Summary of the Invention
[0005] Embodiments of this application provide a code processing method, apparatus, electronic device, storage medium, and program product, which can improve the display efficiency of marking and displaying code.
[0006] A code processing method includes:
[0007] Obtain a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and canvas data to a background thread through the main thread;
[0008] Based on the code display request, filter out target web page code from the web page code through the background thread, and parse the target web page code to obtain target code elements and code marking data;
[0009] Match the target code elements and the code marking data to obtain a set of matching relationships for the target code elements;
[0010] Based on the set of matching relationships and the canvas data, perform labeled drawing on the web page code to obtain the labeled web page code, where the labeled web page code includes the labeled code elements corresponding to the target code elements;
[0011] Send the labeled web page code to the main thread through the background thread, and display the labeled web page code through the main thread.
[0012] Correspondingly, an embodiment of the present application provides a code processing device, including:
[0013] An acquisition unit, which can be used to acquire a code display request including web page code and the canvas data corresponding to the web page code, and send the code display request and the canvas data to the background thread through the main thread;
[0014] A screening unit, which can be used to screen out the target web page code in the web page code based on the code display request through the background thread, and parse the target web page code to obtain the target code elements and the code labeling data;
[0015] A matching unit, which can be used to match the target code elements and the code labeling data to obtain a set of matching relationships of the target code elements;
[0016] A drawing unit, which can be used to perform labeled drawing on the web page code based on the set of matching relationships and the canvas data to obtain the labeled web page code, where the labeled web page code includes the labeled code elements corresponding to the target code elements;
[0017] A display unit, which can be used to send the labeled web page code to the main thread through the background thread, and display the labeled web page code through the main thread.
[0018] Optionally, in some embodiments, the matching unit can specifically be used to obtain the target class name corresponding to the target code element and the candidate class name corresponding to the code labeling data; based on the candidate class name and the target class name, match the target code element and the code labeling data to obtain a set of matching relationships of the target code elements.
[0019] Optionally, in some embodiments, the matching unit can specifically be used to query the reference class name identical to the target class name in the candidate class name; when there is a reference class name, match the code labeling data corresponding to the reference class name and the code labeling data corresponding to the target class name to obtain the target matching relationship between the target code element and the code labeling data; based on the target matching relationship, generate a set of matching relationships of the target code elements.
[0020] Optionally, in some embodiments, the matching unit may specifically obtain the element attributes of the target code element, and based on the element attributes, predict the element display data of the target code element; bind the element display data and the target matching relationship to obtain the matching relationship among the target code element, the code identification data, and the element display data; and generate a set of matching relationships for the target code element based on the matching relationship.
[0021] Optionally, in some embodiments, the screening unit may specifically be used to identify the web page source code and the style code corresponding to the web page source code in the target web page code; parse the web page source code to obtain the target code element, and parse the style code to obtain the code identification data.
[0022] Optionally, in some embodiments, the drawing unit may specifically be used to, through a background thread, based on the canvas data, call a preset drawing interface, and determine the position of the target code element in the web page code through the preset drawing interface; perform marked drawing on the target code element based on the position and the set of matching relationships to obtain the marked code element corresponding to the target code element; and update the web page code according to the marked code element to obtain the marked web page code.
[0023] Optionally, in some embodiments, the obtaining unit may specifically be used to obtain the web page source code of the web page and the style code corresponding to the web page source code through the main thread; generate a code display request including the web page code based on the web page source code and the style code; and create the canvas data corresponding to the web page code through the main thread.
[0024] In addition, an embodiment of the present application further provides an electronic device, including a processor and a memory, where the memory stores an application program, and the processor is configured to run the application program in the memory to implement the code processing method provided by the embodiment of the present invention.
[0025] In addition, an embodiment of the present application further provides a computer-readable storage medium, where the computer-readable storage medium stores a computer program, and the computer program is suitable for being loaded by a processor to execute any one of the code processing methods provided by the embodiments of the present application.
[0026] In addition, an embodiment of the present application further provides a computer program product, including a computer program, and when the computer program is executed by a processor, it implements any one of the code processing methods provided by the embodiments of the present application.
[0027] This application can obtain a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and canvas data to a background thread through the main thread; based on the code display request through the background thread, filter out the target web page code from the web page code, and parse the target web page code to obtain target code elements and code identification data; match the target code elements and code identification data to obtain a set of matching relationships for the target code elements; based on the set of matching relationships and canvas data, perform label drawing on the web page code to obtain a labeled web page code, where the labeled web page code includes labeled code elements corresponding to the target code elements; send the labeled web page code to the main thread through the background thread, and display the labeled web page code through the main thread. Since this application can use the main thread to send a code display request containing web page code and canvas data to the background thread, in this way, the background thread can process the web page code in the background to obtain target code elements and code identification data, and then, based on the canvas data and the set of matching relationships obtained by matching the target code elements and code identification data, draw a labeled web page code including labeled code elements, so as to quickly display the labeled web page code through the main thread; it can be understood that this application can transfer the label processing and drawing operations of the web page code to the background thread, thereby avoiding blocking the main thread. Moreover, it can also significantly reduce the number and operations of DOM nodes, thereby reducing computing resources to improve the display efficiency of the web page code. Brief Description of the Drawings
[0028] To more clearly illustrate the technical solutions in the embodiments of this application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are only some embodiments of this application. For those skilled in the art, without creative efforts, other drawings can also be obtained based on these drawings.
[0029] Figure 1 is a schematic diagram of the scenario of the code processing method provided by the embodiment of this application;
[0030] Figure 2 is a first schematic flowchart of the code processing method provided by the embodiment of this application;
[0031] Figure 3 is a first schematic diagram of the display of the labeled web page code provided by the embodiment of this application;
[0032] Figure 4 is a second schematic diagram of the display of the labeled web page code provided by the embodiment of this application;
[0033] Figure 5 is a third schematic diagram of the display of the labeled web page code provided by the embodiment of this application;
[0034] Figure 6 It is the fourth schematic diagram showing the display of web page code provided by the embodiment of the present application;
[0035] Figure 7 It is the second flowchart of the code processing method provided by the embodiment of the present application;
[0036] Figure 8 It is the data transmission schematic diagram of the code processing method provided by the embodiment of the present application;
[0037] Figure 9 It is the structural schematic diagram of the code processing device provided by the embodiment of the present application;
[0038] Figure 10 It is the structural schematic diagram of the electronic device provided by the embodiment of the present application. Specific Embodiments
[0039] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative efforts fall within the scope of protection of the present application.
[0040] The embodiment of the present application provides a code processing method, device, electronic device and computer-readable storage medium. Among them, the code processing device can be integrated in the electronic device, and the electronic device can be a server or a terminal device, etc.
[0041] Among them, the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, and can also be a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, network acceleration services (Content Delivery Network, CDN), and big data and artificial intelligence platforms. The terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, a vehicle-mounted terminal, an aircraft, etc., but is not limited thereto. The terminal and the server can be directly or indirectly connected through wired or wireless communication methods, and the present application does not make any restrictions here.
[0042] For example, refer to Figure 1, taking the integration of the code processing device in an electronic device as an example, the electronic device can obtain a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and canvas data to a background thread through the main thread; based on the code display request through the background thread, filter out the target web page code from the web page code, and parse the target web page code to obtain target code elements and code identification data; match the target code elements and code identification data to obtain a set of matching relationships of the target code elements; based on the set of matching relationships and canvas data, perform label drawing on the web page code to obtain a labeled web page code, and the labeled web page code includes labeled code elements corresponding to the target code elements; send the labeled web page code to the main thread through the background thread, and display the labeled web page code through the main thread.
[0043] Among them, the present application provides a code processing method. This code processing method can transfer the label processing and drawing operations of web page code to a background thread, thereby avoiding blocking the main thread. Moreover, the present application can also significantly reduce the number and operations of DOM nodes, thereby reducing computing resources to improve the display efficiency of web page code.
[0044] The following will be described in detail respectively. It should be noted that the description order of the following embodiments does not limit the preferred order of the embodiments.
[0045] This embodiment will be described from the perspective of the code processing device. The code processing device can be specifically integrated in an electronic device, which can be a server or a terminal device, etc.; among them, the terminal can include devices such as a tablet computer, a laptop computer, a personal computer (PC, Personal Computer), a wearable device, a virtual reality device, or other intelligent devices that can obtain data.
[0046] As Figure 2 shown, the specific process of this code processing method is as steps S201 to S205:
[0047] S201. Obtain a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and canvas data to a background thread through the main thread.
[0048] Among them, the web page code may refer to the relevant code of the web page. For example, the web page code may include the source code and style code of the web page. In addition, the web page code may also include code language parameters. Among them, the web page source code is, for example, a markup language (HTML, HyperText Markup Language) code, which is used to define the structure and content of the web page. The style code is, for example, a style sheet language (CSS, Cascading Style Sheets) code, which is used to define the style and layout of the web page, such as setting attributes such as the color, font, size, border, and spacing of code elements.
[0049] Among them, the code display request may refer to a request for marking at least part of the code in the web page code. It can be understood here that by marking the code in this application, the code can be clearly understood by the user when it is displayed.
[0050] Among them, the canvas data may refer to data used at least for drawing the web page code in the background.
[0051] Among them, the main thread can be used at least for interacting with the background thread, processing the interaction between the web page and the user, and displaying and marking the web page code.
[0052] Among them, the background thread is a thread that runs independently of the main thread and is at least used for marking the web page code.
[0053] For step S201, there are multiple ways to perform the step of "obtaining a code display request containing the web page code and the canvas data corresponding to the web page code". For example, a code marking page is displayed. The code marking page includes a code marking control. In response to a trigger operation on the code marking control, a code display request containing the web page code and the canvas data corresponding to the web page code is obtained.
[0054] Another example is that the way to perform the step of "obtaining a code display request containing the web page code and the canvas data corresponding to the web page code" can be: obtaining the source code of the web page and the style code corresponding to the source code of the web page through the main thread; generating a code display request containing the web page code based on the source code of the web page and the style code; creating the canvas data corresponding to the web page code through the main thread.
[0055] Among them, the source code of the web page and the style code corresponding to the source code of the web page can be obtained by the main thread calling a code acquisition interface. Specifically, in this application, a code marking display page can be displayed. The code marking display page includes a code marking display control. In response to a trigger operation on the code marking display control, the main thread calls the code acquisition interface to obtain the source code of the web page and the style code corresponding to the source code of the web page.
[0056] Among them, after obtaining the web page source code and style code, the web page code can be generated based on the web page source code and style code, and then a code display request including the web page code is generated.
[0057] Among them, the step of "creating canvas data corresponding to the web page code through the main thread" can be parallel to the step of "obtaining the web page source code of the web page and the style code corresponding to the web page source code through the main thread". Specifically, when responding to the trigger operation for the code identifier display control, the present application can also create canvas data corresponding to the web page code through the main thread.
[0058] For step S201, the method of the step of "sending the code display request and canvas data to the background thread through the main thread" can be: using a data sending function through the main thread to send the code display request and canvas data to the background thread. Among them, the data sending function can be, for example, worker.postMessage().
[0059] Before step S201, the present application can first create a background thread. Specifically, the present application can create a canvas element in the page through the main thread and introduce a creation file for creating a background thread, such as a JavaScript file. The canvas element can be used to display the marked web page code. Then, the main thread uses the JavaScript file to create a background instance such as a Web Worker instance to create a background thread. Then, based on the canvas element, the main thread calls a canvas creation function such as the TransferControlToOffscreen() function to create canvas data corresponding to the web page code.
[0060] Among them, the width and height of the canvas data can be set to be the same as the width and height of the canvas element.
[0061] Then, the code display request and canvas data can be sent to the background thread through the main thread using a data sending function. Then, in the JavaScript code corresponding to the background thread, the background thread can receive the canvas data from the main thread, that is, the OffscreenCanvas instance. The background thread can call a request processing function to receive the code display request.
[0062] S202. Based on the code display request, the background thread filters out the target web page code in the web page code and parses the target web page code to obtain target code elements and code identifier data.
[0063] Among them, the target code elements can refer to the code syntax elements of the web page code. For example, the code syntax elements can include variables, keywords, operators, comments, and strings.
[0064] Among them, the code-marked data may refer to the data marked in the web page code. For example, the code-marked data may include at least one of code highlighting data, code graphic data, and code symbol data.
[0065] The so-called code highlighting data may refer to the data that makes at least part of the code in the web page code highlighted; for example, the code highlighting data may include at least one of font color values and background color values.
[0066] The so-called code graphic data may refer to the data that makes at least part of the code in the web page code be identified by a graphic; for example, the graphic may be a regular image or an irregular graphic. For example, when the graphic is a square, at least part of the code in the web page code, such as the target code element, may be displayed within the square.
[0067] The so-called code symbol data may refer to the data that represents at least part of the code in the web page code by symbols; for example, the symbols may be wavy lines, full stops, emphasis points, etc.
[0068] Among them, the target web page code may include at least one of the web page source code and the style code.
[0069] After this application sends the code display request and the canvas data to the background thread through the main thread, the web page code can be processed by the background thread.
[0070] Specifically, the method of "filtering out the target web page code from the web page code based on the code display request through the background thread" may be: obtaining the first preset file extension and the second preset file extension based on the code display request through the background thread; extracting the first web page code corresponding to the first preset file extension from the web page code, and using the first web page code as the web page source code; obtaining the second web page code corresponding to the second preset file extension from the web page code, and using the second web page code as the style code; generating the target web page code based on the web page source code and the style code.
[0071] Among them, the method of the step "extracting the first web page code corresponding to the first preset file extension from the web page code" may be: obtaining the file extension in the web page code; comparing the file extension with the first preset file extension; when the file extension is the same as the first preset file extension, using the web page code with the same file extension as the first preset file extension as the first web page code corresponding to the first preset file extension.
[0072] Among them, the method of the step "obtaining the second web page code corresponding to the second preset file extension from the web page code" may refer to the above step of "extracting the first web page code corresponding to the first preset file extension from the web page code", which will not be elaborated here.
[0073] Of course, in addition to the above, when the main thread obtains a code display request containing web page code, it can separately package the web page source code and the style code in the web page code to obtain a web page source code set and a style code set; then, label the web page source code set and the style code set respectively to obtain a web page source code set carrying a first identifier and a style code set carrying a second identifier.
[0074] Based on this, the method of "filtering out the target web page code from the web page code by the background thread based on the code display request" can be: extracting the first identifier and the second identifier from the web page code by the background thread based on the code display request; comparing the first identifier with a first preset identifier; when the first identifier and the first preset identifier are the same, extracting the web page source code set corresponding to the first identifier from the web page code; comparing the second identifier with a second preset identifier; when the second identifier and the second preset identifier are the same, extracting the style code set corresponding to the second identifier from the web page code; using the web page source code included in the web page source code set and the style code included in the style code set as the target web page code.
[0075] After obtaining the target web page code in this application, the target web page code can be parsed. Specifically, the method of "parsing the target web page code to obtain target code elements and code marking data" can be: identifying the web page source code and the style code corresponding to the web page source code in the target web page code; parsing the web page source code to obtain target code elements, and parsing the style code to obtain code marking data.
[0076] Among them, the method of the step "identifying the web page source code and the style code corresponding to the web page source code in the target web page code" can be: obtaining the file extension of the target web page code by the background thread; when the file extension is the first file extension, determining that the target web page code is the web page source code; when the file extension is the second file extension, determining that the target web page code is the style code corresponding to the web page source code.
[0077] Alternatively, the method of the step "identifying the web page source code and the style code corresponding to the web page source code in the target web page code" can be: obtaining the identifier of the target web page code by the background thread; when the identifier is the first identifier, determining that the target web page code is the web page source code; when the identifier is the second identifier, determining that the target web page code is the style code corresponding to the web page source code.
[0078] Among them, the method of the step "parsing the web page source code to obtain target code elements" can be: calling a parsing tool through a request processing function to parse the web page source code to obtain target code elements. Among them, the parsing tool can be a third-party tool, such as highlight.js.
[0079] Specifically, for the web page source code, after this application parses the web page source code, a parsing result can be generated. The parsing result can be an HTML tag with a specific CSS class name. The HTML tag with the specific CSS class name can include a target code element and a target class name corresponding to the target code element. Among them, the target class name can be a CSS class name. For example, the parsing result can be as follows:
[0080] <span class＝"hljs-keyword">function
[0081] <span class＝"hljs-function">hello
[0082] <span class＝"hljs-string">"Hello,world!"
[0083] Among them, span can refer to a tag; "hljs-keyword", "hljs-function", "hljs-string" can refer to the target class name; function, hello, "Hello,world!" can refer to the target code element.
[0084] Among them, the method of the step "parse the style code to obtain code identification data" can be: through a request processing function, call a candidate parsing tool to parse the style code to obtain code identification data. Among them, the candidate parsing tool can be a third-party tool, such as css-tree.
[0085] Specifically, for the style code, after this application parses the style code, a target parsing result can be generated. The target parsing result can include code identification data and a candidate class name corresponding to the code identification data. For example, taking the code identification data as code highlighting data as an example, the target parsing result can be as follows:
[0086] "hljs":"#24292e",
[0087] "hljs-doctag":"#d73a49",
[0088] "hljs-keyword":"#d73a49",
[0089] "hljs-meta hljs-keyword":"#d73a49",
[0090] "hljs-template-tag":"#d73a49",
[0091] "hljs-template-variable":"#d73a49",
[0092] "hljs-type":"#d73a49",
[0093] "hljs-variable language_":"#d73a49",
[0094] "hljs-title":"#6f42c1",
[0095] "hljs-title class_":"#6f42c1",
[0096] "hljs-title class_inherited__":"#6f42c1",
[0097] "hljs-title function_":"#6f42c1",
[0098] "hljs-attr":"#005cc5",
[0099] "hljs-regexp":"#032f62",
[0100] "hljs-string":"#032f62",
[0101] "hljs-deletion":"#b31d28"
[0102] }
[0103] Among them, "hljs", "hljs-doctag", "hljs-keyword", "hljs-meta,hljs-keyword", "hljs-template-tag", "hljs-template-variable", "hljs-type", "hljs-variablelanguage_", "hljs-title", "hljs-title class_", "hljs-title class_inherited__", "hljs-title function_", "hljs-attr", "hljs-regexp", "hljs-string", "hljs-deletion" may refer to candidate class names; "#24292e", "#d73a49", "#d73a49", "#d73a49", "#d73a49", "#d73a49", "#d73a49", "#d73a49", "#6f42c1", "#6f42c1", "#6f42c1", "#6f42c1", "#005cc5", "#032f62", "#032f62", "#b31d28" may refer to code highlighting data. Specifically, the code highlighting data may include font color values.
[0104] S203. Match the target code element and the code marking data to obtain a set of matching relationships of the target code element.
[0105] After this application obtains the target code element and the code marking data, it can match the target code element and the code marking data. Specifically, for step S203, the method of the step "Match the target code element and the code marking data to obtain a set of matching relationships of the target code element" can be as shown in steps S2031 to S2032:
[0106] S2031. Obtain the target class name corresponding to the target code element and the candidate class name corresponding to the code marking data.
[0107] Among them, the target class name may be carried by the target code element; the candidate class name may be carried by the code marking data. Therefore, this application can directly obtain the target class name from the target code element and obtain the candidate class name from the code marking data.
[0108] S2032. Based on the candidate class name and the target class name, match the target code element and the code marking data to obtain a set of matching relationships of the target code element.
[0109] After obtaining the candidate class name and the target class name, this application can match the target code elements and the code identification data. Specifically, the method of the step "Based on the candidate class name and the target class name, match the target code elements and the code identification data to obtain the matching relationship set of the target code elements" can be: query the reference class name identical to the target class name in the candidate class name; when there is a reference class name, match the code identification data corresponding to the reference class name and the code identification data corresponding to the target class name to obtain the target matching relationship between the target code elements and the code identification data; based on the target matching relationship, generate the matching relationship set of the target code elements.
[0110] Among them, this application can use the target matching relationship as the matching relationship set; or, the method of "Based on the target matching relationship, generate the matching relationship set of the target code elements" can also be: obtain the element attributes of the target code elements, and based on the element attributes, predict the element display data of the target code elements; bind the element display data and the target matching relationship to obtain the matching relationship among the target code elements, the code identification data, and the element display data; based on the matching relationship, generate the matching relationship set of the target code elements.
[0111] Among them, the element attributes can refer to the style attributes of the target code elements, such as the size of the font, the type of the font, and so on.
[0112] Among them, the method of the step "Obtain the element attributes of the target code elements" can be: obtain the target parsing result corresponding to the style code, and the target parsing result can include, in addition to the code identification data and the candidate class name corresponding to the code identification data, the candidate style attributes corresponding to the candidate class name; based on the target class name of the target code elements, determine the element attributes corresponding to the target code elements in the target parsing result.
[0113] Specifically, it can be based on the target category of the target code elements to find the class name identical to the target class name in the candidate class names of the target parsing result; extract the candidate style attributes corresponding to the class name in the target parsing result, and use the candidate style attributes corresponding to the class name as the element attributes of the target code elements.
[0114] Among them, the candidate style attributes are, for example, the font size, the type of the font, and so on.
[0115] Among them, the element display data can refer to the relevant data when the target code elements are displayed. For example, the element display data can include the display width.
[0116] Among them, this application can adopt a data prediction model to predict the element display data of the target code element based on the element attributes. Specifically, this application can adopt a data prediction model to respectively extract features from the element attributes and the target code element to obtain the attribute features corresponding to the element attributes and the element features corresponding to the target code element; based on the attribute features and the target code features, predict the target code element to obtain the element display data of the target code element.
[0117] For example, this application can obtain the element attributes of the target code element, and based on the element attributes, predict the display width of the target code element, and use the display width as the element display data; then, bind the element display data and the target matching relationship to obtain the matching relationship among the target code element, the code identification data, and the element display data; based on the matching relationship, generate the matching relationship set of the target code element. For example, taking the code identification data as the code highlighting data, the matching relationship set is as follows:
[0119] {"value":"function","color":"#d73a49","width":67.2109375},
[0120] {"value":"","color":"black","width":8.4013671875},
[0121] {"value":"hello","color":"#6f42c1","width":42.0068359375},
[0122] {"value":"(","color":"black","width":8.4013671875},
[0123] {"value":"){","color":"black","width":25.2041015625}
[0125] Among them, "function", "", "hello", "(", "){" can refer to the target code element; "#d73a49", "black", "#6f42c1" can refer to the code highlighting data of the target code element; 67.2109375, 8.4013671875, 42.0068359375, 8.4013671875, and 25.2041015625 can refer to the display width of the target code element.
[0126] S204. Based on the matching relationship set and the canvas data, perform marking drawing on the web page code to obtain the marked web page code.
[0127] Among them, the marked web page code includes the marked code elements corresponding to the target code elements.
[0128] After obtaining the matching relationship set in this application, marking drawing can be performed on the web page code. Specifically, the method of the step "Based on the matching relationship set and the canvas data, perform marking drawing on the web page code to obtain the marked web page code" can be as follows: Through a background thread, based on the canvas data, call a preset drawing interface, and determine the position of the target code element in the web page code through the preset drawing interface; Based on the position and the matching relationship set, perform marking drawing on the target code element to obtain the marked code element corresponding to the target code element; Update the web page code according to the marked code element to obtain the marked web page code.
[0129] Among them, the preset drawing interface can be an interface that is pre-set for performing marking drawing on the web page code.
[0130] Among them, the step "Based on the matching relationship set and the canvas data, perform marking drawing on the web page code to obtain the marked web page code" can be implemented through the preset drawing interface.
[0131] Among them, the method of the step "Based on the position and the matching relationship set, perform marking drawing on the target code element to obtain the marked code element corresponding to the target code element" can be as follows: Based on the matching relationship set, determine the target code marking data and the target element display data corresponding to the target code element; Based on the position of the target code element, perform marking settings such as highlighting settings on the target code element with the target code marking data and the target element display data to obtain the marked code element corresponding to the target code element.
[0132] Among them, the marked web page code can include marked code elements and web page code that does not require marking processing.
[0133] For example, this application can call a preset drawing interface such as the Canvas2D API or the WebGL API based on the OffscreenCanvas of the canvas data, and determine the position of the target code element in the web page code through the preset drawing interface; Through the preset drawing interface, based on the position and the matching relationship set, perform marking drawing on the target code element to obtain the marked code element corresponding to the target code element; Through the preset drawing interface, update the web page source code included in the web page code according to the marked code element to obtain the marked web page code.
[0134] S205. Send the marked web page code to the main thread through a background thread, and display the marked web page code through the main thread.
[0135] Regarding step S205, the marked web page code can be sent to the main thread through a background thread using a data sending function. The data format of the marked web page code can be ImageBitmap or ArrayBuffer.
[0136] Among them, ImageBitmap and ArrayBuffer are two important objects for processing images and binary data in JavaScript. ImageBitmap represents a bitmap image; ArrayBuffer is a buffer for storing general binary data.
[0137] Then, when the main thread obtains the marked web page code, the marked web page code is rendered into the canvas element canvas on the web page, and the marked web page code is displayed. Among them, the displayed marked web page code can be as Figure 3 shown.
[0138] The marked web page code displayed by the main thread can be as Figures 4 to 6 shown, among which, Figures 3 to 6 the content in the dashed box can be the marked code element.
[0139] Specifically, for Figure 4 , Figure 4 the displayed web page code can be the source web page code. Figure 4 From the comparison of the web page code and the marked web page code, it can be seen that the marked display of the code syntax, that is, different colors and styles are applied to different types of texts such as keywords, variables, strings, comments, etc. in the string of the source web page code, so that the readability of the code can be improved, making it easier for users to understand the structure and syntax of the code, thereby enhancing the experience.
[0140] Specifically, for Figure 5 , the marked web page code of this application can be displayed in a web page editor. For Figure 6 , the marked web page code of this application can be displayed in a mouse hover pop-up window for querying the marked web page code.
[0141] After step S205 of this application, when the main thread detects an interaction operation on the marked web page code, the interaction parameters corresponding to the interaction operation are obtained, and the interaction parameters are sent to the background thread through the main thread; the marked web page code is updated based on the interaction parameters through the background thread to obtain the updated marked web page code, and the updated marked web page code is synchronously displayed on the canvas element of the main thread.
[0142] Among them, the interaction operations are such as scroll operations and zoom operations; when the interaction operation is a scroll operation, the interaction parameter is the scroll position parameter; when the interaction operation is a zoom operation, the interaction parameter is the zoom ratio.
[0143] In summary, the present application has the following advantages:
[0144] 1) Performance advantage: Processing the code marking in a background thread can avoid blocking the main thread and will not affect the responsiveness of the user interface and interactions. It is particularly suitable for processing a large amount of code or running on devices with low performance.
[0145] 2) Parallel computing: Web Worker allows code to be executed in a background thread, thus enabling parallel computing between the main thread and the background thread. For example, the main thread is handling user interaction operations while the background thread is performing code marking processing. This can make full use of the computing power of multi-core CPUs and improve the speed of code syntax marking processing.
[0146] 3) Offscreen rendering: Using the canvas data OffscreenCanvas can perform drawing in the background buffer without directly operating on DOM nodes. This helps reduce performance overheads such as reflows and repaints and improves drawing efficiency. When the marked web code is drawn, it only needs to be transferred back to the main thread and rendered into the actual canvas element canvas.
[0147] 4) Style isolation: The marked code is drawn on the OffscreenCanvas rather than directly inserted into the DOM. Therefore, it will not be affected by external CSS styles, ensuring that the marked styles remain consistent.
[0148] Compared with traditional code marking solutions, the present application has better performance and flexibility. This enables the present application to provide a better user experience when processing a large amount of code or running on devices with low performance.
[0149] This application can obtain a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and canvas data to a background thread through the main thread; based on the code display request through the background thread, filter out the target web page code from the web page code, and parse the target web page code to obtain target code elements and code identification data; match the target code elements and code identification data to obtain a set of matching relationships for the target code elements; based on the set of matching relationships and the canvas data, perform label drawing on the web page code to obtain a labeled web page code, where the labeled web page code includes labeled code elements corresponding to the target code elements; send the labeled web page code to the main thread through the background thread, and display the labeled web page code through the main thread. Since this application can use the main thread to send a code display request containing web page code and canvas data to the background thread, in this way, the background thread can process the web page code in the background to obtain target code elements and code identification data, and then, based on the canvas data and the set of matching relationships obtained by matching the target code elements and code identification data, draw a labeled web page code containing labeled code elements, so as to quickly display the labeled web page code through the main thread; it can be understood that this application can transfer the label processing and drawing operations of the web page code to the background thread, thereby avoiding blocking the main thread. Moreover, it can also significantly reduce the number and operations of DOM nodes, thereby reducing computing resources to improve the display efficiency of the web page code.
[0150] According to the method described in the above embodiments, the following will give further detailed examples.
[0151] In this embodiment, it will be specifically integrated in an electronic device, and the electronic device is a terminal.
[0152] Such as Figure 7 shown, a code processing method, the specific process is as steps S501 to S509:
[0153] S501. The electronic device obtains a code display request containing web page code and canvas data corresponding to the web page code through the main thread.
[0154] Specifically, the electronic device can obtain the web page source code of the web page and the style code corresponding to the web page source code through the main thread; based on the web page source code and the style code, generate a code display request containing the web page code; create canvas data corresponding to the web page code through the main thread.
[0155] S502. The electronic device sends the code display request and the canvas data to the background thread through the main thread.
[0156] Specifically, the electronic device can use a data sending function through the main thread to send the code display request and the canvas data to the background thread.
[0157] S503. The electronic device filters out the target web page code from the web page code through a background thread based on the code display request.
[0158] Among them, the target web page code includes the web page source code and the style code.
[0159] Specifically, the electronic device can obtain the first preset file extension and the second preset file extension through a background thread based on the code display request; extract the first web page code corresponding to the first preset file extension from the web page code and use the first web page code as the web page source code; obtain the second web page code corresponding to the second preset file extension from the web page code and use the second web page code as the style code; generate the target web page code based on the web page source code and the style code.
[0160] S504. The electronic device parses the target web page code through a background thread to obtain the target code elements and the code identification data.
[0161] Specifically, the electronic device can identify the web page source code and the style code corresponding to the web page source code in the target web page code; parse the web page source code to obtain the target code elements, and parse the style code to obtain the code identification data.
[0162] S505. The electronic device obtains the target class name corresponding to the target code elements and the candidate class name corresponding to the code identification data.
[0163] Among them, the target class name can be carried by the target code elements; the candidate class name can be carried by the code identification data.
[0164] S506. The electronic device matches the target code elements and the code identification data based on the candidate class name and the target class name to obtain a set of matching relationships of the target code elements.
[0165] Specifically, the electronic device can query the reference class name identical to the target class name in the candidate class name; when there is a reference class name, match the code identification data corresponding to the reference class name and the code identification data corresponding to the target class name to obtain the target matching relationship between the target code elements and the code identification data; generate a set of matching relationships of the target code elements based on the target matching relationship.
[0166] S507. The electronic device performs marking drawing on the web page code based on the set of matching relationships and the canvas data to obtain the marked web page code containing the marked code elements.
[0167] Specifically, the electronic device can, through a background thread, based on the canvas data, call a preset drawing interface, and determine the position of the target code element in the web page code through the preset drawing interface; based on the position and the set of matching relationships, perform marked drawing on the target code element to obtain a marked code element corresponding to the target code element; update the web page code according to the marked code element to obtain a marked web page code.
[0168] S508. The electronic device sends the marked web page code to the main thread through a background thread.
[0169] Specifically, the electronic device can send the marked web page code to the main thread through a background thread using a data sending function.
[0170] S509. The electronic device displays the marked web page code through the main thread.
[0171] Regarding steps S501 to S509, further elaboration is provided here. As Figure 8 shown, here, the code marking data is taken as code highlighting data for elaboration.
[0172] Regarding the canvas data, the electronic device creates a canvas element in the page through the main thread, and based on the canvas element, calls a canvas creation function such as the TransferControlToOffscreen() function through the main thread to create the canvas data corresponding to the web page code. Then, the electronic device sends the canvas data to the background thread through the data sending function worker.postMessage(). Then, the electronic device can receive the canvas data through the background thread.
[0173] Regarding the web page code, the electronic device can call a code acquisition interface through the main thread to obtain the web page source code of the web page and the style code corresponding to the web page source code; based on the web page source code and the style code, generate the web page code, and generate a code display request including the web page code based on the web page code. Then, the code display request can be sent to the background thread through the main thread. The background thread can receive the code display request sent by the main thread.
[0174] Then, the electronic device can, through the background thread, based on the code display request, screen out the web page source code and the style code in the web page code, and use the web page source code and the style code as the target web page code.
[0175] Regarding the web page source code, the electronic device can parse the web page source code through the background thread to generate a parsing result; extract the target code element from the parsing result. Regarding the style code, parse the style code to obtain the code highlighting data.
[0176] Then, match the target code element with the code highlighting data to obtain a set of matching relationships for the target code element. Then, the object acquisition policy such as the getcontext method can be called based on the canvas data through the background thread to obtain a drawing context object such as OffscreenCanvasRenderingContext2D. Then, a preset drawing interface can be obtained through the drawing context object. Then, through the preset drawing interface, determine the position of the target code element in the web page code; based on the position and the set of matching relationships, perform highlighting drawing on the target code element to obtain a highlighted code element corresponding to the target code element; according to the marked code element such as the highlighted code element, update the web page code to obtain a marked web page code such as a highlighted web page code.
[0177] Then, the marked web page code can be sent to the main thread through the background thread, and the marked web page code can be displayed using a canvas element through the main thread.
[0178] For the specific implementation of each of the above operations, reference can be made to the previous embodiments and will not be elaborated here.
[0179] This application can obtain a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and canvas data to the background thread through the main thread; based on the code display request through the background thread, filter out the target web page code in the web page code, and parse the target web page code to obtain the target code element and code marking data; match the target code element with the code marking data to obtain a set of matching relationships for the target code element; based on the set of matching relationships and the canvas data, perform marking drawing on the web page code to obtain a marked web page code, and the marked web page code includes the marked code element corresponding to the target code element; send the marked web page code to the main thread through the background thread, and display the marked web page code through the main thread. Since this application can use the main thread to send a code display request containing web page code and canvas data to the background thread, in this way, the web page code can be processed in the background through the background thread to obtain the target code element and code marking data. Then, based on the canvas data and the set of matching relationships obtained by matching the target code element with the code marking data, a marked web page code including the marked code element can be drawn, so as to quickly display the marked web page code through the main thread; it can be understood that this application can transfer the marking process and drawing operation of the web page code to the background thread, thereby avoiding blocking the main thread. Moreover, it can also significantly reduce the number of DOM nodes and operations, thereby reducing computing resources to improve the display efficiency of the web page code.
[0180] To better implement the above method, an embodiment of the present application further provides a code processing device, which can be integrated in an electronic device, such as a server or a terminal, etc. The terminal may include a tablet computer, a notebook computer, and / or a personal computer, etc.
[0181] In an embodiment of the present application, the term "module" or "unit" refers to a computer program with a predetermined function or a part of a computer program, which works together with other related parts to achieve a predetermined goal, and can be fully or partially implemented by using software, hardware (such as a processing circuit or a memory), or a combination thereof. Similarly, one processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be a part of the overall module or unit that includes the function of the module or unit.
[0182] For example, as Figure 9 shown, the code processing device may include an acquisition unit 301, a screening unit 302, a matching unit 303, a drawing unit 304, and a display unit 305, as follows:
[0183] (1) Acquisition unit 301;
[0184] The acquisition unit 301 can be used to acquire a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and the canvas data to a background thread through the main thread.
[0185] For example, the acquisition unit 301 can be used to acquire the web page source code of a web page and the style code corresponding to the web page source code through the main thread; based on the web page source code and the style code, generate a code display request containing the web page code; create canvas data corresponding to the web page code through the main thread.
[0186] (2) Screening unit 302;
[0187] The screening unit 302 can be used to screen out target web page code from the web page code based on the code display request through the background thread, and parse the target web page code to obtain target code elements and code identification data.
[0188] For example, the screening unit 302 can be used to identify the web page source code and the style code corresponding to the web page source code in the target web page code; parse the web page source code to obtain target code elements, and parse the style code to obtain code identification data.
[0189] (3) Matching unit 303;
[0190] The matching unit 303 can be used to match the target code elements and the code identification data to obtain a set of matching relationships of the target code elements.
[0191] For example, the matching unit 303 can be used to obtain the target class name corresponding to the target code element and the candidate class names corresponding to the code identification data; based on the candidate class names and the target class name, match the target code element and the code identification data to obtain a set of matching relationships for the target code element.
[0192] (4) The drawing unit 304;
[0193] The drawing unit 304 can be used to perform label drawing on the web page code based on the set of matching relationships and the canvas data to obtain the labeled web page code, and the labeled web page code includes the labeled code elements corresponding to the target code elements.
[0194] For example, the drawing unit 304 can be used to determine the position of the target code element in the web page code through a background thread based on the canvas data, call a preset drawing interface, and perform label drawing on the target code element based on the position and the set of matching relationships to obtain the labeled code elements corresponding to the target code element; update the web page code according to the labeled code elements to obtain the labeled web page code.
[0195] (5) The display unit 305;
[0196] The display unit 305 can be used to send the labeled web page code to the main thread through a background thread and display the labeled web page code through the main thread.
[0197] As can be seen from the above, the acquisition unit 301 of the present application can be used to acquire a code display request containing a web page code and canvas data corresponding to the web page code, and send the code display request and the canvas data to a background thread through the main thread; the screening unit 302 can be used to screen out a target web page code from the web page code based on the code display request through the background thread, and parse the target web page code to obtain target code elements and code identification data; the matching unit 303 can be used to match the target code elements and the code identification data to obtain a set of matching relationships of the target code elements; the drawing unit 304 can be used to perform label drawing on the web page code based on the set of matching relationships and the canvas data to obtain a labeled web page code, and the labeled web page code includes labeled code elements corresponding to the target code elements; the display unit 305 can be used to send the labeled web page code to the main thread through the background thread and display the labeled web page code through the main thread. Since the present application can use the main thread to send a code display request containing a web page code and canvas data to the background thread, the web page code can be processed in the background through the background thread to obtain target code elements and code identification data, and then, based on the canvas data and the set of matching relationships obtained by matching the target code elements and the code identification data, a labeled web page code including labeled code elements can be drawn so as to quickly display the labeled web page code through the main thread; it can be understood that the present application can transfer the labeling process and drawing operation of the web page code to the background thread, thereby avoiding blocking the main thread. Moreover, it can also greatly reduce the number of DOM nodes and operations, thereby reducing computing resources to improve the display efficiency of the web page code.
[0198] An embodiment of the present application further provides an electronic device, as Figure 10 shown, which shows a schematic structural diagram of the electronic device involved in the embodiment of the present application. Specifically:
[0199] The electronic device may include a processor 401 with one or more processing cores, a memory 402 with one or more computer-readable storage media, a power supply 403, an input unit 404 and other components. Those skilled in the art can understand that Figure 10 the structural diagram of the electronic device shown in
[0200] The processor 401 is the control center of the electronic device, connecting various parts of the entire electronic device through various interfaces and circuits. By running or executing software programs and / or modules stored in the memory 402, and by calling the data stored in the memory 402, it executes various functions of the electronic device and processes data. Optionally, the processor 401 may include one or more processing cores; preferably, the processor 401 may integrate an application processor and a modem processor. Among them, the application processor mainly processes the operating system, user interface, application programs, etc., and the modem processor mainly processes wireless communications. It can be understood that the above-mentioned modem processor may not be integrated into the processor 401 either.
[0201] The memory 402 can be used to store software programs and modules. The processor 401 executes various functional applications and data processing by running the software programs and modules stored in the memory 402. The memory 402 mainly includes a program storage area and a data storage area. Among them, the program storage area can store the operating system, application programs required for at least one function (such as the sound playback function, image playback function, etc.); the data storage area can store data created according to the use of the electronic device. In addition, the memory 402 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid-state storage devices. Correspondingly, the memory 402 may also include a memory controller to provide the processor 401 with access to the memory 402.
[0202] The electronic device further includes a power supply 403 for powering each component. Preferably, the power supply 403 can be logically connected to the processor 401 through a power management system, so as to realize functions such as management of charging, discharging, and power consumption management through the power management system. The power supply 403 may also include any components such as one or more DC or AC power supplies, a recharge system, a power failure detection circuit, a power converter or inverter, and a power status indicator.
[0203] The electronic device may further include an input unit 404, which can be used to receive input digital or character information, and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function controls.
[0204] Although not shown, the electronic device may further include a display unit, etc., which will not be elaborated here. Specifically, in this embodiment, the processor 401 in the electronic device will load the executable files corresponding to the processes of one or more application programs into the memory 402 according to the following instructions, and the processor 401 will run the application programs stored in the memory 402 to realize various functions as follows:
[0205] Obtain a code display request containing web page code and canvas data corresponding to the web page code, and send the code display request and canvas data to a background thread through the main thread; based on the code display request through the background thread, filter out the target web page code from the web page code, and parse the target web page code to obtain target code elements and code identification data; match the target code elements and code identification data to obtain a set of matching relationships for the target code elements; based on the set of matching relationships and canvas data, perform label drawing on the web page code to obtain a labeled web page code, where the labeled web page code includes labeled code elements corresponding to the target code elements; send the labeled web page code to the main thread through the background thread, and display the labeled web page code through the main thread.
[0206] For the specific implementation of each of the above operations, reference may be made to the previous embodiments, which will not be elaborated herein.
[0207] Those of ordinary skill in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by a computer program or by controlling relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium and loaded and executed by a processor.
[0208] Therefore, an embodiment of the present application provides a computer-readable storage medium storing a computer program that can be loaded by a processor to execute any one of the code processing methods provided by the embodiments of the present application.
[0209] For the specific implementation of each of the above operations, reference may be made to the previous embodiments, which will not be elaborated herein.
[0210] Among them, the computer-readable storage medium may include: read-only memory (ROM, Read Only Memory), random access memory (RAM, Random Access Memory), magnetic disk or optical disk, etc.
[0211] Since the instructions stored in the computer-readable storage medium can execute the steps in any one of the code processing methods provided by the embodiments of the present application, the beneficial effects that can be achieved by any one of the code processing methods provided by the embodiments of the present application can be realized. For details, reference may be made to the previous embodiments, which will not be elaborated herein.
[0212] Among them, according to one aspect of the present application, a computer program product or computer program is provided. The computer program product or computer program includes computer instructions stored in a computer-readable storage medium. The processor of the electronic device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the electronic device executes the methods provided in the various optional implementation manners provided in the above embodiments.
[0213] The above has introduced in detail a code processing method, device, electronic device, computer-readable storage medium, and computer program product provided by the embodiments of the present application. Specific examples are used in this article to elaborate on the principle and implementation manner of the present application. The description of the above embodiments is only used to help understand the method and its core idea of the present application; at the same time, for those skilled in the art, according to the idea of the present application, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to the present application.
Claims
1. A code processing method, characterized in that, Including: Obtain a code display request including web page code and canvas data corresponding to the web page code, and send the code display request and the canvas data to a background thread through the main thread; Based on the code display request through the background thread, filter out target web page code from the web page code, and parse the target web page code to obtain target code elements and code identification data; Match the target code elements and the code identification data to obtain a set of matching relationships of the target code elements; Based on the set of matching relationships and the canvas data, perform label drawing on the web page code to obtain a labeled web page code, where the labeled web page code includes labeled code elements corresponding to the target code elements; Send the labeled web page code to the main thread through the background thread, and display the labeled web page code through the main thread.
2. The code processing method according to claim 1, wherein The matching of the target code elements and the code identification data to obtain a set of matching relationships of the target code elements includes: Obtain the target class name corresponding to the target code element and the candidate class name corresponding to the code identification data; Based on the candidate class name and the target class name, match the target code elements and the code identification data to obtain a set of matching relationships of the target code elements.
3. The code processing method according to claim 2, characterized in that, The matching of the target code elements and the code identification data based on the candidate class name and the target class name to obtain a set of matching relationships of the target code elements includes: Query for a reference class name identical to the target class name in the candidate class names; When there is a reference class name, match the code identification data corresponding to the reference class name and the code identification data corresponding to the target class name to obtain a target matching relationship between the target code elements and the code identification data; Based on the target matching relationship, generate a set of matching relationships of the target code elements.
4. The code processing method according to claim 3, wherein The generating of a set of matching relationships of the target code elements based on the target matching relationship includes: Obtain the element attributes of the target code elements, and based on the element attributes, predict the element display data of the target code elements; Bind the element display data and the target matching relationship to obtain a matching relationship among the target code elements, the code identification data, and the element display data; Based on the matching relationship, generate a set of matching relationships of the target code elements.
5. The code processing method according to claim 1, wherein The parsing of the target web page code to obtain target code elements and code identification data includes: Identify the web page source code and the style code corresponding to the web page source code in the target web page code; Parse the web page source code to obtain the target code elements, and parse the style code to obtain the code identification data.
6. The code processing method according to claim 1, wherein The performing of label drawing on the web page code based on the set of matching relationships and the canvas data to obtain a labeled web page code includes: Through the background thread, based on the canvas data, call a preset drawing interface, and determine the position of the target code elements in the web page code through the preset drawing interface; Based on the position and the set of matching relationships, perform marked drawing on the target code element to obtain a marked code element corresponding to the target code element; Update the web page code according to the marked code element to obtain the marked web page code.
7. The code processing method according to claim 1, wherein The obtaining of the code display request including the web page code and the canvas data corresponding to the web page code includes: Obtain the web page source code of the web page and the style code corresponding to the web page source code through the main thread; Generate a code display request including the web page code based on the web page source code and the style code; Create the canvas data corresponding to the web page code through the main thread.
8. A code processing device, characterized in that, It includes: An obtaining unit, configured to obtain a code display request including the web page code and the canvas data corresponding to the web page code, and send the code display request and the canvas data to a background thread through the main thread; A screening unit, configured to screen out a target web page code from the web page code based on the code display request through the background thread, and parse the target web page code to obtain a target code element and code marking data; A matching unit, configured to match the target code element and the code marking data to obtain a set of matching relationships of the target code element; A drawing unit, configured to perform marked drawing on the web page code based on the set of matching relationships and the canvas data to obtain a marked web page code, and the marked web page code includes a marked code element corresponding to the target code element; A display unit, configured to send the marked web page code to the main thread through the background thread, and display the marked web page code through the main thread.
9. An electronic device, characterized in that, It includes a processor and a memory, the memory stores an application program, and the processor is configured to run the application program in the memory to execute the steps in the code processing method according to any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, and the computer program is suitable for being loaded by a processor to execute the code processing method according to any one of claims 1 to 7.
11. A computer program product, characterized in that, The computer program product stores a computer program, and the computer program is suitable for being loaded by a processor to execute the code processing method according to any one of claims 1 to 7.