本发明涉及计算机处理技术的服务发现领域，特别是涉及一种提取网页首屏css样式的方法。
背景技术：
：：在计算机领域，网页内容的多少对于开发者、测试者、用户和服务人员来说都非常的重要。在现代的浏览器系统中，为了避免过多的doc内容导致网页加载缓慢，用户体验差，用户流失的问题。开发者往往会在一开始开发的时候就注重这方面的问题，比如使用新的html5协议，尽可能的减少标签的嵌套层级，尽可能的延后进行js的加载和执行。这些都是一些传统的方法对网页进行优化。传统上使用的方法大部分都是在开发阶段就对网页进行优化，例如，将js异步执行，防止阻塞渲染；减少对dom的操作，减少对性能的损耗；减少http请求数量，让浏览器响应更快；缓存ajax请求，尚未过期的资源应从缓存中直接读取出来；减少dom的数量，更多的使用语义化标签，尽可能少用/不用table布局等。如上所述，以上方案大部分都是在开发阶段就就需要开始对性能方面有所注意，并不会在开发完成后能够对性能和doc大小能够进一步优化。并且大部分的优化都是针对dom与js的优化，很少有针对css的一个优化方案。ccs层叠样式表(英文全称：cascadingstylesheets)是一种用来表现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服务端所开启的任务，关闭无界面浏览器进程，等待后续请求；步骤六：重新渲染首屏的css样式，具体为，将首屏的css样式放入document中，使用javascript对其他样式进行延迟加载。所述步骤一中，所述node服务端的配置内容包括：同时启动的无界面浏览器数量、设备的宽高和启动的模式；所述请求包括需要提取css样式的页面访问地址。所述步骤三中，当所述无界面浏览器为谷歌浏览器时，根据cdpsession进行通信，将提取的css样式传入提取方法中，用于生成页面首屏的css样式，所述提取方法包括setnetwork、setdom和setpage。所述步骤五中，所述首屏样式占比指首屏中的css样式的所占比例，根据无界面浏览器与chromedevtoolprotocol之间的通信协议获取，所述分析首屏的css样式具体为：根据首屏样式占比与设置到虚拟设备宽度，对目标地址的全部样式进行遍历，根据最大宽度与最小宽度判断是否在首屏中有使用，如没有在首屏中使用则将其移除。所述步骤六中，还包括：对其他样式，使用javascript异步加载。本发明所达到的有益效果:在开发主体完成后的进行性能优化，能够使性能更进一步的提升；将主要的css内容提取，去除link与style标签减少http请求与doc内容，对页面内容多的网页性能提升有着明显提高。附图说明图1为本发明的示例性实施例的方法流程简图。具体实施方式下面结合附图和示例性实施例对本发明作进一步的说明：如图1所示的一种提取网页首屏css样式的方法，具体步骤有：步骤s1：配置node服务端参数，所述node服务端用于接收需要提取css样式的请求；所述配置node服务端包括配置：同时启动的无界面浏览器数量、设备宽高和启动的模式；所述请求包括需要提取css样式的页面访问地址。步骤s2：通过客户端发起提取css样式的请求，node服务端接收到客户端发起请求后，启动无界面浏览器并开启提取任务，所述提取任务是指：node服务端接受到来自客户端的请求后开始启动一个监听事件，所述监听事件用于获取页面首屏中占比最高的css，等待无界面浏览器返回结果；当所述无界面浏览器为谷歌浏览器时，根据cdpsession进行通信，提取首屏中使用到的css样式，将提取出的css样式传入提取方法中，用于生成页面首屏所需要的样式，所述提取方法包括setnetwork、setdom和setpage；所述标签包括style标签和link标签。步骤s3：配置nodejs访问参数，此处配置node访问参数指的是根据客户端所携带的地址配置无界面浏览器的访问地址，开启任务，此处开启任务指的是开启无界面浏览器开始访问目标地址，访问目标页面，等页面完全加载结束后调用收集方法，所述收集方法指javascript获取link标签内容、style标签内容的方法，获取页面中所有css样式；所述步骤s3中，当所述无界面浏览器为谷歌浏览器时，根据cdpsession进行通信，提取目标页面的css样式，将提取出的css样式传入提取方法中，用于生成页面首屏的css样式，所述提取方法包括setnetwork、setdom和setpage；步骤s4：针对步骤s3获取到页面中所有的样式后使用postcss中的方法进行过滤，为了防止过滤过程中出现不合法的css书写方式导致报错；重新渲染具体为：将获取的首屏css样式放入doc中，并使用js将其它样式延迟加载，保证初次展示给用户的内容更少，渲染速度更快。后续使用js异步将样式加载出来也保证了首屏外内容的完整性。步骤s5：根据步骤s4获取所有css样式，若未成功获取到页面中所有css样式，直接将空内容返回给node服务端。否则根据无界面浏览器提供的首屏样式占比，与设置的虚拟设备宽度分析出首屏的css样式，所述分析首屏的css样式具体为：根据首屏样式占比与设置到虚拟设备宽度，对目标地址对全部样式进行遍历，根据最大宽度与最小宽度判断是否在首屏中有使用，如没有在首屏中使用则将其移除。再将首屏的css样式通过promise调用的形式返回给node服务端所开启的任务，关闭无界面浏览器进程，等待后续请求；虚拟设备宽度主要是更加精确的提取出所需要的样式，主要操作是首屏中的css样式根据设置的虚拟设备宽度，来过滤媒体查询不再此范围的样式。由此获取到首屏的css样式。步骤s6：重新渲染首屏的css样式，具体为，客户端将接收到的首屏的css样式放入document中，使用javascript对其他样式进行延迟加载。保证初次展示给用户的内容更少，渲染速度更快，后续使用js异步将样式加载出来也保证了首屏外内容的完整性。本发明中的另一种示例性实施例，可能需要用户预定义需要提取的设备宽高，以及提取的设备(pc/mobile)，以及延迟加载非首屏访问的css规则，包含如下步骤：步骤1：node服务端配置同时启动的无界面浏览器数量，设备宽高，启动的模式(如：同时可启动20个无界面浏览器进行css样式的提取，设备宽高以iphone6的宽高设定，为width:375px；height:475px；启动模式为无缓存模式。)步骤2：客户端开始发起需要提取css网站的请求，主要携带参数为需要请求页面的地址。node应用接收到请求开始启动一个无界面浏览器，并开启一个任务，用来等待接收无界面浏览器的提取的样式结果。步骤3：node开启一个任务后，随后开始调用收集样式的方法，该方法主要实现方式是使用cdpsession实例用于与chromedevtools协议的原生通信。协议方法主要是告知浏览器开启network、page、css等通信方法(如：network方法开启network方法后主要可以监听到请求的参数，缓存以及cookie等信息。page方法开始后可监听到页面是否加载结束，以来标记是否可以进行收集样式的操作，防止页面未加载完成就开始收集，导致收集到的样式不对。css的通信方法主要是获取到首屏主要使用到的某些的样式。)步骤4：针对获取到页面中所有的link，style中的样式。需要使用postcss中的方法进行过滤，防止在格式化过程中出现css的报错，由于无界面浏览器返回的样式是个id的集合，需要针对此集合单独取出对应的css。步骤5：获取到页面中所有样式后，根据谷歌无界面浏览器的首屏样式占比，与设置的虚拟设备宽度拿到最终的首屏主要样式。最后将样式通过promise调用的形式返回给task后task关闭一个无界面浏览器进程，后续等待的请求将继续执行。步骤6：将获取的首屏样式放入doc中，并使用js将其它样式延迟加载，保证初次展示给用户的内容更少，渲染速度更快。后续使用js异步将样式加载出来也保证了首屏外内容的完整性本发明主要用于提供一种提取网页首屏css样式的方法，在开发主体完成后的进行性能优化，能够使性能更进一步的提升；将主要的css内容提取，去除link与style标签减少http请求与doc内容，对页面内容多的网页性能提升有着明显提高。以上实施例不以任何方式限定本发明，凡是对以上实施例以等效变换方式做出的其它改进与应用，都属于本发明的保护范围。当前第1页12当前第1页12