CN111258877B - 首屏页面可见时间的检测方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供了一种首屏页面可见时间的检测方法、装置及电子设备，其中，方法包括：检测首屏页面元素是否被完整加载；如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间。本发明实施例通过将首屏页面可见时间的检测点放在了每次页面渲染处理完成之后，在这个时间点执行首屏元素的检测处理是最接近用户可见的状态，并且在这个时间点，与页面内容文件相关加载以及其他处理逻辑都已经完成，从而能够准确地判断出首屏元素是否被完整记载，从而能够准确地判断出是否达到了首屏可见的标准，并且也能够获得更精准的首屏可见时间。

Description

首屏页面可见时间的检测方法、装置及电子设备

技术领域

本申请涉及一种首屏页面可见时间的检测方法、装置及电子设备，属于计算机技术领域。

背景技术

首屏页面是指用户访问一个网页或者打开一个应用或者应用中的一个功能时，首先呈献给用户的页面。首屏页面可见时间的是指在打开一个座位首屏的页面后，具体在何时才完整地呈现给用户，首屏页面呈现的快慢直接关系到用户体验的好坏，因此，对于首屏页面可见时间的检测也是测试页面的重要指标。

目前首屏页面可见时间的检测没有统一的标准方案，已有的检测方法中，大多是通过判断页面内容文件加载完成的时间点推定首屏页面可见时间，而实际上，浏览器加载完页面内容文件后，还需要执行页面渲染处理，并且在执行页面渲染处理之前，还可能执行其他的页面处理逻辑。因此，使用页面内容文件加载完成的时间点推定首屏页面可见时间是不准确地，存在巨大的误差。

发明内容

本发明实施例提供一种首屏页面可见时间的检测方法、装置及电子设备，以更加准确地检测首屏页面可见时间。

为了实现上述目的，本发明实施例提供了一种首屏页面可见时间的检测方法，应用于页面渲染处理之后，包括：

检测首屏页面元素是否被完整加载；

如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间。

本发明实施例提供了一种首屏页面可见时间的检测装置，包括：

检测触发模块，用于在页面渲染处理完成后，触发首屏页面元素的检测处理；

检测处理模块，用于检测首屏页面元素是否被完整加载，如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间。

本发明实施例提供了一种电子设备，包括：

存储器，用于存储程序；

处理器，耦合至所述存储器，用于执行所述程序，以用于如下处理：

在页面渲染处理完成后，执行如下首屏页面元素的检测处理：

检测首屏页面元素是否被完整加载；

如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间。

本发明实施例的首屏页面可见时间的检测方法、装置及电子设备，通过将首屏页面可见时间的检测点放在了每次页面渲染处理完成之后，在这个时间点执行首屏元素的检测处理是最接近用户可见的状态，并且在这个时间点，与页面内容文件相关加载以及其他处理逻辑都已经完成，从而能够准确地判断出首屏元素是否被完整记载，从而能够准确地判断出是否达到了首屏可见的标准，并且也能够获得更精准的首屏可见时间。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

图1为本发明实施例的首屏页面可见时间的检测方法的流程示意图；

图2为本发明实施例的首屏页面可见时间的检测方法的原理示意图；

图3为本发明实施例的首屏页面可见时间的检测装置的结构示意图；

图4为本发明实施例的电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

一个页面打开的处理过程大致如下：

S1：浏览器向网站服务器发送一个页面请求；

S2：网站服务器向浏览器返回页面内容文件(HTML文件)；

S3：浏览器加载该页面内容文件：对页面内容文件进行解析，生成DOM树；

S4：浏览器根据生成DOM(HTML Document Object Model，文档对象模型)树，执行页面渲染处理，在屏幕上展示页面内容。其中，在步骤S3和步骤S4之间，还可能执行一些页面渲染处理以外的其他页面处理逻辑。

由于页面的内容比较丰富并且也会动态的更新变化，网站服务器会不断地向浏览器返回新的页面内容文件(执行步骤S2)，浏览器也会不断地更新DOM树(执行步骤S3)，并且不断执行页面渲染处理(执行步骤S4)。浏览器一般会以固定的频率进行网页刷新，即不断地更新DOM树树以及执行页面渲染处理，常见的为每秒钟60次(60FPS)。此外，浏览器的处理过程是单线程的操作，上述的各个处理步骤也是单线程执行的。

在本发明实施例中，首屏页面可见的状态，主要是通过首屏页面中的一个或多个首屏页面元素是否被完整加载和渲染来确定的。首屏页面元素一般是一个页面中的关键元素，例如，新闻页面的关键元素就是头条的新闻标题和新闻图片，支付页面的关键元素就是支付界面部分，登录页面的关键元素就是输入用户名和密码的登录界面部分。

为了更加准确地确定首屏页面可见时间，本发明实施例将首屏页面可见时间的检测点放在了每次页面渲染处理完成之后，因为每次页面渲染处理完成后，才是基于当前页面内容文件呈现给最终状态显示状态，也是用户看到的状态。在渲染完成之后，去查看上述的首屏页面元素是否被完整的加载。具体是通过DOM树中，与首屏页面元素对应的DOM节点的加载状态信息进行判断。每个DOM节点中会记录其对应的页面元素的记载状态，比如是否已经加载完成或者页面元素的内容信息在下载中等。

为了将首屏页面可见时间的检测点放在每次页面渲染处理完成之后，本发明实施例利用了W3C(万维网联盟)标准中提供的浏览器接口函数RequestAnimationFrame(请求动画框架，简称RAF接口函数)的特性，通过调用该RAF函数将首屏页面元素的检测处理插入到了页面渲染处理之后。

以上介绍了本发明实施例的基本原理，下面通过一些具体实施例来进一步说明本发明的技术方案。

实施例一

如图1所示，其为本发明实施例的首屏页面可见时间的检测方法的流程示意图，该方法包括：在页面渲染处理(图中标记为步骤S100)完成后，执行如下首屏页面元素的检测处理：

S101：检测首屏页面元素是否被完整加载；如果确定首屏页面元素被完整加载，则执行步骤S102，否则执行步骤S103。

S102：将页面渲染处理完成的时间，作为首屏页面可见时间。

S103：确定为首屏没有处于可见状态，需要等待下次页面渲染处理完成后再进行检测。

如前面所介绍的，浏览器基于DOM树来执行页面渲染处理，在页面的打开过程中，页面内容可能并不会一次传输完成，因此，完整的页面内容可能需要经过多次的页面刷新才能完整呈现。在每次页面刷新时，浏览器都会根据最新获得的页面内容文件来更新DOM树，然后再基于更新后的DOM树重新执行页面渲染处理。在本发明实施例中，上述的首屏页面元素的检测处理可以在每次页面渲染处理完成后都执行一次，直到确定出了首屏页面可见时间，就可以终止该首屏页面元素的检测处理。当然，从程序设计上，也可不终止首屏页面元素的检测处理，只获取首屏页面元素的检测处理第一次确定了首屏可见状态后，输出的首屏页面可见时间。

进一步地，可以利用RAF接口函数将上述的首屏页面元素的检测处理，插入到页面渲染处理完成之后。RAF接口函数的功能在于：该接口函数可以使用一个回调函数作为参数，通过运行RAF接口函数将回调函数插入到渲染队列中，使得在渲染处理完成后，执行该回调函数。因此，可以利用该RAF接口函数的特性，将首屏页面元素的检测处理程序写在该回调函数中，通过将该回调函数插入到渲染队列，使得在渲染处理完成后执行该回调函数。

如图2所示，其为本发明实施例的首屏页面可见时间的检测方法的原理示意图。其中，浏览器在加载页面内容文件的过程中，调用RAF接口函数，该接口函数以首屏页面元素检测程序作为参数，使得在下次页面渲染处理完成后执行首屏页面元素检测程序，该首屏页面元素检测程序用于执行首屏页面元素的检测处理。

在第一次加载页面内容文件的过程中，调用RAF接口函数，能够使得第一次的页面渲染处理完成后执行首屏页面元素检测程序。进一步地，要想在后续的多次页面渲染处理完成后，再次执行首屏页面元素检测程序，就需要再次调用该RAF接口函数。

具体地，可以在首屏页面元素检测程序中，再次以首屏页面元素检测程序作为参数，调用RAF接口函数的程序逻辑。相应地，上述首屏元素的检测处理还可以包括：以首屏页面元素检测程序作为参数，调用RAF接口函数。

如图2中所示，在首次加载页面内容文件后，每隔一定的周期，会执行页面刷新处理，在该刷新处理过程中，会依次执行更新DOM树、渲染处理等操作，并且会留有一定的空闲时间。包含有首屏页面元素检测程序的回调函数就是在每次页面渲染处理完成后的空闲时间内执行的，同时在该回调函数中，再次调用RAF接口函数，使得在下一个空闲时间内再次执行该回调函数，从而将首屏页面元素检测程序重复执行下去。

此外，在首屏页面元素检测程序中，还可以包括：判断是否检测到首屏页面可见时间，如果检测到首屏页面可见时间，则终止执行调用请求动画框架接口函数。通过加入这样的程序逻辑，可以在检测到首屏页面可见时间后，就终止掉首屏页面元素检测程序，从而避免无意义的程序处理。

进一步地，上述的检测首屏页面元素是否被完整加载可以具体包括：

检测页面渲染处理对应的DOM树，是否存在与首屏页面元素对应的DOM节点；

如果不存在，则确定为该首屏页面元素没有被完整加载。在一些情况下，在第一次加载页面内容文件时，首屏页面元素对应的部分有可能还没有被下载，或者由于其他的网络传输错误或者页面内容文件错误等原因，在DOM树中，并不存在于首屏页面元素对应的DOM节点，这种情况下，显然会被判定为该首屏页面元素没有被完整加载。

如果存在，则还需要进一步根据DOM节点的加载状态信息，判断DOM节点对应的首屏页面元素是否被完整地加载到DOM树中，如果是，确定为该首屏页面元素被完整加载。其中，这里所说的首屏页面元素被完整加载是指首屏页面元素的全部内容都存在于DOM节点中，例如，如果该首屏页面元素是图片，那么DOM节点中就应该有该图片的完整图像数据，如果是动画，也应该有该动画的完整视频数据。在一些情况下，首屏页面元素的内容比较多，需要通过多次的页面加载以及渲染才能完成，因此，在每次渲染处理完成后，很可能出现首屏页面元素并没有完整可见的情形。首屏页面元素的加载状态信息会记录在DOM节点中，例如记录当前的首屏页面元素是处于下载中还是已经完成了下载等状态。

此外，还存在一些较为特殊的情形，如果首屏页面元素中包含了背景图片，相应地，DOM节点中也包含对应的背景图片元素，而背景图片元素的加载状态并不会记录在DOM节点中。针对这种情况，可以利用Performance接口函数(W3C标准中提供的接口函数)，获取该背景图片元素的加载完成时间。Performance接口函数的主要功能是获取与页面有关的各种性能信息，其中，计算背景图片的加载完成时间是其功能之一。

相应地，根据DOM节点的加载状态信息，判断DOM节点对应的首屏页面元素是否被完整地加载到DOM树中可以具体为：

根据DOM节点的加载状态信息和背景图片元素的加载完成时间，这两方面的信息来确定该首屏页面元素被完整加载。其中，如果该背景图片元素的加载完成时间在页面渲染处理完成之前，则确定该背景图片元素已经被完整加载，页面渲染处理也会将完整的背景图片绘制于屏幕上，否则，确定为该背景图片元素没有被完整加载，需要在下一次的页面渲染处理过程中，才能将完整的背景图片绘制出来。

此外，对于上述的步骤S102中，对于页面渲染处理完成的时间的确定可以采用如下方式：在检测首屏页面元素是否被完整加载之前，记录当前时间作为页面渲染处理完成的时间。也就是说，在首屏页面元素的检测程序的最前面执行获取当前时间的操作，从而使得得到的时间更接近页面渲染处理完成的时间。当然，如果浏览器或者操作系统的日志记录比较全面的情况下，也可以从系统日志中获取页面渲染处理完成的时间。

本发明实施例的首屏页面可见时间的检测方法，通过将首屏页面可见时间的检测点放在了每次页面渲染处理完成之后，在这个时间点执行首屏元素的检测处理是最接近用户可见的状态，并且在这个时间点，与页面内容文件相关加载以及其他处理逻辑都已经完成，从而能够准确地判断出首屏元素是否被完整记载，从而能够准确地判断出是否达到了首屏可见的标准，并且也能够获得更精准的首屏可见时间。

实施例二

如图3所示，其为本发明实施例的首屏页面可见时间的检测装置的结构示意图，该检测装置可以设置于浏览器中，其包括检测触发模块11和检测处理模块12。

检测触发模块11，用于在页面渲染处理完成后，触发首屏页面元素的检测处理。具体地，在本发明实施例中，可以利用RAF接口函数将上述的首屏页面元素的检测处理，插入到页面渲染处理完成之后，即实现在页面渲染处理完成后，触发首屏页面元素的检测处理。RAF接口函数的功能在于：该接口函数可以使用一个回调函数作为参数，通过运行RAF接口函数将回调函数插入到渲染队列中，使得在渲染处理完成后，执行该回调函数。因此，可以利用该RAF接口函数的特性，将首屏页面元素的检测处理程序写在该回调函数中，通过将该回调函数插入到渲染队列，使得在渲染处理完成后执行该回调函数。

具体地，检测触发模块11可以具体执行如下处理：在加载页面内容文件的过程中，调用RAF接口函数，该接口函数以首屏页面元素检测程序作为参数，使得在下次页面渲染处理完成后执行首屏页面元素检测程序，该首屏页面元素检测程序用于执行首屏页面元素的检测处理。

进一步地，为了能够实现在后续的多次页面渲染处理完成后，再次执行首屏页面元素检测程序，可以在首屏页面元素检测程序中，再次以首屏页面元素检测程序作为参数，调用RAF接口函数的程序逻辑。即上述首屏元素的检测处理还可以包括：以首屏页面元素检测程序作为参数，调用RAF接口函数。

此外，在首屏页面元素检测程序中，还可以包括：判断是否检测到首屏页面可见时间，如果检测到首屏页面可见时间，则终止执行调用请求动画框架接口函数。通过加入这样的程序逻辑，可以在检测到首屏页面可见时间后，就终止掉首屏页面元素检测程序，从而避免无意义的程序处理。

检测处理模块12，用于检测首屏页面元素是否被完整加载，如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间。

其中，上述的检测首屏页面元素是否被完整加载可以具体包括：检测页面渲染处理对应的DOM树，是否存在与首屏页面元素对应的DOM节点。

如果不存在，则确定为该首屏页面元素没有被完整加载。在一些情况下，在第一次加载页面内容文件时，首屏页面元素对应的部分有可能还没有被下载，或者由于其他的网络传输错误或者页面内容文件错误等原因，在DOM树中，并不存在于首屏页面元素对应的DOM节点，这种情况下，显然会被判定为该首屏页面元素没有被完整加载。

如果存在，则还需要进一步根据DOM节点的加载状态信息，判断DOM节点对应的首屏页面元素是否被完整地加载到DOM树中，如果是，确定为该首屏页面元素被完整加载。其中，这里所说的首屏页面元素被完整加载是指首屏页面元素的全部内容都存在于DOM节点中，例如，如果该首屏页面元素是图片，那么DOM节点中就应该有该图片的完整图像数据，如果是动画，也应该有该动画的完整视频数据。在一些情况下，首屏页面元素的内容比较多，需要通过多次的页面加载以及渲染才能完成，因此，在每次渲染处理完成后，很可能出现首屏页面元素并没有完整可见的情形。首屏页面元素的加载状态信息会记录在DOM节点中，例如记录当前的首屏页面元素是处于下载中还是已经完成了下载等状态。

此外，还存在一些较为特殊的情形，如果首屏页面元素中包含了背景图片，相应地，DOM节点中也包含对应的背景图片元素，而背景图片元素的加载状态并不会记录在DOM节点中。针对这种情况，可以利用Performance接口函数，获取该背景图片元素的加载完成时间。Performance接口函数的主要功能是获取与页面有关的各种性能信息，其中，计算背景图片的加载完成时间是其功能之一。

相应地，根据DOM节点的加载状态信息，判断DOM节点对应的首屏页面元素是否被完整地加载到DOM树中可以具体为：

根据DOM节点的加载状态信息和背景图片元素的加载完成时间，这两方面的信息来确定该首屏页面元素被完整加载。其中，如果该背景图片元素的加载完成时间在页面渲染处理完成之前，则确定该背景图片元素已经被完整加载，页面渲染处理也会将完整的背景图片绘制于屏幕上，否则，确定为该背景图片元素没有被完整加载，需要在下一次的页面渲染处理过程中，才能将完整的背景图片绘制出来。

此外，对于页面渲染处理完成的时间的确定可以采用如下方式：在检测首屏页面元素是否被完整加载之前，记录当前时间作为页面渲染处理完成的时间。也就是说，在首屏页面元素的检测程序的最前面执行获取当前时间的操作，从而使得得到的时间更接近页面渲染处理完成的时间。当然，如果浏览器或者操作系统的日志记录比较全面的情况下，也可以从系统日志中获取页面渲染处理完成的时间。

本发明实施例的首屏页面可见时间的检测装置，通过将首屏页面可见时间的检测点放在了每次页面渲染处理完成之后，在这个时间点执行首屏元素的检测处理是最接近用户可见的状态，并且在这个时间点，与页面内容文件相关加载以及其他处理逻辑都已经完成，从而能够准确地判断出首屏元素是否被完整记载，从而能够准确地判断出是否达到了首屏可见的标准，并且也能够获得更精准的首屏可见时间。

实施例三

前面实施例描述了本发明实施例的流程处理及装置结构，上述的方法和装置的功能可借助一种电子设备实现完成，如图4所示，其为本发明实施例的电子设备的结构示意图，具体包括：存储器110和处理器120。

存储器110，用于存储程序。

除上述程序之外，存储器110还可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。

存储器110可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

处理器120，耦合至存储器110，用于执行存储器110中的程序，以用于执行如下处理：

在页面渲染处理完成后，执行如下首屏页面元素的检测处理：

检测首屏页面元素是否被完整加载；

如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间。

其中，上述处理还可以包括：

在加载页面内容文件的过程中，调用请求动画框架接口函数，并以首屏页面元素检测程序作为该接口函数的参数，使得在下次页面渲染处理完成后执行首屏页面元素检测程序，首屏页面元素检测程序用于执行首屏页面元素的检测处理。

其中，首屏页面元素检测程序包括再次以首屏页面元素检测程序作为参数，调用请求动画框架接口函数，相应地，首屏元素的检测处理还可以包括：以首屏页面元素检测程序作为参数，调用请求动画框架接口函数。

其中，首屏页面元素检测程序还可以包括：判断是否检测到首屏页面可见时间，如果检测到首屏页面可见时间，则终止执行调用请求动画框架接口函数。

其中，检测首屏页面元素是否被完整加载可以包括：检测页面渲染处理对应的DOM树，是否存在与首屏页面元素对应的DOM节点，如果不存在，则确定为该首屏页面元素没有被完整加载，如果存在，则进一步根据DOM节点的加载状态信息，判断DOM节点对应的首屏页面元素是否被完整地加载到DOM树中，如果是，确定为该首屏页面元素被完整加载。

其中，检测首屏页面元素是否被完整加载还可以包括：如果该DOM节点中包含背景图片元素，则调用Performance接口函数，获取该背景图片元素的加载完成时间；

根据DOM节点的加载状态信息，判断DOM节点对应的首屏页面元素是否被完整地加载到DOM树中可以包括：根据DOM节点的加载状态信息和背景图片元素的加载完成时间来确定该首屏页面元素被完整加载，其中，如果该背景图片元素的加载完成时间在页面渲染处理完成之前，则确定该背景图片元素已经被完整加载，否则，确定为该背景图片元素没有被完整加载。

其中，在检测首屏页面元素是否被完整加载之前，还可以包括：记录当前时间作为页面渲染处理完成的时间。

对于上述处理过程具体说明、技术原理详细说明以及技术效果详细分析在前面实施例中进行了详细描述，在此不再赘述。

进一步，如图所示，电子设备还可以包括：通信组件130、电源组件140、音频组件150、显示器160等其它组件。图中仅示意性给出部分组件，并不意味着电子设备只包括图中所示组件。

通信组件130被配置为便于电子设备和其他设备之间有线或无线方式的通信。电子设备可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件130经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信组件130还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

电源组件140，为电子设备的各种组件提供电力。电源组件140可以包括电源管理系统，一个或多个电源，及其他与为电子设备生成、管理和分配电力相关联的组件。

音频组件150被配置为输出和/或输入音频信号。例如，音频组件150包括一个麦克风(MIC)，当电子设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器110或经由通信组件130发送。在一些实施例中，音频组件150还包括一个扬声器，用于输出音频信号。

显示器160包括屏幕，其屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (8)

1.一种首屏页面可见时间的检测方法，应用于页面渲染处理之后，包括：

检测首屏页面元素是否被完整加载；

如果确定所述首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间；

还包括：

在加载页面内容文件的过程中，调用请求动画框架接口函数，并以首屏页面元素检测程序作为该接口函数的参数，使得在下次页面渲染处理完成后执行所述首屏页面元素检测程序，所述首屏页面元素检测程序用于执行所述首屏页面元素的检测处理；

所述检测首屏页面元素是否被完整加载包括：

检测页面渲染处理对应的DOM树，是否存在与所述首屏页面元素对应的DOM节点，如果存在，则进一步根据DOM节点的加载状态信息，判断所述DOM节点对应的首屏页面元素是否被完整地加载到DOM树中，如果是，确定为该首屏页面元素被完整加载；

如果该DOM节点中包含背景图片元素，则调用Performance接口函数，获取该背景图片元素的加载完成时间；

所述根据DOM节点的加载状态信息，判断所述DOM节点对应的首屏页面元素是否被完整地加载到DOM树中包括：

根据DOM节点的加载状态信息和所述背景图片元素的加载完成时间来确定该首屏页面元素被完整加载，其中，如果该背景图片元素的加载完成时间在页面渲染处理完成之前，则确定该背景图片元素已经被完整加载，否则，确定为该背景图片元素没有被完整加载。

2.根据权利要求1所述的方法，其中，所述首屏页面元素检测程序包括再次以首屏页面元素检测程序作为参数，调用所述请求动画框架接口函数，相应地，所述首屏页面元素的检测处理还包括：

以首屏页面元素检测程序作为参数，调用所述请求动画框架接口函数。

3.根据权利要求2所述的方法，其中，所述首屏页面元素检测程序还包括：

判断是否检测到首屏页面可见时间，如果检测到首屏页面可见时间，则终止执行调用所述请求动画框架接口函数。

4.根据权利要求1所述的方法，其中，检测首屏页面元素是否被完整加载包括：

如果不存在与所述首屏页面元素对应的DOM节点，则确定为该首屏页面元素没有被完整加载。

5.根据权利要求1所述的方法，其中，在检测首屏页面元素是否被完整加载之前，还包括：记录当前时间作为页面渲染处理完成的时间。

6.一种首屏页面可见时间的检测装置，包括：

检测触发模块，用于在页面渲染处理完成后，触发首屏页面元素的检测处理；

检测处理模块，用于检测首屏页面元素是否被完整加载，如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间；

所述检测触发模块还用于：

在加载页面内容文件的过程中，调用请求动画框架接口函数，并以首屏页面元素检测程序作为该接口函数的参数，使得在下次页面渲染处理完成后执行所述首屏页面元素检测程序，所述首屏页面元素检测程序用于执行所述首屏页面元素的检测处理；

所述检测首屏页面元素是否被完整加载包括：

检测页面渲染处理对应的DOM树，是否存在与所述首屏页面元素对应的DOM节点，如果存在，则进一步根据DOM节点的加载状态信息，判断所述DOM节点对应的首屏页面元素是否被完整地加载到DOM树中，如果是，确定为该首屏页面元素被完整加载；

如果该DOM节点中包含背景图片元素，则调用Performance接口函数，获取该背景图片元素的加载完成时间；

所述根据DOM节点的加载状态信息，判断所述DOM节点对应的首屏页面元素是否被完整地加载到DOM树中包括：

根据DOM节点的加载状态信息和所述背景图片元素的加载完成时间来确定该首屏页面元素被完整加载，其中，如果该背景图片元素的加载完成时间在页面渲染处理完成之前，则确定该背景图片元素已经被完整加载，否则，确定为该背景图片元素没有被完整加载。

7.根据权利要求6所述的装置，其中，所述首屏页面元素检测程序包括再次以首屏页面元素检测程序作为参数，调用所述请求动画框架接口函数，相应地，所述首屏页面元素的检测处理还包括：以首屏页面元素检测程序作为参数，调用所述请求动画框架接口函数。

8.一种电子设备，包括：

存储器，用于存储程序；

处理器，耦合至所述存储器，用于执行所述程序，以用于如下处理：

在页面渲染处理完成后，执行如下首屏页面元素的检测处理：

检测首屏页面元素是否被完整加载；

如果确定首屏页面元素被完整加载，则将页面渲染处理完成的时间，作为首屏页面可见时间；

还包括：

在加载页面内容文件的过程中，调用请求动画框架接口函数，并以首屏页面元素检测程序作为该接口函数的参数，使得在下次页面渲染处理完成后执行所述首屏页面元素检测程序，所述首屏页面元素检测程序用于执行所述首屏页面元素的检测处理；

所述检测首屏页面元素是否被完整加载包括：

检测页面渲染处理对应的DOM树，是否存在与所述首屏页面元素对应的DOM节点，如果存在，则进一步根据DOM节点的加载状态信息，判断所述DOM节点对应的首屏页面元素是否被完整地加载到DOM树中，如果是，确定为该首屏页面元素被完整加载；

如果该DOM节点中包含背景图片元素，则调用Performance接口函数，获取该背景图片元素的加载完成时间；

所述根据DOM节点的加载状态信息，判断所述DOM节点对应的首屏页面元素是否被完整地加载到DOM树中包括：

根据DOM节点的加载状态信息和所述背景图片元素的加载完成时间来确定该首屏页面元素被完整加载，其中，如果该背景图片元素的加载完成时间在页面渲染处理完成之前，则确定该背景图片元素已经被完整加载，否则，确定为该背景图片元素没有被完整加载。

Images