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

权利要求书

1.一种提取网页首屏CSS样式的方法，其特征在于，包括如下步骤：

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

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

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

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

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

步骤六：重新渲染首屏的CSS样式，具体为，将首屏的CSS样式放入document中，使用JavaScript对其他样式进行延迟加载。

2.如权利要求1所述的一种提取网页首屏CSS样式的方法，其特征在于：所述步骤一中，所述node服务端的配置内容包括：同时启动的无界面浏览器数量、设备的宽高和启动的模式；所述请求包括需要提取CSS样式的页面访问地址。

3.如权利要求2所述的一种提取网页首屏CSS样式的方法，其特征在于：所述步骤三中，当所述无界面浏览器为谷歌浏览器时，根据CDPSession进行通信，将提取的CSS样式传入提取方法中，用于生成页面首屏的CSS样式，所述提取方法包括setNetwork、setDom和setPage。

4.如权利要求3所述的一种提取网页首屏CSS样式的方法，其特征在于：所述步骤五中，所述首屏样式占比指首屏中的CSS样式的所占比例，根据无界面浏览器与Chrome DevToolProtocol之间的通信协议获取，所述分析首屏的CSS样式具体为：根据首屏样式占比与设置到虚拟设备宽度，对目标地址的全部样式进行遍历，根据最大宽度与最小宽度判断是否在首屏中有使用，如没有在首屏中使用则将其移除。

5.如权利要求4所述的一种提取网页首屏CSS样式的方法，其特征在于：所述步骤六中，还包括：对其他样式，使用JavaScript异步加载。