Web page image resource processing method and device

Abstract

The embodiment of the present application provides a method and device for processing web page image resources, the method comprising: obtaining a web page application project sent by a user and performing webp image format conversion, determining a corresponding cascading style resource file based on the webp image file obtained after the image format conversion; performing webp image format compatibility detection on a hypertext markup language file of the web page application project, and loading the cascading style resource file when it is detected that the current web page application project supports the webp image format; the present application can effectively improve the front-end application development efficiency and website web page performance.

Description

Technical Field

[0001] The present application relates to the field of front-end development, and specifically to a method and device for processing web page image resources. Background Art

[0002] Web pages contain a large amount of image information, and there are many formats of images, such as: bmp, jpg, png, tif, gif, pcx, tga, exif, fpx, svg, psd, cdr, pcd, dxf, ufo, eps, ai, raw, WMF, webp, avif, apng. The most commonly used image formats on web sites are: jpg, png, svg, gif and webp.

[0003] Since 65% of the data transmitted on the Internet is images, reducing the size of images will significantly improve the performance of web pages, especially shorten the display time of web page information and improve user experience. Among image formats, webp images have significantly smaller image size under the same image quality. Compared with JPEG, webp can reduce the image size by 40%; compared with png, webp can reduce the image size by 75%. Although webp has obvious advantages in image size, the browser compatibility of webp is not optimistic. For example, webp has obvious browser compatibility issues in IE, Safari and low-version Edge browsers, that is, some browsers cannot display webp images. Summary of the invention

[0004] In response to the problems in the prior art, the present application provides a method and device for processing web page image resources, which can effectively improve the efficiency of front-end application development and website web page performance.

[0005] In order to solve at least one of the above problems, the present application provides the following technical solutions:

[0006] In a first aspect, the present application provides a method for processing web page image resources, comprising:

[0007] Obtain the web application project sent by the user and convert the webp image format, and determine the corresponding cascading style resource file according to the webp image file obtained after the image format conversion;

[0008] The webp image format compatibility detection is performed on the hypertext markup language file of the web application project, and the cascading style resource file is loaded when it is detected that the current web application project supports the webp image format.

[0009] Furthermore, the obtaining of the web application project sent by the user and converting the webp image format includes:

[0010] Traverse the image file resources in the web application project to obtain a collection of image resource files;

[0011] The preset format conversion plug-in is called to convert each image resource file of the image resource set into the webp image format, and the webp image file resources obtained after the image format conversion are stored in the webp image file directory.

[0012] Furthermore, the determining of the corresponding cascading style resource file according to the webp picture file obtained after the picture format conversion includes:

[0013] Traversing the cascading style file resources in the web application project to obtain a cascading style resource file set;

[0014] Copy the file content of each cascading style resource file in the cascading style resource file set to a newly added cascading style resource file corresponding to the webp picture format in the current directory;

[0015] The preset style processing plug-in is called to replace the image resource link in the newly added cascading style resource file with the webp image resource link corresponding to the webp image file directory, so as to obtain a cascading style resource file set after the image resource link is replaced.

[0016] Further, the webp image format compatibility detection is performed on the hypertext markup language file of the web application project, and the cascading style resource file is loaded when it is detected that the current web application project supports the webp image format, including:

[0017] Determine the image format type supported by the current web application project according to the image file directory request operation triggered by the header tag content in the hypertext markup language file;

[0018] If the current web application project supports the webp picture format, then the cascading style resource file replaced by the picture resource link is loaded into the picture tag content of the hypertext markup language file.

[0019] In a second aspect, the present application provides a web page image resource processing device, comprising:

[0020] A format conversion module is used to obtain a web application project sent by a user and perform webp image format conversion, and determine a corresponding cascading style resource file according to the webp image file obtained after the image format conversion;

[0021] The detection and loading module is used to perform webp image format compatibility detection on the hypertext markup language file of the web application project, and load the cascading style resource file when it is detected that the current web application project supports the webp image format.

[0022] Furthermore, the format conversion module includes:

[0023] A picture resource acquisition unit, used to traverse the picture file resources in the web application project and obtain a picture resource file set;

[0024] The picture format conversion unit is used to call a preset format conversion plug-in to convert each picture resource file of the picture resource set into a webp picture format, and store the webp picture file resources obtained after the picture format conversion into a webp picture file directory.

[0025] Furthermore, the format conversion module includes:

[0026] A cascading style acquisition unit, used to traverse the cascading style file resources in the web application project to obtain a cascading style resource file set;

[0027] A resource file creation unit, used to copy the file content of each cascading style resource file in the cascading style resource file set to a newly added cascading style resource file corresponding to the webp picture format in the current directory;

[0028] The resource link replacement unit is used to call a preset style processing plug-in to replace the image resource link in the newly added cascading style resource file with a webp image resource link corresponding to the webp image file directory, and obtain a cascading style resource file set after the image resource link is replaced.

[0029] Furthermore, the detection loading module includes:

[0030] A format type determination unit, configured to determine the image format type supported by the current web application project according to an image file directory request operation triggered by the header tag content in the hypertext markup language file;

[0031] The cascading style loading unit is used to load the cascading style resource file replaced by the image resource link in the image tag content of the hypertext markup language file if the current web application project supports the webp image format.

[0032] In a third aspect, the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the web page image resource processing method when executing the program.

[0033] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the web page image resource processing method.

[0034] It can be seen from the above technical solution that the present application provides a web page image resource processing method and device, which obtains the web application project sent by the user and performs webp image format conversion, determines the corresponding cascading style resource file according to the webp image file obtained after the image format conversion, performs webp image format compatibility detection on the hypertext markup language file of the web application project, and loads the cascading style resource file when it is detected that the current web application project supports the webp image format, so that the web application developer can make the web application support the display of webp image resources without changing the project code, thereby effectively improving the front-end application development efficiency and website web page performance. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0036] Figure 1 This is one of the flow charts of the web page image resource processing method in the embodiment of the present application;

[0037] Figure 2 This is a second flow chart of the web page image resource processing method in the embodiment of the present application;

[0038] Figure 3 This is a third flow chart of the web page image resource processing method in the embodiment of the present application;

[0039] Figure 4 This is a fourth flow chart of the web page image resource processing method in the embodiment of the present application;

[0040] Figure 5 This is one of the structural diagrams of the web page image resource processing device in the embodiment of the present application;

[0041] Figure 6 This is the second structural diagram of the web page image resource processing device in the embodiment of the present application;

[0042] Figure 7 This is the third structural diagram of the web page image resource processing device in the embodiment of the present application;

[0043] Figure 8 This is the fourth structural diagram of the web page image resource processing device in the embodiment of the present application;

[0044] Fig. 9 It is a schematic diagram of the structure of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION

[0045] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0046] Considering that 65% of the data transmitted on the Internet is images, reducing the size of images will significantly improve the performance of web pages, especially shorten the display time of web page information and improve user experience. Among image formats, webp images have significantly smaller image sizes with the same image quality. Compared with JPEG, webp can reduce the image size by 40%; compared with png, webp can reduce the image size by 75%. Although webp has obvious advantages in image size, the browser compatibility of webp is not optimistic. For example, webp has obvious browser compatibility issues in IE, Safari and lower versions of Edge, that is, some browsers cannot display webp images. The present application provides a web page image resource processing method and device, which obtains a web application project sent by a user and performs webp image format conversion, determines the corresponding cascading style resource file according to the webp image file obtained after the image format conversion, performs webp image format compatibility detection on the hypertext markup language file of the web application project, and loads the cascading style resource file when it is detected that the current web application project supports the webp image format, so that the web application developer can make the web application support the display of webp image resources without changing the project code, thereby effectively improving the front-end application development efficiency and website web page performance.

[0047] In order to effectively improve the efficiency of front-end application development and website performance, this application provides an embodiment of a web page image resource processing method, see Figure 1 The web page image resource processing method specifically includes the following contents:

[0048] Step S101: obtaining a web application project sent by a user and performing webp image format conversion, and determining a corresponding cascading style resource file according to the webp image file obtained after the image format conversion.

[0049] Optionally, the present application may use the image conversion plug-in webp-converter when converting non-webp image resource files in a web application project into webp image resources.

[0050] Optionally, after completing the image format conversion, this application also needs to add a cascading style resource file, that is, a css file, and replace the non-webp image link of the image resource in the newly added css file with a webp image resource link to determine the corresponding cascading style resource file.

[0051] Step S102: performing a webp image format compatibility check on the hypertext markup language file of the web application project, and loading the cascading style resource file when it is detected that the current web application project supports the webp image format.

[0052] Optionally, the present application may also process a hypertext markup language file (i.e., an HTML file) in a web application project into content that supports both webp and non-webp image formats. The specific operations may include:

[0053] 1. Process the img tag content in the file.

[0054] 2. Add webp format image compatibility detection code to the html file.

[0055] 3. Add reference to css file code in html file.

[0056] 4. Add dynamic configuration img tag src attribute code to the html file.

[0057] Therefore, the present application can load the cascading style resource file when it is detected that the current web application project supports the webp image format to complete automatic support for the webp image format.

[0058] From the above description, it can be seen that the web page image resource processing method provided in the embodiment of the present application can obtain the web application project sent by the user and perform webp image format conversion, determine the corresponding cascading style resource file according to the webp image file obtained after the image format conversion, perform webp image format compatibility detection on the hypertext markup language file of the web application project, and load the cascading style resource file when it is detected that the current web application project supports the webp image format, so that the web application developer can make the web application support the display of webp image resources without changing the project code, thereby effectively improving the front-end application development efficiency and website web page performance.

[0059] In order to accurately convert the image format, in one embodiment of the web page image resource processing method of the present application, see Figure 2 , the above step S101 may also specifically include the following contents:

[0060] Step S201: traverse the image file resources in the web application project to obtain an image resource file set.

[0061] Step S202: calling a preset format conversion plug-in to convert each image resource file of the image resource set into a webp image format, and storing the webp image file resources obtained after the image format conversion into a webp image file directory.

[0062] Optionally, first, the application can traverse the image file resources in the web application project, such as: jpg, png, svg, gif and webp format image resource files, to obtain a set of image resource files.

[0063] Then, this application can process each file in the image resource collection in a loop, and will not process those with a file extension of webp; for image resources with a file extension of gif, the gwebp method of the webp-converter plug-in is called to convert the gif image into a webp image, and the converted webp image and the gif image are located in the same directory; for image resources with other file extensions other than gif (such as png, jpg, svg, etc.), the cwebp method of the webp-converter plug-in is called to convert the gif image into a webp image, and the newly generated webp image and the original image are located in the same directory structure.

[0064] Therefore, each non-webp image resource in the web application has an image file with the same file name and extension of webp in the same directory structure. For example, if there is a test.png in the image directory of the original project, after this step, there will be an additional test.webp image file in the image directory.

[0065] In order to accurately perform the corresponding transformation of the cascading style, in one embodiment of the web page image resource processing method of the present application, see Figure 3 , the above step S101 may also specifically include the following contents:

[0066] Step S301: traverse the cascading style sheet file resources in the web application project to obtain a cascading style sheet resource file set.

[0067] Step S302: copy the file content of each cascading style resource file in the cascading style resource file set to a newly added cascading style resource file corresponding to the webp picture format in the current directory.

[0068] Step S303: calling a preset style processing plug-in to replace the image resource link in the newly added cascading style resource file with a webp image resource link corresponding to the webp image file directory, and obtaining a cascading style resource file set after the image resource link is replaced.

[0069] Optionally, first, the application can traverse all css file resources in the web application project to obtain a css file collection.

[0070] Then, loop through each file in the css file collection.

[0071] Specifically, copy this file and generate a .webp.css file in the same directory. For example, if there is a test.css file in the original css directory, copy the contents of the test.css file and generate a test.webp.css file in the css directory.

[0072] Then, a postcss plug-in is used to process the newly generated css file. The structure after postcss parsing is an AST (abstract syntax code), which abstracts the source code into a tree structure. The AST describes the information of the source code. The image resource is linked to the decl attribute of the AST node. Therefore, this application implements a postcss plug-in to process the image link address on the del attribute of the AST node.

[0073] Optional, because the image link is only on the background-image or background attribute of css, use the walkDeclsAPI of postcss to traverse the content of the background-image and background attributes, and obtain the values ​​of the background-image and background attributes. If the attribute value contains an image link (the image link is in the URL) and the image link address is not a webp image, use a regular expression to replace the image link address with a webp image file link (the web application already has a webp image file); then, write the code processed by the postcss plug-in into .webp.css.

[0074] In order to enable web application engineering to adapt to the webp picture format, in one embodiment of the web page picture resource processing method of the present application, see Figure 4 , the above step S102 may also specifically include the following contents:

[0075] Step S401: determining the image format types supported by the current web application project according to the image file directory request operation triggered by the header tag content in the hypertext markup language file.

[0076] Step S402: If the current web application project supports the webp picture format, then the cascading style resource file after the picture resource link is replaced is loaded into the picture tag content of the hypertext markup language file.

[0077] Optionally, the present application may also process a hypertext markup language file (i.e., an HTML file) in a web application project into content that supports both webp and non-webp image formats. The specific operations may include:

[0078] 1. Process the img tag content in the file.

[0079] 2. Add webp format image compatibility detection code to the html file.

[0080] 3. Add reference to css file code in html file.

[0081] 4. Add dynamic configuration img tag src attribute code to the html file.

[0082] Specifically, first process the content of the img tag: the img tag is used in html to display images, where img has a src attribute, such as <img src＝"url"> , URL refers to the location where the image is stored. For example, in the code: <img src＝"boat.gif"alt＝"Big Boat"> , the page displays the picture boat.gif.

[0083] Therefore, this application can <img src＝"boat.gif"alt＝"Big Boat"> Example code, converted to <img src＝""data-no-webp＝"boat.gif"data-webp＝"boat.webp"alt＝"Big Boat"> , the content of the img tag src attribute is an empty string, and two custom attributes are added, data-webp and data-no-webp. The value of the newly added data-no-webp attribute is the content of the original src attribute; the value of the newly added data-webp attribute is the webp image format of the original src image file name.

[0084] When the browser running the web page supports webp format images, this application can insert JavaScript code to assign the data-webp attribute content to the src attribute, and the img tag will display the webp format image; if the browser running the html does not support webp, the JavaScript code in the html will assign the data-no-webp attribute content to the src attribute, and the img tag will display the non-webp format image. In this way, a set of html files can be implemented, which supports both webp and non-webp image resource display.

[0085] Furthermore, this application can use the parse5 plug-in to parse HTML into a syntax tree (AST). The process of processing the img tag is as follows:

[0086] 1. Loop through the nodes whose nodeName is "img" in the AST.

[0087] 2. Get the src attribute value of the node and assign the src attribute value to an empty string.

[0088] 3. Add two new attributes data-no-webp and data-webp to this "img" node, assign the obtained src attribute value to the data-no-webp attribute value, and use regular expressions to assign the webp format image file of the src attribute value to the data-webp attribute.

[0089] 4. Generate HTML content based on the new AST and replace the original HTML file content.

[0090] Therefore, after this step, the src attribute of the img tag in each HTML page is assigned an empty string, and two new attributes are added to the img tag.

[0091] Then, add the webp format image compatibility detection code to the HTML file.

[0092] Specifically, add the webp format image compatibility detection code in AST, and add the webp format image compatibility detection code to the head tag of the web page (the reason for adding it to the head tag is: the head tag is at the very front of the html page, and the webp format image compatibility detection should be implemented as early as possible to prepare for the subsequent dynamic insertion of css files and assignment of img tag src attribute content).

[0093] Traverse the tags with nodeName "head" in AST, and insert the webp compatibility detection code in the childNodes node. The principle of webp compatibility detection is: use the toDataURL API of the browser's canvas to detect whether the browser supports webp images.

[0094] The core logic is that if the canvas's toDataURLAPI returns a string starting with "data:image / webp", it means that the browser supports webp format images. Otherwise, the browser does not support webp format images. If the webpEnable variable on the web page is a Boolean value of true, it means that webp format images are supported. If the webpEnable variable is a Boolean value of false, it means that webp format images are not supported.

[0095] Then, add the reference css file code in the html file.

[0096] Specifically, traverse the tags with nodeName "link" in AST, and there are nodes with name "type" and value "text / css" in the attrs attribute array. Because the link tag may also link other resources such as icon resources, it is necessary to determine that the attribute type is "text / css" to link the CSS file.

[0097] Traverse all nodes in the AST that link to css files, and record the value of the element named "href" in the attrs attribute array of the node (that is, record all the linked css files in the html page). Then delete all nodes in the AST that link to css files (they will be dynamically inserted again using JavaScript code later). Based on whether the browser supports the webp logo obtained from the above content, use JavaScript code to reinsert the href content of the link tag into the head of the web page.

[0098] Among them, webpEnable is the identifier of whether the browser supports webp images. If the browser supports the webp format, the path value is ".webp", otherwise it is an empty string. When the browser supports webp image resources, the CSS resource linked by link is "css / index.webp.css"; if the browser does not support webp image resources, the CSS resource linked by link is "css / index.css" (that is, the CSS file in the original web application).

[0099] Therefore, when the browser does not support webp images, it loads the original css file of the web page, and when the browser supports webp images, it loads the newly generated css file of the aforementioned content.

[0100] Finally, add the code to dynamically configure the img tag src attribute in the HTML file.

[0101] Because the src attribute of the img tag on the processed HTML page is an empty string (if it is empty, the image cannot be displayed accurately without processing), and the img tag also adds two new attributes data-no-webp and data-webp. This step adds the dynamic configuration img tag src attribute code at the end of the body node of the HTML file (the reason for adding it at the end of the body is: all the img tags on the page can be obtained at the end of the body, if it is at the beginning of the body, the head tag or other positions, the img tag cannot be accurately obtained).

[0102] The nodeName of the AST after parsing the html file is "body". A JavaScript code is added to the node to dynamically configure the src attribute code of the img tag. According to the webp format image support compatibility detection flag webpEnable, if webpEnable is true, the value of the data-webp attribute is assigned to the src attribute of the img tag (that is, load the webp format image), otherwise the value of the data-no-webp attribute is assigned to the src attribute of the img tag (that is, load the non-webp format image).

[0103] At this point, the HTML file is parsed into AST, and the AST is processed: the img tag in the AST is processed, the webp format image compatibility detection code is inserted into the ASThead tag, the node with the type attribute of "text / css" in the link tag is deleted from the AST and JavaScript is added to dynamically introduce the CSS file, and the code for processing the src content of the img tag is added to the end of the body node of the AST. Finally, the AST is generated into HTML code to overwrite the original HTML page content.

[0104] Therefore, web application developers can make web applications support the display of webp image resources without changing the project code (if the browser running the web application does not support the webp image format, the web application will automatically downgrade to use non-webp format image resources, which will not affect the page display).

[0105] In order to effectively improve the efficiency of front-end application development and website web page performance, the present application provides an embodiment of a web page image resource processing device for implementing all or part of the content of the web page image resource processing method, see Figure 5 , the web page image resource processing device specifically includes the following contents:

[0106] The format conversion module 10 is used to obtain the web application project sent by the user and perform webp image format conversion, and determine the corresponding cascading style resource file according to the webp image file obtained after the image format conversion.

[0107] The detection and loading module 20 is used to perform a webp image format compatibility detection on the hypertext markup language file of the web application project, and load the cascading style resource file when it is detected that the current web application project supports the webp image format.

[0108] From the above description, it can be seen that the web page image resource processing device provided in the embodiment of the present application can obtain the web application project sent by the user and perform webp image format conversion, determine the corresponding cascading style resource file according to the webp image file obtained after the image format conversion, perform webp image format compatibility detection on the hypertext markup language file of the web application project, and load the cascading style resource file when it is detected that the current web application project supports the webp image format, so that the web application developer can make the web application support the display of webp image resources without changing the project code, thereby effectively improving the front-end application development efficiency and website web page performance.

[0109] In order to accurately convert the image format, in one embodiment of the web page image resource processing device of the present application, see Figure 6 , the format conversion module 10 includes:

[0110] The image resource acquisition unit 11 is used to traverse the image file resources in the web application project to obtain an image resource file set.

[0111] The picture format conversion unit 12 is used to call a preset format conversion plug-in to convert each picture resource file of the picture resource set into a webp picture format, and store the webp picture file resources obtained after the picture format conversion into a webp picture file directory.

[0112] In order to accurately perform the corresponding transformation of the cascading style, in one embodiment of the web page image resource processing device of the present application, see Figure 7 , the format conversion module 10 includes:

[0113] The cascading style acquisition unit 13 is used to traverse the cascading style file resources in the web application project to obtain a cascading style resource file set.

[0114] The resource file creation unit 14 is used to copy the file content of each cascading style resource file in the cascading style resource file set to a newly added cascading style resource file corresponding to the webp picture format in the current directory.

[0115] The resource link replacement unit 15 is used to call a preset style processing plug-in to replace the image resource link in the newly added cascading style resource file with a webp image resource link corresponding to the webp image file directory, and obtain a cascading style resource file set after the image resource link is replaced.

[0116] In order to enable web application engineering to adapt to the webp picture format, in one embodiment of the web page picture resource processing device of the present application, see Figure 8 , the detection loading module 20 includes:

[0117] The format type determination unit 21 is used to determine the image format type supported by the current web application project according to the image file directory request operation triggered by the header tag content in the hypertext markup language file.

[0118] The cascading style loading unit 22 is used to load the cascading style resource file replaced by the image resource link in the image tag content of the hypertext markup language file if the current web application project supports the webp image format.

[0119] From the hardware level, in order to effectively improve the front-end application development efficiency and website web page performance, the present application provides an embodiment of an electronic device for implementing all or part of the content of the web page image resource processing method, and the electronic device specifically includes the following content:

[0120] Processor, memory, communication interface and bus; wherein the processor, memory and communication interface communicate with each other through the bus; the communication interface is used to realize information transmission between the web page image resource processing device and related devices such as the core business system, user terminal and related database; the logic controller can be a desktop computer, a tablet computer and a mobile terminal, etc., but the present embodiment is not limited thereto. In the present embodiment, the logic controller can be implemented with reference to the embodiment of the web page image resource processing method and the embodiment of the web page image resource processing device in the embodiment, and the contents thereof are incorporated herein, and the repeated parts are not repeated.

[0121] It is understandable that the user terminal may include a smart phone, a tablet electronic device, a network set-top box, a portable computer, a desktop computer, a personal digital assistant (PDA), a vehicle-mounted device, a smart wearable device, etc. Among them, the smart wearable device may include smart glasses, a smart watch, a smart bracelet, etc.

[0122] In practical applications, part of the web page image resource processing method can be executed on the electronic device side as described above, or all operations can be completed in the client device. The specific selection can be based on the processing capability of the client device and the limitations of the user's usage scenario. This application does not limit this. If all operations are completed in the client device, the client device may also include a processor.

[0123] The client device may have a communication module (i.e., a communication unit) that can communicate with a remote server to achieve data transmission with the server. The server may include a server on the task scheduling center side, and other implementation scenarios may also include a server on an intermediate platform, such as a server on a third-party server platform that has a communication link with the task scheduling center server. The server may include a single computer device, or a server cluster consisting of multiple servers, or a server structure of a distributed device.

[0124] Fig. 9 FIG. 9 is a schematic block diagram of the system structure of the electronic device 9600 according to an embodiment of the present application. Fig. 9 As shown, the electronic device 9600 may include a central processor 9100 and a memory 9140; the memory 9140 is coupled to the central processor 9100. It is worth noting that Fig. 9 is exemplary; other types of structures may also be used to supplement or replace this structure to implement telecommunication functions or other functions.

[0125] In one embodiment, the web page image resource processing method function may be integrated into the central processing unit 9100. The central processing unit 9100 may be configured to perform the following control:

[0126] Step S101: obtaining a web application project sent by a user and performing webp image format conversion, and determining a corresponding cascading style resource file according to the webp image file obtained after the image format conversion.

[0127] Step S102: performing a webp image format compatibility check on the hypertext markup language file of the web application project, and loading the cascading style resource file when it is detected that the current web application project supports the webp image format.

[0128] From the above description, it can be seen that the electronic device provided in the embodiment of the present application obtains the web application project sent by the user and performs webp image format conversion, determines the corresponding cascading style resource file according to the webp image file obtained after the image format conversion, performs webp image format compatibility detection on the hypertext markup language file of the web application project, and loads the cascading style resource file when it is detected that the current web application project supports the webp image format, so that the web application developer does not need to change the project code to enable the web application to support the display of webp image resources, thereby effectively improving the front-end application development efficiency and website web page performance.

[0129] In another embodiment, the web page image resource processing device can be configured separately from the central processing unit 9100. For example, the web page image resource processing device can be configured as a chip connected to the central processing unit 9100, and the web page image resource processing method function is implemented through the control of the central processing unit.

[0130] like Fig. 9 As shown, the electronic device 9600 may also include: a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It is worth noting that the electronic device 9600 does not necessarily have to include Fig. 9 In addition, the electronic device 9600 may also include Fig. 9 For components not shown, reference may be made to the prior art.

[0131] like Fig. 9 As shown, the central processing unit 9100 is sometimes also referred to as a controller or an operation control, and may include a microprocessor or other processor device and / or logic device. The central processing unit 9100 receives input and controls the operation of various components of the electronic device 9600.

[0132] The memory 9140 may be, for example, one or more of a cache, a flash memory, a hard drive, a removable medium, a volatile memory, a non-volatile memory or other suitable devices. The above-mentioned information related to the failure may be stored, and a program for executing the relevant information may also be stored. The CPU 9100 may execute the program stored in the memory 9140 to implement information storage or processing, etc.

[0133] The input unit 9120 provides input to the central processing unit 9100. The input unit 9120 is, for example, a key or a touch input device. The power supply 9170 is used to provide power to the electronic device 9600. The display 9160 is used to display display objects such as images and texts. The display may be, for example, an LCD display, but is not limited thereto.

[0134] The memory 9140 may be a solid-state memory, such as a read-only memory (ROM), a random access memory (RAM), a SIM card, etc. It may also be a memory that saves information even when the power is off, can be selectively erased, and is provided with more data, examples of which are sometimes referred to as EPROMs, etc. The memory 9140 may also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 may include an application / function storage unit 9142, which is used to store application programs and function programs or processes for executing the operation of the electronic device 9600 through the central processor 9100.

[0135] The memory 9140 may also include a data storage unit 9143 for storing data, such as contacts, digital data, pictures, sounds, and / or any other data used by the electronic device. The driver storage unit 9144 of the memory 9140 may include various drivers for communication functions of the electronic device and / or for executing other functions of the electronic device (such as messaging applications, address book applications, etc.).

[0136] The communication module 9110 is a transmitter / receiver 9110 that sends and receives signals via an antenna 9111. The communication module (transmitter / receiver) 9110 is coupled to the central processor 9100 to provide input signals and receive output signals, which may be the same as the case of a conventional mobile communication terminal.

[0137] Based on different communication technologies, multiple communication modules 9110 may be provided in the same electronic device, such as a cellular network module, a Bluetooth module and / or a wireless LAN module, etc. The communication module (transmitter / receiver) 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide an audio output via the speaker 9131 and receive an audio input from the microphone 9132, thereby realizing a common telecommunication function. The audio processor 9130 may include any suitable buffer, decoder, amplifier, etc. In addition, the audio processor 9130 is also coupled to the central processor 9100, so that recording can be performed on the local machine through the microphone 9132, and the sound stored on the local machine can be played through the speaker 9131.

[0138] The embodiments of the present application also provide a computer-readable storage medium capable of implementing all the steps of the web page image resource processing method in the above embodiment, where the execution subject is a server or a client. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, all the steps of the web page image resource processing method in the above embodiment are implemented. For example, when the processor executes the computer program, the following steps are implemented:

[0139] Step S101: obtaining a web application project sent by a user and performing webp image format conversion, and determining a corresponding cascading style resource file according to the webp image file obtained after the image format conversion.

[0140] Step S102: performing a webp image format compatibility check on the hypertext markup language file of the web application project, and loading the cascading style resource file when it is detected that the current web application project supports the webp image format.

[0141] From the above description, it can be seen that the computer-readable storage medium provided in the embodiment of the present application obtains the web application project sent by the user and performs webp image format conversion, determines the corresponding cascading style resource file according to the webp image file obtained after the image format conversion, performs webp image format compatibility detection on the hypertext markup language file of the web application project, and loads the cascading style resource file when it is detected that the current web application project supports the webp image format, so that the web application developer can make the web application support the display of webp image resources without changing the project code, thereby effectively improving the front-end application development efficiency and website web page performance.

[0142] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0143] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (apparatus), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0144] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0145] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0146] The present invention uses specific embodiments to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present invention.

Claims

1. A method for processing web page image resources, It is characterized in that The method comprises: Obtain the web application project sent by the user and convert the webp image format, and determine the corresponding cascading style resource file according to the webp image file obtained after the image format conversion; Performing a webp image format compatibility check on the hypertext markup language file of the web application project, and loading the cascading style resource file when it is detected that the current web application project supports the webp image format; The method for determining the corresponding cascading style resource file according to the webp picture file obtained after the picture format conversion includes: traversing the cascading style file resources in the webpage application project to obtain a cascading style resource file set; copying the file content of each cascading style resource file in the cascading style resource file set to a newly added cascading style resource file corresponding to the webp picture format in the current directory; calling a preset style processing plug-in to replace the picture resource link in the newly added cascading style resource file with a webp picture resource link corresponding to the webp picture file directory, and obtaining the cascading style resource file set after the picture resource link is replaced; The method further includes: processing the hypertext markup language file in the web application project into content that supports both webp and non-webp image formats, specifically including: Process the img tag content in the file, including: using the parse5 plug-in to parse HTML into a syntax tree, looping through the nodes with nodeName "img" in the syntax tree, obtaining the src attribute value of the node, assigning the src attribute value to an empty string, adding two new attributes data-no-webp and data-webp to this "img" node, assigning the obtained src attribute value to the data-no-webp attribute value, using regular expressions to assign the webp format image file of the src attribute value to the data-webp attribute, generating HTML content according to the new syntax tree, and replacing the original HTML file content; The html file adds a webp format image compatibility detection code, including: adding the webp format image compatibility detection code in the syntax tree, and adding the webp format image compatibility detection code to the head tag of the web page; The html file adds the code of referencing the CSS file, including: traversing all the nodes in the syntax tree that are linked to the CSS file, recording the value of the element name "href" in the attrs attribute array of the node, and then deleting all the nodes in the syntax tree that are linked to the CSS file, and reinserting the href content of the link tag into the head of the web page using JavaScript code according to whether the browser supports the webp identifier; The html file adds a code for dynamically configuring the src attribute of the img tag, including: adding a JavaScript code for dynamically configuring the src attribute of the img tag to the node with nodeName "body" in the syntax tree, and according to the webp format image support compatibility detection flag webpEnable, if webpEnable is true, assigning the value of the data-webp attribute to the src attribute of the img tag, otherwise assigning the value of the data-no-webp attribute to the src attribute of the img tag.

2. The web page image resource processing method according to claim 1, It is characterized in that The step of obtaining the web application project sent by the user and converting the webp image format includes: Traverse the image file resources in the web application project to obtain a collection of image resource files; A preset format conversion plug-in is called to convert each image resource file in the image resource file set into a webp image format, and the webp image file resources obtained after the image format conversion are stored in a webp image file directory.

3. The web page image resource processing method according to claim 1, It is characterized in that The performing webp image format compatibility detection on the hypertext markup language file of the web application project, and loading the cascading style resource file when it is detected that the current web application project supports the webp image format, includes: Determine the image format type supported by the current web application project according to the image file directory request operation triggered by the header tag content in the hypertext markup language file; If the current web application project supports the webp picture format, then the cascading style resource file replaced by the picture resource link is loaded into the picture tag content of the hypertext markup language file.

4. A web page image resource processing device, It is characterized in that include: A format conversion module is used to obtain a web application project sent by a user and perform webp image format conversion, and determine a corresponding cascading style resource file according to the webp image file obtained after the image format conversion; A detection and loading module, used for performing a webp image format compatibility detection on the hypertext markup language file of the web application project, and loading the cascading style resource file when it is detected that the current web application project supports the webp image format; The format conversion module comprises: A cascading style acquisition unit, used to traverse the cascading style file resources in the web application project to obtain a cascading style resource file set; A resource file creation unit, used to copy the file content of each cascading style resource file in the cascading style resource file set to a newly added cascading style resource file corresponding to the webp picture format in the current directory; A resource link replacement unit, used for calling a preset style processing plug-in to replace the image resource link in the newly added cascading style resource file with a webp image resource link corresponding to the webp image file directory, to obtain a cascading style resource file set after the image resource link is replaced; The format conversion module is also used to process the hypertext markup language file in the web application project into content that supports both webp and non-webp image formats, specifically including: Process the img tag content in the file, including: using the parse5 plug-in to parse HTML into a syntax tree, looping through the nodes with nodeName "img" in the syntax tree, obtaining the src attribute value of the node, assigning the src attribute value to an empty string, adding two new attributes data-no-webp and data-webp to this "img" node, assigning the obtained src attribute value to the data-no-webp attribute value, using regular expressions to assign the webp format image file of the src attribute value to the data-webp attribute, generating HTML content according to the new syntax tree, and replacing the original HTML file content; The html file adds a webp format image compatibility detection code, including: adding the webp format image compatibility detection code in the syntax tree, and adding the webp format image compatibility detection code to the head tag of the web page; The html file adds the code of referencing the CSS file, including: traversing all the nodes in the syntax tree that are linked to the CSS file, recording the value of the element name "href" in the attrs attribute array of the node, and then deleting all the nodes in the syntax tree that are linked to the CSS file, and reinserting the href content of the link tag into the head of the web page using JavaScript code according to whether the browser supports the webp identifier; The html file adds a code for dynamically configuring the src attribute of the img tag, including: adding a JavaScript code for dynamically configuring the src attribute of the img tag to the node with nodeName "body" in the syntax tree, and according to the webp format image support compatibility detection flag webpEnable, if webpEnable is true, assigning the value of the data-webp attribute to the src attribute of the img tag, otherwise assigning the value of the data-no-webp attribute to the src attribute of the img tag.

5. The web page image resource processing device according to claim 4, It is characterized in that The format conversion module comprises: A picture resource acquisition unit, used to traverse the picture file resources in the web application project and obtain a picture resource file set; The image format conversion unit is used to call a preset format conversion plug-in to convert each image resource file in the image resource file set into a webp image format, and store the webp image file resources obtained after the image format conversion into a webp image file directory.

6. The web page image resource processing device according to claim 4, It is characterized in that The detection loading module includes: A format type determination unit, configured to determine the image format type supported by the current web application project according to an image file directory request operation triggered by the header tag content in the hypertext markup language file; The cascading style loading unit is used to load the cascading style resource file replaced by the image resource link in the image tag content of the hypertext markup language file if the current web application project supports the webp image format.

7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, It is characterized in that When the processor executes the program, the steps of the web page image resource processing method described in any one of claims 1 to 3 are implemented.

8. A computer-readable storage medium having a computer program stored thereon, It is characterized in that When the computer program is executed by a processor, the steps of the web page image resource processing method described in any one of claims 1 to 3 are implemented.

Images