CN106919624B - 提高网页加载速度的方法及装置 - Google Patents
提高网页加载速度的方法及装置 Download PDFInfo
- Publication number
- CN106919624B CN106919624B CN201511001229.8A CN201511001229A CN106919624B CN 106919624 B CN106919624 B CN 106919624B CN 201511001229 A CN201511001229 A CN 201511001229A CN 106919624 B CN106919624 B CN 106919624B
- Authority
- CN
- China
- Prior art keywords
- css
- optimized
- webpage
- file
- style
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种提高网页加载速度的方法及装置。其中，提高网页加载速度的方法，该方法包括如下步骤：通过浏览器加载待优化网页，并搜索出所述待优化网页中的原始CSS文件；确定所述原始CSS文件中的无效的CSS样式，并删除所有无效的CSS样式；用删除所述无效的CSS样式后的优化CSS文件替换所述网页中的原始CSS文件。本发明去除了CSS文件中的大量的无效样式代码，减小了CSS文件的大小，极大地降低了CSS文件所需的加载时间，进而提高了页面的加载速度。此外，处理优化过的CSS文件既更加方便于打包合并，又更方便做样式与页面代码的内嵌处理，从而可以获得更进一步的提高页面的加载速度。
Description
技术领域
本发明涉及网页加载技术领域，具体而言，涉及一种提高网页加载速度的方法及装置。
背景技术
目前, 现在的常见网站，信息量越来越大，尤其是网站首页，包含的数据、图像、动画、布局、导航等等信息也极其丰富，页面显示效果越来越动人，如此庞大繁复的页面对加载效果的要求也越来越高。当网络状况并不顺畅的时候，也会影响页面加载的效果，大大地降低页面的加载速度。
发明内容
鉴于此，本发明提出了一种提高网页加载速度的方法及装置，旨在解决现有网页加载慢的问题。
一个方面，本发明提出了一种提高网页加载速度的方法，该方法包括如下步骤：搜索步骤，通过浏览器加载待优化网页，并搜索出所述待优化网页中的原始CSS文件；删除步骤，确定所述原始CSS文件中的无效的CSS样式，并删除所有无效的CSS样式；第一替换步骤，用删除所述无效的CSS样式后的优化CSS文件替换所述网页中的原始CSS文件。
进一步地，上述提高网页加载速度的方法中，在所述第一替换步骤之后还包括：加载步骤，所述浏览器对所述待优化网页再次加载运行；判断步骤，判断所述待优化网页是否正确；筛选步骤，在所述待优化网页不正确时，从删除的所有无效的CSS样式中筛选出有效的CSS样式，并将筛选出的有效的CSS样式添加入优化后的CSS文件中，形成再次优化的CSS文件；第二替换步骤，用再次优化的CSS文件替换所述网页中的优化CSS文件。
进一步地，上述提高网页加载速度的方法中，所述删除步骤中的确定所述原始CSS文件中的无效的CSS样式进一步包括：搜索出所述待优化网页中的所有有效的CSS样式；将有效的CSS样式与原始CSS样式进行比对，将原始CSS文件中不属于有效的CSS样式的CSS样式确定为无效的CSS样式。
进一步地，上述提高网页加载速度的方法中，所述有效的CSS文件为正确的CSS样式。
进一步地，上述提高网页加载速度的方法中，所述无效的CSS文件为错误的CSS样式。
CSS作为页面显示效果的利器，在加载效果不佳的时候，也充当了重要的角色，如果能够提升CSS的加载速度，就能极大地提高页面加载的速度。一般而言，由于CSS复用频繁，网页在实际发布中，CSS文件中的样式代码，存在着大量的冗余，而这势必会影响页面的加载速度。本发明正是基于这一原理，先识别出各待优化网页中的无效的CSS样式，然后将识别出的无效的CSS样式删除，使网页中的CSS文件中只保留有效的CSS样式。可以看出，本发明去除了CSS文件中的大量的无效样式代码，减小了CSS文件的大小，极大地降低了CSS文件所需的加载时间，进而提高了页面的加载速度。此外，处理优化过的CSS文件既更加方便于打包合并，又更方便做样式与页面代码的内嵌处理，从而可以获得更进一步的提高页面的加载速度。
另一方面，本发明还提出了一种提高网页加载速度的装置，该装置包括：搜索模块，用于通过浏览器加载待优化网页，并搜索出所述待优化网页中的原始CSS文件；删除模块，用于确定所述原始CSS文件中的无效的CSS样式，并删除所有无效的CSS样式；替换模块，用于用删除所述无效的CSS样式后的优化CSS文件替换所述网页中的原始CSS文件。
进一步地，上述提高网页加载速度的装置还包括：加载模块，用于所述浏览器对所述待优化网页再次加载运行；判断模块，用于判断所述待优化网页是否正确；筛选模块，在所述待优化网页不正确时，从删除的所有无效的CSS样式中筛选出有效的CSS样式，并将筛选出的有效的CSS样式添加入优化后的CSS文件中，形成再次优化的CSS文件；所述替换模块还用再次优化的CSS文件替换优化的CSS文件。
进一步地，上述提高网页加载速度的装置中，所述删除模块进一步包括：搜索子模块，用于搜索出所述待优化网页中的所有有效的CSS样式；比对子模块，将有效的CSS样式与原始CSS文件中的CSS样式进行比对，将原始CSS文件中不属于有效的CSS样式的CSS样式确定为无效的CSS样式。
进一步地，上述提高网页加载速度的装置中，所述有效的CSS文件为正确的CSS样式。
进一步地，上述提高网页加载速度的装置中，所述无效的CSS文件为错误的CSS样式。
由于该提高网页加载速度的装置与上述提高网页加载速度的方法原理相同，所以具有与上述提高网页加载速度的方法相同的技术效果。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1为本发明实施例提供的提高网页加载速度的方法的流程图；
图2为本发明实施例提供的提高网页加载速度的方法的另一流程图；
图3为本发明实施例提供的提高网页加载速度的方法中，确定无效的CSS样式的流程图；
图4为本发明实施例提供的提高网页加载速度的装置的结构框图；
图5为本发明实施例提供的提高网页加载速度的装置的另一结构框图；
图6为本发明实施例提供的提高网页加载速度的装置中，删除模块的结构框图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。
方法实施例：
参见图1，图1为本发明实施例提供的提高网页加载速度的方法的流程图。如图所示，该方法包括如下步骤：
搜索步骤S11，通过浏览器加载待优化网页，并搜索出待优化网页中的原始CSS文件。
具体地，选用一种目前常用的浏览器引擎，如Trident、Gecko或者WebKit浏览器，通过该浏览器打开待优化网页，并且，搜索出待优化网页中的所有的原始CSS文件。其中，待优化网页可以根据实际需要来确定，可以为一个，也可以为多个，当待优化网页为多个时，使用上述浏览器引擎，逐一打开各个待优化的页面，搜索出所有待优化网页中的原始CSS文件。
删除步骤S12，确定原始CSS文件中的无效的CSS样式，并删除无效的CSS样式。具体地，先识别出各待优化网页中的无效的CSS样式，然后删除识别出的所有CSS样式，即只保留各待优化网页中的有效的CSS样式。其中，无效的CSS样式即为错误的CSS样式，有效的CSS样式即为正确的CSS样式。
第一替换步骤S13，用删除无效的CSS样式后的优化CSS文件替换网页中的原始CSS文件。具体地，只保留了有效的CSS样式的CSS文件即为优化后的CSS文件，用各待优化网页中的优化后的CSS文件对应地替换各待优化网页中的原始的CSS文件，然后打包发布。
CSS作为页面显示效果的利器，在加载效果不佳的时候，也充当了重要的角色，如果能够提升CSS的加载速度，就能极大地提高页面加载的速度。一般而言，由于CSS复用频繁，网页在实际发布中，CSS文件中的样式代码，存在着大量的冗余，而这势必会影响页面的加载速度。本发明实施例正是基于这一原理，先识别出各待优化网页中的无效的CSS样式，然后将识别出的无效的CSS样式删除，使网页中的CSS文件中只保留有效的CSS样式。可以看出，本实施例去除了CSS文件中的大量的无效样式代码，减小了CSS文件的大小，极大地降低了CSS文件所需的加载时间，进而提高了页面的加载速度。此外，处理优化过的CSS文件既更加方便于打包合并，又更方便做样式与页面代码的内嵌处理，从而可以获得更进一步的提高页面的加载速度。
参见图2，图2为本发明实施例提供的提高网页加载速度的方法的又一流程图。如图所示，该方法包括如下步骤：
搜索步骤S21，通过浏览器加载待优化网页，并搜索出待优化网页中的原始CSS文件。
删除步骤S22，确定原始CSS文件中的无效的CSS样式，并删除无效的CSS样式。
第一替换步骤S23，用删除无效的CSS样式后的优化CSS文件替换网页中的原始CSS文件。其中，搜索步骤S21、删除步骤S22和第一替换步骤S23参见上述说明即可，故不赘述。
加载步骤S24，浏览器对待优化网页再次加载运行。具体地，通过搜索步骤S21中的浏览器对待优化网页再次进行加载。
判断步骤S25，判断待优化网页是否正确。具体地，根据加载步骤S24中加载的待优化页面，并判断待优化网页是否正确，具体判断方法可以由前端开发人员人工检查确认页面效果是否正确，当然，也可以通过其他方式进行判断，本实施例对具体的判断方式不做任何限定。
筛选步骤S26，在待优化网页不正确时，从删除的所有无效的CSS样式中筛选出有效的CSS样式，并将筛选出的有效的CSS样式添加入优化后的CSS文件中，形成再次优化的CSS文件。具体地，当待优化页面不正确时，说明误删了有效的CSS样式，所以需要从无效的CSS样式中筛选出有效的CSS样式，并将筛选出的有效的CSS样式重新添加入优化后的CSS文件中。
第二替换步骤S27，用再次优化的CSS文件替换网页中的优化CSS文件。
可以看出，本实施方式增加了校正步骤，即对用第一替换步骤S23中的优化后的CSS文件替换原始CSS文件的网页进行判断，当网页中有错误时，说明删除步骤中误删了有效的CSS文件，通过将误删的有效的CSS文件重新添加回该网页中的CSS文件中来对该网页进行校正，避免了由于对有效的CSS文件的误删而导致的网页显示错误的问题，在提高网页加载速度的同时，保证了网页显示的正确性。
参见图3，图3为确定原始CSS文件中的无效的CSS样式的方法流程图。如图所示，在删除步骤S12中，确定原始CSS文件中的无效的CSS样式的具体方法可以包括如下步骤：
有效样式确定步骤S121，搜索出待优化网页中的所有有效的CSS样式。
无效样式确定步骤S122，原始CSS文件包括若干组CSS样式，将有效的CSS样式与原始CSS文件的所有CSS样式进行比对，并且，将原始CSS文件中不属于有效的CSS样式的CSS样式确定为无效的CSS样式。
本实施例提供的该确定无效的CSS样式的方法比较简单，易于实现。
综上，本实施例通过优化后的CSS文件，与原始CSS文件相比，大小将极大地缩小，因此能够大幅度降低CSS加载时间，提高页面的加载速度。
装置实施例：
参见图4，图4为本发明实施例提供的提高网页加载速度的装置的结构框图。如图所示，该装置包括：搜索模块100，用于通过浏览器加载待优化网页，并搜索出待优化网页中的原始CSS文件。删除模块200，用于确定原始CSS文件中的无效的CSS样式，并删除所有无效的CSS样式。替换模块300，用于用删除无效的CSS样式后的优化CSS文件替换网页中的原始CSS文件。
本发明实施例正是基于这一原理，先识别出各待优化网页中的无效的CSS样式，然后将识别出的无效的CSS样式删除，使网页中的CSS文件中只保留有效的CSS样式。可以看出，本实施例去除了CSS文件中的大量的无效样式代码，减小了CSS文件的大小，极大地降低了CSS文件所需的加载时间，进而提高了页面的加载速度。此外，处理优化过的CSS文件既更加方便于打包合并，又更方便做样式与页面代码的内嵌处理，从而可以获得更进一步的提高页面的加载速度。
参见图5，图5为本发明实施例提供的提高网页加载速度的装置的又一结构框图。如图所示，在上述实施例中还可以包括：加载模块400，用于浏览器对待优化网页再次加载运行。判断模块500，用于判断待优化网页是否正确。筛选模块600，在待优化网页不正确时，从删除的所有无效的CSS样式中筛选出有效的CSS样式，并将筛选出的有效的CSS样式添加入优化后的CSS文件中，形成再次优化的CSS文件。替换模块300还用再次优化的CSS文件替换优化的CSS文件。
可以看出，本实施方式增加了校正步骤，即对用第一替换步骤S23中的优化后的CSS文件替换原始CSS文件的网页进行判断，当网页中有错误时，通过将误删的有效的CSS文件重新添加回该网页中的CSS文件中来对该网页进行校正，避免了由于对有效的CSS文件的误删而导致的网页显示错误的问题，在提高网页加载速度的同时，也保证了网页显示的正确性。
参见图6，图6为删除模块200的结构框图。如图所示，删除模块200进一步包括：有效样式确定子模块210，用于搜索出待优化网页中的所有有效的CSS样式；无效样式确定子模块220，将有效的CSS样式与原始CSS文件进行比对，将原始CSS文件中不属于有效的CSS样式的CSS文件确定为无效的CSS样式。
需要说明的是，该装置实施例与上述方法实施例原理相同，该装置实施例的具体实施过程参见上述方法实施例即可，本实施例在此不再赘述。
综上，本实施例通过优化后的CSS文件，与原始CSS文件相比，大小将极大地缩小，因此能够大幅度降低CSS加载时间，提高页面的加载速度。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (2)
1.一种提高网页加载速度的方法，其特征在于，包括如下步骤：
搜索步骤，通过浏览器引擎加载待优化网页，并搜索出所述待优化网页中的原始CSS文件；
删除步骤，确定所述原始CSS文件中的无效的CSS样式，并删除所有无效的CSS样式；其中，确定所述原始CSS文件中的无效的CSS样式，包括：
搜索出所述待优化网页中的所有有效的CSS样式；将有效的CSS样式与原始CSS文件中的CSS样式进行比对，将原始CSS文件中不属于有效的CSS样式的CSS样式确定为无效的CSS样式；
第一替换步骤，用删除所述无效的CSS样式后的优化CSS文件替换所述网页中的原始CSS文件；
加载步骤，所述浏览器对所述待优化网页再次加载运行；其中，通过浏览器引擎加载对所述待优化网页进行打包合并且对页面代码进行内嵌处理的优化后的CSS文件；
判断步骤，判断所述待优化网页是否显示正确；
筛选步骤，在所述待优化网页显示不正确时，从删除的所有无效的CSS样式中筛选出有效的CSS样式，并将筛选出的有效的CSS样式添加入优化后的CSS文件中，形成再次优化的CSS文件；
其中，所述有效的CSS样式为正确的CSS样式；
所述无效的CSS样式为错误的CSS样式；
第二替换步骤，用再次优化的CSS文件替换所述网页中的优化CSS文件，以避免由于对有效的CSS文件的误删而导致的网页显示错误的问题，在提高网页加载速度的同时，也保证了网页显示的正确性。
2.一种提高网页加载速度的装置，其特征在于，包括：
搜索模块，用于通过浏览器加载待优化网页，并搜索出所述待优化网页中的原始CSS文件；
删除模块，用于确定所述原始CSS文件中的无效的CSS样式，并删除所有无效的CSS样式；所述删除模块进一步包括：
搜索子模块，用于搜索出所述待优化网页中的所有有效的CSS样式；
比对子模块，将有效的CSS样式与原始CSS文件中的CSS样式进行比对，将原始CSS文件中不属于有效的CSS样式的CSS样式确定为无效的CSS样式；
替换模块，用于用删除所述无效的CSS样式后的优化CSS文件替换所述网页中的原始CSS文件；
加载模块，用于所述浏览器对所述待优化网页再次加载运行；其中，通过浏览器引擎加载对所述待优化网页进行打包合并且对页面代码进行内嵌处理的优化后的CSS文件；
判断模块，用于判断所述待优化网页是否正确；
筛选模块，在所述待优化网页不正确时，从删除的所有无效的CSS样式中筛选出有效的CSS样式，并将筛选出的有效的CSS样式添加入优化后的CSS文件中，形成再次优化的CSS文件；其中，所述有效的CSS样式为正确的CSS样式；
所述无效的CSS样式为错误的CSS样式；
所述替换模块还用于用再次优化的CSS文件替换优化的CSS文件，以避免由于对有效的CSS文件的误删而导致的网页显示错误的问题，在提高网页加载速度的同时，也保证了网页显示的正确性。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201511001229.8A CN106919624B (zh) | 2015-12-28 | 2015-12-28 | 提高网页加载速度的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201511001229.8A CN106919624B (zh) | 2015-12-28 | 2015-12-28 | 提高网页加载速度的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106919624A CN106919624A (zh) | 2017-07-04 |
| CN106919624B true CN106919624B (zh) | 2021-07-06 |
Family
ID=59456260
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201511001229.8A Active CN106919624B (zh) | 2015-12-28 | 2015-12-28 | 提高网页加载速度的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106919624B (zh) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107608745A (zh) * | 2017-09-07 | 2018-01-19 | 郑州云海信息技术有限公司 | 一种加快页面加载速度的方法和装置 |
| CN107608947B (zh) * | 2017-09-22 | 2020-08-18 | 阿里巴巴集团控股有限公司 | Html文件处理方法及装置、电子设备 |
| CN109558548B (zh) * | 2017-09-25 | 2021-05-25 | 北京国双科技有限公司 | 一种消除css样式冗余的方法及相关产品 |
| CN109558549B (zh) * | 2017-09-25 | 2021-02-02 | 北京国双科技有限公司 | 一种消除css样式冗余的方法及相关产品 |
| CN107783764A (zh) * | 2017-09-29 | 2018-03-09 | 厦门集微科技有限公司 | 清除前端样式冗余的方法及装置 |
| CN110688118B (zh) * | 2019-10-28 | 2023-05-05 | 郑州阿帕斯科技有限公司 | 一种网页优化方法及装置 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020035563A1 (en) * | 2000-05-29 | 2002-03-21 | Suda Aruna Rohra | System and method for saving browsed data |
| CN101968835A (zh) * | 2009-02-25 | 2011-02-09 | 科摩多安全方案公司 | 用于从计算机中安全地删除信息的方法和系统 |
| CN103500118A (zh) * | 2013-10-24 | 2014-01-08 | 北京奇虎科技有限公司 | 一种级联样式表优化方法和装置 |
-
2015
- 2015-12-28 CN CN201511001229.8A patent/CN106919624B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020035563A1 (en) * | 2000-05-29 | 2002-03-21 | Suda Aruna Rohra | System and method for saving browsed data |
| CN101968835A (zh) * | 2009-02-25 | 2011-02-09 | 科摩多安全方案公司 | 用于从计算机中安全地删除信息的方法和系统 |
| CN103500118A (zh) * | 2013-10-24 | 2014-01-08 | 北京奇虎科技有限公司 | 一种级联样式表优化方法和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106919624A (zh) | 2017-07-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106919624B (zh) | 提高网页加载速度的方法及装置 | |
| US10705748B2 (en) | Method and device for file name identification and file cleaning | |
| CN107133165B (zh) | 浏览器兼容性检测方法及装置 | |
| CN104156307A (zh) | 一种浏览器兼容性检测方法和系统 | |
| CN109947637B (zh) | 网页兼容性自动化测试方法、装置、设备及介质 | |
| JP2019536171A (ja) | ウェブページのクラスタリング方法及び装置 | |
| CN108268884B (zh) | 一种文档对比方法及装置 | |
| CN106911694B (zh) | 一种基于android漏洞知识库自动更新的方法 | |
| CN106354484A (zh) | 一种浏览器兼容方法及浏览器 | |
| US20140150099A1 (en) | Method and device for detecting malicious code on web pages | |
| CN108494728B (zh) | 防止流量劫持的黑名单库创建方法、装置、设备及介质 | |
| US20090204889A1 (en) | Adaptive sampling of web pages for extraction | |
| CN106407288B (zh) | 一种信息同步更新的方法及系统 | |
| CN104615728B (zh) | 一种网页正文提取方法及装置 | |
| US20160253374A1 (en) | Data file writing method and system, and data file reading method and system | |
| CN106649364B (zh) | 一种表格目标列定位方法及装置 | |
| CN106293671B (zh) | 一种生成组件模板的方法及装置 | |
| JP2014130546A (ja) | ファイル管理プログラム、ファイル管理装置およびファイル管理方法 | |
| CN112230989B (zh) | 网页频道导航栏提取方法、系统、电子设备及存储介质 | |
| CN111859089B (zh) | 一种用于互联网信息的错词检测控制方法 | |
| CN109409362A (zh) | 基于tesseract引擎的图片敏感词检测和定位方法和装置 | |
| CN114220113A (zh) | 一种论文质量检测方法、装置和设备 | |
| CN110516438B (zh) | 一种可执行文件反汇编的方法、系统及相关组件 | |
| CN108153817B (zh) | 一种智能网页数据采集方法 | |
| CN104750693B (zh) | 一种打点的实现方法和装置 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |