计算页面首屏渲染时间的方法和系统技术方案

本发明专利技术公开了一种计算页面首屏渲染时间的方法和系统，其中，方法包括：在获取到用户的页面请求后，按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息；在设备屏幕的页面首屏处于稳定状态后，获取设备屏幕上每个采样点的稳定采样信息；根据不同时间点获取的采样点的当前采样信息的当前图片列表信息和稳定采样信息的稳定图片列表信息是否相同，判断页面首屏是否完成首屏渲染；在确定设备屏幕完成首屏渲染后，根据对应当前采样信息的当前时间信息和预设渲染时间计算待测页面的首屏渲染的完成时间。本发明专利技术能够在降低对设备性能的要求的情况下做到首屏渲染时间的计算的准确性；而且首屏渲染时间的计算和业务线能够得到完全解耦。

【技术实现步骤摘要】
计算页面首屏渲染时间的方法和系统
本专利技术涉及页面处理
，尤其涉及一种计算页面首屏渲染时间的方法和系统。
技术介绍
随着网络技术的不断发展，越来越多的网页被开发以供用户使用。一般来说，页面内容可能较多，而设备屏幕的大小有限，页面打开后设备屏幕可能只展示部分页面。页面打开后，在不滚动页面的情况下能被用户看到的画面称为首屏。所谓页面首屏渲染时间，是指用户输入网址请求页面到屏幕可见区域的的所有内容显示完全所经历的时间。页面首屏渲染时间，可能受页面代码、服务器响应速度、服务器处理能力或数据库性能等等多种因素影响。首屏渲染时间如果不理想，会大大降低用户的留存度，从而降低网站的用户黏性和活跃度。那么准确计算页面首屏渲染时间对于后期优化页面性能是十分必要的过程。目前，采用通过canvas截屏，并通过轮询对比不同时间点截屏图片之间某几个随机像素点，从而判断首屏是否加载完毕来计算页面首屏渲染时间。但是这种方案涉及图片处理等，设备性能消耗大，不适用于移动设备等性能有限的设备上。
技术实现思路
为克服相关技术中存在的问题，本说明书提供了计算页面首屏渲染时间的方法和系统。本专利技术提供了一种计算页面首屏渲染时间的方法，包括以下步骤；在获取到用户的页面请求后，按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息，所述当前采样信息包括当前图片列表信息和当前时间信息；在设备屏幕的页面首屏处于稳定状态后，获取设备屏幕上每个采样点的稳定采样信息，所述稳定采样信息包括稳定图片列表信息；根据不同时间点获取的采样点的所述当前图片列表信息和稳定图片列表信息是否相同，判断页面首屏是否完成首屏渲染；在确定所述设备屏幕完成首屏渲染后，根据对应完成首屏渲染时间点的当前时间信息和预设渲染时间，计算待测页面的首屏渲染的完成时间。作为一种可实施方式，本专利技术提供的计算页面首屏渲染时间的方法，还包括以下步骤；在获取到用户的页面请求前，将所述设备屏幕划分为多个区域，设置分布于所述多个区域内的一个或多个采样点。作为一种可实施方式，所述按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息，包括以下步骤；按照预设时间间隔每次遍历所有采样点下待测页面的文档对象模型，获取设备屏幕上所有采样点的当前采样信息。作为一种可实施方式，本专利技术提供的计算页面首屏渲染时间的方法，还包括以下步骤；在设备屏幕的页面首屏处于稳定状态前，通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态。作为一种可实施方式，所述通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态，包括以下步骤；通过AOP方式发起串联型的XHR请求，并判断所述XHR请求是否在请求时间窗口队列中；若在请求时间窗口队列中，则根据所述XHR请求获取对应的返回数据和返回时间，并设置请求时间窗口队列中对应所述XHR请求的属性信息；直到所述XHR请求不在请求时间窗口队列中，则判断设备屏幕的页面首屏处于稳定状态，获取最后的返回数据和返回时间。作为一种可实施方式，所述根据不同时间点获取的采样点的所述当前图片列表信息和稳定图片列表信息是否相同，判断页面首屏是否完成首屏渲染，包括以下步骤；将每次时间点获取的采样点的所述当前图片列表信息以时间倒序的方式排列，依次将排列后的所述当前图片列表信息中的图片数量与稳定图片列表信息中的图片数量进行比较，判断页面首屏是否完成首屏渲染；若图片数量相同，则完成首屏渲染，并停止图片数量的比对，获取对应的当前时间信息。作为一种可实施方式，所述预设渲染时间为200ms-400ms。相应的，本专利技术还提供一种计算页面首屏渲染时间的系统，包括间隔采样模块、稳定采样模块以及计算模块；所述间隔采样模块，用于在获取到用户的页面请求后，按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息，所述当前采样信息包括当前图片列表信息和当前时间信息；所述稳定采样模块，用于在设备屏幕的页面首屏处于稳定状态后，获取设备屏幕上每个采样点的稳定采样信息，所述稳定采样信息包括稳定图片列表信息；所述计算模块，用于根据不同时间点获取的采样点的所述当前图片列表信息和稳定图片列表信息是否相同，判断页面首屏是否完成首屏渲染；在确定所述设备屏幕完成首屏渲染后，根据对应完成首屏渲染时间点的当前时间信息和预设渲染时间，计算待测页面的首屏渲染的完成时间。作为一种可实施方式，本专利技术提供的计算页面首屏渲染时间的系统，还包括判断模块；所述判断模块，用于在设备屏幕的页面首屏处于稳定状态前，通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态。作为一种可实施方式，所述计算模块还用于；将每次时间点获取的采样点的所述当前图片列表信息以时间倒序的方式排列，依次将排列后的所述当前图片列表信息中的图片数量与稳定图片列表信息中的图片数量进行比较，判断页面首屏是否完成首屏渲染；若图片数量相同，则完成首屏渲染，并停止图片数量的比对，获取对应的当前时间信息。与现有技术相比，本技术方案具有以下优点：本专利技术提供的计算页面首屏渲染时间的方法和系统，通过分析多次获取设备屏幕上所有采样点的当前图片列表信息与设备屏幕的页面首屏处于稳定状态后的获取的稳定图片列表信息，来判断页面首屏是否完成首屏渲染；直接获取各个采样点的图片列表信息来分析，降低对设备性能的要求的情况下做到首屏渲染时间的计算的准确性；而且首屏渲染时间的计算可以不需要在代码开发中的人员参与，使得首屏渲染时间的计算和业务线得到完全解耦。附图说明图1为本专利技术实施例一提供的计算页面首屏渲染时间的方法的流程示意图；图2为本专利技术实施例二提供的计算页面首屏渲染时间的系统的结构示意图。图中：100、间隔采样模块；200、稳定采样模块；300、计算模块；400、判断模块。具体实施方式以下结合附图，对本专利技术上述的和另外的技术特征和优点进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术的部分实施例，而不是全部实施例。设备可能存在通讯和响应速度的问题，这些问题对于用户使用体验是有影响，但是因为不同的设备和其所出的通讯环境有很大关联。因此，其与实际首屏渲染的时间并不是完全相关的。为了更加准确的计算首屏渲染，于本实施例中，是基于设备在获取到用户的页面请求后开始分析，避免了由于通讯速率、设备响应时间等因素的影响。页面可以包括通过浏览器开启的web页面、利用客户端开启的本地Native页面、利用客户端开启的HTML5页面等等可在电子设备屏幕上展示的页面。由于电子设备的屏幕大小有限，屏幕上用于展示页面的区域大小可能小于页面大小。当页面启动后，电子设备读取页面代码，获取到页面资源，基于页面资源在屏幕上进行渲染，使页面内容在屏幕上所设置的页面展示区域中进行展示，页面展示区域中展示的内容，本说明书实施例称为首屏，也即是页面启动后，电子设备屏幕上所能展示的用户无需滚动即可看到的页面区域。从页面开始启动至电子设备屏幕上完成首屏渲染的时长，本说明书实施例称为首屏渲染时长。因此，在排除外界的干扰因素后，首屏渲染时间是评价页面性能的一个重要指标。页面开发完成后，开发人员可以确定页面的首屏渲染时长，以根据首屏渲染时长优化页面。基于上述原因，请参阅图1，本专利技术实施例一提本文档来自技高网...

【技术保护点】
1.一种计算页面首屏渲染时间的方法，其特征在于，包括以下步骤；在获取到用户的页面请求后，按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息，所述当前采样信息包括当前图片列表信息和当前时间信息；在设备屏幕的页面首屏处于稳定状态后，获取设备屏幕上每个采样点的稳定采样信息，所述稳定采样信息包括稳定图片列表信息；根据不同时间点获取的采样点的所述当前图片列表信息和稳定图片列表信息是否相同，判断页面首屏是否完成首屏渲染；在确定所述设备屏幕完成首屏渲染后，根据对应完成首屏渲染时间点的当前时间信息和预设渲染时间，计算待测页面的首屏渲染的完成时间。

【技术特征摘要】
1.一种计算页面首屏渲染时间的方法，其特征在于，包括以下步骤；在获取到用户的页面请求后，按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息，所述当前采样信息包括当前图片列表信息和当前时间信息；在设备屏幕的页面首屏处于稳定状态后，获取设备屏幕上每个采样点的稳定采样信息，所述稳定采样信息包括稳定图片列表信息；根据不同时间点获取的采样点的所述当前图片列表信息和稳定图片列表信息是否相同，判断页面首屏是否完成首屏渲染；在确定所述设备屏幕完成首屏渲染后，根据对应完成首屏渲染时间点的当前时间信息和预设渲染时间，计算待测页面的首屏渲染的完成时间。2.如权利要求1所述的计算页面首屏渲染时间的方法，其特征在于，还包括以下步骤；在获取到用户的页面请求前，将所述设备屏幕划分为多个区域，设置分布于所述多个区域内的一个或多个采样点。3.如权利要求2所述的计算页面首屏渲染时间的方法，其特征在于，所述按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息，包括以下步骤；按照预设时间间隔每次遍历所有采样点下待测页面的文档对象模型，获取设备屏幕上所有采样点的当前采样信息。4.如权利要求1所述的计算页面首屏渲染时间的方法，其特征在于，还包括以下步骤；在设备屏幕的页面首屏处于稳定状态前，通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态。5.如权利要求4所述的计算页面首屏渲染时间的方法，其特征在于，所述通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态，包括以下步骤；通过AOP方式发起串联型的XHR请求，并判断所述XHR请求是否在请求时间窗口队列中；若在请求时间窗口队列中，则根据所述XHR请求获取对应的返回数据和返回时间，并设置请求时间窗口队列中对应所述XHR请求的属性信息；直到所述XHR请求不在请求时间窗口队列中，则判断设备屏幕的页面首屏处于稳定状态，获取最后的返回数据和返回时间。6.如权利要求1所述的计算页面首屏渲染时间的方法，...

【专利技术属性】
技术研发人员：沈洪梁，
申请(专利权)人：杭州有赞科技有限公司，
类型：发明
国别省市：浙江,33