Method for optimizing font file size of Web page

Abstract

The invention discloses a method for optimizing the font file size of a Web page. The method comprises a client side and a server side. The client crawls used characters and deletes useless character data from fonts to realize compression by crawling local CSS (Cascading Style Sheets) and HTML (Hypertext Markup Language) files, and then generates a format used across browsers; the server dynamically renders a text by building a NodeJS service in combination with node-canvas, realizes the problems of character line feed, no first line of punctuation marks and no detail splitting of English words through a binary search algorithm, then outputs a base64 format of a picture by using a toDataURL () method on a canvas object, and finally packages an interface realized by MidwayJS, so that the content of English words in the picture is reduced, and the content of the English words in the picture is reduced. Only specific parameters need to be transmitted to a user. According to the method, the performance consumption of loading the files at the front end is reduced, and the special font files are placed at the server end, so that the problems caused by excessive static resource files or overlarge volume of an application package are avoided.

Description

Technical Field

[0001] The present invention relates to the technical field of Web development, and more particularly to a method for optimizing the size of a Web page font file. Background Art

[0002] At present, the demand for using special fonts in front-end web pages is generally that designers convert special fonts into bitmaps for export, and then provide the image files to front-end developers, who then embed them into the page using specified front-end language tags. When special fonts are used directly in front-end web pages, the network path of the special font needs to be specified through CSS cascading styles to load it. Only after the loading is successful can the text be rendered and displayed.

[0003] There are several problems when introducing special fonts in existing Web pages: 1) The pictures generated by designers through drawing software will cause too many static resource files to be generated when publishing Web applications, which will not only make the application package too large, but also cause users to require too much network traffic to load these resource files when accessing the page, resulting in frequent network requests and excessive server resource usage. 1) If an application uses special fonts in multiple places and happens to be a small program, it will be subject to file size restrictions. In addition, image loading may be delayed by factors such as the network, thereby reducing user experience; 2) When using the @font-face attribute in the CSS cascading style to load external fonts, the English font package will be relatively small, but the Chinese font package will be relatively large. Therefore, when the user opens the web page, it takes a long time to download the font, resulting in a poor user experience. In addition, for the @font-face attribute in the CSS cascading style, there will be compatibility issues with the fonts that can be recognized by various browsers; 3) The display of special text is likely to be dynamic content, that is, the Web page does not know in advance the text content to be displayed, because this content may be obtained through the network interface. In this way, it is impossible to cut only fixed text content or only load font files for a certain text range, so it is difficult to effectively control static resources. Summary of the invention

[0004] The technical problem to be solved by the present invention is to provide a method for optimizing the size of font files of Web pages, so as to solve the problems that existing technical means may cause excessive static resources, and reference to special font files may cause slow page loading.

[0005] In order to solve the above technical problems, the technical solutions adopted by the present invention are as follows.

[0006] A method for optimizing the size of a Web page font file includes two aspects: a client and a server. The client crawls local CSS and HTML files, crawls out used characters, deletes the unused character data from the font to achieve compression, and then generates a format used across browsers. The server uses the good performance characteristics of MidwayJS server-side technology in processing high-concurrency requests and the natural advantage of NodeJS in graphics processing, builds a NodeJS service in combination with node-canvas to dynamically render text, and uses a binary search algorithm to achieve details such as text wrapping, punctuation marks not appearing in the first line, and English words not being split, and then uses the toDataURL() method on the canvas object to output the base64 format of the image. Finally, the interface implemented by MidwayJS is packaged, and the user only needs to pass specific parameters.

[0007] To further optimize the technical solution, the client is implemented based on static sites and dynamic sites. By parsing static text files and AST, the content that needs to be retained in the font file is obtained, and then encoded into a font format that can be used across platforms.

[0008] To further optimize the technical solution, the server-side process specifically includes the following steps:

[0009] A. Use NodeJS technology to start a service and define a post interface that can receive special font parameters, and finally return a base64 of an image;

[0010] B. Install and download all font files on the server;

[0011] C. Install the node-canvas plug-in and use the createCanvas method to create a canvas;

[0012] D. Use the fillText method provided by canvas to write text to the canvas, and use parameters to determine the line height, starting position, font color, and font size of the text;

[0013] E. Use canvas.registerFont method to import and name custom fonts, and use context.fontFamily = 'fontSize, "font name"' to set the font size and special format;

[0014] F. Use the measureText method provided by canvas to measure the text width, and use the binary search algorithm to wrap the text;

[0015] G. Use a regular expression to determine whether the character after the line break point is a punctuation mark. If so, move the line break point forward by one character and perform a line break; if not, perform a normal line break operation;

[0016] H. Use regular expressions to determine whether the line break point position matches a space forward. If not, keep matching forward until a space is matched and record the number of characters n that match forward. Then move the line break point position forward by n positions and perform a line break. If yes, perform a normal line break operation.

[0017] I. Use the canvas.toDataURL() method to output the formed text canvas as a base64 format image file and return it to the client as a result. The client directly uses the image tag element to load it.

[0018] To further optimize the technical solution, in step A, the special font parameters include text content, font size, font color, text starting x coordinate, text starting y coordinate, image width, image height, text line height and font format.

[0019] To further optimize the technical solution, in step C, the method of using the createCanvas plug-in to create a canvas is that the width and height of the canvas are determined by the two parameters of width and height passed in, and then a context object is created through getContext, and the context object is the drawing context object obtained through canvas.

[0020] To further optimize the technical solution, in step F, the measureText method calculates that the new position x after the text wraps is the input initial x value, and the y value is the input y value + the input lineHeight value.

[0021] To further optimize the technical solution, in step F, the binary algorithm is that if the text width before a certain position is less than or equal to the set width, and the text width before the next word after it is greater than the set width, this position point is the line break point, and then the entire text is searched in a loop until there is no such line break point.

[0022] Due to the adoption of the above technical scheme, the technical progress achieved by the present invention is as follows.

[0023] The present invention provides a method for optimizing the size of font files of Web pages, which places special font files on the server side, thereby reducing the performance consumption of loading these files on the front end to a certain extent. At the same time, the final return is the base64 format of the image, which also avoids the problems caused by too many static resource files or too large application package size. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 A flowchart of a client of the present invention;

[0025] Figure 2 It is a flow chart of the server side of the present invention. DETAILED DESCRIPTION

[0026] The present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0027] A method for optimizing the size of font files on a Web page includes two aspects: a client solution and a server solution.

[0028] The client flow chart is as follows Figure 1 As shown, by crawling the local CSS and HTML files, the used characters are crawled out and the unused character data are deleted from the font to achieve compression, and then a format that can be used across browsers is generated.

[0029] The client is implemented based on static sites and dynamic sites. It obtains the content that needs to be retained in the font file by parsing static text files and AST, and then encodes it into a font format that can be used across platforms.

[0030] The server side makes use of the good performance characteristics of MidwayJS server-side technology when processing high-concurrency requests and the natural advantages of NodeJS in graphics processing. By building a NodeJS service and combining it with node-canvas, the text is dynamically rendered, and the binary search algorithm is used to implement the details of text wrapping, punctuation marks not appearing in the first line, and English words not being split. The toDataURL() method on the canvas object is used to output the base64 format of the image. Finally, the interface implemented by MidwayJS is packaged, and the user only needs to pass specific parameters.

[0031] The flow chart of the server side is as follows Figure 2 As shown, it specifically includes the following steps:

[0032] A. Use NodeJS technology to start a service and define a post interface that can receive special font parameters, and finally return a base64 of an image.

[0033] Special fonts include text (text content), fontSize (font size), color (font color), x (text starting x coordinate), y (text starting y coordinate), width (image width), height (image height), lineHeight (text line height), and fontFamily (font format).

[0034] B. Install and download all font files on the server side to facilitate loading special fonts during the implementation process to achieve the ultimate goal of the solution.

[0035] C. Install the node-canvas plug-in and use the createCanvas method to create a canvas.

[0036] Canvas is a low-level display object used by the Web front end to draw graphics and text. The node-canvas plug-in can be used to dynamically create this drawing object on the server side. The creation method is that the width and height of the canvas are determined by the two parameters passed in, width and height. Then, a context object is created through getContext. The context object is the drawing context object obtained through canvas.

[0037] D. Use the fillText method provided by canvas to write text to the canvas, and use parameters to determine the line height, starting position, font color, and font size of the text.

[0038] E. Use the canvas.registerFont method to import and name the custom font, and use context.fontFamily = 'fontSize, "font name"' to set the font size and special format.

[0039] registerFont is a method provided by canvas, which is used to register the special font specified by the server and used in the subsequent text drawing stage. Then use context.fontFamily = 'fontSize (font size) "font name"' to set the font size and special format. fontFamily is a property of the drawing context object context. Through its property, you can set the registered special font and accurately control the font size for drawing text content.

[0040] F. Use the measureText method provided by canvas to measure the text width and use a binary search algorithm to wrap the text.

[0041] The measureText method sets the new x position of the text after the line break to the passed in initial x value, and the y value to the passed in y value + the passed in lineHeight value.

[0042] The binary algorithm is that if the text width before a certain position is less than or equal to the set width, and the text width before the next character after it is greater than the set width, this position point is the line break point, and then the entire text is searched in a loop until there is no such line break point.

[0043] G. Use a regular expression to determine whether the character after the line break point is a punctuation mark. If so, move the line break point forward by one character and perform a line break; if not, perform a normal line break operation;

[0044] H. Use regular expressions to determine whether the line break point position matches a space forward. If not, keep matching forward until a space is matched and record the number of characters n that match forward. Then move the line break point position forward by n positions and perform a line break. If yes, perform a normal line break operation.

[0045] I. Use the canvas.toDataURL() method to output the formed text canvas as a base64 format image file and return it to the client as a result. The client directly uses the image tag element to load it.

[0046] This interface is encapsulated as an external method, such as: specialFont(text, fontSize, color, x, y, width, height, lineHeight, fontFamily), specialFont is the name of the method customized by this technology invention, and this method receives the necessary parameters passed in by the front-end developer, namely, text content, font size, font color, font starting x-axis position, font starting y-axis position, canvas width, canvas height, text line height, special font format of text. When the client wants to use this technical solution to implement special fonts, it can directly call this method. In order to be compatible with the problem of no passed in parameters, the default fontSize is: 16px, color: #ffffff, x: 0, y: 0, with and height are the default width and height of canvas, i.e. 300*150, lineHeight and fontFamily are the default line height and font of canvas.

[0047] The technical means of this solution is published as a universal network interface and deployed on the underlying interface service of the production environment, so that any Web front-end application can call it at any time, truly realizing on-demand calling and ensuring the rational use of network resources.

Claims

1. A method for optimizing the size of a web page font file, characterized by: It includes two aspects: client and server. The client crawls local CSS and HTML files, crawls out the used characters, deletes the unused character data from the font to achieve compression, and then generates a format that can be used across browsers. The server side utilizes the good performance characteristics of MidwayJS server-side technology when processing high-concurrency requests and the natural advantages of NodeJS in graphics processing. By building a NodeJS service in combination with node-canvas, text is dynamically rendered, and a binary search algorithm is used to implement details such as text wrapping, punctuation marks not appearing in the first line, and English words not being split. The toDataURL() method on the canvas object is then used to output the base64 format of the image. Finally, the interface implemented by MidwayJS is packaged, and the user only needs to pass specific parameters.

2. The method for optimizing the size of a web page font file according to claim 1, characterized in that: The client is implemented based on static sites and dynamic sites. By parsing static text files and AST, the content that needs to be retained in the font file is obtained, and then encoded into a font format that can be used across platforms.

3. The method for optimizing the size of a web page font file according to claim 1, characterized in that: The server-side process specifically includes the following steps: A. Use NodeJS technology to start a service and define a post interface that can receive special font parameters, and finally return a base64 of an image; B. Install and download all font files on the server; C. Install the node-canvas plug-in and use the createCanvas method to create a canvas; D. Use the fillText method provided by canvas to write text to the canvas, and use parameters to determine the line height, starting position, font color, and font size of the text; E. Use canvas.registerFont method to import and name custom fonts, and use context.fontFamily = 'fontSize, "font name"' to set the font size and special format; F. Use the measureText method provided by canvas to measure the text width, and use the binary search algorithm to wrap the text; G. Use a regular expression to determine whether the character after the line break point is a punctuation mark. If so, move the line break point forward by one character and perform a line break; if not, perform a normal line break operation; H. Use regular expressions to determine whether the line break point position matches a space forward. If not, keep matching forward until a space is matched and record the number of characters n that match forward. Then move the line break point position forward by n positions and perform a line break. If yes, perform a normal line break operation. I. Use the canvas.toDataURL() method to output the formed text canvas as a base64 format image file and return it to the client as a result. The client directly uses the image tag element to load it.

4. The method for optimizing the size of a web page font file according to claim 3, characterized in that: In step A, the special font parameters include text content, font size, font color, text start x coordinate, text start y coordinate, image width, image height, text line height and font format.

5. The method for optimizing the size of a web page font file according to claim 3, characterized in that: In the step C, the method of using the createCanvas plug-in to create a canvas is that the width and height of the canvas are determined by the two parameters of width and height passed in, and then a context object is created through getContext, and the context object is the drawing context object obtained through canvas.

6. The method for optimizing the size of a web page font file according to claim 3, characterized in that: In the step F, the measureText method sets the new position x of the text after the line break to the input x initial value, and the y value to the input y value + the input lineHeight value.

7. The method for optimizing the size of a web page font file according to claim 3, characterized in that: In step F, the binary algorithm is that if the text width before a certain position is less than or equal to the set width, and the text width before the next character after it is greater than the set width, this position point is the line break point, and then the entire text is searched in a loop until there is no such line break point.

Images