[发明专利]一种提取网页首屏CSS样式的方法

说明书

本发明公开了一种提取网页首屏CSS样式的方法，其特征在于，包括步骤一，配置node服务端，步骤二：通过客户端发起提取CSS样式的请求，启动无界面浏览器并开启提取任务，等待无界面浏览器返回结果；步骤三：配置nodejs访问参数，调用收集方法获取目标页面中的所有CSS样式；步骤四：针对步骤三获取到的页面中所有CSS样式，使用postcss进行过滤；步骤五：分析首屏的CSS样式；步骤六：重新渲染首屏的CSS样式，达到在开发主体完成后的进行性能优化，能够使性能更进一步的提升；将主要的CSS内容提取，去除link与style标签减少http请求与doc内容，对页面内容多的网页性能提升有着明显提高的效果。

技术领域

本发明涉及计算机处理技术的服务发现领域，特别是涉及一种提取网页首屏CSS样式的方法。

背景技术

在计算机领域，网页内容的多少对于开发者、测试者、用户和服务人员来说都非常的重要。在现代的浏览器系统中，为了避免过多的DOC内容导致网页加载缓慢，用户体验差，用户流失的问题。开发者往往会在一开始开发的时候就注重这方面的问题，比如使用新的HTML5协议，尽可能的减少标签的嵌套层级，尽可能的延后进行js的加载和执行。这些都是一些传统的方法对网页进行优化。

传统上使用的方法大部分都是在开发阶段就对网页进行优化，例如，将js异步执行，防止阻塞渲染；减少对dom的操作，减少对性能的损耗；减少HTTP请求数量，让浏览器响应更快；缓存ajax请求，尚未过期的资源应从缓存中直接读取出来；减少DOM的数量，更多的使用语义化标签，尽可能少用/不用table布局等。

如上所述，以上方案大部分都是在开发阶段就就需要开始对性能方面有所注意，并不会在开发完成后能够对性能和DOC大小能够进一步优化。并且大部分的优化都是针对DOM与JS的优化，很少有针对CSS的一个优化方案。CCS层叠样式表(英文全称：CascadingStyle Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

因此，需要一种在开发完成阶段有一种能够对性能更进一步的提升的方案给到开发者。使网页性能更能够更进一步提升，并且也是对CSS外联和CSS数量的减少。

发明内容

本发明所要解决的技术问题是克服现有技术的不足，提供一种提取网页首屏CSS样式的方法。

为解决上述技术问题，本发明提供一种提取网页首屏CSS的样式方法，其特征在于，包括如下步骤：

步骤一：配置node服务端，所述node服务端用于接收需要提取CSS样式的请求；

步骤二：通过客户端发起提取CSS样式的请求，node服务端接收到请求后，启动无界面浏览器并开启提取任务，所述提取任务是指node服务端接受到来自客户端的请求后开始启动一个监听事件，所述监听事件用于获取页面首屏中使用到的CSS，等待无界面浏览器返回结果；

步骤三：配置nodejs访问参数，根据客户端所携带的地址配置无界面浏览器的访问地址；开启无界面浏览器访问目标页面，等目标页面完全加载结束后调用收集方法获取目标页面中的所有CSS样式，所述收集方法包括：使用javascript获取link标签内容、style标签内容；

步骤四：针对步骤三获取到的页面中所有CSS样式，使用postcss进行过滤；

步骤五：根据步骤四获取到页面中所有CSS样式，根据无界面浏览器提供的首屏样式占比与设置的虚拟设备宽度，分析首屏的CSS样式，将首屏的CSS样式通过promise调用的形式返回给node服务端所开启的任务，关闭无界面浏览器进程，等待后续请求；