CN112507260A - 网页加载方法及装置、电子设备、计算机可读存储介质 - Google Patents

Abstract

本申请涉及大数据技术领域，应用于智慧安防领域中，具体提供了一种网页加载方法，该方法包括：获取浏览器中待加载的网页对应的原始代码文件；对所述原始代码文件进行编译处理，得到编译代码文件，所述编译代码文件的实体标签中含有画布标签，所述画布标签中含有用于在浏览器页面中绘制所述网页中含有的页面元素的绘画指令；在所述浏览器中解析所述编译代码文件的实体标签中含有的绘画指令；根据解析得到的所述绘画指令，在所述浏览器页面中进行所述页面元素的绘制，以在所述浏览器页面中显示所述网页。基于该方法加载的网页能够防止网页数据被恶意爬取，进而提升网页安全性。

Description

网页加载方法及装置、电子设备、计算机可读存储介质

技术领域

本申请涉及大数据技术领域，特别涉及一种网页加载方法及装置、电子设备、计算机可读存储介质。

背景技术

在互联网领域中，数据安全十分重要。目前大多数的前端网页数据在开发以及向用户展示时都是明文展示，在浏览器中可以一键审查源代码，导致网页中的文本、图像等数据能够轻易地被获取、复制及转发，开发人员的劳动成果无法得到保护。并且，网页数据无法防爬虫，导致网页数据能够轻易地被恶意爬取，网页数据的安全性非常低。

由此，如何提升网页数据的安全性是现有技术中亟待解决的技术问题。

发明内容

为了解决上述技术问题，本申请提供一种网页加载方法及装置、电子设备、计算机可读存储介质。

本申请所揭示的技术方案包括：

一种网页加载方法，包括：获取浏览器中待加载的网页对应的原始代码文件；对所述原始代码文件进行编译处理，得到编译代码文件，所述编译代码文件的实体标签中含有画布标签，所述画布标签中含有用于在浏览器页面中绘制所述网页中含有的页面元素的绘画指令；在所述浏览器中解析所述编译代码文件的实体标签中含有的绘画指令；根据解析得到的所述绘画指令，在所述浏览器页面中进行所述页面元素的绘制，以在所述浏览器页面中显示所述网页。

在一个示例性实施例中，对所述原始代码文件进行编译处理，得到编译代码文件，包括：动态扫描所述原始代码文件的实体标签中含有的各个页面元素；分别确定所述各个页面元素所属的页面元素类型；基于所确定的页面元素类型，生成用于绘制所述各个页面元素的绘画指令，并将生成的所述绘画指令替换所述实体标签中的代码内容，以得到所述编译代码文件。

在一个示例性实施例中，所述页面元素类型包括静态页面元素类型；所述基于所确定的页面元素类型，生成用于绘制所述各个页面元素的绘画指令，包括：从所述各个页面元素中确定属于所述静态页面元素类型的静态页面元素；确定所述静态页面元素在所述浏览器页面中进行显示的静态显示区域；基于所述静态显示区域中含有的各个像素点，生成用于绘制所述各个像素点的绘画指令，将所述各个像素的绘画指令作为所述静态页面元素的绘画指令。

在一个示例性实施例中，在所述确定静态页面元素在浏览器页面中进行显示的静态显示区域之前，所述方法还包括：若所述图片的尺寸大于浏览器页面中的图片显示区域的尺寸，则基于所述图片显示区域的尺寸对所述图片进行压缩处理，以使图片的尺寸适应于所述浏览器的页面布局。

在一个示例性实施例中，确定静态页面元素在浏览器页面中进行显示的静态显示区域，包括：分别确定所述页面样式表元素所作用的静态页面元素在所述浏览器页面中进行显示的静态显示区域，以及所述页面样式表元素所描述的样式效果在所述浏览器页面中显示的样式显示区域；将所述静态显示区域与所述样式显示区域进行叠加，得到组合显示区域；将所述组合显示区域确定为所述页面样式表元素对应的静态显示区域。

在一个示例性实施例中，所述页面元素类型包括动态页面元素类型；所述基于所确定的页面元素类型，生成用于绘制所述各个页面元素的绘画指令，包括：从所述各个页面元素中确定属于所述动态页面元素类型的动态页面元素；确定所述动态页面元素在所述浏览器页面中进行显示的动态显示区域；根据起始时刻对应的所述动态显示区域中含有的各个像素点生成所述起始时刻对应的绘画指令，并根据后一时刻对应的所述动态显示区域相对前一时刻对应的所述动态显示区域的像素点差异，生成所述后一时刻对应的绘画指令，直至得到最后时刻对应的绘画指令，进而得到所有时刻对应的绘画指令；按照时间先后顺序将所述所有时刻对应的绘画指令进行排序，得到所述动态显示区域对应的绘画指令集合，并将所述绘画指令集合作为所述动态页面元素的绘画指令。

在一个示例性实施例中，所述分别确定所述各个页面元素所属的页面元素类型，包括：将所述原始代码文件中用于描述所述各个页面元素的代码内容输入页面元素分类模型中，所述页面元素分类模型是基于预先收集的训练数据训练得到的，所述训练数据包括多个代码文件样本，所述多个代码文件样本中含有的各个页面元素对应的页面元素类型是已知的；获取所述页面元素分类模型针对所述各个页面元素输出的页面元素类型。

一种网页加载装置，包括：代码获取模块，用于获取浏览器中待加载的网页对应的原始代码文件；编译处理模块，用于对所述原始代码文件进行编译处理，得到编译代码文件，所述编译代码文件的实体标签中含有画布标签，所述画布标签中含有用于在浏览器页面中绘制所述页面元素的绘画指令；指令解析模块，用于在所述浏览器中解析所述编译代码文件的实体标签中含有的绘画指令；网页显示模块，用于根据解析得到的所述绘画指令，在所述浏览器页面中进行所述页面元素的绘制，以在所述浏览器页面中显示所述网页。

一种电子设备，包括处理器和存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如前任一项所述的网页加载方法。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如前任一项所述的网页加载方法。

本申请实施例提供的技术方案可以包括以下有益效果：

在上述技术方案中，获取浏览器中待加载的网页对应的原始代码文件之后，将原始代码文件中含有的页面元素转译为在浏览器页面中绘制这些页面元素的绘画指令，然后在浏览器中解析这些绘画指令，并基于解析的绘画指令即可在浏览器页面中进行相应页面元素的绘制，从而在浏览器页面中显示待加载的网页，并在网页中对页面元素进行展示。由于页面元素基于绘画指令绘制在网页中，爬虫技术只能感知到这些页面元素，但无法获取，从而能够有效地防止网页数据被爬取，并且通过选中、复制、粘贴等方式也无法获取网页数据，极大地提升了网页数据的安全性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并于说明书一起用于解释本申请的原理。

图1是一示例性实施例示出的一种网页加载方法的流程图；

图2是一示例性实施例示出的一种网页对应的原始代码文件的文件格式示意图；

图3是一示例性实施例示出的一种网页对应的编译代码文件的文件格式示意图；

图4是图1所示实施例中的步骤130在一个示例性实施例的流程图；

图5是图4所示实施例中的步骤135在一个示例性实施例的流程图；

图6是一示例性实施例示出的一种页面样式表元素的示意图；

图7是图4所示实施例中的步骤135在另一个示例性实施例的流程图；

图8是一示例性实施例示出的一种网页加载装置的框图；

图9是根据一示例性实施例所示出的一种电子设备的硬件示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述，这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

这里将详细地对示例性实施例执行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

如前所述的，现有大多数的前端网页数据在开发时都是明文显示，无论开发者如何编写，最终展示给用户时也是以明文形式展示，在浏览器中可以一键审查源代码，导致源代码中含有的文本、图像等数据能够轻易地被获取、复制及转发，开发人员的劳动成果无法得到保护。

并且，网页数据无法防爬虫，导致网页数据能够轻易地被恶意爬取，网页数据的安全性非常低。

有些网页数据也存在采取JS(Java Script，是一种高级编程语言)加密方式进行加密，例如对网页源代码进行JS层级的代码丑化，但是JS加密逻辑和JS文件都可以被轻易获取，并且JS加密逻辑和JS文件都可以轻易地被破解，对内行人而言毫无防护作用，使得这些加密手段形同虚设。

基于此，为有效地提升网页数据的安全性，本申请的实施例分别提出一种网页加载方法、一种网页加载装置、一种电子设备以及一种计算机可读存储介质，基于本申请的实施例加载的网页可以有效地防止网页数据被恶意爬取，并且网页数据不支持选中、复制、粘贴等操作，极大地提升了网页数据的安全性。

本申请的实施例可以被应用于智能安防领域中，基于本申请的实施例可以使得智能城市中配置的各种终端设备所加载网页的安全性，使得智能城市的安全性得到保障，能够极大地推动智慧城市的建设。

请参阅图1，图1是一示例性实施例示出的一种网页加载方法的流程图。该方法应用于浏览器对于网页的加载，基于本实施例提供的方法在浏览器中加载的网页可以有效地防止网页数据被恶意获取。

如图1所示，在一示例性实施例中，该网页加载方法可以包括如下步骤：

步骤110，获取浏览器中待加载的网页对应的原始代码文件。

首先需要说明的是，在本实施例中，浏览器中待加载的网页对应的原始代码文件是指开发人员针对网页编写的于是代码文件。若需要在浏览器中加载网页，则需要相应获取待加载网页对应的原始代码文件。

示例性的，通过HTML5(是构建网页内容的一种语言描述方式)编写的H5网页对应的原始代码文件的基本格式如图2所示，其中，“<title></title>”标签对应于网页的标题；“<body></body>”是原始代码文件的实体标签，其中含有网页的网页元素，例如含有文本、图片、动态图、视频等网页元素。

由于原始代码文件含有的网页数据可以在浏览器中一键审查得到，也能够被爬虫技术爬取得到，不具有保密性，因此在浏览器加载网页之前需要对网页的原始代码文件进行加密处理，以提升网页数据的安全性。

步骤130，对原始代码文件进行编译处理，得到编译代码文件，编译代码文件的实体标签中含有画布标签，画布标签中含有用于在浏览器页面中绘制网页中含有的页面元素的绘画指令。

在本实施例中，对原始代码文件进行的编译处理，实质上是指对原始代码文件重新进行转译打包的过程。

具体来说，可以将原始代码文件中含有的页面元素转译为canvas(画布，是在HTML5中新增的标签，用于在网页中实时生成图像，并且可以操作图像内容)对象，并将转译得到的canvas对象绘制在浏览器页面上。

在得到的编译代码文件中，实体标签中只含有一个画布标签，并且此画布标签中含有大量的绘画指令，这些绘画指令用于在浏览器页面中绘制网页中含有的页面元素，由此在浏览器中实现整个网页的页面加载和显示。

示例性的，编译代码文件的基本格式如图3所示，其中“<body></body>”是编译代码文件所含有的实体标签，“<canvas/>”是画布标签，其配置在编译代码文件所含有的实体标签中。

在本实施例中，由于爬虫的本质也是对网页一键审查源代码后，通过对得到的代码文件进行语句解析，并保留有用的网页数据的过程，本实施例在将网页含有的页面元素转译为画布元素之后，网页中的文字、图片等网页元素无法复制，而爬虫在面临该网页时，但只能感知这些画布元素，无法获取到相应的数据内容，从而能够有效地防止爬虫恶意获取网页数据，由此能够保证网页数据的安全性。

步骤150，在浏览器中解析编译代码文件的实体标签中含有的绘画指令。

在本实施例中，当浏览器需要打开网页时，则由浏览器解析编译代码文件中含有的绘画指令，以完成页面元素在浏览器页面中的渲染，从而将网页页面显示在浏览器页面中。

步骤170，根据解析得到的绘画指令在浏览器页面中进行页面元素的绘制，以在浏览器页面中显示网页。

如前所述，根据解析得到的绘画指令在浏览器页面中进行页面元素的绘制的过程，是浏览器基于canvas指令进行相应页面元素渲染的过程。

对于在浏览器页面中静态显示的页面元素，例如文字、图片等，直接基于相应的canvas指令即可渲染得到。对于在浏览器中动态显示的页面元素，例如动态图、视频等，按照时间顺序依次完成每一帧图像的渲染，并通过刷新canvas指令即可动态地实现浏览器页面的变动。

由此，在本实施例提供的方法中，采取canvas转译将原本由图片、视频和文本等视觉页面元素堆砌而成的网页编译为由canvas绘画为主的网页，从而将网页转变成通用的canvas兼容，而canvas是各家浏览器都大力支持的方式，因此本实施例提供的方法不仅能够防止网页数据被恶意获取，在兼容性上也能够无视浏览器的差异，形成统一的网页视觉展示效果。

图4是图1所示实施例中的步骤130在一个示例性实施例的流程图。如图4所示，在一示例性实施例中，对原始代码文件进行编码处理，得到编译代码文件的过程可以包括如下步骤：

步骤131，动态扫描原始代码文件的实体标签中含有的各个页面元素。

在本实施例中，考虑到对于网页页面而言，人眼能够看见的页面元素可以划分为两种，一种是在页面中固定不会变动的页面元素(也称为静态页面元素)，一种是在页面中会动态变动的页面元素(也称为动态页面元素)，因此对于页面元素的编译处理可以基于这两种类型的页面元素具体进行。

通常而言，网页页面中显示的普通文字、jpg(Joint Photographic Group，可译为联合图像专家组，是一种图像文件格式)图片、png(Portable Network Graphics，可译为便携式网络图形，也是一种图像文件格式)图片、小图标等都是静态页面元素，网页页面中显示的gif(Graphics Interchange Format，可译为图形交换格式)动画、滚动轮播动画、视频等都是动态页面元素。

如前所述的，网页所含有的各个页面元素配置于原始代码文件的实体标签中，因此本实施例通过对原始代码文件进行动态扫描，即可得到网页中所含有的各个页面元素。需要说明的是，本实施例对原始代码文件进行动态扫描是指需要在原始代码文件中定位实体标签，然后对定位得到的实体标签中含有的代码内容进行扫描，由此得到各个页面元素。

步骤133，分别确定各个页面元素所属的页面元素类型。

其中，确定各个页面元素所属的页面元素类型是指，确定各个页面元素属于静态页面元素类型或者动态页面元素类型。若页面元素属于静态页面元素类型，则将该页面元素称为静态页面元素；若页面元素属于动态页面元素类型，则将该页面元素称为动态页面元素。

在一些实施例中，由于静态页面元素是固化的，这些页面元素在原始代码文件中不存在关于JS层面的代码控制，因此可以将原始代码文件中不存在关于JS层面的代码控制的页面元素确定为静态页面元素。而动态页面元素为实现动态效果，在原始代码文件中具有关于JS层面的代码控制，因此将原始代码文件中存在关于JS层面的代码控制的页面元素确定为动态页面元素。

在另外的一些实施例中，网页开发人员可以预先为原始代码文件中含有的各个页面元素添加页面元素标注信息，以基于页面元素标注信息对各个页面元素所属的页面元素类型进行标识。例如，在浏览器插件中，网页开发人员可以依次为原始代码文件中的各个页面元素添加页面元素标识信息，所添加的页面元素标识信息与相应页面元素相关联。

并且，各个页面元素标识信息还可以与原始代码文件共同打包，因此基于页面元素标识信息，可以确定原始代码文件中含有的各个页面元素所属的页面元素类型。

在另外的一些实施例中，可以基于预先收集的训练数据预先训练页面元素分类模型，该模型是人工智能模型，具体可以是二分类机器学习模型，训练数据包括多个代码文件样本，并且每个代码文件样本中含有的各个页面元素对应的页面原始类型是已知的。例如，针对每个代码文件样本，基于前述实施例均可以得到代码文件样本中含有的各个页面元素对应的页面元素类型。

训练好的页面元素分类模型即可用于判定原始代码文件中含有的各个页面元素所述的页面元素类型。具体的，将原始代码文件用于描述各个页面元素的代码内容输入页面元素分类模型中，使得页面元素分类模型判定各个页面元素分别对应的页面元素类型，从而获取页面元素分类模型针对各个页面元素输出的页面元素类型。

本实施例基于人工智能的方法来确定原始代码文件中的各个页面元素所属的页面元素类型，相较于前述的两种实施例，可以对各个页面元素进行更加精确、而更加智能化的区分。

步骤135，基于所确定的页面元素类型，生成用于绘制各个页面元素的绘画指令，并将生成的绘画指令替换实体标签中的代码内容，以得到编译代码文件。

由于不同页面元素类型的页面元素在浏览器页面中进行显示的方式不同，例如静态页面元素经由浏览器一次渲染后，在浏览器页面中就不再变动了，而动态页面元素经由浏览器一次渲染后，页面元素所显示的页面区域还会变动，以实现动态效果，因此本实施例在对原始代码文件进行编译处理的过程中，需区分各个页面元素所属的页面元素类型。

在本实施例中，对原始代码文件进行编译处理的过程实质上是将原始代码文件中的各个页面元素转译为canvas对象的过程，后续将原始代码文件中的各个页面元素显示于浏览器页面的过程，也即是将转译得到的canvas对象绘制在浏览器页面上的过程，因此本实施例可以基于步骤133中确定各个页元素所属的页面元素类型，分别生成用于绘制各个页面元素的绘画指令，并将生成的绘画指令替换实体标签中的代码内容，以得到编译代码文件。

浏览器后续在加载编译代码文件时，即可基于编译代码文件的实体标签中的各个页面元素对应的绘画指令，将各个页面元素绘制在浏览器页面中，由此使得浏览器加载的网页数据不会被恶意获取。

还需要说明的是，针对不同页面元素类型的页面元素生成用于绘制相应绘画指令的过程具体请求参见下述实施例，本处不对此进行限制。

图5是图4所示实施例中的步骤135在一个示例性实施例的流程图。如图5所示，生成用于绘制静态页面元素的绘画指令的过程可以包括如下步骤：

步骤210，确定静态页面元素在浏览器页面中进行显示的静态显示区域。

在本实施例中，考虑到canvas是浏览器广泛支持的画布属性，该画布属性可以支持像素点的绘制，由像素点则可以组成线条以及各种图形，该画布属性还可以支持各种颜色，因此本实施例可以基于像素层面实现原始代码文件中含有的文本、图片等静态页面元素的编译处理。

由此，为在浏览器页面中绘制静态页面元素，需要确定静态页面元素在浏览器页面中进行显示的静态显示区域，通过在此静态显示区域中绘制若干像素点，即可以实现静态页面元素在浏览器页面中的显示。

步骤230，基于静态显示区域中含有的各个像素点，生成用于绘制各个像素点的绘画指令，将各个像素点的绘画指令作为静态页面元素的绘画指令。

如上所述的，本实施例基于静态显示区域中的各个像素点，生成用于绘制各个像素点的绘画指令，浏览器通过执行这些绘画指令，即可以在静态显示区域中绘制各个像素点，由这些像素点即可以组成静态页面元素，由此将静态页面元素显示在浏览器页面中。

需要说明的是，页面元素在浏览器页面中进行显示的位置信息可以通过网页属性等方式进行限制，这是本领域技术人员熟知的，因此静态页面元素在浏览器页面中进行显示的静态显示区域可以基于编译代码文件中含有的属性信息确定，本实施例不对此过程进行详细描述。

由上述内容可知，在本实施例中，浏览器对于网页中含有的静态页面元素的加载是从像素层面进行像素点的绘制得到的，由于浏览器本身对于图片及文字等静态页面元素的解析也是基于像素点的映射实现的，因此基于本实施例提供的方法，使得浏览器能够正确地解析各个绘画指令，并实现静态页面元素在浏览器页面中的渲染显示。

需要说明的是，若静态页面元素为图片，可能存在图片的尺寸大于浏览器页面中针对图片进行显示的图片显示区域的尺寸的情况，在针对图片进行编译处理时，则可以将图片按照图片显示区域的尺寸进行压缩处理，使得浏览器加载的网页中显示的图片的尺寸适应于浏览器的页面布局。或者，也可以基于图片显示区域的尺寸对图片进行切片处理，以使得浏览器加载的网页中显示的图片的尺寸适应于浏览器的页面布局。

基于此方式，使得浏览器页面中显示的图片不会对人眼也产生视觉差异，还能够节省用户带宽，也能够加快浏览器对于网页的加载速度。

若静态页面元素为页面样式表元素，则可以基于如下的步骤来确定页面样式表元素在浏览器页面中进行显示的静态页面区域：

分别确定页面样式表元素所作用的静态页面元素在浏览器页面中进行显示的静态显示区域，以及页面样式表元素所描述的样式效果在浏览器页面中显示的样式显示区域；

将静态显示区域与样式显示区域进行叠加，得到组合显示区域；

将所得到的组合显示区域确定为页面样式表元素对应的静态显示区域。

首先需要说明的是，页面样式表元素也可以称为CSS(Cascading Style Sheets，层叠样式表)元素，用于描述作用于静态页面元素上的样式效果，例如图6所示的图片即为一种页面样式表元素，其具体是在背景图片1上覆盖样式图片2，并在样式图片2上覆盖样式图片3得到的。

在本实施例中，通过分别确定页面样式表元素所作用的静态页面元素对应的静态显示区域，以及页面样式表元素所描述的样式效果对应的样式显示区域，然后将静态显示区域与样式显示区域进行叠加得到的组合显示区域确定为页面样式表元素对应的静态显示区域。

仍如图6所示，在图6所示的页面样式表元素中，背景图片1和样式图片2均可以作为页面样式表元素所作用的静态页面元素，样式图片2是在背景图片1上描述的样式效果，样式图片3是在样式图片2上描述的样式效果，将相应的静态显示区域和样式显示区域叠加后，所得到的组合显示区域即为图6所示的整体图片在浏览器页面中显示的区域。

后续浏览器通过绘制叠加得到的静态显示区域所含有的各个像素点，即可实现页面样式表元素在浏览器页面中的显示。由此，本实施例提供的方法对于页面样式表元素的加载是直接在浏览器上加载静态页面元素和样式效果共同形成的最终显示效果，而不会针对静态页面元素中被样式效果遮挡的区域进行显示，由此能够减少浏览器在渲染静态显示区域时层层渲染完整的静态页面元素和样式效果所导致的CPU(central processingunit，中央处理器)损耗，也能够加快浏览器对于网页的加载速度。

图7是图4所示实施例中的步骤135在另一个示例性实施例的流程图。如图7所示，生成用于绘制动态页面元素的绘画指令的过程可以包括如下步骤：

步骤310，确定动态页面元素在浏览器页面中进行显示的动态显示区域。

在本实施例中，动态页面元素在浏览器页面中显示的区域通常是固定的，相比于静态页面元素的显示，区别在于动态页面元素对应的动态显示区域中显示的内容是动态变化的。

因此，本实施例在确定动态页面元素在浏览器页面中进行显示的动态显示区域之后，只需针对动态显示区域中动态显示的图像画面进行动态地绘制，即可实现动态显示区域的动态显示效果。

步骤330，根据起始时刻对应的动态显示区域中含有的各个像素点生成所述起始时刻对应的绘画指令，并根据后一时刻对应的动态显示区域相对前一时刻对应的动态显示区域的像素点差异，生成后一时刻对应的绘画指令，直至得到最后时刻对应的绘画指令，进而得到所有时刻对应的绘画指令。

动态显示区域中显示的图像画面是动态变化的，例如gif动画的播放是周期性地切换显示不同的图像画面的过程，而视频播放是对多帧视频画面逐帧进行切换显示过程，因此动态显示区域中显示的图像画面是按照相应的时间顺序进行动态显示的。

若以gif动画为示例性的动态页面元素，假设该gif动画中共含有A～E5张图片，并且每间隔5秒切换显示下一张图片，基于本实施例的方式，根据起始时刻对应的动态显示区域中含有的各个像素点生成的起始时刻对应的绘画指令则为图片A对应的绘画指令，根据后一时刻对应的动态显示区域相对前一时刻对应的动态显示区域的像素点差异，生成后一时刻对应的绘画指令则可以分别得到图片B～图片E对应的绘画指令。

需要说明的是，本实施例根据后一时刻对应的动态显示区域相对前一时刻对应的动态显示区域的像素点差异，生成后一时刻对应的绘画指令，使得后一时刻对应的绘画指令仅指示在浏览器页面中绘制相比于前一时刻对应的动态显示区域的差异部分，而无需绘制整个动态显示区域，从而能够节省CPU(central processing unit，中央处理器)损耗。

步骤350，按照时间先后顺序将所有时刻对应的绘画指令进行排序，得到动态显示区域对应的绘画指令集合，将得到的绘画指令集合作为动态页面元素的绘画指令。

在本实施例中，按照时间先后顺序将所有时刻对应的绘画指令进行排序，所得到得动态显示区域对应的绘画指令集合即为绘制动态页面元素对应的绘画指令。

后续浏览器通过刷新会话指令的方式即可实现动态页面元素的动态效果，好处在于页面元素其实大多数都是固化的，浏览器一直重复无用的渲染损耗CPU也损耗用户的流量，比如从显示的一张图片跳转显示另一张图片，实际上动态显示区域上也就某个图案上发生的变化，基于本实施例提出的canvas绘制的方式，动态显示区域就仅仅需要更新显示变化的图案区域的流量即可，也即本实施例只刷新差异的像素点，极大地降低了资源损耗。

图8是一示例性实施例示出的一种网页加载装置的框图。如图8所示，在一示例性实施例中，该装置可以包括代码获取模块410、编译处理模块430、指令解析模块450和网页显示模块470。

代码获取模块410用于获取浏览器中待加载的网页对应的原始代码文件；编译处理模块430用于对原始代码文件进行编译处理，得到编译代码文件，编译代码文件的实体标签中含有画布标签，画布标签中含有用于在浏览器页面中绘制页面元素的绘画指令；指令解析模块450用于在浏览器中解析编译代码文件的实体标签中含有的绘画指令；网页显示模块470用于根据解析得到的绘画指令，在浏览器页面中进行页面元素的绘制，以在浏览器页面中显示网页。

在另一示例性实施例中，编译处理模块430包括元素扫描单元、类型确定单元和指令生成单元。元素扫描单元用于动态扫描原始代码文件的实体标签中含有的各个页面元素。类型确定单元用于分别确定各个页面元素所属的页面元素类型。指令生成单元用于基于所确定的页面元素类型，生成用于绘制各个页面元素的绘画指令，并将生成的绘画指令替换实体标签中的代码内容，以得到编译代码文件。

在另一示例性实施例中，指令生成单元包括静态页面元素确定子单元、静态区域确定子单元和像素点绘制子单元。静态页面元素确定子单元用于从各个页面元素中确定属于静态页面元素类型的静态页面元素。静态区域确定子单元用于确定静态页面元素在浏览器页面中进行显示的静态显示区域。像素点绘制子单元用于基于静态显示区域中含有的各个像素点，生成用于绘制各个像素点的绘画指令，将各个像素点的绘画指令作为静态页面元素的绘画指令。

在另一示例性实施例中，指令生成单元还包括图片尺寸调整子单元，用于在静态页面元素包括图片，且图片的尺寸大于浏览器页面中的图片显示区域的尺寸时，则基于图片显示区域的尺寸对图片进行压缩处理，以使图片的尺寸适应于浏览器的页面布局。

在另一示例性实施例中，静态区域确定子单元包括类型区域确定子单元和类型区域叠加子单元。类型区域确定子单元用于分别确定页面样式表元素所作用的静态页面元素在浏览器页面中进行显示的静态显示区域，以及页面样式表元素所描述的样式效果在浏览器页面中显示的样式显示区域。类型区域叠加子单元用于将静态显示区域与样式显示区域进行叠加，得到组合显示区域，并将组合显示区域确定为页面样式表元素对应的静态显示区域。

在另一示例性实施例中，指令生成单元包括动态页面元素确定子单元、动态区域确定子单元、时刻指令生成子单元和指令排序子单元。动态页面元素确定子单元用于从各个页面元素中确定属于动态页面元素类型的动态页面元素。动态区域确定子单元用于确定动态页面元素在浏览器页面中进行显示的动态显示区域。时刻指令生成子单元用于根据起始时刻对应的动态显示区域中含有的各个像素点生成起始时刻对应的绘画指令，并根据后一时刻对应的动态显示区域相对前一时刻对应的动态显示区域的像素点差异，生成后一时刻对应的绘画指令，直至得到最后时刻对应的绘画指令，进而得到所有时刻对应的绘画指令。指令排序子单元用于按照时间先后顺序将所有时刻对应的绘画指令进行排序，得到动态显示区域对应的绘画指令集合，并将绘画指令集合作为动态页面元素的绘画指令。

在另一示例性实施例中，类型确定单元包括信息输入子单元和结果获取子单元。信息输入子单元用于将原始代码文件中用于描述各个页面元素的代码内容输入页面元素分类模型中，页面元素分类模型是基于预先收集的训练数据训练得到的，训练数据包括多个代码文件样本，多个代码文件样本中含有的各个页面元素对应的页面元素类型是已知的。结果获取子单元用于获取页面元素分类模型针对各个页面元素输出的页面元素类型。

需要说明的是，上述实施例所提供的装置与上述实施例所提供的方法属于同一构思，其中各个模块执行操作的具体方式已经在方法实施例中进行了详细描述，此处不再赘述。

在一示例性的实施例中，本申请还提供一种电子设备，该设备包括处理器和存储器，该存储器上存储有计算机可读指令，该计算机可读指令被处理器执行时，实现如前所述的网页加载方法。

图9是根据一示例性实施例所示出的一种电子设备的硬件示意图。

需要说明的是，该电子设备只是一个适配于本申请的示例，不能认为是提供了对本申请的使用范围的任何限制。该电子设备也不能解释为需要依赖于或者必须具有图9中示出的示例性的电子设备中的一个或者多个组件。

该电子设备的硬件结构可因配置或者性能的不同而产生较大的差异，如图9所示，电子设备包括：电源510、接口530、至少一存储器550、以及至少一中央处理器(CPU，CentralProcessing Units)570。

其中，电源510用于为电子设备上的各硬件设备提供工作电压。

接口530包括至少一有线或无线网络接口531、至少一串并转换接口533、至少一输入输出接口535以及至少一USB接口537等，用于与外部设备通信。

存储器550作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源包括操作系统551、应用程序553或者数据555等，存储方式可以是短暂存储或者永久存储。

其中，操作系统551用于管理与控制电子设备上的各硬件设备以及应用程序553，以实现中央处理器570对海量数据555的计算与处理，其可以是Windows ServerTM、Mac OSXTM、UnixTM、LinuxTM等。应用程序553是基于操作系统551之上完成至少一项特定工作的计算机程序，其可以包括至少一模块(图9中未示出)，每个模块都可以分别包含有对电子设备的一系列计算机可读指令。数据555可以是存储于磁盘中的http协议数据等。

中央处理器570可以包括一个或多个以上的处理器，并设置为通过总线与存储器550通信，用于运算与处理存储器550中的海量数据555。

如上面所详细描述的，适用本申请的电子设备将通过中央处理器570读取存储器550中存储的一系列计算机可读指令的形式来完成前述实施例所述的网页加载方法。

此外，通过硬件电路或者硬件电路结合软件指令也能同样实现本申请，因此实现本申请并不限于任何特定硬件电路、软件以及两者的组合。

在一示例性的实施例中，本申请还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现如前所述的网页加载方法。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种网页加载方法，其特征在于，所述方法包括：

获取浏览器中待加载的网页对应的原始代码文件；

对所述原始代码文件进行编译处理，得到编译代码文件，所述编译代码文件的实体标签中含有画布标签，所述画布标签中含有用于在浏览器页面中绘制所述网页中含有的页面元素的绘画指令；

在所述浏览器中解析所述编译代码文件的实体标签中含有的绘画指令；

根据解析得到的所述绘画指令，在所述浏览器页面中进行所述页面元素的绘制，以在所述浏览器页面中显示所述网页。

2.根据权利要求1所述的方法，其特征在于，对所述原始代码文件进行编译处理，得到编译代码文件，包括：

动态扫描所述原始代码文件的实体标签中含有的各个页面元素；

分别确定所述各个页面元素所属的页面元素类型；

基于所确定的页面元素类型，生成用于绘制所述各个页面元素的绘画指令，并将生成的所述绘画指令替换所述实体标签中的代码内容，以得到所述编译代码文件。

3.根据权利要求2所述的方法，其特征在于，所述页面元素类型包括静态页面元素类型；所述基于所确定的页面元素类型，生成用于绘制所述各个页面元素的绘画指令，包括：

从所述各个页面元素中确定属于所述静态页面元素类型的静态页面元素；

确定所述静态页面元素在所述浏览器页面中进行显示的静态显示区域；

基于所述静态显示区域中含有的各个像素点，生成用于绘制所述各个像素点的绘画指令，将所述各个像素点的绘画指令作为所述静态页面元素的绘画指令。

4.根据权利要求3所述的方法，其特征在于，所述静态页面元素包括图片；在所述确定静态页面元素在浏览器页面中进行显示的静态显示区域之前，所述方法还包括：

若所述图片的尺寸大于浏览器页面中的图片显示区域的尺寸，则基于所述图片显示区域的尺寸对所述图片进行压缩处理，以使图片的尺寸适应于所述浏览器的页面布局。

5.根据权利要求3所述的方法，其特征在于，所述静态页面元素包括页面样式表元素，所述页面样式表元素用于描述作用于静态页面元素上的样式效果；所述确定静态页面元素在浏览器页面中进行显示的静态显示区域，包括：

分别确定所述页面样式表元素所作用的静态页面元素在所述浏览器页面中进行显示的静态显示区域，以及所述页面样式表元素所描述的样式效果在所述浏览器页面中显示的样式显示区域；

将所述静态显示区域与所述样式显示区域进行叠加，得到组合显示区域；

将所述组合显示区域确定为所述页面样式表元素对应的静态显示区域。

6.根据权利要求2所述的方法，其特征在于，所述页面元素类型包括动态页面元素类型；所述基于所确定的页面元素类型，生成用于绘制所述各个页面元素的绘画指令，包括：

从所述各个页面元素中确定属于所述动态页面元素类型的动态页面元素；

确定所述动态页面元素在所述浏览器页面中进行显示的动态显示区域；

根据起始时刻对应的所述动态显示区域中含有的各个像素点生成所述起始时刻对应的绘画指令，并根据后一时刻对应的所述动态显示区域相对前一时刻对应的所述动态显示区域的像素点差异，生成所述后一时刻对应的绘画指令，直至得到最后时刻对应的绘画指令，进而得到所有时刻对应的绘画指令；

按照时间先后顺序将所述所有时刻对应的绘画指令进行排序，得到所述动态显示区域对应的绘画指令集合，将所述绘画指令集合作为所述动态页面元素的绘画指令。

7.根据权利要求2所述的方法，其特征在于，所述分别确定所述各个页面元素所属的页面元素类型，包括：

将所述原始代码文件中用于描述所述各个页面元素的代码内容输入页面元素分类模型中，所述页面元素分类模型是基于预先收集的训练数据训练得到的，所述训练数据包括多个代码文件样本，所述多个代码文件样本中含有的各个页面元素对应的页面元素类型是已知的；

获取所述页面元素分类模型针对所述各个页面元素输出的页面元素类型。

8.一种网页加载装置，其特征在于，包括：

代码获取模块，用于获取浏览器中待加载的网页对应的原始代码文件；

编译处理模块，用于对所述原始代码文件进行编译处理，得到编译代码文件，所述编译代码文件的实体标签中含有画布标签，所述画布标签中含有用于在浏览器页面中绘制所述页面元素的绘画指令；

指令解析模块，用于在所述浏览器中解析所述编译代码文件的实体标签中含有的绘画指令；

网页显示模块，用于根据解析得到的所述绘画指令，在所述浏览器页面中进行所述页面元素的绘制，以在所述浏览器页面中显示所述网页。

9.一种电子设备，其特征在于，包括：

存储器，存储有计算机可读指令；

处理器，读取存储器存储的计算机可读指令，以执行权利要求1-7中的任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，其上存储有计算机可读指令，当所述计算机可读指令被计算机的处理器执行时，使计算机执行权利要求1-7中的任一项所述的方法。

Images