CN111898051B - Css样式精简方法、装置、电子设备及存储介质 - Google Patents
Css样式精简方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN111898051B CN111898051B CN202010718885.4A CN202010718885A CN111898051B CN 111898051 B CN111898051 B CN 111898051B CN 202010718885 A CN202010718885 A CN 202010718885A CN 111898051 B CN111898051 B CN 111898051B
- Authority
- CN
- China
- Prior art keywords
- css
- tested
- page
- browser
- 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
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
-
- 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/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- Information Transfer Between Computers (AREA)
Abstract
一种CSS样式精简方法，包括：获取浏览器的插件接口；在插件接口中创建配置文件，其中，配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素；读取配置文件并依次遍历多个待测页面的地址及每个待测页面中的交互元素；启动浏览器并控制浏览器依次访问遍历到的待测页面的地址对应的待测页面；通过浏览器对待测页面进行渲染并获取渲染过程中的第一CSS使用结果；通过浏览器对待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果；根据第一CSS使用结果和第二CSS使用结果对CSS样式进行精简。本发明还提供一种CSS样式精简装置、电子设备及存储介质。本发明能够自动且精准的去除冗余的CSS样式。
Description
技术领域
本发明涉及计算机技术领域，具体涉及一种CSS样式精简方法、装置、电子设备及存储介质。
背景技术
由于项目的不断优化迭代、公共样式积累、人为书写习惯不良等问题，导致网页中的CSS样式内容越来越臃肿，从而影响页面的加载速度以及页面渲染速度。
现有的CSS样式精简主要有两种模式，一是通过对HMTL代码进行扫描，查找代码中出现的样式名及标签和CSS样式的匹配情况，从而检测筛选出未使用的CSS样式内容，该方法识别率低，同时对于JavaScript脚本中异步使用的样式无法检测，存在较大的漏检测情况，导致最终精简结果不理想。二是基于浏览器渲染的方式，通过人工访问指定页面，通过检测浏览器渲染过程中使用到的样式内容，筛选出未使用的样式。该方法虽然识别率较高，但是需要人工介入，效率低，无法大规模投产使用，同时对于页面中存在交互的模块，需要人工点击操作，重新检测，并手工对前次的结果做合并才能得出最终结果，操作流程复杂。
发明内容
鉴于以上内容，有必要提出一种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样式进行精简处理之后，所述方法还包括：
获取所述待测网站的HTML代码及JavaScript逻辑代码；
将精简处理后的CSS样式拼装至所述HTML代码的头部标签中；
将所述JavaScript逻辑代码的链接拼装至所述HTML代码的主体部分，生成新的HTML代码；
发送所述新的HTML代码给服务器。
根据本发明的一个可选的实施例，所述方法还包括：
将子页面与所述子页面中的交互元素进行关联；
将点击元素与对应的精简后的CSS全量中的CSS样式进行关联；
在加载所述子页面时，保留与所述子页面关联的CSS样式，并删除与其他子页面关联的CSS样式。
根据本发明的一个可选的实施例，通过CSS的remove and combine插件获取渲染过程中的第一CSS使用结果。
本发明的第二方面提供一种CSS样式精简装置，所述装置包括：
接口获取模块，用于获取浏览器的插件接口；
文件配置模块，用于在所述插件接口中创建配置文件，其中，所述配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素；
文件读取模块，用于读取所述配置文件并依次遍历所述多个待测页面的地址及每个待测页面中的交互元素；
页面访问模块，用于启动所述浏览器并控制所述浏览器依次访问所述待测页面的地址对应的待测页面；
第一渲染模块，用于通过所述浏览器对所述待测页面进行渲染并获取渲染过程中的第一CSS使用结果；
第二渲染模块，用于通过所述浏览器对所述待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果；
样式精简模块，用于根据所述第一CSS使用结果和所述第二CSS使用结果对CSS样式进行精简处理。
本发明的第三方面提供一种电子设备，所述电子设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现所述CSS样式精简方法。
本发明的第四方面提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述CSS样式精简方法。
综上所述，本发明所述的CSS样式精简方法、装置、电子设备及存储介质，通过在浏览器中创建可执行的配置文件，控制浏览器访问配置文件中的页面地址对应的页面，同时自动执行页面中所有交互的元素，使所有交互的元素都能够在浏览器中进行渲染，最后获取渲染过程中CSS的使用情况，从而根据CSS的使用情况实现了冗余的CSS样式的精准去除。本申请基于浏览器的渲染结果，识别率高，且整个精简过程自动化完成，无需人工干预，操作简单，效率高。
附图说明
图1是本发明实施例一提供的CSS样式精简方法的流程图。
图2是本发明实施例二提供的CSS样式精简装置的结构图。
图3是本发明实施例三提供的电子设备的结构示意图。
如下具体实施方式将结合上述附图进一步说明本发明。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施例对本发明进行详细描述。需要说明的是，在不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合。
除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。
图1是本发明实施例一提供的CSS样式精简方法的流程图。所述CSS样式精简方法应用于电子设备中，所述CSS样式精简方法具体包括以下步骤，根据不同的需求，该流程图中步骤的顺序可以改变，某些可以省略。
S11，获取浏览器的插件接口，并在所述插件接口中创建配置文件。
电子设备中安装有浏览器，并安装有至少一个插件接口。所述浏览器可以为雅虎，百度，中搜，QQ，搜狗，新浪，天下搜索等。所述插件可以包括：Flash插件、RealPlayer插件、MMS插件、MIDI五线谱插件、ActiveX插件等等。
所述配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素。电子设备获取浏览器的插件接口后，在所述解决接口中创建包括多个待测页面的地址及每个待测页面中的交互元素的配置文件，以便后续根据多个待测页面的地址及每个待测页面中的交互元素实现CSS样式精简。
在一个可选的实施例中，所述在所述插件接口中创建配置文件包括：
采用自动化测试工具启动所述浏览器；
在所述浏览器中输入待测网站的网址；
通过所述自动化测试工具模拟用户点击所述待测网站中的每个子页面得到多个待测页面的地址；
通过所述自动化测试工具模拟用户点击所述每个子页面中的交互元素得到每个待测页面中交互的元素的名称；
根据所述待测页面的地址及所述地址下的多个元素的名称在所述插件接口中创建配置文件。
本实施例中，用户调用Selenium后，通过Selenium工具打开浏览器，在浏览器中输入待测网站的网址(URL)，Selenium工具调用WebDriver的get()方法打开用户输入的待测网站的Web页面。
通过利用计算机软件自动化测试技术Selenium WebDriver的较强的可视化自动交互功能，来模拟人与网页的交互，从而触发动态数据加载，获取动态生成的数据。使得本技术方案能够适用于任何网站，即能对任何网站中的CSS进行精简。
S12，读取所述配置文件并依次遍历所述多个待测页面的地址及每个待测页面中的交互元素。
本实施例中，逐行读取所述配置文件，所述配置文件中的每行记录有一个待测页面的地址及对应所述待测页面的多个交互元素。
S13，启动所述浏览器并控制所述浏览器依次访问所述待测页面的地址对应的待测页面。
电子设备接收用户触发的启动浏览器的指令，启动浏览器，并将依次遍历到的待测页面的地址发送给浏览器，使得浏览器依次根据待测页面的地址访问待测页面。
S14，通过所述浏览器对所述待测页面进行渲染并获取渲染过程中的第一CSS使用结果。
通常而言，用户在访问网站的某个页面时，浏览器需要先对该页面进行渲染，页面被渲染之后才展示在电子设备的显示屏幕上。由于对页面进行渲染时，必然会使用到CSS样式表，因此，通过对页面进行渲染，可以获得多个被使用的第一CSS，得到第一CSS使用结果。
浏览器对待测页面进行渲染的过程为现有技术，本发明不再阐述。
在一个可选的实施例中，电子设备通过CSS的remove and combine插件获取渲染过程中的第一CSS使用结果。
S15，通过所述浏览器对所述待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果。
浏览器在对页面进行渲染时，还需要与所述页面中的交互元素进行渲染。由于对交互元素进行渲染时，也必然会使用到CSS样式表，因此，通过对交互元素进行渲染，可以获得多个被使用的第二CSS，得到第二CSS使用结果。
S16，根据所述第一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使用结果包括：A、B、C、D、E，第二CSS使用结果包括：C、E、F、J、H，那么将第一CSS使用结果和第二CSS使用结果进行合并写入初始化的集合中得到{A、B、C、D、E、F、J、H}。
在一个可选的实施例中，所述方法还包括：
将子页面与所述子页面中的交互元素进行关联；
将点击元素与对应的精简后的CSS全量中的CSS样式进行关联；
在加载所述子页面时，保留与所述子页面关联的CSS样式，并删除与其他子页面关联的CSS样式。
本实施例中，通过删除加载的子页面之外的其他子页面的CSS文件，能够规避其他页面的CSS样式，从而既能够节省系统资源，提高当前子页面的加载速度，也能够防止子页面之间的CSS样式相互影响。
在一个可选的实施例中，在根据所述第一CSS使用结果和所述第二CSS使用结果对CSS样式进行精简处理之后，所述方法还包括：
获取所述待测网站的HTML代码及JavaScript逻辑代码；
将精简处理后的CSS样式拼装至所述HTML代码的头部标签中；
将所述JavaScript逻辑代码的链接拼装至所述HTML代码的主体部分，生成新的HTML代码；
发送所述新的HTML代码给服务器。
本实施例中，通过对精简后的CSS样式及JavaScript逻辑代码的拼装，得到了由最精简的HTML、CSS、JS代码组成的HTML代码，对于后续服务器在收到浏览器的网页请求时，能够根据新的HTML对页面进行渲染，有效的减少渲染时间，渲染时间的缩短又能节省用户的流量，体验更好。
图2是本发明实施例二提供的CSS样式精简装置的结构图。
在一些实施例中，所述CSS样式精简装置20可以包括多个由程序代码段所组成的功能模块。所述CSS样式精简装置20中的各个程序段的程序代码可以存储于电子设备的存储器中，并由所述至少一个处理器所执行，以执行(详见图1描述)CSS样式精简的功能。
本实施例中，所述CSS样式精简装置20根据其所执行的功能，可以被划分为多个功能模块。所述功能模块可以包括：接口获取模块201、文件配置模块202、文件读取模块203、页面访问模块204、第一渲染模块205、第二渲染模块206、样式精简模块207、元素关联模块208、样式删除模块209及代码更新模块210。本发明所称的模块是指一种能够被至少一个处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在存储器中。在本实施例中，关于各模块的功能将在后续的实施例中详述。
所述接口获取模块201，用于获取浏览器的插件接口。
电子设备中安装有浏览器，所述浏览器可以为雅虎，百度，中搜，QQ，搜狗，新浪，天下搜索等。
所述文件配置模块202，用于在所述插件接口中创建配置文件，其中，所述配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素。
电子设备中安装有至少一个插件接口。所述插件可以包括：Flash插件、RealPlayer插件、MMS插件、MIDI五线谱插件、ActiveX插件等等。
所述配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素。电子设备获取浏览器的插件接口后，在所述解决接口中创建包括多个待测页面的地址及每个待测页面中的交互元素的配置文件，以便后续根据多个待测页面的地址及每个待测页面中的交互元素实现CSS样式精简。
在一个可选的实施例中，所述文件配置模块202在所述插件接口中创建配置文件包括：
采用自动化测试工具启动所述浏览器；
在所述浏览器中输入待测网站的网址；
通过所述自动化测试工具模拟用户点击所述待测网站中的每个子页面得到多个待测页面的地址；
通过所述自动化测试工具模拟用户点击所述每个子页面中的交互元素得到每个待测页面中交互的元素的名称；
根据所述待测页面的地址及所述地址下的多个元素的名称在所述插件接口中创建配置文件。
本实施例中，用户调用Selenium后，通过Selenium工具打开浏览器，在浏览器中输入待测网站的网址(URL)，Selenium工具调用WebDriver的get()方法打开用户输入的待测网站的Web页面。
通过利用计算机软件自动化测试技术Selenium WebDriver的较强的可视化自动交互功能，来模拟人与网页的交互，从而触发动态数据加载，获取动态生成的数据。使得本技术方案能够适用于任何网站，即能对任何网站中的CSS进行精简。
所述文件读取模块203，用于读取所述配置文件并依次遍历所述多个待测页面的地址及每个待测页面中的交互元素。
本实施例中，逐行读取所述配置文件，所述配置文件中的每行记录有一个待测页面的地址及对应所述待测页面的多个交互元素。
所述页面访问模块204，用于启动所述浏览器并控制所述浏览器依次访问所述待测页面的地址对应的待测页面。
电子设备接收用户触发的启动浏览器的指令，启动浏览器，并将依次遍历到的待测页面的地址发送给浏览器，使得浏览器依次根据待测页面的地址访问待测页面。
所述第一渲染模块205，用于通过所述浏览器对所述待测页面进行渲染并获取渲染过程中的第一CSS使用结果。
通常而言，用户在访问网站的某个页面时，浏览器需要先对该页面进行渲染，页面被渲染之后才展示在电子设备的显示屏幕上。由于对页面进行渲染时，必然会使用到CSS样式表，因此，通过对页面进行渲染，可以获得多个被使用的第一CSS，得到第一CSS使用结果。
浏览器对待测页面进行渲染的过程为现有技术，本发明不再阐述。
在一个可选的实施例中，通过CSS的remove and combine插件获取渲染过程中的第一CSS使用结果。
所述第二渲染模块206，用于通过所述浏览器对所述待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果。
浏览器在对页面进行渲染时，还需要与所述页面中的交互元素进行渲染。由于对交互元素进行渲染时，也必然会使用到CSS样式表，因此，通过对交互元素进行渲染，可以获得多个被使用的第二CSS，得到第二CSS使用结果。
所述样式精简模块207，用于根据所述第一CSS使用结果和所述第二CSS使用结果对CSS样式进行精简处理。
本实施例，通过在浏览器中创建可执行的配置文件，控制浏览器访问配置文件中的页面地址对应的页面，同时自动执行页面中所有交互的元素，使所有交互的元素都能够在浏览器中进行渲染，最后获取渲染过程中CSS的使用情况，从而根据CSS的使用情况实现了冗余的CSS样式的精准去除。本申请基于浏览器的渲染结果，识别率高，且整个精简过程自动化完成，无需人工干预，操作简单，效率高。
在一个可选的实施例中，所述样式精简模块207根据所述第一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使用结果包括：A、B、C、D、E，第二CSS使用结果包括：C、E、F、J、H，那么将第一CSS使用结果和第二CSS使用结果进行合并写入初始化的集合中得到{A、B、C、D、E、F、J、H}。
所述元素关联模块208，用于将子页面与所述子页面中的交互元素进行关联；将点击元素与对应的精简后的CSS全量中的CSS样式进行关联。
所述样式删除模块209，用于在加载所述子页面时，保留与所述子页面关联的CSS样式，并删除与其他子页面关联的CSS样式。
本实施例中，通过删除加载的子页面之外的其他子页面的CSS文件，能够规避其他页面的CSS样式，从而既能够节省系统资源，提高当前子页面的加载速度，也能够防止子页面之间的CSS样式相互影响。
所述代码更新模块210，用于获取所述待测网站的HTML代码及JavaScript逻辑代码；将精简处理后的CSS样式拼装至所述HTML代码的头部标签中；将所述JavaScript逻辑代码的链接拼装至所述HTML代码的主体部分，生成新的HTML代码；发送所述新的HTML代码给服务器。
本实施例中，通过对精简后的CSS样式及JavaScript逻辑代码的拼装，得到了由最精简的HTML、CSS、JS代码组成的HTML代码，对于后续服务器在收到浏览器的网页请求时，能够根据新的HTML对页面进行渲染，有效的减少渲染时间，渲染时间的缩短又能节省用户的流量，体验更好。
参阅图3所示，为本发明实施例三提供的电子设备的结构示意图。在本发明较佳实施例中，所述电子设备3包括存储器31、至少一个处理器32、至少一条通信总线33及收发器34。
本领域技术人员应该了解，图3示出的电子设备的结构并不构成本发明实施例的限定，既可以是总线型结构，也可以是星形结构，所述电子设备3还可以包括比图示更多或更少的其他硬件或者软件，或者不同的部件布置。
在一些实施例中，所述电子设备3包括一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的电子设备，其硬件包括但不限于微处理器、专用集成电路、可编程门阵列、数字处理器及嵌入式设备等。所述电子设备3还可包括客户设备，所述客户设备包括但不限于任何一种可与客户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、数码相机等。
需要说明的是，所述电子设备3仅为举例，其他现有的或今后可能出现的电子产品如可适应于本发明，也应包含在本发明的保护范围以内，并以引用方式包含于此。
在一些实施例中，所述存储器31用于存储程序代码和各种数据，例如安装在所述电子设备3中的装置，并在电子设备3的运行过程中实现高速、自动地完成程序或数据的存取。所述存储器31包括只读存储器(Read-Only Memory，ROM)、可编程只读存储器(Programmable Read-Only Memory，PROM)、可擦除可编程只读存储器(ErasableProgrammable Read-Only Memory，EPROM)、一次可编程只读存储器(One-timeProgrammable Read-Only Memory，OTPROM)、电子擦除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(CompactDisc Read-Only Memory，CD-ROM)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。
在一些实施例中，所述至少一个处理器32可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述至少一个处理器32是所述电子设备3的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备3的各个部件，通过运行或执行存储在所述存储器31内的程序或者模块，以及调用存储在所述存储器31内的数据，以执行电子设备3的各种功能和处理数据。
在一些实施例中，所述至少一条通信总线33被设置为实现所述存储器31以及所述至少一个处理器32等之间的连接通信。
尽管未示出，所述电子设备3还可以包括给各个部件供电的电源(比如电池)，优选的，电源可以通过电源管理装置与所述至少一个处理器32逻辑相连，从而通过电源管理装置实现管理充电、放电、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备3还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。
应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。
上述以软件功能模块的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分。
在进一步的实施例中，结合图2，所述至少一个处理器32可执行所述电子设备3的操作装置以及安装的各类应用程序、程序代码等，例如，上述的各个模块。
所述存储器31中存储有程序代码，且所述至少一个处理器32可调用所述存储器31中存储的程序代码以执行相关的功能。例如，图2中所述的各个模块是存储在所述存储器31中的程序代码，并由所述至少一个处理器32所执行，从而实现所述各个模块的功能。
在本发明的一个实施例中，所述存储器31存储多个指令，所述多个指令被所述至少一个处理器32所执行以实现本发明所述的方法中的全部或者部分步骤。
具体地，所述至少一个处理器32对上述指令的具体实现方法可参考图1对应实施例中相关步骤的描述，在此不赘述。
在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。
最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。
Claims (5)
1.一种CSS样式精简方法，其特征在于，所述方法包括：
获取浏览器的插件接口，并在所述插件接口中创建配置文件，其中，所述配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素；
读取所述配置文件并依次遍历所述多个待测页面的地址及每个待测页面中的交互元素；
启动所述浏览器并控制所述浏览器依次访问所述待测页面的地址对应的待测页面；
通过所述浏览器对所述待测页面进行渲染并通过CSS的remove and combine插件获取渲染过程中的第一CSS使用结果；
通过所述浏览器对所述待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果；
根据所述第一CSS使用结果和所述第二CSS使用结果对CSS样式进行精简处理，包括：读取代码中的CSS标签得到CSS全量；初始化一个集合；将所述第一CSS使用结果中的每个第一CSS样式按照顺序写入所述集合中；依次遍历所述第二CSS使用结果中的每个第二CSS样式；将每个第二CSS样式与所述集合中的第一CSS样式进行比对；当第二CSS样式与所述集合中的第一CSS样式比对失败时，将所述第二CSS样式写入所述集合中；根据合并处理得到的CSS结果对所述CSS全量中的CSS样式进行精简处理；
获取待测网站的HTML代码及JavaScript逻辑代码；将精简处理后的CSS样式拼装至所述HTML代码的头部标签中；将所述JavaScript逻辑代码的链接拼装至所述HTML代码的主体部分，生成新的HTML代码；发送所述新的HTML代码给服务器；
将子页面与所述子页面中的交互元素进行关联；将点击元素与对应的精简后的CSS全量中的CSS样式进行关联；
在加载所述子页面时，保留与所述子页面关联的CSS样式，并删除与其他子页面关联的CSS样式。
2.如权利要求1所述的方法，其特征在于，所述在所述插件接口中创建配置文件包括：
采用自动化测试工具启动所述浏览器；
在所述浏览器中输入待测网站的网址；
通过所述自动化测试工具模拟用户点击所述待测网站中的每个子页面得到多个待测页面的地址；
通过所述自动化测试工具模拟用户点击所述每个子页面中的交互元素得到每个待测页面中交互的元素的名称；
根据所述待测页面的地址及所述地址下的多个元素的名称在所述插件接口中创建配置文件。
3.一种CSS样式精简装置，其特征在于，所述装置包括：
接口获取模块，用于获取浏览器的插件接口；
文件配置模块，用于在所述插件接口中创建配置文件，其中，所述配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素；
文件读取模块，用于读取所述配置文件并依次遍历所述多个待测页面的地址及每个待测页面中的交互元素；
页面访问模块，用于启动所述浏览器并控制所述浏览器依次访问所述待测页面的地址对应的待测页面；
第一渲染模块，用于通过所述浏览器对所述待测页面进行渲染并获取渲染过程中的第一CSS使用结果；
第二渲染模块，用于通过所述浏览器对所述待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果；
样式精简模块，用于根据所述第一CSS使用结果和所述第二CSS使用结果对CSS样式进行精简处理，包括：读取代码中的CSS标签得到CSS全量；初始化一个集合；将所述第一CSS使用结果中的每个第一CSS样式按照顺序写入所述集合中；依次遍历所述第二CSS使用结果中的每个第二CSS样式；将每个第二CSS样式与所述集合中的第一CSS样式进行比对；当第二CSS样式与所述集合中的第一CSS样式比对失败时，将所述第二CSS样式写入所述集合中；根据合并处理得到的CSS结果对所述CSS全量中的CSS样式进行精简处理；
代码更新模块，用于获取所述待测网站的HTML代码及JavaScript逻辑代码；将精简处理后的CSS样式拼装至所述HTML代码的头部标签中；将所述JavaScript逻辑代码的链接拼装至所述HTML代码的主体部分，生成新的HTML代码；发送所述新的HTML代码给服务器；
元素关联模块，用于将子页面与所述子页面中的交互元素进行关联；将点击元素与对应的精简后的CSS全量中的CSS样式进行关联；
样式删除模块，用于在加载所述子页面时，保留与所述子页面关联的CSS样式，并删除与其他子页面关联的CSS样式。
4.一种电子设备，其特征在于，所述电子设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1或2所述CSS样式精简方法。
5.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1或2所述CSS样式精简方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010718885.4A CN111898051B (zh) | 2020-07-23 | 2020-07-23 | Css样式精简方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010718885.4A CN111898051B (zh) | 2020-07-23 | 2020-07-23 | Css样式精简方法、装置、电子设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111898051A CN111898051A (zh) | 2020-11-06 |
| CN111898051B true CN111898051B (zh) | 2023-08-15 |
Family
ID=73189301
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010718885.4A Active CN111898051B (zh) | 2020-07-23 | 2020-07-23 | Css样式精简方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111898051B (zh) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2005003998A1 (en) * | 2003-06-30 | 2005-01-13 | International Business Machines Corporation Ibm | A method and system for improving presentation of html pages in web devices |
| CN102622376A (zh) * | 2011-01-28 | 2012-08-01 | 北京千橡网景科技发展有限公司 | 用于合并层叠样式表文件的方法和设备 |
| CN104933142A (zh) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | 动画展示方法和装置 |
| US9824075B1 (en) * | 2016-03-31 | 2017-11-21 | Google Inc. | System and method for interaction coverage |
| CN109254818A (zh) * | 2018-08-28 | 2019-01-22 | 北京影谱科技股份有限公司 | 针对浏览器不同分辨率的像素级定位方法和装置 |
| CN109558548A (zh) * | 2017-09-25 | 2019-04-02 | 北京国双科技有限公司 | 一种消除css样式冗余的方法及相关产品 |
| CN109683890A (zh) * | 2018-11-16 | 2019-04-26 | 东软集团股份有限公司 | 层叠样式表模块化的方法、装置、存储介质及设备 |
| US10437568B1 (en) * | 2017-05-18 | 2019-10-08 | Palantir Technologies Inc. | Real-time rendering based on efficient device and server processing of content updates |
| CN111324845A (zh) * | 2020-02-27 | 2020-06-23 | 北京飞漫软件技术有限公司 | 一种构建表盘对象的方法及系统 |
-
2020
- 2020-07-23 CN CN202010718885.4A patent/CN111898051B/zh active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2005003998A1 (en) * | 2003-06-30 | 2005-01-13 | International Business Machines Corporation Ibm | A method and system for improving presentation of html pages in web devices |
| CN102622376A (zh) * | 2011-01-28 | 2012-08-01 | 北京千橡网景科技发展有限公司 | 用于合并层叠样式表文件的方法和设备 |
| CN104933142A (zh) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | 动画展示方法和装置 |
| US9824075B1 (en) * | 2016-03-31 | 2017-11-21 | Google Inc. | System and method for interaction coverage |
| US10437568B1 (en) * | 2017-05-18 | 2019-10-08 | Palantir Technologies Inc. | Real-time rendering based on efficient device and server processing of content updates |
| CN109558548A (zh) * | 2017-09-25 | 2019-04-02 | 北京国双科技有限公司 | 一种消除css样式冗余的方法及相关产品 |
| CN109254818A (zh) * | 2018-08-28 | 2019-01-22 | 北京影谱科技股份有限公司 | 针对浏览器不同分辨率的像素级定位方法和装置 |
| CN109683890A (zh) * | 2018-11-16 | 2019-04-26 | 东软集团股份有限公司 | 层叠样式表模块化的方法、装置、存储介质及设备 |
| CN111324845A (zh) * | 2020-02-27 | 2020-06-23 | 北京飞漫软件技术有限公司 | 一种构建表盘对象的方法及系统 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111898051A (zh) | 2020-11-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Gorelick et al. | High Performance Python: Practical Performant Programming for Humans | |
| US6473894B1 (en) | Dynamic runtime and test architecture for Java applets | |
| CN109034394B (zh) | 一种机器学习模型的更新方法和装置 | |
| CN108132890B (zh) | 存储芯片的垃圾回收方法、装置、设备及存储介质 | |
| CN104254840A (zh) | 在计算机系统中的存储器转储和分析 | |
| CN111858371A (zh) | 软件测试方法、系统、存储介质及计算机设备 | |
| CN109783365A (zh) | 自动化测试方法、装置、计算机设备及存储介质 | |
| CN112182359A (zh) | 推荐模型的特征管理方法及系统 | |
| CN105683957A (zh) | 样式表推测性预加载 | |
| CN114416667A (zh) | 快速分享网盘文件的方法、装置、网盘及存储介质 | |
| CN113158101A (zh) | 一种可视化页面渲染方法、装置、设备及存储介质 | |
| CN106547636A (zh) | 除错系统与方法 | |
| JP3382080B2 (ja) | 命令実行順序の一貫性を照合する方法及びシステム | |
| CN112558966B (zh) | 深度模型可视化数据的处理方法、装置及电子设备 | |
| CN116501415B (zh) | 命令执行方法及装置、电子设备、计算机可读存储介质 | |
| CN111898051B (zh) | Css样式精简方法、装置、电子设备及存储介质 | |
| CN107077365B (zh) | 有选择地加载预编译的头部和/或其部分 | |
| CN112069189A (zh) | 多层级映射表格的更新方法、系统、终端设备及存储介质 | |
| CN107944564B (zh) | 深度学习作业处理方法、装置、设备及存储介质 | |
| CN110058938B (zh) | 一种内存处理方法、装置、电子设备和可读介质 | |
| WO2022206295A1 (en) | Program context migration | |
| CN113626483B (zh) | 一种填写表单的前端缓存方法、系统、设备及存储介质 | |
| CN111666201A (zh) | 回归测试方法、装置、介质及电子设备 | |
| CN104461636B (zh) | 一种皮肤资源加载方法及电子设备 | |
| US20180032929A1 (en) | Risk-adaptive agile software development |
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 |