页面资源加载方法和装置、电子设备及存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种页面资源加载方法和装置、电子设备及存储介质。

背景技术

页面是由各个元素View(视图容器)组成，比如按钮、横线、色块、展示的图片等。目前绘制View的方案一般有：1、先设定View的大小，后加载填充资源再变化View的大小，这种方案会导致在客户端看来，页面有大幅跳动的情况出现。第二种则是先下载完完整的资源后才能知道资源的尺寸大小，之后绘制View至屏幕，但是资源体积越大，需要等待下载的完成时间越长，进而等待时间越长，并且当资源体积越大，受网络状况影响越大。第三种则是在远程资源的HTTP地址中加入图片的宽高参数，进而在绘制View的时候已经知道了View的大小，但是这个方案需要服务器额外来处理图片的宽高，并拼接至HTTP地址中，耗费了处理资源；并且并不是所有的资源链接都会带上图片的宽高信息，并拼接至HTTP地址中。综上所述，现有的方案中要么就是会造成页面出现大幅跳动，要么大大耗费服务器资源，并且无法兼顾所有情况。

发明内容

本申请实施例的主要目的在于提出一种页面资源加载方法和装置、电子设备及存储介质，旨在提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。

为实现上述目的，本申请实施例的第一方面提出了一种页面资源加载方法，所述方法包括：获取待加载资源的文件属性信息和文件类型，根据所述文件类型确定所述文件属性信息中目标字节位置；获取所述目标字节位置的目标字节数据，并根据所述目标字节数据确定所述待加载资源的尺寸信息；创建视图容器并根据所述尺寸信息调整所述视图容器的尺寸；将所述待加载资源填充至调整后的所述视图容器中。

在一些实施例，所述获取待加载资源的文件类型包括：获取所述文件属性信息中第一预设字节位置的第一字节数据；根据所述第一字节数据确定所述待加载资源的文件类型。

在一些实施例，所述获取待加载资源的文件属性信息包括：接收来自服务器的待加载资源的字节流数据；获取所述字节流数据中第二预设位置的第二字节数据，其中，所述第二字节数据为所述待加载资源的文件属性信息。

在一些实施例，所述待加载资源包括图片资源和视频资源，所述获取待加载资源的文件属性信息和文件类型包括如下之一：当所述待加载资源为图片资源，直接获取所述待加载资源的文件属性信息和文件类型；当所述待加载资源为视频资源，确定所述视频资源的目标帧图片，获取所述目标帧图片的文件属性信息和文件类型。

在一些实施例，所述将所述待加载资源填充至调整后的所述视图容器中，包括：获取所述待加载资源的文件内容数据；对所述文件内容数据作解析处理并填充至所述视图容器。

在一些实施例，在所述获取待加载资源的文件属性信息和文件类型之前，所述页面资源加载方法还包括：向服务器发送待加载资源的请求信息，以使所述服务器根据所述请求信息查询所述待加载资源的存储情况；当所述存储情况为所述待加载资源存储于所述服务器，接收来自所述服务器基于所述请求信息所反馈的请求失败状态码和所述待加载资源的字节流数据，其中，所述字节流数据包括所述文件属性信息和文件内容数据。

在一些实施例，在所述向服务器发送待加载资源的请求信息之后，所述页面资源加载方法还包括：当所述存储情况为所述待加载资源未存储于所述服务器，接收来自所述服务器基于所述请求信息所反馈的请求失败状态码。

为实现上述目的，本申请实施例的第二方面提出了一种页面资源加载装置，所述装置包括：数据接收模块，用于获取待加载资源的文件属性信息和文件类型，根据所述文件类型确定所述文件属性信息中目标字节位置；字节获取模块，用于获取所述目标字节位置的目标字节数据，并根据所述目标字节数据确定所述待加载资源的尺寸信息；视图容器创建模块，用于创建视图容器并根据所述尺寸信息调整所述视图容器的尺寸；资源填充模块，用于将所述待加载资源填充至调整后的所述视图容器中。

为实现上述目的，本申请实施例的第三方面提出了一种电子设备，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法。

为实现上述目的，本申请实施例的第四方面提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的方法。

本申请提出的页面资源加载方法和装置、电子设备及存储介质,其通过在接收待加载资源的内容之前，获取待加载资源的文件属性信息和文件类型，根据文件类型确定文件属性信息中的目标字节位置，在确定目标字节位置之后，获取目标字节位置的目标字节数据，根据目标字节数据确定待加载资源的尺寸信息，在页面上创建用于填充待加载资源的视图容器，再接收待加载资源的文件内容数据，将待加载资源填充至调整后的视图容器中，由于待加载资源的文件属性信息先于文件内容数据由服务器发送至客户端，并且在文件属性信息中存储有待加载资源的尺寸信息，那客户端先从文件属性信息中读取出尺寸信息，根据读取到的尺寸信息调整视图容器的尺寸，视图容器的尺寸既是合适待加载资源的尺寸，在之后接收文件内容数据时直接将文件内容数据填充至视图容器中，就不会出现页面抖动的情况出现，提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。

附图说明

图1是本申请实施例提供的页面资源加载方法的一个可选的流程图；

图2是本申请实施例提供的页面资源加载方法中获取待加载资源的文件类型的流程图；

图3是本申请实施例提供的页面资源加载方法中获取待加载资源的文件属性信息的流程图；

图4是本申请实施例提供的页面资源加载方法中获取待加载资源的文件属性信息和文件类型的流程图；

图5是本申请实施例提供的页面资源加载方法中获取待加载资源的文件属性信息和文件类型的流程图；

图6是本申请实施例提供的页面资源加载方法中填充视图容器的流程图；

图7是本申请实施例提供的页面资源加载方法的一个可选的流程图；

图8是本申请实施例提供的页面资源加载方法的一个可选的流程图；

图9是本申请实施例提供的页面资源加载装置的结构示意图；

图10是本申请实施例提供的电子设备的硬件结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

首先，对本申请中涉及的若干名词进行解析：

人工智能(art ificia l i nte l l igence，AI)：是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学；人工智能是计算机科学的一个分支，人工智能企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能可以对人的意识、思维的信息过程的模拟。人工智能还是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

自然语言处理(natura l l anguage process i ng，NLP)：NLP用计算机来处理、理解以及运用人类语言(如中文、英文等)，NLP属于人工智能的一个分支，是计算机科学与语言学的交叉学科，又常被称为计算语言学。自然语言处理包括语法分析、语义分析、篇章理解等。自然语言处理常用于机器翻译、手写体和印刷体字符识别、语音识别及文语转换、信息意图识别、信息抽取与过滤、文本分类与聚类、舆情分析和观点挖掘等技术领域，它涉及与语言处理相关的数据挖掘、机器学习、知识获取、知识工程、人工智能研究和与语言计算相关的语言学研究等。

信息抽取(I nformat ion Extract ion)：从自然语言文本中抽取指定类型的实体、关系、事件等事实信息，并形成结构化数据输出的文本处理技术。信息抽取是从文本数据中抽取特定信息的一种技术。文本数据是由一些具体的单位构成的，例如句子、段落、篇章，文本信息正是由一些小的具体的单位构成的，例如字、词、词组、句子、段落或是这些具体的单位的组合。抽取文本数据中的名词短语、人名、地名等都是文本信息抽取，当然，文本信息抽取技术所抽取的信息可以是各种类型的信息。

图像描述(Image Capt ion)为图像生成自然语言描述，并利用所生成的描述帮助应用程序理解图像视觉场景中表达的语义。例如，图像描述可以将图像检索转换为文本检索，用于对图像进行分类并改善图像检索结果。人们通常只需快速浏览一下即可描述图像视觉场景的细节，而自动为图像添加描述则是一项全面而艰巨的计算机视觉任务，需要将图像中包含的复杂信息转换为自然语言描述。与普通的计算机视觉任务相比，图像字幕不仅需要从图像中识别对象，而且还需要将识别出的对象与自然语义相关联并以自然语言进行描述。因此，图像描述需要人们提取图像的深层特征，与语义特征关联并转换用于生成描述。

超文本传输协议(Hyper Text Transfer Protoco l,HTTP):超文本传输协议(Hyper Text Transfer Protoco l，HTTP)是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCI I形式给出；而消息内容则具有一个类似MI ME的格式。HTTP是应用层协议，同其他应用层协议一样，是为了实现某一类具体应用的协议，并由某一运行在用户空间的应用程序来实现其功能。HTTP是一种协议规范，这种规范记录在文档上，为真正通过HTTP进行通信的HTTP的实现程序。HTTP是基于B/S架构进行通信的，而HTTP的服务器端实现程序有httpd、ngi nx等，其客户端的实现程序主要是Web浏览器。

联合图像专家组(Joi nt Photographic Experts Group，JPEG)：是用于连续色调静态图像压缩的一种标准，文件后缀名为.jpg或.jpeg，是最常用的图像文件格式。其主要是采用预测编码(DPCM)、离散余弦变换(DCT)以及熵编码的联合编码方式，以去除冗余的图像和彩色数据，属于有损压缩格式，它能够将图像压缩在很小的储存空间，一定程度上会造成图像数据的损伤。尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量降低，然而，JPEG压缩技术十分先进，它可以用有损压缩方式去除冗余的图像数据，换句话说，就是可以用较少的磁盘空间得到较好的图像品质。而且JPEG是一种很灵活的格式，具有调节图像质量的功能，它允许用不同的压缩比例对文件进行压缩，支持多种压缩级别。

便携式网络图形(Portab l e Network Graphics，PNG)：是一种采用无损压缩算法的位图格式，支持索引、灰度、RGB三种颜色方案以及Al pha通道等特性。其设计目的是试图替代G I F和T I FF文件格式，同时增加一些G I F文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。PNG文件的扩展名为.png，具有体积小、无损压缩、索引色彩模式、更优化的网络传输显示、支持透明效果等特性。

图像互换格式(Graphics I nterchange Format，G I F)：G I F格式的名称是Graphics I nterchange Format的缩写，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。G I F可以被PC和Mact iontosh等多种平台上被支持。G IF是一种位图。位图的大致原理是：图片由许多的像素组成，每一个像素都被指定了一种颜色，这些像素综合起来就构成了图片。G I F采用的是Lempe l-Zev-We l ch(LZW)压缩算法，最高支持256种颜色。由于这种特性，G I F比较适用于色彩较少的图片，比如卡通造型、公司标志等等。如果碰到需要用真彩色的场合，那么G I F的表现力就有限了。G I F通常会自带一个调色板，里面存放需要用到的各种颜色。在Web运用中，图像的文件量的大小将会明显地影响到下载的速度，因此我们可以根据G I F带调色板的特性来优化调色板，减少图像使用的颜色数(有些图像用不到的颜色可以舍去)，而不影响到图片的质量。G I F格式和其他图像格式的最大区别在于，它完全是作为一种公用标准而设计的，由于Compu Serve网络的流行，许多平台都支持G I F格式。

流(Stream)：Java中是通过流处理I O(i nput/output)的,流(Stream)，是一个抽象的概念，是指一连串的数据(字符或字节)，是以先进先出的方式发送信息的通道。当程序需要读取数据的时候，就会开启一个通向数据源的流，这个数据源可以是文件，内存，或是网络连接。类似的，当程序需要写入数据的时候，就会开启一个通向目的地的流。这时候你就可以想象数据好像在这其中“流”动一样。一般来说关于流的特性有下面几点：先进先出：最先写入输出流的数据最先被输入流读取到。顺序存取：可以一个接一个地往流中写入一串字节，读出时也将按写入顺序读取一串字节，不能随机访问中间的数据。只读或只写：每个流只能是输入流或输出流的一种，不能同时具备两个功能，输入流只能进行读操作，对输出流只能进行写操作。在一个数据传输通道中，如果既要写入数据，又要读取数据，则要分别提供两个流。

字节流(I nputStream)：是一个抽象类，字节流一般用来处理图像、视频、音频、PPT、Word等类型的文件。字节流本身没有缓冲区，缓冲字节流相对于字节流，效率提升非常高。

互联网协议地址(I nternet Protoco l Address，I P地址)：I P协议是为计算机网络相互连接进行通信而设计的协议。在因特网中，它是能使连接到网上的所有计算机网络实现相互通信的一套规则，规定了计算机在因特网上进行通信时应当遵守的规则。任何厂家生产的计算机系统，只要遵守I P协议就可以与因特网互连互通。各个厂家生产的网络系统和设备，如以太网、分组交换网等，它们相互之间不能互通，不能互通的主要原因是因为它们所传送数据的基本单元(技术上称之为“帧”)的格式不同。I P协议实际上是一套由软件程序组成的协议软件，它把各种不同“帧”统一转换成“I P数据报”格式，这种转换是因特网的一个最重要的特点，使所有各种计算机都能在因特网上实现互通，即具有“开放性”的特点。

基于此，本申请实施例提出一种页面资源加载方法和装置、电子设备及存储介质，旨在提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。

本申请实施例提供的页面资源加载方法和装置、电子设备及存储介质，具体通过如下实施例进行说明，首先描述本申请实施例中的页面资源加载方法。

本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Art i f i c i a l I nte l l i gence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

本申请实施例提供的页面资源加载方法，涉及互联网技术领域。本申请实施例提供的页面资源加载方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机等；服务器端可以配置成独立的物理服务器，也可以配置成多个物理服务器构成的服务器集群或者分布式系统，还可以配置成提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现页面资源加载方法的应用等，但并不局限于以上形式。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

需要说明的是，在本申请的各个具体实施方式中，当涉及到需要根据用户信息、用户行为数据，用户历史数据以及用户位置信息等与用户身份或特性相关的数据进行相关处理时，都会先获得用户的许可或者同意，而且，对这些数据的收集、使用和处理等，都会遵守相关国家和地区的相关法律法规和标准。此外，当本申请实施例需要获取用户的敏感个人信息时，会通过弹窗或者跳转到确认页面等方式获得用户的单独许可或者单独同意，在明确获得用户的单独许可或者单独同意之后，再获取用于使本申请实施例能够正常运行的必要的用户相关数据。

图1是本申请实施例提供的页面资源加载方法的一个可选的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S101至步骤S104。

步骤S101，获取待加载资源的文件属性信息和文件类型，根据文件类型确定文件属性信息中目标字节位置；

步骤S102，获取目标字节位置的目标字节数据，并根据目标字节数据确定待加载资源的尺寸信息；

步骤S103，创建视图容器并根据尺寸信息调整视图容器的尺寸；

步骤S104，将待加载资源填充至调整后的视图容器中。

本申请实施例所示意的步骤S101至步骤S104，通过在接收待加载资源的内容之前，获取待加载资源的文件属性信息和文件类型，由于不同文件类型的待加载资源的文件属性信息中存储尺寸信息的目标字节位置不同，所以需要根据文件类型确定文件属性信息中的目标字节位置，在确定目标字节位置之后，获取目标字节位置的目标字节数据，根据目标字节数据确定待加载资源的尺寸信息，在页面上创建用于填充待加载资源的视图容器，再接收待加载资源的文件内容数据，将待加载资源填充至调整后的视图容器中，由于待加载资源的文件属性信息先于文件内容数据由服务器发送至客户端，并且在文件属性信息中存储有待加载资源的尺寸信息，那客户端先从文件属性信息中读取出尺寸信息，根据读取到的尺寸信息调整视图容器的尺寸，视图容器的尺寸就是合适待加载资源的尺寸，在之后接收并解析文件内容数据时直接将文件内容数据填充至视图容器中即可，就不会出现因填充数据至视图容器时，再调整视图容器的尺寸而导致页面抖动的情况出现，提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。

示例性地，当获取到的文件类型为JPEG文件，JPEG文件的格式都是固定的，都是由不同标签(TAG)来顺序排列组合而成。如下表1、JPEG文件结构表所示，从TAG类型为SOF(Start of Frame，图像开始)开始包含了JPEG文件的宽高信息：具体为其后第4-5字节表示为高的像素值，第6-7字节表示为宽的像素值。换算成在整个文件资源中的字节码位置则为：第163-164字节为高的像素值，第165-166字节为宽的像素值，第163-164字节和第165-166字节即为JPEG类型文件的目标字节位置。获取第163-164字节和第165-166字节的字节数据即可获取到图片的宽高信息，即JPEG文件的尺寸信息，就可以直接根据JPEG文件的尺寸信息将视图容器的大小设置好(此时未填充图片资源内容)，而不需要等到所有的数据加载完成后再将视图容器的大小调整，进而再填充文化资源内容。就能减少因填充数据至视图容器时再调整视图容器而导致页面抖动的情况出现，提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。

表1、JPEG文件结构表

图2是本申请实施例提供的页面资源加载方法中获取待加载资源的文件类型的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S201至步骤S202。

步骤S201，获取文件属性信息中第一预设字节位置的第一字节数据；

步骤S202，根据第一字节数据确定待加载资源的文件类型。

本申请实施例所示意的步骤S201至步骤S202，每个待加载资源的文件属性信息中都有一个特定的字节位置存储该待加载资源的文件类型，获取待加载资源的文件属性信息中第一预设字节位置的第一字节数据，对第一字节数据进行解析得到待加载资源的文件类型，例如JPEG类型的图片资源，其文件属性信息的前4个字节的16进制表示为“FFD8FFE0”；而PNG类型的文件，其文件属性信息的前4个字节的16进制表示为“89504E47”；G I F类型的文件，其文件属性信息的前4个字节的16进制表示为“47494638”。在获取到文件属性信息时，对前4个字节(即第一预设字节位置)的数据进行解析，当解析出来的是“FFD8FFE0”，则代表该文件类型为JPEG；当解析出来的是“89504E47”，则代表该文件类型为PNG；当解析出来的是“47494638”，则代表该文件类型为G I F。由于不同文件类型的待加载资源中存储信息的字节位置均不相同，利用解析文件属性信息先得到文件类型，有利于提高后续读取相关信息的速度和效率。

需要说明的是，网络资源传输是以二进制数据的形式进行的，在客户端与服务端建立连接后，客户端会生成I nputStream对象来获取服务端传过来的二进制数据(该二进制数据会通过路由、网关、客户端网络框架等流转处理，进而转为字节码给到调用方，即给到I nputStream)。进而调用方通过I nputStream.read(字节位置)等方法获取对应的字节位置的数据。在本申请另一实施例中，会通过利用I nputStream获取文件属性信息中第一预设字节位置的第一字节数据，以得到文件类型。

图3是本申请实施例提供的页面资源加载方法中获取待加载资源的文件属性信息的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S301至步骤S302：

步骤S301，接收来自服务器的待加载资源的字节流数据；

步骤S302，获取字节流数据中第二预设位置的第二字节数据，其中，第二字节数据为待加载资源的文件属性信息。

本申请实施例所示意的步骤S301至步骤S302，接收来自服务器的待加载资源的字节流数据，获取字节流数据中第二预设位置的第二字节数据，其中，第二字节数据为待加载资源的文件属性信息，通过先获取来自服务器的字节流数据中第二预设字节位置的文件属性信息，有利于提高后续读取相关信息的速度和效率，同时在获取并解析待加载资源的文件内容数据之前，先获取待加载资源的文件属性信息，即可提前确定待加载资源的一些基本信息，例如尺寸信息等，即可在将待加载资源的文件内容数据填充至视图容器之前，根据尺寸信息调整视图容器的尺寸，极大地减少因填充数据至视图容器时再调整视图容器而导致页面抖动的情况出现，提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。

需要说明的是，网络资源传输是以二进制数据的形式进行的，在客户端与服务端建立连接后，客户端会生成I nputStream对象来获取服务端传过来的二进制数据(该二进制数据会通过路由、网关、客户端网络框架等流转处理，进而转为字节码给到调用方，即给到I nputStream)。进而调用方通过I nputStream.read(字节位置)等方法获取对应的字节位置的数据。在本申请另一实施例中，会通过利用I nputStream获取文件属性信息中第二预设字节位置的第二字节数据，以得到文件属性信息。

图4是本申请实施例提供的页面资源加载方法中获取待加载资源的文件属性信息和文件类型的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S401：

步骤S401，当待加载资源为图片资源，直接获取待加载资源的文件属性信息和文件类型。

本申请实施例所示意的步骤S401，待加载资源包括图片资源和视频资源，当待加载资源为图片资源时，直接获取待加载资源的文件属性信息和文件类型，即如上述实施例中的接收来自服务器的待加载资源的字节流数据，获取字节流数据中第二预设位置的第二字节数据，其中，第二字节数据为待加载资源的文件属性信息，再获取待加载资源的文件属性信息中第一预设字节位置的第一字节数据，对第一字节数据进行解析得到待加载资源的文件类型。

图5是本申请实施例提供的页面资源加载方法中获取待加载资源的文件属性信息和文件类型的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S501：

步骤S501，当待加载资源为视频资源，确定视频资源的目标帧图片，获取目标帧图片的文件属性信息和文件类型。

本申请实施例所示意的步骤S501，待加载资源包括图片资源和视频资源，视频资源最终在客户端呈现也是帧动画，即一张张图片按顺序播放形成动画，当待加载资源为视频资源时，确定目标帧图片，获取目标帧图片的文件属性信息和文件类型，即如上述实施例中的接收来自服务器的待加载资源的目标帧图片的字节流数据，获取字节流数据中第二预设位置的第二字节数据，其中，第二字节数据为目标帧图片的文件属性信息，再获取目标帧图片的文件属性信息中第一预设字节位置的第一字节数据，对第一字节数据进行解析得到目标帧图片的文件类型。

图6是本申请实施例提供的页面资源加载方法中填充视图容器的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S601至步骤S602：

步骤S601，获取待加载资源的文件内容数据；

步骤S602，对文件内容数据作解析处理并填充至视图容器。

本申请实施例所示意的步骤S601至步骤S602，获取待加载资源的文件内容数据，对文件内容数据作解析处理并填充至视图容器，在经过上述实施例中获取待加载资源的尺寸信息并调整视图容器的尺寸后，获取待加载资源的文件内容数据并对文件内容数据作解析处理，填充至视图容器，就不会出现因填充数据至视图容器时，再调整视图容器的尺寸而导致页面抖动的情况出现，提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。

图7是本申请实施例提供的页面资源加载方法的一个可选的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S701至步骤S702：

步骤S701，向服务器发送待加载资源的请求信息，以使服务器根据请求信息查询待加载资源的存储情况；

步骤S702，当存储情况为待加载资源存储于服务器，接收来自服务器基于请求信息所反馈的请求失败状态码和待加载资源的字节流数据，其中，字节流数据包括文件属性信息和文件内容数据。

本申请实施例所示意的步骤S701至步骤S702，客户端向服务器发送待加载资源的请求信息，以使服务器根据请求信息查询待加载资源的存储情况，当存储情况为待加载资源存储于服务器，接收来自服务器基于请求信息所反馈的请求成功状态码和待加载资源的字节流数据，其中，字节流数据包括文件属性信息和文件内容数据。

另外，在本申请另一实施例中，客户端向服务器发送待加载资源的请求信息，以使服务器首先根据请求信息判断客户端是否为合法连接，是否在白名单内；如果请求数据的客户端的I P地址被禁止则无法进行资源返回；之后服务器根据请求信息查询待加载资源的存储情况，当存储情况为待加载资源存储于服务器，且客户端与服务器之间仍处于连接状态，客户端接收来自服务器基于请求信息所反馈的请求成功状态码和待加载资源的字节流数据，其中，字节流数据包括文件属性信息和文件内容数据。

图8是本申请实施例提供的页面资源加载方法的一个可选的流程图，在本申请实施例提供的页面资源加载方法中的方法可以包括但不限于包括步骤S801：

步骤S801，当存储情况为待加载资源未存储于服务器，接收来自服务器基于请求信息所反馈的请求失败状态码。

本申请实施例所示意的步骤S801，客户端向服务器发送待加载资源的请求信息，以使服务器根据请求信息查询待加载资源的存储情况，当存储情况为待加载资源未存储于服务器，接收来自服务器基于请求信息所反馈的请求失败状态码。

另外，在本申请另一实施例中，客户端向服务器发送待加载资源的请求信息，以使服务器首先根据请求信息判断客户端是否为合法连接，是否在白名单内；如果请求数据的客户端的I P地址被禁止则无法进行资源返回；之后服务器根据请求信息查询待加载资源的存储情况，当存储情况为待加载资源未存储于服务器，且客户端与服务器之间仍处于连接状态，客户端接收来自服务器基于请求信息所反馈的请求失败状态码。

请参阅图9，本申请实施例还提供一种页面资源加载装置，可以实现上述页面资源加载方法，该装置包括：

数据接收模块，用于获取待加载资源的文件属性信息和文件类型，根据文件类型确定文件属性信息中目标字节位置；

字节获取模块，用于获取目标字节位置的目标字节数据，并根据目标字节数据确定待加载资源的尺寸信息；

视图容器创建模块，用于创建视图容器并根据尺寸信息调整视图容器的尺寸；

资源填充模块，用于将待加载资源填充至调整后的视图容器中。

该页面资源加载装置的具体实施方式与上述页面资源加载方法的具体实施例基本相同，在此不再赘述。

本申请实施例还提供了一种电子设备，电子设备包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现上述页面资源加载方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。

请参阅图10，图10示意了另一实施例的电子设备的硬件结构，电子设备包括：

处理器1001，可以采用通用的CPU(Centra l Process i ng Un it，中央处理器)、微处理器、应用专用集成电路(App l i cat i on Spec i f i c I ntegrated Ci rcuit，AS I C)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请实施例所提供的技术方案；

存储器1002，可以采用只读存储器(Read On l y Memory，ROM)、静态存储设备、动态存储设备或者随机存取存储器(Random Access Memory，RAM)等形式实现。存储器1002可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器1002中，并由处理器1001来调用执行本申请实施例的页面资源加载方法；

输入/输出接口1003，用于实现信息输入及输出；

通信接口1004，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WI FI、蓝牙等)实现通信；

总线1005，在设备的各个组件(例如处理器1001、存储器1002、输入/输出接口1003和通信接口1004)之间传输信息；

其中处理器1001、存储器1002、输入/输出接口1003和通信接口1004通过总线1005实现彼此之间在设备内部的通信连接。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述页面资源加载方法。

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本申请实施例提供的页面资源加载方法、页面资源加载装置、电子设备及存储介质，其通过在接收待加载资源的内容之前，获取待加载资源的文件属性信息和文件类型，由于不同文件类型的待加载资源的文件属性信息中存储尺寸信息的目标字节位置不同，所以需要根据文件类型确定文件属性信息中的目标字节位置，在确定目标字节位置之后，获取目标字节位置的目标字节数据，根据目标字节数据确定待加载资源的尺寸信息，在页面上创建用于填充待加载资源的视图容器，再接收待加载资源的文件内容数据，将待加载资源填充至调整后的视图容器中，由于待加载资源的文件属性信息先于文件内容数据由服务器发送至客户端，并且在文件属性信息中存储有待加载资源的尺寸信息，那客户端先从文件属性信息中读取出尺寸信息，根据读取到的尺寸信息调整视图容器的尺寸，视图容器的尺寸就是合适待加载资源的尺寸，在之后接收并解析文件内容数据时直接将文件内容数据填充至视图容器中即可，就不会出现因填充数据至视图容器时，再调整视图容器的尺寸而导致页面抖动的情况出现，提高页面加载时的稳定性，降低页面进行加载过程中出现抖动的情况。。

本申请实施例描述的实施例是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

本领域技术人员可以理解的是，图中示出的技术方案并不构成对本申请实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。

本申请的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括多指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例的方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-On l y Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等各种可以存储程序的介质。

以上参照附图说明了本申请实施例的优选实施例，并非因此局限本申请实施例的权利范围。本领域技术人员不脱离本申请实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本申请实施例的权利范围之内。