计算页面首屏渲染时间的方法和系统
技术领域
本发明涉及页面处理技术领域,尤其涉及一种计算页面首屏渲染时间的方法和系统。
背景技术
随着网络技术的不断发展,越来越多的网页被开发以供用户使用。一般来说,页面内容可能较多,而设备屏幕的大小有限,页面打开后设备屏幕可能只展示部分页面。页面打开后,在不滚动页面的情况下能被用户看到的画面称为首屏。所谓页面首屏渲染时间,是指用户输入网址请求页面到屏幕可见区域的的所有内容显示完全所经历的时间。页面首屏渲染时间,可能受页面代码、服务器响应速度、服务器处理能力或数据库性能等等多种因素影响。首屏渲染时间如果不理想,会大大降低用户的留存度,从而降低网站的用户黏性和活跃度。那么准确计算页面首屏渲染时间对于后期优化页面性能是十分必要的过程。
目前,采用通过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,本发明实施例一提供的计算页面首屏渲染时间的方法,包括以下步骤;
S100、在获取到用户的页面请求后,按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息,当前采样信息包括当前图片列表信息和当前时间信息;
S200、在设备屏幕的页面首屏处于稳定状态后,获取设备屏幕上每个采样点的稳定采样信息,稳定采样信息包括稳定图片列表信息;
S300、根据不同时间点获取的采样点的当前图片列表信息和稳定图片列表信息是否相同,判断页面首屏是否完成首屏渲染;在确定设备屏幕完成首屏渲染后,根据对应完成首屏渲染时间点的当前时间信息和预设渲染时间,计算待测页面的首屏渲染的完成时间。
需要说明的是,在设备屏幕上设置多个采样点,以满足采样准确性的需求。可以是将设备屏幕划分为多个区域,设置分布于多个区域内的一个或多个采样点。来进一步提高采样准确性的需求,通常来说,划分的区域越多,采样点设置的越多,那么采样的准确性越高。但是考虑到设备性能的问题,于本实施例中,将设备屏幕划分成4个区域,每个区域中设置1个采样点。
时间间隔是预先设置的,一般时间间隔设置为150ms-350ms,于本实施例中,时间间隔设置为250ms。在页面为通过浏览器开启的web页面时,可以采用Browser对象中的window对象中的set Interval的方法,设置的间隔时间可以自己设置。那么在获取到用户的页面请求后,按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息,也就是说,每隔一个设定的间隔时间就会重新对所有采样点进行采样,每次采样均为记录当前时间节点的当前图片列表信息和当前时间信息。当前图片列表信息包括不限于图片数量、图片类型以及请求信息等等。比如,时间间隔设置为250ms,第一次获取的时间为11点,第一次获取的当前时间为11点。当前图片列表信息即为11点获取的图片列表信息。第二次获取的时间即为11点加上250ms,第一次获取的当前时间为11点250ms。当前图片列表信息即为11点250ms获取的图片列表信息。也就是每个时间点的图片列表信息是由于采集的时间点不同,而导致获取的数据可能存在不一样。
在判断页面首屏是否完成首屏渲染时,可以将每个单个采样点为基础进行单独对比,也可以将所有采样点为基础进行全量对比。在单独对比时,需要将每个采样点的稳定采样信息和每个时间节点获取的当前图片列表信息进行对比。在比对的过程中,如果连续70%的采样点的图片列表信息均全部相同,那么就可以认定完成首屏渲染;可以减少对比量,从而加快计算时间。在全量对比时,则需要先将每个时间节点采样点的图片列表信息进行统计,将统计后的总的稳定采样信息和总的当前图片列表信息进行对比。在确定设备屏幕完成首屏渲染后,即多次采样中的某一次采样后完成首屏渲染,将该次采样对应的当前时间信息再和图片加载的预设渲染时间计算待测页面的首屏渲染的完成时间。图片加载的预设渲染时间可以为200ms-400ms,比如为300ms。那么就可以准确计算首屏渲染的完成时间,且对设备性能的要求很低。于其他实施例中,设渲染时间可以为其他设定值。
本发明提供的计算页面首屏渲染时间的方法和系统,通过分析多次获取设备屏幕上所有采样点的当前图片列表信息与设备屏幕的页面首屏处于稳定状态后的获取的稳定图片列表信息,来判断页面首屏是否完成首屏渲染;直接获取各个采样点的图片列表信息来分析,降低对设备性能的要求的情况下做到首屏渲染时间的计算的准确性;而且首屏渲染时间的计算可以不需要在代码开发中的人员参与,使得首屏渲染时间的计算和业务线得到完全解耦。
对于页面首屏处于稳定状态的判断手段并不进行限制,可以是通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态;也可以是设定预设时间来实现,也就是说设定的时间肯定能够让页面首屏处于稳定状态。相应的,在设备屏幕的页面首屏处于稳定状态后,获取方式也是一样的。
于本实施例中,通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态。具体的包括以下步骤;
通过AOP方式发起串联型的XHR请求,并判断XHR请求是否在请求时间窗口队列中;若在请求时间窗口队列中,则根据XHR请求获取对应的返回数据和返回时间,并设置请求时间窗口队列中对应XHR请求的属性信息;直到XHR请求不在请求时间窗口队列中,则判断设备屏幕的页面首屏处于稳定状态,获取最后的返回数据和返回时间。也就是说,通过AOP(面向切面编程)切面方式重写XHR注入机制的send方法,抓取页面中的第一批XHR请求。XHR请求为串联型请求,也就是下一个请求依赖上一个请求的返回数据。在统计第一批XHR请求返回后,500ms内新发出的请求保存在一个Request接收数组中。这个Request接收数组记录着每个XHR请求的状态和数据返回的时间。针对上述Request接收数组中的各类数据,找到XHR请求中返回的最大时间,即最后一次的返回数据和返回时间。请求时间窗口队列表征所有批次的XHR请求,如果请求时间窗口队列中没有发起请求的XHR请求,说明页面在该次请求完成后,加预设渲染时间,足以保证页面的渲染,此时的时间即为页面稳定状态。采用AOP切面方式重写XHR注入机制的send方法,通过获取影响首屏渲染的XHR异步接口返回的时间来作为页面稳定状态的稳定时间信息,可以直接以稳定时间信息作为时间节点,向前对比判断页面首屏是否完成首屏渲染。其中也会维护一个Request接收数组,将串联型的XHR请求的相关数据也会记录,保证页面稳定状态的时间的稳定性。
为了进一步降低对设备性能的需求,根据不同时间点获取的采样点的当前图片列表信息和稳定图片列表信息是否相同,判断页面首屏是否完成首屏渲染,包括以下步骤;将每次时间点获取的采样点的当前图片列表信息以时间倒序的方式排列,依次将排列后的当前图片列表信息中的图片数量与稳定图片列表信息中的图片数量进行比较,判断页面首屏是否完成首屏渲染;若图片数量相同,则完成首屏渲染,并停止图片数量的比对,获取对应的当前时间信息。直接将首屏渲染完成的时间与首屏图片加载完成的时间等同起来,通过获取首屏图片最后加载完成的时间,作为首屏渲染时间,做到首屏渲染时间计算的准确性。只需要对图片数量进行比较,不需要涉及复杂的数据处理。而且是以时间倒序的方式向上对比,进一步缩短对比次数。
基于同一发明构思,本发明实施例还提供一种计算页面首屏渲染时间的系统,该系统的实施可参照上述方法的过程实现,重复之处不再冗述。
如图2所示,是本发明实施例二提供的计算页面首屏渲染时间的系统的结构示意图,包括间隔采样模块100、稳定采样模块200以及计算模块300;间隔采样模块100用于在获取到用户的页面请求后,按照预设时间间隔多次获取设备屏幕上所有采样点的当前采样信息,当前采样信息包括当前图片列表信息和当前时间信息;稳定采样模块200用于在设备屏幕的页面首屏处于稳定状态后,获取设备屏幕上每个采样点的稳定采样信息稳定采样信息包括稳定图片列表信息;计算模块300用于根据不同时间点获取的采样点的当前图片列表信息和稳定图片列表信息是否相同,判断页面首屏是否完成首屏渲染;在确定设备屏幕完成首屏渲染后,根据对应完成首屏渲染时间点的当前时间信息和预设渲染时间,计算待测页面的首屏渲染的完成时间。
本发明能够在降低对设备性能的要求的情况下做到首屏渲染时间的计算的准确性;而且首屏渲染时间的计算可以不需要在代码开发中的人员参与,使得首屏渲染时间的计算和业务线得到完全解耦。
本发明实施例三提供的计算页面首屏渲染时间的系统,与实施例二相比,区别在于,还包括判断模块400;判断模块400用于在设备屏幕的页面首屏处于稳定状态前,通过AOP方式采用XHR注入机制的Send方法来判断设备屏幕的页面首屏是否处于稳定状态。
进一步的,计算模块300还用于将每次时间点获取的采样点的当前图片列表信息以时间倒序的方式排列,依次将排列后的当前图片列表信息中的图片数量与稳定图片列表信息中的图片数量进行比较,判断页面首屏是否完成首屏渲染;若图片数量相同,则完成首屏渲染,并停止图片数量的比对,获取对应的当前时间信息。
本发明虽然已以较佳实施例公开如上,但其并不是用来限定本发明,任何本领域技术人员在不脱离本发明的精神和范围内,都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改,因此,凡是未脱离本发明技术方案的内容,依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰,均属于本发明技术方案的保护范围。