CN109558548A - A kind of method and Related product for eliminating CSS style redundancy - Google Patents
A kind of method and Related product for eliminating CSS style redundancy Download PDFInfo
- Publication number
- CN109558548A CN109558548A CN201710876129.2A CN201710876129A CN109558548A CN 109558548 A CN109558548 A CN 109558548A CN 201710876129 A CN201710876129 A CN 201710876129A CN 109558548 A CN109558548 A CN 109558548A
- Authority
- CN
- China
- Prior art keywords
- style
- style rule
- detected
- web page
- page element
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/443—Optimisation
- G06F8/4434—Reducing the memory space required by the program code
- G06F8/4435—Detection or removal of dead or redundant code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
This application discloses a kind of methods for eliminating CSS style redundancy, for removing the redundancy in CSS style file, this method comprises: obtaining style rule included by CSS style file from CSS style file, the mark of style rule is added in style rule set to be detected；Style rule used in detection web page element identifies whether in style rule set to be detected；The mark of the style rule used in the web page element removes the mark of style rule used in web page element in style rule set to be detected from style rule set to be detected；Style rule corresponding to the mark of style rule in style rule set to be detected is removed from CSS style file.Disclosed herein as well is device, storage medium and the processors of a kind of elimination CSS style redundancy.
Description
Technical field
This application involves Internet technical fields, and in particular to it is a kind of eliminate CSS style redundancy method, apparatus, storage
Medium and processor.
Background technique
In web page loading process, CSS (Cascading Style Sheets, cascading style sheets) pattern text can be loaded
Part.CSS style file can be used for defining the pattern of each web page element in webpage, such as can be determined by CSS style file
The font of each web page element, display color, background color, position etc. in adopted webpage.
During loading CSS style file, the size of CSS style file will affect the speed of webpage load.Existing
Have in technology, usually there is code redundancy in CSS style file, causes webpage loading velocity slower.Therefore, it is necessary to a kind of eliminations
The method of CSS style redundancy in CSS style file.
Summary of the invention
In view of this, the embodiment of the present application provides a kind of method and Related product for eliminating CSS style redundancy, to solve
The excessive technical problem for causing webpage loading velocity slower of CSS style file when loading webpage in the prior art.
To solve the above problems, technical solution provided by the embodiments of the present application is as follows:
A method of eliminating CSS style redundancy, which comprises
Style rule included by CSS style file is obtained from CSS style file, and the mark of the style rule is added
It is added in style rule set to be detected；
Style rule used in detection web page element identifies whether in the style rule set to be detected；
The mark of the style rule used in the web page element, will be described in the style rule set to be detected
The mark of style rule used in web page element is removed from the style rule set to be detected；
By style rule corresponding to the mark of style rule in the style rule set to be detected from the CSS style
It is removed in file.
Correspondingly, by the mark of style rule used in the web page element from the style rule set to be detected
After middle removal, by the style rule in the style rule set to be detected before being removed in the CSS style file, institute
State method further include:
Monitor the change that whether there is the web page element；
When there are the change of the web page element, detection change after web page element used in the mark of style rule be
It is no in the style rule set to be detected；
The mark of style rule used in web page element after the change is in the style rule set to be detected
In, by the mark of style rule used in the web page element after the change from the style rule set to be detected
It removes.
Correspondingly, described monitor the change that whether there is the web page element, comprising:
The change that whether there is the corresponding DOM object of the web page element is monitored, the change of the DOM object includes DOM
One of increase, deletion, modification and lookup of object are a variety of.
Correspondingly, described monitor the change that whether there is the web page element, comprising:
Monitor the change with the presence or absence of style rule used in the web page element.
Correspondingly, the mark of the style rule is added in style rule set to be detected, comprising:
List array is created, the mark of the style rule is added in the list array and is advised as pattern to be detected
Then gather.
A kind of device for eliminating CSS style redundancy, described device include:
Acquiring unit, for obtaining style rule included by CSS style file from CSS style file, by the sample
The mark of formula rule is added in style rule set to be detected；
Detection unit identifies whether to advise in the pattern to be detected for detecting style rule used in web page element
Then in set；
First removal unit, for working as the mark of style rule used in the web page element in the pattern to be detected
In regular collection, by the mark of style rule used in the web page element from the style rule set to be detected
It removes；
Second removal unit, for by pattern corresponding to the mark of style rule in the style rule set to be detected
Rule is removed from the CSS style file.
Correspondingly, described device further include:
Monitoring unit, for monitoring the change that whether there is the web page element；
The detection unit is also used to when there are the change of the web page element, the web page element after detection changes is made
Style rule identifies whether in the style rule set to be detected；
First removal unit, the mark for being also used to style rule used in the web page element after change exist
In the style rule set to be detected, by the mark of style rule used in the web page element after the change from it is described to
It is removed in detection style rule set.
Correspondingly, the monitoring unit is specifically used for:
The change that whether there is the corresponding DOM object of the web page element is monitored, the change of the DOM object includes DOM
One of increase, deletion, modification and lookup of object are a variety of.
Correspondingly, the monitoring unit is specifically used for:
Monitor the change with the presence or absence of style rule used in the web page element.
Correspondingly, the acquiring unit includes:
Subelement is created, for creating list array；
Subelement is obtained, for obtaining style rule included by CSS style file from CSS style file；
Subelement is added, for the mark of the style rule to be added in the list array as pattern to be detected
Regular collection.
A kind of storage medium, the storage medium include the program of storage, wherein described program executes above-mentioned elimination
The method of CSS style redundancy.
A kind of processor, the processor is for running program, wherein described program executes above-mentioned elimination when running
The method of CSS style redundancy.
It can be seen that the embodiment of the present application has the following beneficial effects:
The embodiment of the present application is by being added to style rule set to be detected for style rule included by CSS style file
In, detect webpage in load or operational process style rule used in web page element whether in style rule set to be detected
In, style rule used in web page element is removed from style rule set to be detected, then style rule set to be detected
In remaining style rule be the unused style rule of web page element, can by these unused style rules from
It is removed in CSS style file.To eliminate the redundancy section in CSS style file, it is big diminution CSS style file has been reached
It is small, improve the purpose of webpage loading velocity.
Detailed description of the invention
Fig. 1 is the flow chart that the embodiment of the method one of CSS style redundancy is eliminated in the embodiment of the present application；
Fig. 2 is the flow chart that the embodiment of the method one of CSS style redundancy is eliminated in the embodiment of the present application；
Fig. 3 is the schematic diagram that a webpage realizes code in the embodiment of the present application；
Fig. 4 is the schematic diagram of a CCS pattern file content in the embodiment of the present application；
Fig. 5 is that above-mentioned webpage realizes the changed schematic diagram of code in the embodiment of the present application；
Fig. 6 is the schematic diagram of the CCS pattern file content in the embodiment of the present application after an optimization；
Fig. 7 is the schematic diagram that the Installation practice one of CSS style redundancy is eliminated in the embodiment of the present application；
Fig. 8 is the schematic diagram that the Installation practice two of CSS style redundancy is eliminated in the embodiment of the present application.
Specific embodiment
In order to make the above objects, features, and advantages of the present application more apparent, with reference to the accompanying drawing and it is specific real
Mode is applied to be described in further detail the embodiment of the present application.
Firstly, being illustrated to some concepts involved in the embodiment of the present application.
Style rule: style rule can be applied to the web page element in webpage, for defining sample required for web page element
Formula, such as web page element are div element, then can use style rule and define the corresponding pattern of div element, div element is
For for bulk (block- in HTML (Hyper Text Markup Language, HyperText Markup Language) document
Level content) provides the element of structure and background.Style rule can be by one or more Style Attributes and its value group
At, such as style rule A may include the value of Style Attributes A, Style Attributes A, the value of Style Attributes B, Style Attributes B
Deng.
Style Attributes: the title of Style Attributes is a legal identifier, which is the key in CSS grammer
Word.A kind of Style Attributes define the one aspect of format modification.For example, Style Attributes color is the color attribute of text, and
Style Attributes text-indent is the retraction attribute of text fragment.The value that each Style Attributes can define, such as
Color:red indicates that the value of Style Attributes color (color) is red (red), that is, defines the color of text as red.
Label: label is the basic unit in html language, can be by the type of tag definition web page element, such as is led to
Div element can be defined by crossing label<div>.
DOM (Document Object Model, DOM Document Object Model): web page element is corresponding with DOM object, can be with
By the DOM object of the codelets access web page element such as JavaScript, to obtain the relevant information of the web page element.
During loading CSS style file, the size of CSS style file will affect the speed of webpage load.Existing
Have in technology, usually there is code redundancy in CSS style file, causes webpage loading velocity slower.
Inventor it has been investigated that, there are the reason of code redundancy in CSS style file to include:
First, in webpage project development process, many style rules can be write, but these style rules may be because
The modification of project demands makes a portion not practical application, and as project increases, these in CSS style file
Style rule is comparatively laborious using manually deleting.
Second, external style library can be usually introduced in webpage project development process in CSS style file, such as
Bootstrap style library includes many style rules in style library, but the style library introduced, has usually been only used wherein
Part format rule, so that causing includes the style rule not used in webpage operational process in CSS style file.
For this purpose, the embodiment of the present application is by without used style rule, reaching elimination in removal webpage operational process
Redundancy section in CSS style file improves the purpose of webpage loading velocity.
It is shown in Figure 1, a kind of embodiment of the method for the elimination CSS style redundancy provided in the embodiment of the present application is provided
One flow chart, may comprise steps of:
Step 101: style rule included by CSS style file is obtained from CSS style file, by the mark of style rule
Knowledge is added in style rule set to be detected.
Before starting webpage in a browser, the associated documents such as CSS style file can be obtained first, in CSS style file
Record has style rule.Pass through style rule included in the parsing available CSS style file of CSS style file.This Shen
Please embodiment style rule included in CSS style file will be detected, during detecting whether to exist operation webpage
The style rule not used.
Included style rule all has the mark of style rule, such as rule1 (style rule in CSS style file
1), rule2 (style rule 2) etc..The mark of these style rules can be added in style rule set to be detected, from
And the mark for reading style rule from style rule set to be detected in the next steps is detected.
In some possible implementations of the embodiment of the present application, the mark of style rule is added to pattern to be detected
Realization in regular collection may include: creation list array, by the mark of style rule be added in list array as to
Detect style rule set.
From list array read data speed faster, therefore in order to improve carry out following detection step speed, can
The mark of style rule is added to list array, then the list array can be used as style rule set to be detected.
Step 102: style rule used in detection web page element identifies whether in style rule set to be detected.
After the completion of webpage loads for the first time, the mark that can detecte style rule used in each element in webpage is
It is no in style rule set to be detected.
In practical applications, the list array for preserving style rule mark can be looped through, is read from list array
The mark for taking one style rule, using browser document.querySelector () or
Whether there is web page element that the style rule has been used to identify in document.querySelectorAll () method detection webpage
Corresponding style rule.If the style rule that web page element has used style rule mark corresponding, the web page element
The mark of used style rule is in style rule set to be detected.
Step 103: the mark of the style rule used in the web page element is in style rule set to be detected, by webpage
The mark of style rule used in element is removed from style rule set to be detected.
The mark of the style rule used in the web page element represents the style rule in style rule set to be detected
The corresponding style rule of mark be used, do not need to remove from CSS style file, then will be used in the web page element
The mark of style rule is removed from style rule set to be detected.
Step 104: by style rule corresponding to the mark of style rule in style rule set to be detected from CSS style
It is removed in file.
The mark of remaining style rule represents these and identifies corresponding sample in final style rule set to be detected
Formula rule is not used, and needs to remove from CSS style file.Not used style rule is removed in CSS style file,
The redundancy section in CSS style file can be effectively reduced, to reduce the volume of CSS style file, reaches optimization CSS style
The purpose of file.CSS style file when being again started up webpage, then after optimization can be used.
The embodiment of the present application can be applied before webpage is formally issued to user, then the webpage for being supplied to user exists
In loading procedure, the CSS style file after optimizing is used, can effectively improve webpage loading velocity.
In this way, the embodiment of the present application is advised by the way that style rule included by CSS style file is added to pattern to be detected
Then in set, detection webpage during loading style rule used in web page element whether in style rule set to be detected
In, style rule used in web page element is removed from style rule set to be detected, then style rule set to be detected
In remaining style rule be the unused style rule of web page element, can by these unused style rules from
It is removed in CSS style file.To eliminate the redundancy section in CSS style file, it is big diminution CSS style file has been reached
It is small, improve the purpose of webpage loading velocity.
If the pattern that webpage load terminates web page element is no longer changed, can be completed using above-described embodiment
Not used style rule is removed in CSS style file.But in some cases, it after the completion of webpage load, is run in webpage
In the process, there may be after the case where pattern of web page element changes, such as clickable hyperlinks, the hyperlink element
Color change etc..In this case, it is also necessary to consider the style rule that may be used in webpage operational process, from
And finally determine the not used style rule of web page element.Therefore following embodiment can be used, the net after changing is continued to test
Style rule used in page element identifies whether in style rule set to be detected, to be stored in CSS style file
The correctness of the middle not used style rule of removal.
It is shown in Figure 2, a kind of embodiment of the method for the elimination CSS style redundancy provided in the embodiment of the present application is provided
Two flow chart, may comprise steps of:
Step 201: style rule included by CSS style file is obtained from CSS style file, by the mark of style rule
Knowledge is added in style rule set to be detected.
Step 202: style rule used in detection web page element identifies whether in style rule set to be detected.
Step 203: the mark of the style rule used in the web page element is in style rule set to be detected, by webpage
The mark of style rule used in element is removed from style rule set to be detected.
Step 201- step 203 be after the completion of webpage load, will be by the mark of style rule used in web page element
The process removed from style rule set to be detected.Step 201- step 203 is identical as step 101- step 103, mutually speaks on somebody's behalf
Bright to may refer to above-described embodiment, details are not described herein.
Step 204: monitoring the change that whether there is web page element.
The change with the presence or absence of web page element is monitored there are many possible implementation.
In some possible implementations of the embodiment of the present application, the realization for monitoring the change that whether there is web page element can
To include:
The change that whether there is the corresponding DOM object of web page element is monitored, the change of DOM object includes the increasing of DOM object
One of add, delete, modify and search or is a variety of.
The window.MutationObserver method that browser can be used in practical applications monitors web page element pair
The change for the DOM object answered illustrates that corresponding web page element has sent change when DOM object changes.The change of DOM object is usual
One of increase, deletion, modification and lookup including DOM object are a variety of.Web page element, which changes, to be illustrated to be used
Style rule change,
In some possible implementations of the embodiment of the present application, the realization for the change that whether there is web page element is monitored also
May include:
Monitor the change with the presence or absence of style rule used in web page element.
Web page element may lead with new style rule, quotes new style rule Shi Ye in web page element and represents and exists
The change of the web page element.
Step 205: when there are the change of web page element, detection change after web page element used in style rule mark
Know whether in style rule set to be detected.
Change when web page element is sent, it is also necessary to detection change after web page element used in the mark of style rule be
It is no in style rule set to be detected.
In practical applications, the list array that traversal preserves style rule mark can be continued cycling through, from list array
It is middle read one style rule mark, using browser document.querySelector () or
Document.querySelectorAll () method detects whether that the web page element after changing has used the style rule mark
Know corresponding style rule.If the style rule that the web page element after changing has used style rule mark corresponding,
The mark of style rule used in web page element after change is in style rule set to be detected.
Step 206: the mark of style rule used in web page element after change is in style rule set to be detected
In, the mark of style rule used in the web page element after change is removed from style rule set to be detected.
For the mark of style rule used in web page element after change in style rule set to be detected, representing should
The corresponding style rule of the mark of style rule is used, and does not need to remove from CSS style file, then by the style rule
Mark removed from style rule set to be detected.
Step 204-206 is after the completion of webpage loads during continuing to run, used in the web page element by change
The process that the mark of style rule is removed from style rule set to be detected.Finally until experienced all possibility of web page element
Variation after, style rule corresponding to the mark of style rule is to be not used by final style rule set to be detected
Style rule can be removed from CSS style file.
Variation all possible for web page element can write the script triggering all possible variation of web page element, example
Such as hyperlink all in webpage is clicked by script, completes all possible variation of web page element.
Step 207: by style rule corresponding to the mark of style rule in style rule set to be detected from CSS style
It is removed in file.
The embodiment of the present application can be applied before webpage is formally issued to user, then the webpage for being supplied to user exists
In loading procedure, the CSS style file after optimizing is used, can effectively improve webpage loading velocity.
In this way, the embodiment of the present application can will be not used in the first loading procedure of webpage and in webpage whole operational process
To style rule removed from CSS style file, ensure that removed style rule be in webpage operational process really not
The style rule used.So as to correctly eliminate the redundancy section in CSS style file, diminution CSS style text is reached
Part size improves the purpose of webpage loading velocity.
This implementation is illustrated with specific example below.It is understood that the application scenarios in this example are only
For the exemplary illustration of the embodiment of the present application in order to facilitate understanding, the application embodiment is unrestricted in this regard.Phase
Instead, the application embodiment can be applied to applicable any scene.
It is shown in Figure 3, show the realization code of a webpage, it is assumed that the webpage during initial loading there are three
Div element, three div elements use style rule 1 (rule-1), style rule 2 (rule-2) and style rule 3 respectively
(rule-3)。
It is shown in Figure 4, show the content schematic diagram of a CSS style file.There are pattern rule in CSS style file
Then 1 (rule-1) arrives style rule 7 (rule-7) totally 7 style rules.
By parse CSS style file, can by the mark rule-1, rule-2 of this 7 style rules, rule-3,
Rule-4, rule-5, rule-6, rule-7 are put into list array, which is style rule set to be detected.
After the completion of webpage load, identifying whether in pattern to be detected rule for style rule used in div element is detected
Then in set.Using document.querySelector () method, it is known that rule-1, rule-2, rule-3 for using
In style rule set to be detected, then the mark of these style rules is deleted from style rule set to be detected, then at this time
Residue rule-4, rule-5, rule-6, rule-7 in style rule set to be detected.
It is shown in Figure 5, in webpage operational process, script file dynamic is used to increase the realization code of webpage,
A div element is increased, the style rule that the div element of the change uses is rule-4.Then had occurred by monitoring determination
The change of web page element.It is identified as rule-4 to detect style rule used in the web page element of change, to be checked
In test sample formula regular collection, the mark of the style rule is deleted from style rule set to be detected, then test sample to be checked at this time
Residue rule-5, rule-6, rule-7 in formula regular collection.
In webpage operational process, it is assumed that style rule used in the div element using rule-4 is changed, by
It is changed into using rule-4 using rule-5.The change of web page element can also equally be listened to.To detect the net of change
Style rule used in page element is identified as rule-5, in style rule set to be detected, by the mark of the style rule
Knowledge is deleted from style rule set to be detected, then residue rule-6, rule-7 in style rule set to be detected at this time.
Residue rule-6, rule-7 in style rule set to be detected may finally be determined by above step, then rule-
6, rule-7 identifies corresponding style rule and is not used by, and can remove from CSS style file.
It is shown in Figure 6, the content schematic diagram of the CSS style file after showing optimization.Then rule-6, rule-7 are corresponding
Style rule removed from CSS style file, achieved the purpose that the style rule that does not use of removal.
Not used style rule is removed in CSS style file, it is possible to reduce CSS style document code volume, Jin Erti
Webpage loading velocity is risen.
It is shown in Figure 7, one embodiment of device of the elimination CSS style redundancy provided in the embodiment of the present application is provided
Schematic diagram may include:
Acquiring unit 701, for obtaining style rule included by CSS style file from CSS style file, by pattern
The mark of rule is added in style rule set to be detected.
In some possible implementations of the embodiment of the present application, acquiring unit may include:
Subelement is created, for creating list array；
Subelement is obtained, for obtaining style rule included by CSS style file from CSS style file；
Subelement is added, for the mark of style rule to be added in list array as style rule collection to be detected
It closes.
Detection unit 702, for detect style rule used in web page element identify whether pattern to be detected advise
Then in set.
First removal unit 703, for working as the mark of style rule used in web page element in style rule to be detected
In set, the mark of style rule used in web page element is removed from style rule set to be detected.
Second removal unit 704, for by pattern corresponding to the mark of style rule in style rule set to be detected
Rule is removed from CSS style file.
It is shown in Figure 8, two embodiment of device of the elimination CSS style redundancy provided in the embodiment of the present application is provided
Schematic diagram may include:
Acquiring unit 701, for obtaining style rule included by CSS style file from CSS style file, by pattern
The mark of rule is added in style rule set to be detected.
In some possible implementations of the embodiment of the present application, acquiring unit may include:
Subelement is created, for creating list array；
Subelement is obtained, for obtaining style rule included by CSS style file from CSS style file；
Subelement is added, for the mark of style rule to be added in list array as style rule collection to be detected
It closes.
Detection unit 702, for detect style rule used in web page element identify whether pattern to be detected advise
Then in set.
First removal unit 703, for working as the mark of style rule used in web page element in style rule to be detected
In set, the mark of style rule used in web page element is removed from style rule set to be detected.
Monitoring unit 801, for monitoring the change that whether there is web page element.
Whether in some possible implementations of the embodiment of the present application, monitoring unit can be specifically used for: monitoring and deposit
Include the increase of DOM object, deletion, modify and look into the change of the change of the corresponding DOM object of web page element, DOM object
It one of looks for or a variety of.
Whether in some possible implementations of the embodiment of the present application, monitoring unit can be specifically used for: monitoring and deposit
The change of the style rule used in web page element.
Detection unit 702 is also used to work as there are the change of web page element, sample used in the web page element after detection change
Formula rule identifies whether in style rule set to be detected.
First removal unit 703 is also used to the mark of style rule used in web page element after changing to be checked
In test sample formula regular collection, by the mark of style rule used in the web page element after change from style rule set to be detected
Middle removal.
Second removal unit 704, for by pattern corresponding to the mark of style rule in style rule set to be detected
Rule is removed from CSS style file.
The device of above-mentioned elimination CSS style redundancy includes processor and memory, above-mentioned acquiring unit, detection unit,
One removal unit, the second removal unit and monitoring unit etc. store in memory as program unit, are executed by processor
Above procedure unit stored in memory realizes corresponding function.
Include kernel in processor, is gone in memory to transfer corresponding program unit by kernel.Kernel can be set one
Or more, CSS style redundancy is eliminated by adjusting kernel parameter.
Memory may include the non-volatile memory in computer-readable medium, random access memory (RAM) and/
Or the forms such as Nonvolatile memory, if read-only memory (ROM) or flash memory (flash RAM), memory include that at least one is deposited
Store up chip.
The embodiment of the invention provides a kind of storage mediums, are stored thereon with program, real when which is executed by processor
The method of existing above-mentioned elimination CSS style redundancy.
The embodiment of the invention provides a kind of processor, processor is for running program, wherein executes when program is run
It states and eliminates CSS style redundancy approach.
The embodiment of the invention provides a kind of equipment, equipment include processor, memory and storage on a memory and can
The program run on a processor, processor perform the steps of when executing program
Style rule included by CSS style file is obtained from CSS style file, and the mark of style rule is added to
In style rule set to be detected；
Style rule used in detection web page element identifies whether in style rule set to be detected；
The mark of the style rule used in the web page element is made web page element in style rule set to be detected
The mark of style rule is removed from style rule set to be detected；
By style rule corresponding to the mark of style rule in style rule set to be detected from CSS style file
It removes.
By the mark of style rule used in web page element after being removed in style rule set to be detected, will be to
The style rule in style rule set is detected before removing in CSS style file, can also include:
Monitor the change that whether there is web page element；
When there are the change of web page element, style rule used in the web page element after detection change is identified whether
In style rule set to be detected；
The mark of style rule used in web page element after change will change in style rule set to be detected
The mark of style rule used in web page element afterwards is removed from style rule set to be detected.
Monitoring may include: to monitor with the presence or absence of the corresponding DOM object of web page element with the presence or absence of the change of web page element
Change, the change of DOM object includes one of increase, deletion, modification and lookup or a variety of of DOM object.
Monitoring may include: to monitor with the presence or absence of the rule of pattern used in web page element with the presence or absence of the change of web page element
Change then.
It may include: creation list array that the mark of style rule, which is added in style rule set to be detected, by sample
The mark of formula rule is added in list array as style rule set to be detected.
Equipment herein can be server, PC, PAD, mobile phone etc..
Present invention also provides a kind of computer program products, when executing on data processing equipment, are adapted for carrying out just
The program of beginningization there are as below methods step:
Style rule included by CSS style file is obtained from CSS style file, and the mark of style rule is added to
In style rule set to be detected；
Style rule used in detection web page element identifies whether in style rule set to be detected；
The mark of the style rule used in the web page element is made web page element in style rule set to be detected
The mark of style rule is removed from style rule set to be detected；
By style rule corresponding to the mark of style rule in style rule set to be detected from CSS style file
It removes.
By the mark of style rule used in web page element after being removed in style rule set to be detected, will be to
The style rule in style rule set is detected before removing in CSS style file, can also include:
Monitor the change that whether there is web page element；
When there are the change of web page element, style rule used in the web page element after detection change is identified whether
In style rule set to be detected；
The mark of style rule used in web page element after change will change in style rule set to be detected
The mark of style rule used in web page element afterwards is removed from style rule set to be detected.
Monitoring may include: to monitor with the presence or absence of the corresponding DOM object of web page element with the presence or absence of the change of web page element
Change, the change of DOM object includes one of increase, deletion, modification and lookup or a variety of of DOM object.
Monitoring may include: to monitor with the presence or absence of the rule of pattern used in web page element with the presence or absence of the change of web page element
Change then.
It may include: creation list array that the mark of style rule, which is added in style rule set to be detected, by sample
The mark of formula rule is added in list array as style rule set to be detected.
In this way, the embodiment of the present application is advised by the way that style rule included by CSS style file is added to pattern to be detected
Then in set, detect whether webpage style rule used in web page element in load or operational process advises in pattern to be detected
Then in set, style rule used in web page element is removed from style rule set to be detected, then pattern rule to be detected
Then remaining style rule is the unused style rule of web page element in set, these unused patterns can be advised
Then removed from CSS style file.To eliminate the redundancy section in CSS style file, diminution CSS style file is reached
Size improves the purpose of webpage loading velocity.
It should be understood by those skilled in the art that, embodiments herein can provide as method, system or computer program
Product.Therefore, complete hardware embodiment, complete software embodiment or reality combining software and hardware aspects can be used in the application
Apply the form of example.Moreover, it wherein includes the computer of computer usable program code that the application, which can be used in one or more,
The computer program implemented in usable storage medium (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) produces
The form of product.
The application is referring to method, the process of equipment (system) and computer program product according to the embodiment of the present application
Figure and/or block diagram describe.It should be understood that every one stream in flowchart and/or the block diagram can be realized by computer program instructions
The combination of process and/or box in journey and/or box and flowchart and/or the block diagram.It can provide these computer programs
Instruct the processor of general purpose computer, special purpose computer, Embedded Processor or other programmable data processing devices to produce
A raw machine, so that being generated by the instruction that computer or the processor of other programmable data processing devices execute for real
The device for the function of being specified in present one or more flows of the flowchart and/or one or more blocks of the block diagram.
These computer program instructions, which may also be stored in, is able to guide computer or other programmable data processing devices with spy
Determine in the computer-readable memory that mode works, so that it includes referring to that instruction stored in the computer readable memory, which generates,
Enable the manufacture of device, the command device realize in one box of one or more flows of the flowchart and/or block diagram or
The function of being specified in multiple boxes.
These computer program instructions also can be loaded onto a computer or other programmable data processing device, so that counting
Series of operation steps are executed on calculation machine or other programmable devices to generate computer implemented processing, thus in computer or
The instruction executed on other programmable devices is provided for realizing in one or more flows of the flowchart and/or block diagram one
The step of function of being specified in a box or multiple boxes.
In a typical configuration, calculating equipment includes one or more processors (CPU), input/output interface, net
Network interface and memory.
Memory may include the non-volatile memory in computer-readable medium, random access memory (RAM) and/
Or the forms such as Nonvolatile memory, such as read-only memory (ROM) or flash memory (flash RAM).Memory is computer-readable Jie
The example of matter.
Computer-readable medium includes permanent and non-permanent, removable and non-removable media can be by any method
Or technology come realize information store.Information can be computer readable instructions, data structure, the module of program or other data.
The example of the storage medium of computer includes, but are not limited to phase change memory (PRAM), static random access memory (SRAM), moves
State random access memory (DRAM), other kinds of random access memory (RAM), read-only memory (ROM), electric erasable
Programmable read only memory (EEPROM), flash memory or other memory techniques, read-only disc read only memory (CD-ROM) (CD-ROM),
Digital versatile disc (DVD) or other optical storage, magnetic cassettes, tape magnetic disk storage or other magnetic storage devices
Or any other non-transmission medium, can be used for storage can be accessed by a computing device information.As defined in this article, it calculates
Machine readable medium does not include temporary computer readable media (transitory media), such as the data-signal and carrier wave of modulation.
It should also be noted that, the terms "include", "comprise" or its any other variant are intended to nonexcludability
It include so that the process, method, commodity or the equipment that include a series of elements not only include those elements, but also to wrap
Include other elements that are not explicitly listed, or further include for this process, method, commodity or equipment intrinsic want
Element.In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that including element
There is also other identical elements in process, method, commodity or equipment.
It will be understood by those skilled in the art that embodiments herein can provide as method, system or computer program product.
Therefore, complete hardware embodiment, complete software embodiment or embodiment combining software and hardware aspects can be used in the application
Form.It is deposited moreover, the application can be used to can be used in the computer that one or more wherein includes computer usable program code
The shape for the computer program product implemented on storage media (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.)
Formula.
The above is only embodiments herein, are not intended to limit this application.To those skilled in the art,
Various changes and changes are possible in this application.It is all within the spirit and principles of the present application made by any modification, equivalent replacement,
Improve etc., it should be included within the scope of the claims of this application.
Claims (10)
1. a kind of method for eliminating CSS style redundancy, which is characterized in that the described method includes:
Style rule included by CSS style file is obtained from CSS style file, and the mark of the style rule is added to
In style rule set to be detected；
Style rule used in detection web page element identifies whether in the style rule set to be detected；
The mark of the style rule used in the web page element is in the style rule set to be detected, by the webpage
The mark of style rule used in element is removed from the style rule set to be detected；
By style rule corresponding to the mark of style rule in the style rule set to be detected from the CSS style file
Middle removal.
2. the method according to claim 1, wherein by the mark of style rule used in the web page element
Know after being removed in the style rule set to be detected, by the style rule in the style rule set to be detected from institute
It states before being removed in CSS style file, the method also includes:
Monitor the change that whether there is the web page element；
When there are the change of the web page element, style rule used in the web page element after detection change is identified whether
In the style rule set to be detected；
The mark of style rule used in web page element after the change, will in the style rule set to be detected
The mark of style rule used in web page element after the change is removed from the style rule set to be detected.
3. according to the method described in claim 2, it is characterized in that, it is described monitor whether there is the web page element change,
Include:
The change that whether there is the corresponding DOM object of the web page element is monitored, the change of the DOM object includes DOM object
One of increase, deletion, modification and lookup or a variety of.
4. according to the method described in claim 2, it is characterized in that, it is described monitor whether there is the web page element change,
Include:
Monitor the change with the presence or absence of style rule used in the web page element.
5. the method according to claim 1, wherein the mark of the style rule is added to pattern to be detected
In regular collection, comprising:
List array is created, the mark of the style rule is added in the list array as style rule collection to be detected
It closes.
6. a kind of device for eliminating CSS style redundancy, which is characterized in that described device includes:
Acquiring unit advises the pattern for obtaining style rule included by CSS style file from CSS style file
Mark then is added in style rule set to be detected；
Detection unit, for detecting the identifying whether in the style rule collection to be detected of style rule used in web page element
In conjunction；
First removal unit, for working as the mark of style rule used in the web page element in the style rule to be detected
In set, the mark of style rule used in the web page element is removed from the style rule set to be detected；
Second removal unit, for by style rule corresponding to the mark of style rule in the style rule set to be detected
It is removed from the CSS style file.
7. device according to claim 6, which is characterized in that described device further include:
Monitoring unit, for monitoring the change that whether there is the web page element；
The detection unit is also used to work as there are the change of the web page element, used in the web page element after detection change
Style rule identifies whether in the style rule set to be detected；
First removal unit is also used to the mark of style rule used in the web page element after change described
In style rule set to be detected, by the mark of style rule used in the web page element after the change from described to be detected
It is removed in style rule set.
8. device according to claim 6, which is characterized in that the acquiring unit includes:
Subelement is created, for creating list array；
Subelement is obtained, for obtaining style rule included by CSS style file from CSS style file；
Subelement is added, for the mark of the style rule to be added in the list array as style rule to be detected
Set.
9. a kind of storage medium, which is characterized in that the storage medium includes the program of storage, wherein described program right of execution
Benefit require any one of 1 to 5 described in eliminate CSS style redundancy method.
10. a kind of processor, which is characterized in that the processor is for running program, wherein right of execution when described program is run
Benefit require any one of 1 to 5 described in eliminate CSS style redundancy method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710876129.2A CN109558548B (en) | 2017-09-25 | 2017-09-25 | Method for eliminating CSS style redundancy and related product |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710876129.2A CN109558548B (en) | 2017-09-25 | 2017-09-25 | Method for eliminating CSS style redundancy and related product |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109558548A true CN109558548A (en) | 2019-04-02 |
| CN109558548B CN109558548B (en) | 2021-05-25 |
Family
ID=65861968
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710876129.2A Active CN109558548B (en) | 2017-09-25 | 2017-09-25 | Method for eliminating CSS style redundancy and related product |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109558548B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111597107A (en) * | 2020-04-22 | 2020-08-28 | 北京字节跳动网络技术有限公司 | Information output method and device and electronic equipment |
| CN111898051A (en) * | 2020-07-23 | 2020-11-06 | 平安证券股份有限公司 | CSS style simplifying method and device, electronic equipment and storage medium |
| CN111984262A (en) * | 2020-07-14 | 2020-11-24 | 微民保险代理有限公司 | WeChat cascading style sheet file processing method, device, equipment and storage medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103914655A (en) * | 2014-03-17 | 2014-07-09 | 北京奇虎科技有限公司 | Downloaded file security detection method and device |
| CN104462390A (en) * | 2014-12-10 | 2015-03-25 | 华中科技大学 | Method and system for improving efficiency of adaptive layout of webpages |
| WO2015160351A1 (en) * | 2014-04-17 | 2015-10-22 | Hewlett-Packard Development Company, L.P. | Cascading style sheet meta language performance |
| CN105205080A (en) * | 2014-06-26 | 2015-12-30 | 阿里巴巴集团控股有限公司 | Redundant file clearing method, device and system |
| CN105224314A (en) * | 2015-09-09 | 2016-01-06 | 北京思特奇信息技术股份有限公司 | A kind of method and system realizing front-end code Automatic Optimal |
| CN106293785A (en) * | 2015-05-21 | 2017-01-04 | 富士通株式会社 | The method and apparatus that the rule set of Cascading Style Sheet is optimized |
| CN106919624A (en) * | 2015-12-28 | 2017-07-04 | 航天信息股份有限公司 | Improve the method and device of webpage loading velocity |
-
2017
- 2017-09-25 CN CN201710876129.2A patent/CN109558548B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103914655A (en) * | 2014-03-17 | 2014-07-09 | 北京奇虎科技有限公司 | Downloaded file security detection method and device |
| WO2015160351A1 (en) * | 2014-04-17 | 2015-10-22 | Hewlett-Packard Development Company, L.P. | Cascading style sheet meta language performance |
| CN105205080A (en) * | 2014-06-26 | 2015-12-30 | 阿里巴巴集团控股有限公司 | Redundant file clearing method, device and system |
| CN104462390A (en) * | 2014-12-10 | 2015-03-25 | 华中科技大学 | Method and system for improving efficiency of adaptive layout of webpages |
| CN106293785A (en) * | 2015-05-21 | 2017-01-04 | 富士通株式会社 | The method and apparatus that the rule set of Cascading Style Sheet is optimized |
| CN105224314A (en) * | 2015-09-09 | 2016-01-06 | 北京思特奇信息技术股份有限公司 | A kind of method and system realizing front-end code Automatic Optimal |
| CN106919624A (en) * | 2015-12-28 | 2017-07-04 | 航天信息股份有限公司 | Improve the method and device of webpage loading velocity |
Non-Patent Citations (1)
| Title |
|---|
| 许可等: "《一种自动分析CSS的改进方法研究》", 《计算机工程与科学》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111597107A (en) * | 2020-04-22 | 2020-08-28 | 北京字节跳动网络技术有限公司 | Information output method and device and electronic equipment |
| CN111597107B (en) * | 2020-04-22 | 2023-04-28 | 北京字节跳动网络技术有限公司 | Information output method and device and electronic equipment |
| CN111984262A (en) * | 2020-07-14 | 2020-11-24 | 微民保险代理有限公司 | WeChat cascading style sheet file processing method, device, equipment and storage medium |
| CN111898051A (en) * | 2020-07-23 | 2020-11-06 | 平安证券股份有限公司 | CSS style simplifying method and device, electronic equipment and storage medium |
| CN111898051B (en) * | 2020-07-23 | 2023-08-15 | 平安证券股份有限公司 | CSS style simplifying method and device, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109558548B (en) | 2021-05-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8510237B2 (en) | Machine learning method to identify independent tasks for parallel layout in web browsers | |
| CN105630843A (en) | Webpage change monitoring method and device | |
| CN106933887B (en) | Data visualization method and device | |
| CN107015986B (en) | Method and device for crawling webpage by crawler | |
| US9715483B2 (en) | User interface for testing and asserting UI elements with natural language instructions | |
| CN109558548A (en) | A kind of method and Related product for eliminating CSS style redundancy | |
| CN104035863A (en) | Browser testing method and device | |
| CN110515795A (en) | A kind of monitoring method of big data component, device, electronic equipment | |
| CN108427580B (en) | Configuration pair naming repetition detection method, storage medium and intelligent device | |
| CN108874379B (en) | Page processing method and device | |
| CN113076501A (en) | Page processing method, storage medium and equipment | |
| CN109558549A (en) | A kind of method and Related product for eliminating CSS style redundancy | |
| US11157590B2 (en) | Script logging for markup language elements | |
| CN112667934A (en) | Dynamic simulation diagram display method and device, electronic equipment and computer readable medium | |
| CN112560403A (en) | Text processing method and device and electronic equipment | |
| CN104572429B (en) | Page method of testing and device for gathering dvielement | |
| CN110955813A (en) | Data crawling method and device | |
| CN106610833B (en) | Method and device for triggering overlapped HTML element mouse event | |
| CN109960497A (en) | Call method and device between a kind of script file | |
| CN108255802B (en) | Universal text parsing architecture and method and device for parsing text based on architecture | |
| CN110008281A (en) | A kind of processing method and processing device based on Redis database visualization data | |
| CN112541327A (en) | Data reading method and device, electronic equipment and storage medium | |
| CN110929184A (en) | Link display method, system, storage medium and processor | |
| CN110968821A (en) | Website processing method and device | |
| US11960560B1 (en) | Methods for analyzing recurring accessibility issues with dynamic web site behavior and devices thereof |
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 | ||
| CB02 | Change of applicant information |
Address after: 100080 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing Applicant after: Beijing Guoshuang Technology Co.,Ltd. Address before: 100086 Beijing city Haidian District Shuangyushu Area No. 76 Zhichun Road cuigongfandian 8 layer A Applicant before: Beijing Guoshuang Technology Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |