A method, device and computer program product for rendering HTML code of a web page
By converting Node.js server-side rendering to Go language server-side rendering, combined with the advantages of Vue and Go, the problem of slow rendering speed of Node.js is solved, achieving faster web page response speed and higher throughput.
Patent Information
- Application Number
- CN202510058838.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-15
- Publication Date
- 2025-04-08
- Estimated Expiration
- 2045-01-15
AI Technical Summary
When processing HTML code rendering, the execution speed of Node.js server is slow, affecting the response performance of the web page.
Convert the rendering of the traditional Node.js server to server-side rendering of Go language, combining the advantages of Vue front-end development and the high-performance features of Go language, it compiles into HTML, CSS and JavaScript files through Vue components, injects preset code to generate DSL files, converts them into GoTemplate files and compiles them into binary files, and captures real-time data of dynamic objects to generate HTML rendering text.
It improves the execution speed of code rendering, improves the loading response speed of web pages, and is suitable for large-scale applications and promotion.
Smart Images

Figure CN119474576B_ABST
Abstract
Description
Technical Field
[0001] The present invention belongs to the technical field of Web page rendering, and in particular relates to a method, device and computer program product for rendering HTML code of a Web page. Background Art
[0002] With the development of computer technology, people can access network data on the Internet through various browsers; for example, files, pictures, and texts; when a user requests to access network data on a browser, the web page corresponding to the network data is rendered through the page code corresponding to the page structure data, and the network data accessed by the user can be displayed to the user through the web page.
[0003] Among them, the page structure data of the Web page includes static information and dynamic information. The static information is the code information that fixes the page, and the dynamic information is the information that needs to be captured in real time. The user can change the page frame of the Web page by editing the static information and dynamic information to complete the rendering of the Web page.
[0004] In actual use, code rendering is mostly performed on the Node.js server to combine into HTML rendered text; however, code rendering on the Node.js server has the following shortcomings: the Node.js server is not friendly to string processing, the reason is: since the computer cannot directly recognize the js language, it is necessary to deploy the js environment and interpret the js code (such as the need to identify various syntaxes and functions in the code in the js environment and convert them into a language that the computer can recognize) before subsequent code rendering operations can be performed; this will reduce the execution speed of code rendering, thereby affecting the responsiveness of the Web page; therefore, based on the aforementioned shortcomings, how to provide a method for rendering the HTML code of a Web page with a fast execution speed has become a problem to be solved urgently. Summary of the invention
[0005] The purpose of the present invention is to provide a method, device and computer program product for rendering HTML code of a Web page, so as to solve the problem that the execution speed of code rendering is slow in the prior art, thereby affecting the response performance of the Web page.
[0006] In order to achieve the above object, the present invention adopts the following technical solutions:
[0007] In a first aspect, a method for rendering HTML code of a web page is provided, comprising:
[0008] Obtaining a Vue component of a target web page, and compiling the Vue component to compile the Vue component into an HTML file, a CSS file, and a JavaScript file;
[0009] Injecting preset codes into the HTML file to generate a DSL file containing markup tags;
[0010] Based on the CSS file and the JavaScript file, transcode the DSL file to convert the DSL file into a GoTemplate file;
[0011] Compiling the GoTemplate file to generate a binary file after the compilation process;
[0012] Capture real-time data of dynamic objects in the binary file;
[0013] The HTML rendering text of the target Web page is generated according to the real-time data and the binary file, so as to render the target Web page using the HTML rendering text.
[0014] Based on the above disclosed content, the present invention first obtains the Vue component of the target Web page, and then compiles it to compile it into an HTML file, a CSS file and a JavaScript file; then, a preset code is injected into the HTML file to generate a DSL code with customized markup semantics; then, the aforementioned CSS file and JavaScript file can be used to convert the DSL code into a GoTemplate file; then, it is compiled into a binary file, and real-time data of dynamic objects in the binary file is obtained; finally, the HTML rendering text of the target Web page can be generated based on the real-time data and the binary file, so that the HTML rendering text can be used to complete the rendering of the target Web page.
[0015] Through the above design, the present invention converts the traditional Node.js server-side rendering into server-side rendering of the Go language, which combines the advantages of Vue front-end development and the high performance characteristics of the Go language, so that the Go program can be directly run as a binary file after compilation; in this way, the present invention does not need to deploy an additional operating environment or perform code interpretation, based on which the execution speed of code rendering can be accelerated, thereby improving the loading response speed of the Web page; therefore, it is very suitable for large-scale application and promotion in the field of Web page rendering.
[0016] In a possible design, the Vue component includes a Vue template;
[0017] The Vue component is compiled into an HTML file, a CSS file and a JavaScript file, including:
[0018] Parsing the Vue template to identify first syntax information in the Vue template, wherein the first syntax information includes instruction information, interpolation expressions, and event binding information;
[0019] The first syntax information in the Vue template is compiled to generate the HTML file, the CSS file and the JavaScript file after the compilation process.
[0020] In a possible design, based on the CSS file and the JavaScript file, the DSL file is subjected to code conversion processing to convert the DSL file into a GoTemplate file, including:
[0021] Parsing the DSL file to obtain the marking tags and the second grammar information in the DSL file;
[0022] The code corresponding to the markup tag and the second grammatical information are converted into go Template code, and the go Template code is subjected to reference path processing using the CSS file and the JavaScript file, so as to obtain the GoTemplate file after the reference path processing.
[0023] In a possible design, based on the binary file, capturing the real-time data of the dynamic object in the binary file includes:
[0024] Starting the Go service to receive the web request of the target web page by using the Go service;
[0025] After receiving the Web request, the Go service is used to call the API interface of the dynamic object, so as to obtain the real-time data of the dynamic object in the binary file by calling the API interface.
[0026] In a possible design, generating HTML rendering text of the target Web page according to the real-time data and the binary file includes:
[0027] The real-time data of the dynamic object is filled into the binary file, so as to generate the HTML rendering text of the target Web page after filling.
[0028] In a possible design, filling the real-time data of the dynamic object into the binary file includes:
[0029] Performing data encapsulation processing on the real-time data to obtain encapsulated data corresponding to the dynamic object;
[0030] The encapsulated data is filled into the binary file to generate the HTML rendering text of the target Web page.
[0031] In one possible design, after generating the DSL file containing the marker tags, the method further includes:
[0032] The DSL file is subjected to code optimization processing to obtain an optimized DSL file, so as to perform code conversion processing on the optimized DSL file to obtain the GoTemplate file.
[0033] In a second aspect, a device for rendering HTML code of a web page is provided, comprising:
[0034] A Vue component compilation unit, used for obtaining a Vue component of a target Web page, and compiling the Vue component to compile the Vue component into an HTML file, a CSS file, and a JavaScript file;
[0035] A code injection unit, used for injecting preset code into the HTML file to generate a DSL file containing a markup tag;
[0036] A code conversion unit, configured to perform code conversion processing on the DSL file based on the CSS file and the JavaScript file, so as to convert the DSL file into a GoTemplate file;
[0037] A Go file compilation unit, used for compiling the GoTemplate file to generate a binary file after the compilation process;
[0038] A data capture unit, used for capturing real-time data of dynamic objects in the binary file;
[0039] A rendering unit is used to generate an HTML rendering text of the target Web page according to the real-time data and the binary file, so as to render the target Web page using the HTML rendering text.
[0040] In a third aspect, another device for rendering the HTML code of a web page is provided. Taking the device as an electronic device as an example, the device includes a memory, a processor and a transceiver that are communicatively connected in sequence, wherein the memory is used to store computer programs, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute a method for rendering the HTML code of the web page as in the first aspect or any possible design of the first aspect.
[0041] In a fourth aspect, a storage medium is provided, on which instructions are stored. When the instructions are executed on a computer, a rendering method of the HTML code of the Web page as in the first aspect or any possible design in the first aspect is executed.
[0042] In a fifth aspect, a computer program product comprising instructions is provided, which, when executed on a computer, causes the computer to execute a method for rendering the HTML code of the Web page as in the first aspect or any possible design of the first aspect.
[0043] Beneficial effects:
[0044] (1) The present invention converts the traditional Node.js server-side rendering into server-side rendering in Go language, which combines the advantages of Vue front-end development and the high performance characteristics of Go language, so that the Go program can be directly run as a binary file after compilation; thus, the present invention does not need to deploy an additional operating environment and does not need to interpret the code. Based on this, the execution speed of code rendering can be accelerated, thereby improving the loading response speed of Web pages; therefore, it is very suitable for large-scale application and promotion in the field of Web page rendering.
[0045] (2) The Go language is known for its efficient concurrency model and lightweight goroutine (a concurrent execution unit unique to the Go language that allows functions or methods to be executed concurrently without the need to manually manage threads). It performs well in handling high-concurrency requests; therefore, compared with Node.js, the present invention can provide faster response speed and higher throughput.
[0046] (3) Go is a statically typed language that can capture potential errors at compile time, thereby reducing unexpected situations at runtime and thus improving rendering reliability.
[0047] (4) Go's concurrency model can better utilize the power of multi-core processors without the need for complex thread management, thus reducing external dependencies. At the same time, the Go standard library provides rich functions, based on which it can reduce dependence on external libraries, thereby simplifying deployment and maintenance.
[0048] (5) Container-friendly. Go applications are suitable for container environments such as Docker. They are small in size and have a fast startup speed.
[0049] (6) Go applications have high performance and low resource consumption, so they can support more users or requests under the same hardware conditions, thereby reducing server costs.
[0050] (7) The method provided by the present invention allows users to see page content more quickly, especially when visiting for the first time, which can significantly improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0051] Figure 1 A schematic diagram of the steps of a method for rendering HTML code of a Web page provided by an embodiment of the present invention;
[0052] Figure 2 A schematic diagram of the structure of a device for rendering HTML code of a Web page provided by an embodiment of the present invention;
[0053] Figure 3 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION
[0054] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the present invention will be briefly introduced below in combination with the drawings and the description of the embodiments or the prior art. Obviously, the following description of the structure of the drawings is only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. It should be noted that the description of these embodiments is used to help understand the present invention, but does not constitute a limitation of the present invention.
[0055] It should be understood that although the terms first, second, etc. may be used herein to describe various units, these units should not be limited by these terms. These terms are only used to distinguish one unit from another unit. For example, a first unit can be referred to as a second unit, and similarly, a second unit can be referred to as a first unit without departing from the scope of the exemplary embodiments of the present invention.
[0056] It should be understood that the term "and / or" that may appear in this article is merely a description of the association relationship between associated objects, indicating that three relationships may exist. For example, A and / or B can represent three situations: A exists alone, B exists alone, and A and B exist at the same time. The term " / and" that may appear in this article describes another type of association object relationship, indicating that two relationships may exist. For example, A / and B can represent two situations: A exists alone, and A and B exist alone. In addition, the character " / " that may appear in this article generally indicates that the previous and next associated objects are in an "or" relationship.
[0057] Example:
[0058] See also Figure 1 As shown in the figure, the rendering method of the HTML code of the web page provided in this embodiment first obtains the Vue component of the web page, and then compiles it into an HTML file, a CSS file, and a JavaScript file so as to run it on a browser; then, a preset code is injected into the HTML file to generate a DSL file with a custom markup semantics; then, the DSL file is converted into a Go file using the aforementioned CSS file and JavaScript file. Template file, and compile the file to obtain a binary file; finally, capture the real-time data of the dynamic object in the binary file, and fill the real-time data into the binary file, then the HTML rendering text can be obtained; in this way, the HTML rendering text can be used to render the Web page, so as to display the network data to be accessed; thus, the method converts the traditional Node.js server-side rendering into the server-side rendering of the Go language, which combines the advantages of Vue front-end development and the high-performance characteristics of the Go language, so that the Go program can be compiled and run directly as a binary file; based on this, the method does not need to deploy an additional operating environment, does not need to interpret the code, can speed up the execution speed of code rendering, thereby improving the loading response speed of the Web page; therefore, the method is very suitable for large-scale application and promotion; among them, for example, the method can be but not limited to running on the page development end side, optionally, the page development end can be but not limited to a personal computer (PC), it can be understood that the aforementioned execution subject does not constitute a limitation on the embodiments of the present application, and accordingly, the running steps of the method can be but not limited to the following steps S1 to S6.
[0059] S1. Obtain the Vue component of the target Web page, and compile the Vue component to compile the Vue component into an HTML file, a CSS file, and a JavaScript file; in this embodiment, the Vue component is the cornerstone of the Vue.js application. It is a reusable Vue instance that can contain its own data, methods, life cycle hooks, and templates. The Vue component encapsulates specific functions and appearances. The components can be regarded as independent small modules, and each component is responsible for a specific task, such as displaying a button, a form, or a complex page layout. Therefore, the Vue component is equivalent to containing the web page layout information and corresponding web page content of the target Web page.
[0060] In specific applications, Vue components usually consist of three parts, namely Vue template, script and style. The Vue template defines the HTML structure of the component, which stores specific syntax such as interpolation expressions, instructions and event binding. The above syntax can be used to render the component data into HTML and display it on the page.
[0061] Therefore, by using Vue components for page development, the interface can be split into independent and reusable parts, thereby improving the modularity and maintainability of the code; and this embodiment combines the advantages of Vue front-end development and the high performance characteristics of the Go language to render Web pages, that is, converting the Vue component into Go code, thereby realizing page rendering based on the Go code; wherein, since the Vue file cannot be used directly in the browser, therefore, this embodiment needs to first convert the Vue component into an HTML file that can be executed on the browser, and the conversion process can be but is not limited to as shown in the following steps S11 and S12.
[0062] S11. The Vue template is parsed to identify first syntax information in the Vue template, wherein the first syntax information includes instruction information, interpolation expressions, and event binding information. In this embodiment, the Vue template is first parsed to identify internal instructions, interpolation expressions, event binding information, and then the aforementioned syntax is converted into HTML, CSS, and JavaScript codes, thereby realizing conversion of the Vue component to the HTML file. Optionally, the conversion process is shown in the following step S12.
[0063] S12. Compile the first syntax information in the Vue template to generate the HTML file, the CSS file and the JavaScript file after the compilation process; in this embodiment, the first syntax information is transformed in the form of a string to be converted into corresponding HTML code, CSS code and JavaScript code, so as to generate the HTML, CSS and JavaScript files after the conversion.
[0064] Specifically, the compilation process mainly includes the following parts: (1) parsing the string in the first syntax information into AST (abstract syntax tree); (2) the compiler traverses the AST and generates a render function code; this render function is a JavaScript function, and its return value is a virtual node (VNode) tree, which describes the final rendering form of the component; thus, after completing the above operations, HTML code, CSS code and JavaScript code can be obtained; wherein, during the compilation, this embodiment will also perform code injection so as to efficiently complete the subsequent conversion of the Vue component to the Go code; of course, the code injection process is described in detail in the following step S2.
[0065] In this way, through the aforementioned steps S11 and S12, the Vue component can be converted into an HTML file that can be executed on the browser; then, the aforementioned HTML file can be converted into Go code so that the Go code can be used to complete the rendering of the Web page; wherein, before the conversion, the HTML file needs to be converted into a DSL file so that a Go file can be generated based on the DSL file; optionally, the generation process of the DSL file can be but is not limited to as shown in the following step S2.
[0066] S2. Injecting preset code into the HTML file to generate a DSL file containing markup tags; in specific implementation, this step refers to the process of code injection, which is actually also a part of the aforementioned Vue component compilation, that is, after generating the render function code, code injection can be performed, so that after the code injection, a DSL file containing custom markup tags is generated.
[0067] In this embodiment, the DSL file is generated during the compilation of the Vue component. It uses custom tags and syntax to represent the structure and logic in the Vue template. As a bridge connecting Vue and Go, it can improve the efficiency of generating GoTemplate templates. Among them, the aforementioned code injection is to inject specific code into each life cycle hook or rendering function of the component, such as life cycle hook injection, calculated property and listener injection, instruction injection, plug-in injection, etc. The specific injection code (that is, the aforementioned preset code) can be specifically set according to the actual development and stored in the page development end. Therefore, no specific limitation is made here.
[0068] In this way, after completing the code injection, a DSL file with customized markup tags can be generated, wherein the markup tags are used to explain the functions of different codes in the DSL file. For example, label A corresponds to a section of code, which represents a loop statement, label B corresponds to a section of code, which represents a conditional statement, etc. Based on this, using labels with clear semantics to represent the code can facilitate the subsequent conversion of Go code; of course, the specific label form and the meaning it represents can be set according to actual use, and is not limited to the aforementioned examples.
[0069] After obtaining the DSL file, the DSL file may be converted into a GoTemplate file, and the process may be, but is not limited to, as shown in the following step S3.
[0070] S3. Based on the CSS file and the JavaScript file, the DSL file is transcoded to convert the DSL file into a GoTemplate file. In specific applications, after obtaining the DSL file, in order to improve the performance, readability and maintainability of the code, the present embodiment further performs code optimization on the DSL file to obtain an optimized DSL file. In this way, the optimized DSL file can be transcoded to obtain the following GoTemplate file. Examples include but are not limited to using optimized data structures (i.e., selecting data structures for DSL operations, such as using hash tables for fast differences), buffering calculation results (for repeated calculations, using cache to store results to avoid repeated calculations), performing code modularization (i.e., dividing the code into modules, each module being responsible for one function), removing redundant code, etc. to perform code optimization. Of course, the aforementioned methods are common techniques for code optimization, and their principles will not be described in detail.
[0071] After the code optimization of the DSL file is completed, a GoTemplate file may be generated based on the code optimization of the DSL file. The generation process of the GoTemplate file may be, but is not limited to, as shown in the following steps S31 and S32.
[0072] S31. The DSL file is parsed to obtain the marker tags and the second grammatical information in the DSL file. In this embodiment, the parsing of the DSL file is essentially to parse the marker tags and semantics, so as to obtain the meaning represented by the code corresponding to the marker tag and the grammatical information corresponding to the entire DSL file. After obtaining the above information, code conversion can be performed, and the process is shown in the following step S32.
[0073] S32. Convert the code corresponding to the markup tag and the second syntax information into go Template code, and use the CSS file and the JavaScript file to perform reference path processing on the go Template code, so as to obtain the GoTemplate file after the reference path processing; in specific implementation, it is equivalent to converting the code and syntax corresponding to the custom tag in DSL into the syntax supported by GoTemplate, so as to obtain the go Template code; at the same time, it is also necessary to use CSS files and JavaScript files to perform reference path processing to ensure the correctness of the path.
[0074] In this embodiment, it has been explained above that the Vue component contains not only templates, but also styles and scripts, and the styles and scripts correspond to the CSS file and the JavaScript file respectively. Among them, the CSS dependency reference path processing includes internal style and external style references. Specifically, the internal style is defined directly in the DSL file, while the external style sheet is defined in the DSL through <link> The tag introduces an external CSS file; similarly, JavaScript dependency reference path processing includes internal script and external script references; in specific applications, internal script references are written directly in the DSL file JavaScript code, while external script references are written in the DSL file through <script>标签引入前述JavaScript文件;如此,通过前述方式,则可在DSL中使用CSS和JavaScript进行依赖引用路径的处理,从而在引用路径处理完成后,得到GoTemplate文件。
[0075] 基于此,通过前述步骤S31和步骤S32,则可将DSL文件转换为GoTemplate文件;而后,则可通过编译GoTemplate文件,来生成二进制文件,以便后续基于二进制文件,来生成目标Web页面的HTML渲染文本;其中,二进制文件的生成过程如下述步骤S4所示。
[0076] S4. 对所述GoTemplate文件进行编译处理,以在编译处理后,生成二进制文件;在具体实施时,相当于是将GoTemplate文件进行打包编译成二进制文件;如此,以二进制文件来进行页面渲染,相比于传统基于Node.js的渲染方式,计算机可直接识别使用该文件,因此,无需额外部署运行环境,且也不需要进行代码解释;基于此,则可提高代码渲染的执行速度。
[0077] 在得到二进制文件后,相当于完成了目标Web页面中静态信息的渲染,此时,则需要获取动态信息,以便结合动态信息,来完成整个目标Web页面的渲染;其中,动态信息的获取过程可以但不限于如下述步骤S5所示。
[0078] S5. 抓取所述二进制文件中动态对象的实时数据;在具体应用时,举例可以但不限于先启动Go服务,以利用所述Go服务接收所述目标Web页面的Web请求(即动态数据抓取请求);而后,在接收到所述Web请求后,则可利用所述Go服务调用所述动态对象的API接口,从而通过调用所述API接口,来获取所述二进制文件中动态对象的实时数据;在本实施例中,动态对象则是页面中需要更新的对象,如假设目标Web页面为新闻页面,那么,实时热点这一栏则作为动态对象,需要进行实时更新;当然,当目标Web页面为其余类型的页面时,动态对象的获取方式与前述举例相同,于此不再赘述。
[0079] 在基于前述步骤S5,抓取到二进制文件中动态对象的实时数据后,则可将该实时数据写入二进制文件,从而来生成最终的HTML渲染文本;其中,HTML渲染文本的生成过程可以但不限于如下述步骤S6所示。
[0080] S6. 根据所述实时数据和所述二进制文件,生成所述目标Web页面的HTML渲染文本,以便利用所述HTML渲染文本渲染所述目标Web页面;在具体应用时,本实施例是将所述动态对象的实时数据直接填充至所述二进制文件中,从而在填充后,生成所述目标Web页面的HTML渲染文本;具体的,在填充时,需要先将前述实时数据进行数据封装处理,以得到动态对象相对应的封装数据;而后,将该封装数据填充至所述二进制文件中,则可生成前述HTML渲染文本;当然,数据封装为页面渲染的常用技术,其原理不再赘述。
[0081] 如此,在得到HTML渲染文本,则可基于该HTML渲染文本来渲染目标Web页面,从而向用户展示其所要访问的网络数据。
[0082] 由此通过前述步骤S1~S6所详细描述的Web页面的HTML代码的渲染方法,本发明将传统Node.js服务端的渲染转换为Go语言的服务端渲染,其结合了Vue前端开发的优势和Go语言的高性能特点,使得Go程序编译后以二进制文件直接运行;基于此,使得本发明无需额外部署运行环境,不需要进行代码解释,可加快代码渲染的执行速度,从而提高了Web页面的加载响应速度;因此,本发明非常适用于大规模应用与推广。
[0083] 如图2所示,本实施例第二方面提供了一种实现实施例第一方面中所述的Web页面的HTML代码的渲染方法的硬件装置,包括:
[0084] Vue组件编译单元,用于获取目标Web页面的Vue组件,并对所述Vue组件进行编译处理,以将所述Vue组件编译为HTML文件、CSS文件和JavaScript文件。
[0085] 代码注入单元,用于向所述HTML文件注入预设代码,以生成含有标记性标签的DSL文件;
[0086] 代码转换单元,用于基于所述CSS文件和所述JavaScript文件,对所述DSL文件进行代码转换处理,以将所述DSL文件转换为GoTemplate文件。
[0087] Go文件编译单元,用于对所述GoTemplate文件进行编译处理,以在编译处理后,生成二进制文件。
[0088] 数据抓取单元,用于抓取所述二进制文件中动态对象的实时数据。
[0089] 渲染单元,用于根据所述实时数据和所述二进制文件,生成所述目标Web页面的HTML渲染文本,以便利用所述HTML渲染文本渲染所述目标Web页面。
[0090] 本实施例提供的装置的工作过程、工作细节和技术效果,可以参见实施例第一方面,于此不再赘述。
[0091] 如图3所示,本实施例第三方面提供了另一种Web页面的HTML代码的渲染装置,以装置为电子设备为例,包括:依次通信相连的存储器、处理器和收发器,其中,所述存储器用于存储计算机程序,所述收发器用于收发消息,所述处理器用于读取所述计算机程序,执行如实施例第一方面所述的Web页面的HTML代码的渲染方法。
[0092] 具体举例的,所述存储器可以但不限于包括随机存取存储器(random accessmemory,RAM)、只读存储器(Read Only Memory ,ROM)、闪存(Flash Memory)、先进先出存储器(First Input First Output,FIFO)和 / 或先进后出存储器(First In Last Out,FILO)等等;具体地,处理器可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器可以采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现,同时,处理器也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central ProcessingUnit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。
[0093] 在一些实施例中,处理器可以在集成有GPU(Graphics Processing Unit,图像处理器),GPU用于负责显示屏所需要显示的内容的渲染和绘制,例如,所述处理器可以不限于采用型号为STM32F105系列的微处理器、精简指令集计算机(reduced instruction setcomputer,RISC)微处理器、X86等架构处理器或集成嵌入式神经网络处理器(neural-network processing units,NPU)的处理器;所述收发器可以但不限于为无线保真(WIFI)无线收发器、蓝牙无线收发器、通用分组无线服务技术(General Packet Radio Service,GPRS)无线收发器、紫蜂协议(基于IEEE802.15.4标准的低功耗局域网协议,ZigBee)无线收发器、3G收发器、4G收发器和 / 或5G收发器等。此外,所述装置还可以但不限于包括有电源模块、显示屏和其它必要的部件。
[0094] 本实施例提供的电子设备的工作过程、工作细节和技术效果,可以参见实施例第一方面,于此不再赘述。
[0095] 本实施例第四方面提供了一种存储包含有实施例第一方面所述的Web页面的HTML代码的渲染方法的指令的存储介质,即所述存储介质上存储有指令,当所述指令在计算机上运行时,执行如实施例第一方面所述的Web页面的HTML代码的渲染方法。
[0096] 其中,所述存储介质是指存储数据的载体,可以但不限于包括软盘、光盘、硬盘、闪存、优盘和 / 或记忆棒(Memory Stick)等,所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。
[0097] 本实施例提供的存储介质的工作过程、工作细节和技术效果,可以参见实施例第一方面,于此不再赘述。
[0098] 本实施例第五方面提供了一种包含指令的计算机程序产品,当所述指令在计算机上运行时,使所述计算机执行如实施例第一方面所述的Web页面的HTML代码的渲染方法,其中,所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。
[0099] 最后应说明的是:以上所述仅为本发明的优选实施例而已,并不用于限制本发明的保护范围。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。< / script>
Claims
1. A method for rendering HTML code of a web page, characterized in that: include: Obtaining a Vue component of a target web page, and compiling the Vue component to compile the Vue component into an HTML file, a CSS file, and a JavaScript file; Injecting preset codes into the HTML file to generate a DSL file containing markup tags; Based on the CSS file and the JavaScript file, transcode the DSL file to convert the DSL file into a GoTemplate file; Compiling the GoTemplate file to generate a binary file after the compilation process; Capture real-time data of dynamic objects in the binary file; Generate an HTML rendering text of the target Web page according to the real-time data and the binary file, so as to render the target Web page using the HTML rendering text; Based on the CSS file and the JavaScript file, the DSL file is subjected to code conversion processing to convert the DSL file into a GoTemplate file, including: Parsing the DSL file to obtain the marking tags and the second grammar information in the DSL file; The code corresponding to the markup tag and the second grammatical information are converted into go Template code, and the go Template code is subjected to reference path processing using the CSS file and the JavaScript file, so as to obtain the GoTemplate file after the reference path processing.
2. The method for rendering HTML code of a Web page according to claim 1, characterized in that: The Vue component includes a Vue template; The Vue component is compiled into an HTML file, a CSS file and a JavaScript file, including: Parsing the Vue template to identify first syntax information in the Vue template, wherein the first syntax information includes instruction information, interpolation expressions, and event binding information; The first syntax information in the Vue template is compiled to generate the HTML file, the CSS file and the JavaScript file after the compilation process.
3. The method for rendering HTML code of a Web page according to claim 1, characterized in that: Based on the binary file, real-time data of dynamic objects in the binary file is captured, including: Starting the Go service to receive the web request of the target web page by using the Go service; After receiving the Web request, the Go service is used to call the API interface of the dynamic object, so as to obtain the real-time data of the dynamic object in the binary file by calling the API interface.
4. The method for rendering HTML code of a Web page according to claim 1, characterized in that: Generating HTML rendering text of the target Web page according to the real-time data and the binary file, including: The real-time data of the dynamic object is filled into the binary file, so as to generate the HTML rendering text of the target Web page after filling.
5. The method for rendering HTML code of a Web page according to claim 4, characterized in that: Filling the real-time data of the dynamic object into the binary file comprises: Performing data encapsulation processing on the real-time data to obtain encapsulated data corresponding to the dynamic object; The encapsulated data is filled into the binary file to generate the HTML rendering text of the target Web page.
6. The method for rendering HTML code of a Web page according to claim 1, characterized in that: After generating the DSL file containing the marker tags, the method further includes: The DSL file is subjected to code optimization processing to obtain an optimized DSL file, so as to perform code conversion processing on the optimized DSL file to obtain the GoTemplate file.
7. A device for rendering HTML code of a web page, characterized in that: include: A Vue component compilation unit, used for obtaining a Vue component of a target Web page, and compiling the Vue component to compile the Vue component into an HTML file, a CSS file, and a JavaScript file; A code injection unit, used for injecting preset code into the HTML file to generate a DSL file containing a markup tag; A code conversion unit, configured to perform code conversion processing on the DSL file based on the CSS file and the JavaScript file, so as to convert the DSL file into a GoTemplate file; A Go file compilation unit, used for compiling the GoTemplate file to generate a binary file after the compilation process; A data capture unit, used for capturing real-time data of dynamic objects in the binary file; A rendering unit, configured to generate an HTML rendering text of the target Web page according to the real-time data and the binary file, so as to render the target Web page using the HTML rendering text; Based on the CSS file and the JavaScript file, the DSL file is subjected to code conversion processing to convert the DSL file into a GoTemplate file, including: Parsing the DSL file to obtain the marking tags and the second grammar information in the DSL file; The code corresponding to the markup tag and the second grammatical information are converted into go Template code, and the go Template code is subjected to reference path processing using the CSS file and the JavaScript file, so as to obtain the GoTemplate file after the reference path processing.
8. A device for rendering HTML code of a web page, characterized in that: include: A memory, a processor and a transceiver which are sequentially connected in communication, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program, and execute the method for rendering the HTML code of a Web page as described in any one of claims 1 to 6.
9. A computer program product comprising instructions, characterized in that When the instruction is executed on a computer, the computer is caused to execute the method for rendering HTML code of a Web page as claimed in any one of claims 1 to 6.
Citation Information
Patent Citations
Front end Node.js automatic positive staticizing method
CN107766532A
Page rendering method and device, equipment and storage medium
CN114117276A