CN113568619A - Method, device and system for reducing volume of web-side file - Google Patents

Method, device and system for reducing volume of web-side file Download PDF

Info

Publication number
CN113568619A
CN113568619A CN202110899132.2A CN202110899132A CN113568619A CN 113568619 A CN113568619 A CN 113568619A CN 202110899132 A CN202110899132 A CN 202110899132A CN 113568619 A CN113568619 A CN 113568619A
Authority
CN
China
Prior art keywords
file
picture
format file
css
icon
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110899132.2A
Other languages
Chinese (zh)
Inventor
何万钰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Zhongtongji Network Technology Co Ltd
Original Assignee
Shanghai Zhongtongji Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Zhongtongji Network Technology Co Ltd filed Critical Shanghai Zhongtongji Network Technology Co Ltd
Priority to CN202110899132.2A priority Critical patent/CN113568619A/en
Publication of CN113568619A publication Critical patent/CN113568619A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10File systems; File servers
    • G06F16/16File or folder operations, e.g. details of user interfaces specifically adapted to file systems
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Software Systems (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

The application relates to the field of computer computing, in particular to a method for reducing the volume of a web-side file, which comprises the steps of receiving a packaging command of a picture file, wherein the picture file comprises an icon file and/or a picture file; responding to the picture file packaging command, converting the icon into an external link css format file, and/or converting the picture file into an external link url format file; naming the css format file or the url format file according to a preset rule; and storing the named css format file and/or the url format file, the named css format file and/or the url format file comprises a reference path of the file so as to call the picture class file. According to the method and the system, the pictures are stored on the server in the form of the outer chain url, the icon is stored on the server in the form of the outer chain css, the volumes of the icon and the pictures are reduced, and the web end bag body is kept healthy.

Description

Method, device and system for reducing volume of web-side file
Technical Field
The application belongs to the technical field of computers, and particularly relates to a method, a device and a system for reducing the volume of a web-side file.
Background
With the continuous development of the internet ecology, user experience, web end performance and user experience become more and more important; however, business growth is continuous, and the functions of applets are more complicated, wherein a large number of pictures and icons are inevitably used; in the optimization of the reduced volume size, the biggest obstacle is the volume of the picture and the icon.
The basic ideas of the existing solutions for icons are divided into three types. The first is to upload the icon to an external service, and introduce the address of the icon into the applet for rendering, which can increase the call number of http in the applet and increase the performance load of the web end. The second is to compile the icon into base64, and then put it into the local css file, this solution is not enough to optimize the volume of the web end, and will not reduce the volume significantly. The third is to put the icon file directly into the project folder, which is the most primitive reason for the huge file volume.
Based on the above, how to provide a method capable of reducing the volume of a web-side file is an urgent problem to be solved.
Disclosure of Invention
To overcome, at least to some extent, the problems in the related art, the present application provides a method for reducing the volume of a web end file, so as to keep the web end enclosure healthy.
In order to achieve the purpose, the following technical scheme is adopted in the application:
in a first aspect, a method for reducing a volume of a web-side file includes:
receiving a packaging command of a picture file, wherein the picture file comprises an icon file and/or a picture file;
responding to the picture file packaging command, converting the icon into an external link css format file, and/or converting the picture file into an external link url format file;
naming the css-format file or the url-format file according to a preset naming rule;
and storing the named css format file and/or the url format file, wherein the named css format file and/or the url format file comprise a reference path of the picture class file so as to call the picture class file.
Further, the preset naming rule is a project-module-icon name or the preset naming rule is a project-module-picture name.
Further, converting the icon into an out-link css format file, and/or converting the picture file into an out-link url format file, includes:
and converting at least one icon file into an outer chain css format file, and/or converting at least one image file into an outer chain url format file.
Further, converting the icon into an out-link css format file, and/or converting the picture file into an out-link url format file, includes:
calling a sprites plug-in to convert the icon file into an external chain css format file;
and calling the sprites plug-in to convert the picture file into an external chain url format file.
Further, before receiving the picture class file packing command, the method further comprises:
and uploading the picture class file to a server.
In a second aspect, an apparatus for reducing a volume of a web-side file, the apparatus includes:
the receiving module is used for receiving a packaging command of the picture files, and the picture files comprise icon files and/or picture files;
the packaging module is used for responding to the picture file packaging command, converting the icon into an external link css format file, and/or converting the picture file into an external link url format file;
the naming module is used for naming the css format file or the url format file according to a preset rule;
the storage module is used for storing the named css format file and/or the url format file, and the named css format file and/or the url format file comprise a reference path of the picture class file so as to call the picture class file.
In a third aspect, a system for reducing a volume of a web-side file, the system comprising a memory and a processor;
the memory is used for storing an application program;
the processor is used for running the application program and executing the method for reducing the volume of the web-end file according to any one of claims 1 to 5.
This application adopts above technical scheme, possesses following beneficial effect at least:
a method for reducing the volume of a web end file comprises the steps of receiving a packaging command of a picture file, wherein the picture file comprises an icon file and/or a picture file; responding to the picture file packaging command, converting the icon into an external link css format file, and/or converting the picture file into an external link url format file; naming the css format file or the url format file according to a preset rule; and storing the named css format file and/or the url format file, the named css format file and/or the url format file comprises a reference path of the picture class file so as to call the picture class file. According to the method and the system, the pictures are stored on the server in the form of the outer chain url, and the icon is stored on the server in the form of the outer chain css, so that the volumes of the icon and the pictures are reduced, and the web-end bag body is kept healthy.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a flow diagram illustrating method steps for reducing a volume of a web-side file, according to an exemplary embodiment.
Fig. 2 is a schematic structural diagram illustrating an apparatus for reducing a volume of a web-side file according to an exemplary embodiment.
FIG. 3 is a diagram illustrating file management according to an example embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail below. It is to be understood that the embodiments described are only a few embodiments of the present application and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the examples given herein without making any creative effort, shall fall within the protection scope of the present application.
With the continuous development of the internet ecology, user experience, web end performance and user experience become more and more important; however, business growth is continuous, and the functions of applets are more complicated, wherein a large number of pictures and icons are inevitably used; in the optimization of the reduced volume size, the biggest obstacle is the volume of the picture and the icon. Based on the method, the application provides a method for reducing the volume of the web-end file
Referring to fig. 1, fig. 1 is a flow chart illustrating steps of a method for reducing a volume of a web-side file according to an exemplary embodiment.
As shown in fig. 1, the method includes:
step S11, receiving a packaging command of a picture file, wherein the picture file comprises an icon file and/or a picture file;
step S12, responding to the picture file packaging command, converting the icon into an outer chain css format file, and/or converting the picture file into an outer chain url format file;
step S13, naming the css format file or the url format file according to a preset rule;
the preset naming rule is a project-module-icon name.
Step S14, storing the named css format file and/or url format file, where the named css format file and/or url format file includes a reference path of the picture class file, so as to call the picture class file.
It should be noted that, on the WWW, each information Resource has a Uniform and unique address on the network, and the address is called a URL (Uniform Resource Locator), which is a Uniform Resource Locator mark of the WWW and is referred to as a network address.
CSS Cascading Style Sheets (english-language full name: screening Style Sheets) is a computer language used to represent file styles such as HTML (an application of standard general markup language) or XML (a subset of standard general markup language). The CSS can not only statically modify the web page, but also dynamically format elements of the web page in coordination with various scripting languages. The CSS can accurately control the typesetting of element positions in the webpage at a pixel level, supports almost all font and font styles and has the capability of editing webpage objects and model styles.
The technical scheme provided by the application is in practical use, such as: taking an icon generation icon style css file as an example, receiving a packaging command of an icon file in a node environment; responding to the icon file packaging command, and packaging the icon file into a cs format file;
the preset naming rule can be that the css-format file is named according to a project-module-icon name rule, and the named css-format file is stored, such as 'wechat-send-back'. The named css format file includes a reference path of the picture class file to call the icon file. For use by developers.
The preset naming rule can also be used for naming the url format file according to the project-module-picture name rule and storing the named css format file, wherein the named url format file comprises a reference path of the picture type file so as to call the picture file. For use by developers.
It can be understood that, the method for reducing the volume of the web-side file provided by the present application receives a packaging command of the picture class file; responding to the picture file packaging command, and packaging the picture file into a cs format file; naming the css-format file according to a preset rule, and storing the named css-format file; the named css format file includes a reference path of the picture class file to call the picture class file. And the picture files are converted into the cs form, so that the volume of the picture files is reduced, and the web end bag body is kept healthy.
In some embodiments, converting the icon into an out-link css format file and/or converting the picture file into an out-link url format file includes:
calling a sprites plug-in to convert the icon file into an external chain css format file;
and calling the sprites plug-in to convert the picture file into an external chain url format file.
The sprites plug-in can convert not less than one icon file into an outer chain css format file and/or convert not less than one picture file into an outer chain url format file.
Sprites is called cs eidolon by many people in China, and is a web page picture application processing mode. It allows all sporadic pictures involved in a page to be included in a large picture so that when the page is accessed, the loaded pictures are not slowly displayed, one by one, as before. The required loading time of a single picture of no more than 200KB is substantially comparable to the speed at which current networks are popular, so this problem need not be taken into account.
In some embodiments, before receiving the picture class file packaging command, uploading the picture class file to a server is further included.
In actual use, uploading is carried out in a queue calling mode, at most 3 uploading actions are simultaneously carried out, and uploading progress and states are displayed on an interface for monitoring and processing. The back end adopts a multi-file uploading function based on java. The method supports slice batch uploading, and the data collected in the uploading process can be icon document flow, icon names, file paths and project names.
As a further improvement of the foregoing embodiment, the present application further provides an apparatus for reducing a volume of a web-side file, please refer to fig. 2, where fig. 2 is a schematic structural diagram of an apparatus for reducing a volume of a web-side file according to an exemplary embodiment; as shown in fig. 2:
the device includes:
the receiving module 21 is configured to receive a packaging command of a picture file, where the picture file includes an icon file and/or a picture file;
the packaging module 22 is used for responding to the picture file packaging command, converting the icon into an external link css format file, and/or converting the picture file into an external link url format file;
the naming module 23 is configured to name the css-format file or the url-format file according to a preset rule;
the storage module 24 is configured to store a named cs format file and/or a url format file, where the named cs format file and/or the url format file include a reference path of the picture class file, so as to call the picture class file.
With regard to the apparatus 2 for reducing the volume of the web-side file in the above embodiment, the specific manner in which each module performs the operation has been described in detail in the above embodiment of the related method, and will not be described in detail here.
Some embodiments also include a system for reducing a volume of a web-side file, the system comprising a memory and a processor;
the memory is used for storing an application program;
the processor is configured to run the application program and execute the method for reducing the volume of the web-end file according to any one of the above.
With regard to the system for reducing the volume of the web-side file in the above embodiment, the specific manner of executing the program in the memory by the processor has been described in detail in the above embodiment of the related method, and will not be described in detail here.
As a further improvement of the above embodiment, the present application also provides file management, please refer to fig. 3, where fig. 3 is a schematic diagram illustrating file management according to an exemplary embodiment; as shown in fig. 3:
by dividing the management interface into a left-right layout and a left classification operation bar, classification, modification and deletion can be created. And adopting vue.js to develop a front-end interface. The icon management interface uses the items as a primary classification, uses the module as a secondary classification under the items, and clicks the corresponding classification to display the corresponding uploaded icon file list; the icon files in the list can be subjected to addition, deletion, modification and check, and regeneration is supported.
It is understood that the same or similar parts in the above embodiments may be mutually referred to, and the same or similar parts in other embodiments may be referred to for the content which is not described in detail in some embodiments.
It should be noted that, in the description of the present application, the terms "first", "second", etc. are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. In addition, in the description of the present application, the meaning of "plurality" means at least two unless otherwise specified.
It will be understood that when an element is referred to as being "secured to" or "disposed on" another element, it can be directly on the other element or intervening elements may also be present; when an element is referred to as being "connected" to another element, it can be directly connected to the other element or intervening elements may also be present, and further, as used herein, connected may include wirelessly connected; the term "and/or" is used to include any and all combinations of one or more of the associated listed items.
Any process or method descriptions in flow charts or otherwise described herein may be understood as: represents modules, segments or portions of code which include one or more executable instructions for implementing specific logical functions or steps of a process, and the scope of the preferred embodiments of the present application includes other implementations in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the embodiments of the present application.
It should be understood that portions of the present application may be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, the various steps or methods may be implemented in software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, any one or combination of the following techniques, which are known in the art, may be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application specific integrated circuit having an appropriate combinational logic gate circuit, a Programmable Gate Array (PGA), a Field Programmable Gate Array (FPGA), or the like.
It will be understood by those skilled in the art that all or part of the steps carried by the method for implementing the above embodiments may be implemented by hardware related to instructions of a program, which may be stored in a computer readable storage medium, and when the program is executed, the program includes one or a combination of the steps of the method embodiments.
In addition, functional units in the embodiments of the present application may be integrated into one processing module, or each unit may exist alone physically, or two or more units are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The integrated module, if implemented in the form of a software functional module and sold or used as a stand-alone product, may also be stored in a computer readable storage medium.
The storage medium mentioned above may be a read-only memory, a magnetic or optical disk, etc.
In the description herein, reference to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the application. In this specification, the schematic representations of the terms used above do not necessarily refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.
Although embodiments of the present application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present application, and that variations, modifications, substitutions and alterations may be made to the above embodiments by those of ordinary skill in the art within the scope of the present application.

Claims (7)

1. A method for reducing the volume of a web-side file, the method comprising:
receiving a packaging command of a picture file, wherein the picture file comprises an icon file and/or a picture file;
responding to the picture file packaging command, converting the icon into an external link css format file, and/or converting the picture file into an external link url format file;
naming the css-format file or the url-format file according to a preset naming rule;
and storing the named css format file and/or the url format file, wherein the named css format file and/or the url format file comprise a reference path of the picture class file so as to call the file.
2. The method according to claim 1, wherein the preset naming convention is a project-module-icon name or the preset naming convention is a project-module-picture name.
3. The method of claim 1, wherein converting the icon into an out-link css format file and/or converting the picture file into an out-link url format file comprises:
and converting at least one icon file into an outer chain css format file, and/or converting at least one image file into an outer chain url format file.
4. The method according to any of claims 1-3, wherein converting the icon into an out-link css format file and/or converting the picture file into an out-link url format file comprises:
calling a sprites plug-in to convert the icon file into an external chain css format file;
and calling the sprites plug-in to convert the picture file into an external chain url format file.
5. The method of claim 1, wherein prior to receiving the picture class file packaging command, the method further comprises:
and uploading the picture class file to a server.
6. An apparatus for reducing a volume of a web-side file, the apparatus comprising:
the receiving module is used for receiving a packaging command of the picture files, and the picture files comprise icon files and/or picture files;
the packaging module is used for responding to the picture file packaging command, converting the icon into an external link css format file, and/or converting the picture file into an external link url format file;
the naming module is used for naming the css format file or the url format file according to a preset rule;
the storage module is used for storing the named css format file and/or the url format file, and the named css format file and/or the url format file comprise a reference path of the picture class file so as to call the picture class file.
7. A system for reducing a volume of a web-side file, the system comprising a memory and a processor;
the memory is used for storing an application program;
the processor is used for running the application program and executing the method for reducing the volume of the web-end file according to any one of claims 1 to 5.
CN202110899132.2A 2021-08-06 2021-08-06 Method, device and system for reducing volume of web-side file Pending CN113568619A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110899132.2A CN113568619A (en) 2021-08-06 2021-08-06 Method, device and system for reducing volume of web-side file

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110899132.2A CN113568619A (en) 2021-08-06 2021-08-06 Method, device and system for reducing volume of web-side file

Publications (1)

Publication Number Publication Date
CN113568619A true CN113568619A (en) 2021-10-29

Family

ID=78170598

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110899132.2A Pending CN113568619A (en) 2021-08-06 2021-08-06 Method, device and system for reducing volume of web-side file

Country Status (1)

Country Link
CN (1) CN113568619A (en)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103577552A (en) * 2013-10-17 2014-02-12 北京奇虎科技有限公司 Webpage picture processing method and device
US20140325349A1 (en) * 2013-04-30 2014-10-30 Adobe Systems Incorporated Real-time Representations of Edited Content
CN109359253A (en) * 2018-08-29 2019-02-19 浙江工业大学 A kind of web front end performance optimization method
CN111161283A (en) * 2019-12-26 2020-05-15 可牛网络技术(北京)有限公司 Method and device for processing picture resources and electronic equipment

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140325349A1 (en) * 2013-04-30 2014-10-30 Adobe Systems Incorporated Real-time Representations of Edited Content
CN103577552A (en) * 2013-10-17 2014-02-12 北京奇虎科技有限公司 Webpage picture processing method and device
CN109359253A (en) * 2018-08-29 2019-02-19 浙江工业大学 A kind of web front end performance optimization method
CN111161283A (en) * 2019-12-26 2020-05-15 可牛网络技术(北京)有限公司 Method and device for processing picture resources and electronic equipment

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
云之彼端灬约定之所: "前端图片优化(三):css sprite精灵图", pages 1 - 2, Retrieved from the Internet <URL:https://blog.csdn.net/qq_29837295/article/details/99304043> *

Similar Documents

Publication Publication Date Title
CN111143729B (en) Optimization method, device, equipment and storage medium based on single page application
US9424236B2 (en) Filtered Stylesheets
CN105574049B (en) Page processing method, device and system for mobile application
US9483449B1 (en) Optimizing page output through run-time reordering of page content
CN102495735A (en) Web end UI (user interface) component application frame system
WO2023065707A1 (en) Method and apparatus for page display
US20160344832A1 (en) Dynamic bundling of web components for asynchronous delivery
EP2275928A1 (en) Method for generating widget icon, client device, and widget engine
CN113495730A (en) Resource package generation and analysis method and device
CN114048415A (en) Form generation method and device, electronic equipment and computer readable storage medium
KR101907660B1 (en) Terminal apparatus having operating system based on web and method for providing service using thereof
KR102060660B1 (en) Method and Apparatus For Providing Web Browsing Service
CN111460348B (en) File processing method and device
CN115659087B (en) Page rendering method, equipment and storage medium
Lonka Improving the initial rendering performance of react applications through contemporary rendering approaches
CN116755822A (en) Micro front-end page application method, device, equipment and readable storage medium
CN113568619A (en) Method, device and system for reducing volume of web-side file
CN110599112B (en) Network page development and maintenance method and device
CN115935909A (en) File generation method and device and electronic equipment
CN116069330A (en) Middle and background template construction method, device and storage medium
US11843679B2 (en) Automated dependency management based on page components
US20150378688A1 (en) Developing rich internet application
CN112698826B (en) Low code page creation system, method and equipment
CN113849164A (en) Data processing method and device, electronic equipment and memory
CN116257707B (en) Application release method and device, electronic equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination