CN110457609A - 一种页面处理的方法、装置、计算机设备和存储介质 - Google Patents
一种页面处理的方法、装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN110457609A CN110457609A CN201910712464.8A CN201910712464A CN110457609A CN 110457609 A CN110457609 A CN 110457609A CN 201910712464 A CN201910712464 A CN 201910712464A CN 110457609 A CN110457609 A CN 110457609A
- Authority
- CN
- China
- Prior art keywords
- resource
- page
- static
- static resource
- documents
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/954—Navigation, e.g. using categorised browsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Radar, Positioning & Navigation (AREA)
- Remote Sensing (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例公开了一种页面处理的方法、装置、计算机设备和存储介质，该方法包括：接收页面的加载操作；响应于所述加载操作，获取所述页面的页面文档与资源文件，所述资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源；当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素；在所述页面文档中预加载所述第二静态资源。在页面文档中预加载第二静态资源，通过集中加载处于首屏区域的第一静态资源，可以减少静态资源的数量，从而提高页面的FPS。
Description
技术领域
本发明实施例涉及页面处理的技术，尤其涉及一种页面处理的方法、装置、计算机设备和存储介质。
背景技术
随着WEB页面技术的发展，基于WEB页面的应用越来越多，应用的功能也日趋增多，通常一个WEB页面的应用是由很多个模块组合而成，且模块之间基本上都是互相独立。
为了更快显示页面，应用大多会采用异步的方式加载模块。
但是，在页面刚开始加载的时候，若当前加载的页面拆分的模块较多的情况下，会加载大量的静态资源，导致页面的FPS(Frame Per Second，画面每秒传输帧数)下降，也就是掉帧的情况，再加上大量的静态资源并发加载，也会导致网络的拥堵，导致静态资源加载反而过慢。
发明内容
本发明实施例提供一种页面处理的方法、装置、计算机设备和存储介质，以解决静态资源加载量大导致页面帧率下降、加载缓慢的问题。
第一方面，本发明实施例提供了一种页面的处理方法，包括：
接收页面的加载操作；
响应于所述加载操作，获取所述页面的页面文档与资源文件，所述资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源；
当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素；
在所述页面文档中预加载所述第二静态资源。
可选地，还包括：
当所述页面的非首屏区域处于可视状态时，在所述页面文档中运行所述第二静态资源，以在所述页面的非首屏区域中显示所述第二静态资源表示的第二页面元素。
可选地，所述在所述页面文档中运行所述第一静态资源，包括：
调用预设的操作方法，将所述第一静态资源的资源地址与资源类型插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第一静态资源、按照所述资源类型运行所述第一静态资源；
将所述操作方法传递至预设的操作接口，绘制所述页面。
可选地，所述调用预设的操作方法，将所述第一静态资源的资源地址与资源类型插入所述页面文档中，包括：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第一静态资源时，将所述资源地址与所述资源标签插入所述页面文档中。
可选地，所述在所述页面文档中预加载所述第二静态资源，包括：
监听加载完成事件，所述加载完成事件表示所述页面的首屏区域完成加载；
当监听到所述加载完成事件时，在所述页面文档中预加载所述第二静态资源。
可选地，所述在所述页面文档中预加载所述第二静态资源，包括：
调用预设的操作方法，将所述第二静态资源的资源地址、资源类型与预设的预加载标签插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第二静态资源，基于所述预加载标签等待按照所述资源类型运行所述第二静态资源；
将所述操作方法传递至预设的操作接口，绘制所述页面。
可选地，所述调用预设的操作方法，将所述第二静态资源的资源地址、资源类型与预设的预加载标签插入所述页面文档中，包括：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第二静态资源时，将所述资源地址、资源标签与预设的预加载标签插入所述页面文档中。
可选地，所述在所述页面文档中预加载所述第二静态资源，还包括：
当所有所述第二静态资源完成插入所述页面文档时，停止将所述操作方法传递至预设的操作接口。
第二方面，本发明实施例还提供了一种页面的处理装置，其特征在于，包括：
加载操作接收模块，用于接收页面的加载操作；
加载操作响应模块，用于响应于所述加载操作，获取所述页面的页面文档与资源文件，所述资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源；
第一静态资源运行模块，用于当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素；
第二静态资源预加载模块，用于在所述页面文档中预加载所述第二静态资源。
可选地，还包括：
第二静态资源运行模块，用于当所述页面的非首屏区域处于可视状态时，在所述页面文档中运行所述第二静态资源，以在所述页面的非首屏区域中显示所述第二静态资源表示的第二页面元素。
可选地，所述第一静态资源运行模块包括：
第一操作方法调用子模块，用于调用预设的操作方法，将所述第一静态资源的资源地址与资源类型插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第一静态资源、按照所述资源类型运行所述第一静态资源；
第一操作接口调用子模块，用于将所述操作方法传递至预设的操作接口，绘制所述页面。
可选地，所述第一操作方法调用子模块还用于：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第一静态资源时，将所述资源地址与所述资源标签插入所述页面文档中。
可选地，所述第二静态资源预加载模块包括：
事件监听子模块，用于监听加载完成事件，所述加载完成事件表示所述页面的首屏区域完成加载；
事件预加载子模块，用于当监听到所述加载完成事件时，在所述页面文档中预加载所述第二静态资源。
可选地，所述第二静态资源预加载模块包括：
第二操作方法调用子模块，用于调用预设的操作方法，将所述第二静态资源的资源地址、资源类型与预设的预加载标签插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第二静态资源，基于所述预加载标签等待按照所述资源类型运行所述第二静态资源；
第二操作接口调用子模块，用于将所述操作方法传递至预设的操作接口，绘制所述页面。
可选地，所述第二操作方法调用子模块还用于：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第二静态资源时，将所述资源地址、资源标签与预设的预加载标签插入所述页面文档中。
可选地，所述第二静态资源预加载模块还包括：
停止调用子模块，用于当所有所述第二静态资源完成插入所述页面文档时，停止将所述操作方法传递至预设的操作接口。
第三方面，本发明实施例还提供了一种计算机设备，所述计算机设备包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第一方面中任一所述的页面的处理方法。
第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面中任一所述的页面的处理方法。
在本实施例中，接收页面的加载操作，响应于加载操作，获取页面的页面文档与资源文件，资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源，当页面的首屏区域处于可视状态时，在页面文档中运行第一静态资源，以在页面的首屏区域中显示第一静态资源表示的第一页面元素，在页面文档中预加载第二静态资源，通过集中加载处于首屏区域的第一静态资源，可以减少静态资源的数量，从而提高页面的FPS，并且，第二静态资源进行预加载，降低静态资源并发加载的数量，减少网络的拥堵，提高第一静态资源的加载速度。
附图说明
图1为本发明实施例一提供的一种页面的处理方法的流程图；
图2为本发明实施例提供的一种页面的示例图；
图3是本发明实施例二提供的一种页面的处理方法的流程图；
图4为本发明实施例三提供的一种页面的处理装置的结构示意图；
图5为本发明实施例四提供的一种计算机设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。
实施例一
图1为本发明实施例一提供的一种页面的处理方法的流程图，本实施例可适用于优先加载首屏的静态资源、非首屏静态资源预加载的情况，该方法可以由页面的处理装置来执行，该页面的处理装置可以由软件和/或硬件实现，可配置在计算机设备中，例如，个人电脑、笔记本电脑，等等，该方法具体包括如下步骤：
S101、接收页面的加载操作。
在计算机设备中，操作系统包括Android(安卓)、iOS、windows等等，在该操作系统中可以安装、运行可加载页面的应用，例如，浏览器、即时通讯工具、搜索应用，等等。
以浏览器为例，浏览器从架构上可以分为两个部分，即内核和外壳。浏览器内核是指浏览器的核心部分，可以分成两部分：渲染引擎(layout engineer或者RenderingEngine)和JS(JavaScript)引擎。渲染引擎主要负责取得网页的内容(包括HTML(HyperTextMarkup Language，超文本标记语言)、XML(eXtensible Markup Language，可扩展标记语言)、图像等)、整理信息(如加入CSS(Cascading Style Sheets，层叠样式表单)等)，以及计算页面的显示方式，然后会输出至显示器或打印机。浏览器内核的不同对于页面的语法解释会有不同，所以渲染的效果也不相同。所有页面浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS引擎则是解析Javascript语言，执行Javascript语言来实现网页的动态效果。
浏览器内核的种类有很多，目前比较常见的浏览器内核有IE浏览器使用的Trident内核，Firefox浏览器使用的Gecko内核，Safari浏览器和Google的Chrome浏览器使用的Webkit内核，以及，Opera浏览器采用的Presto内核。
当用户通过浏览器发起一个浏览页面的加载操作时，浏览器通过内核从目标网站下载页面的内容，然后分析页面的内容，执行脚本，计算排版，最后输出到屏幕显示给用户。
例如，用户可以通过点击某链接来打开一个页面，或者在地址栏输入网址来打开一个页面等等。当用户点击某链接的指示时，就相当于接收到了加载页面的加载操作；同样，当在地址栏输入某网址并点击确定按钮或按下回车键时，也相当于接收到了加载页面的加载操作。
其中，加载请求的内容可以包括用户请求加载的页面的标识和/或页面的特征。页面标识可以是能够代表一个唯一确定的页面的信息，例如统一资源标识符(UniformResource Identifier，URI)，统一资源标识符又具体可以包括统一资源定位符(UniformResource Locator，URL)，或者统一资源名称(Uniform Resource Name，URN)等等。
S102、响应于所述加载操作，获取所述页面的页面文档与资源文件。
响应于加载操作，可以通过HTTP(Hypertext transfer protocol，超文本传送协议)等协议访问服务器，从服务器接收待访问的页面的页面文档与资源文件，这些页面文档与资源文件可以由URL指定，并由MIME(Multipurpose Internet Mail Extensions，多用途互联网邮件扩展)在HTTP协议中指明。
在本实施例中，页面文档与资源文件相互独立。
页面文档是页面的主体，用于传递页面的各类信息。
以HTML文档作为页面文档的示例，HTML文档可以指示应用如何显示Web文档(即网页)的信息，如何链接各种信息。使用HTML文本可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本。
需要说明的是，许多应用可以支持除了HTML之外的广泛的格式，例如JPEG、PNG、GIF等图像格式，并且能够扩展支持众多的插件(plug-ins)。另外，许多应用还可以支持其他的URL类型及其相应的协议，如FTP(File Transfer Protocol，文件传输协议)、Gopher、HTTPS(HTTP协议的加密版本)等。
资源文件包括静态资源，如图片、CSS文件、JavaScript文件等，进一步地，该资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源。
所谓首屏区域，可以指加载页面时，默认在该页面显示的区域。
所谓非首屏区域，可以指加载页面时，默认在该页面之外显示的区域，该非首屏区域可以通过滑动、拖动等方式显示。
对于第一静态资源，可以放入一个队列(资源数组)中，对于第二静态资源，可以放入另一个队列(资源数组)中。
在不同的应用场景中，本领域技术人员可以根据实际情况设置在首屏区域和非首屏区域显示的页面元素，本实施例对此不加以限制。
例如，如图2所示，在直播的应用场景中，页面包括首屏区域210、非首屏区域220，在首屏区域210可显示对于直播较为重要的信息，例如，主播主持的直播节目、观众用户发送的评论、虚拟礼物，等等，在非首屏区域220可显示对于直播较为次要的信息，例如，其他主播用户的动态、给观众用户推荐的其他主播用户，等等，用户可以通过拖动页面，从首屏区域210转而显示非首屏区域220。
S103、当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素。
在加载页面的过程中，首屏区域处于可视状态，针对首屏区域，可提取第一静态资源，在页面文档中加载并运行第一静态资源，从而在显示器的可视区域显示处于页面的首屏区域中第一静态资源表示的第一页面元素。
所谓第一页面元素，可以指一个或多个静态资源运行时单独组合或与一个或多个动态资源(如音频数据、视频数据等)共同组合在页面所呈现的元素。
当然，在不同的应用场景中，第一页面元素呈现的形式也有所不同。
例如，如图2所示，在直播的应用场景中，首屏区域210的第一页面元素包括导航栏201、直播画面202、公告栏203、榜单204、直播间的交互窗口205，等等。
进一步地，针对直播间的交互窗口205，可设置图片、CSS文件、JavaScript文件等作为第一静态资源，CSS文件用于设置直播间的交互窗口205布局，图片包括礼物的图片、控件的图片，JavaScript文件用于实现点击效果、发送评论、显示虚拟礼物等操作，通过运行图片、CSS文件、JavaScript文件等第一静态资源，与其他动态资源，在页面呈现直播间的交互窗口205。
在具体实现中，可调用预设的操作方法，将第一静态资源的资源地址与资源类型插入页面文档中。
页面文档用于在加载时，从资源地址加载第一静态资源、按照资源类型运行第一静态资源。
进一步而言，运行预设的操作方法，该操作方法可用于获取静态资源，确定静态资源的资源地址与资源类型，生成标识资源类型的资源标签(如图片的资源标签是img，CSS文件的资源标签是link、JavaScript文件的的资源标签是script)，在确定静态资源为第一静态资源时，将资源地址与资源标签插入页面文档中。
例如，浏览器加载页面的过程，该标签的处理如下：
1.浏览器开始载入HTML文本的源代码，当检测到＜head＞标签内有一个＜link＞标签时，引用CSS文件；
2.浏览器继续载入HTML文本中＜body＞部分的代码，此时CSS文件已经加载到，可以开始渲染页面；
3.当浏览器在HTML文本中检测到一个＜img＞标签时，引用了一张图片；
4.由于图片占用了一定面积，影响了后面段落的排布，因此应用可能重新渲染这部分代码；
5.当浏览器检测到一个＜script＞标签时，引用JavaScript文件；
6.采用JavaScript文件执行了语句。
此外，以该操作方法作为回调函数，将操作方法传递至预设的操作接口，绘制页面。
在一个示例中，该操作方法为repeatOften方法，该操作接口为requestAnimationFrame。
调用repeatOften，可不断从资源数组中获取静态资源，对该静态资源生成资源地址与标识资源类型的资源标签，同时，判定该静态资源是首屏区域的第一静态资源还是属于非首屏区域的第二静态资源。
如果确定该静态资源是首屏区域的第一静态资源，则采用立即运行方式处理，将资源地址与资源标签插入页面文档中，使得应用加载页面文档时，从该资源地址获取该第一静态资源，并按照该资源标签运行该第一静态资源。
此外，requestAnimationFrame使用一个回调函数(repeatOften)作为参数，这个回调函数(repeatOften)会在应用重绘之前调用。
requestAnimationFrame是应用(如浏览器)用于定时循环操作的一个API(Application Program Interface，应用程序编程接口)，可以按帧对页面进行重绘。
requestAnimationFrame可以让各种页面的动画效果(如DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制，显示器有固定的刷新频率(60Hz或75H，即每秒最多重绘60次或75次)，requestAnimationFrame与这个刷新频率保持同步，从而节省系统资源，提高系统性能，改善视觉效果。
在本实施例中，使用requestAnimationFrame等API，可以让应用在下一帧重新绘制页面，从而显示出第一页面元素，可以充分利用显示器的刷新机制，节省系统资源。
S104、在所述页面文档中预加载所述第二静态资源。
在加载页面的过程中，非首屏区域处于不可视状态，针对非首屏区域，可提取第二静态资源，在页面文档中预加载第二静态资源，即加载第二静态资源，但不运行第二静态资源。
一方面，可监听加载完成事件，如onload，该加载完成事件表示页面的首屏区域完成加载。
当监听到加载完成事件时，在页面文档中预加载第二静态资源。
本实施例先加载并运行首屏区域，再预加载非首屏区域，可以集中系统资源加载首屏区域，保证首屏区域的加载速度。
另一方面，调用预设的操作方法，将第二静态资源的资源地址、资源类型与预设的预加载标签插入页面文档中。
页面文档用于在加载时，从资源地址加载第二静态资源，基于预加载标签等待按照资源类型运行第二静态资源。
进一步而言，运行预设的操作方法(如repeatOften)，该操作方法用于获取静态资源，确定静态资源的资源地址与资源类型，生成标识资源类型的资源标签(如图片的资源标签是img，CSS文件的资源标签是link、JavaScript文件的的资源标签是script)，在确定静态资源为第二静态资源时，将资源地址、资源标签与预设的预加载标签插入页面文档中。
以preload作为预加载标签的示例，使用link标签静态标记需要预加载的资源，或使用脚本动态创建一个link标签后插入到head头部。
preload提供了一种声明式的命令，让应用提前加载指定资源(加载后并不执行)，在需要执行的时候再执行，可以将加载和执行分离开，可不阻塞渲染和document的onload事件，提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出，加快资源的加载速度。
以该操作方法作为回调函数，将操作方法传递至预设的操作接口(如requestAnimationFrame)，绘制页面。
此外，当所有第二静态资源完成插入页面文档时，停止将操作方法传递至预设的操作接口，从而停止重绘页面。
在本实施例中，接收页面的加载操作，响应于加载操作，获取页面的页面文档与资源文件，资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源，当页面的首屏区域处于可视状态时，在页面文档中运行第一静态资源，以在页面的首屏区域中显示第一静态资源表示的第一页面元素，在页面文档中预加载第二静态资源，通过集中加载处于首屏区域的第一静态资源，可以减少静态资源的数量，从而提高页面的FPS，并且，第二静态资源进行预加载，降低静态资源并发加载的数量，减少网络的拥堵，提高第一静态资源的加载速度。
实施例二
图3为本发明实施例二提供的一种页面的处理方法的流程图，本实施例以前述实施例为基础，进一步增加按需运行第二静态资源的处理操作。该方法具体包括如下步骤：
S301、接收页面的加载操作。
S302、响应于所述加载操作，获取所述页面的页面文档与资源文件。
其中，资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源。
S303、当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素。
S304、在所述页面文档中预加载所述第二静态资源。
S305、当所述页面的非首屏区域处于可视状态时，在所述页面文档中运行所述第二静态资源，以在所述页面的非首屏区域中显示所述第二静态资源表示的第二页面元素。
在用户浏览页面的过程中，可以通过拖动、滑动等操作，将非首屏区域移入可视的区域，此时非首屏区域处于可视状态，由于非首屏区域的第二静态资源已经预先加载，因此，可直接运行第二静态资源，从而在显示器的可视区域显示处于页面的非首屏区域中第二静态资源表示的第一页面元素。
所谓第二页面元素，可以指一个或多个静态资源运行时单独组合或与一个或多个动态资源(如音频数据、视频数据等)共同组合在页面所呈现的元素。
当然，在不同的应用场景中，第二页面元素呈现的形式也有所不同。
例如，如图2所示，在直播的应用场景中，非首屏区域220的第二页面元素包括动态栏目206、公会栏目207、推荐栏目208。
需要说明的是，页面的非首屏区域可能比较大，部分非首屏区域处于可视状态时，部分非首屏区域仍处于非可视状态，此时，若非首屏区域的第二页面元素处于可视状态，则运行该第二页面元素对应的第二静态资源，若非首屏区域的第二页面元素处于非可视状态，则保持该第二页面元素对应的第二静态资源处于加载的状态，并不运行。
此外，对于部分属于首屏区域的第一页面元素，可固定在显示器的可视区域，在非首屏区域处于显示器的可视区域时，该第一页面元素仍处于显示器的可视区域。
例如，如图2所示，导航栏201固定在显示器的可视区域，用户在拖动页面时，导航栏201保持位置，直播画面202、公告栏203、榜单204、直播间的交互窗口205往上移动，逐渐移除显示器的可视区域，而动态栏目206、公会栏目207、推荐栏目208往上移动，逐渐移入显示器的可视区域。
在本实施例中，当页面的非首屏区域处于可视状态时，在页面文档中运行第二静态资源，由于第二静态资源已预加载，在显示第二页面元素时，可直接运行第二静态资源，而无需再次下载、加载第二静态资源，加快的非首屏区域的显示速度。
实施例三
图4为本发明实施例三提供的一种页面的处理装置的结构示意图，该装置具体可以包括如下模块：
加载操作接收模块401，用于接收页面的加载操作；
加载操作响应模块402，用于响应于所述加载操作，获取所述页面的页面文档与资源文件，所述资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源；
第一静态资源运行模块403，用于当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素；
第二静态资源预加载模块404，用于在所述页面文档中预加载所述第二静态资源。
在本发明的一个实施例中，还包括：
第二静态资源运行模块，用于当所述页面的非首屏区域处于可视状态时，在所述页面文档中运行所述第二静态资源，以在所述页面的非首屏区域中显示所述第二静态资源表示的第二页面元素。
在本发明的一个实施例中，所述第一静态资源运行模块403包括：
第一操作方法调用子模块，用于调用预设的操作方法，将所述第一静态资源的资源地址与资源类型插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第一静态资源、按照所述资源类型运行所述第一静态资源；
第一操作接口调用子模块，用于将所述操作方法传递至预设的操作接口，绘制所述页面。
在本发明的一个实施例中，所述第一操作方法调用子模块还用于：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第一静态资源时，将所述资源地址与所述资源标签插入所述页面文档中。
在本发明的一个实施例中，所述第二静态资源预加载模块404包括：
事件监听子模块，用于监听加载完成事件，所述加载完成事件表示所述页面的首屏区域完成加载；
事件预加载子模块，用于当监听到所述加载完成事件时，在所述页面文档中预加载所述第二静态资源。
在本发明的另一个实施例中，所述第二静态资源预加载模块404包括：
第二操作方法调用子模块，用于调用预设的操作方法，将所述第二静态资源的资源地址、资源类型与预设的预加载标签插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第二静态资源，基于所述预加载标签等待按照所述资源类型运行所述第二静态资源；
第二操作接口调用子模块，用于将所述操作方法传递至预设的操作接口，绘制所述页面。
在本发明的一个实施例中，所述第二操作方法调用子模块还用于：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第二静态资源时，将所述资源地址、资源标签与预设的预加载标签插入所述页面文档中。
在本发明的一个实施例中，所述第二静态资源预加载模块404还包括：
停止调用子模块，用于当所有所述第二静态资源完成插入所述页面文档时，停止将所述操作方法传递至预设的操作接口。
本发明实施例所提供的页面的处理装置可执行本发明任意实施例所提供的页面的处理方法，具备执行方法相应的功能模块和有益效果。
实施例四
图5为本发明实施例四提供的一种计算机设备的结构示意图。如图5所示，该计算机设备包括处理器500、存储器501、通信模块502、输入装置503和输出装置504；计算机设备中处理器500的数量可以是一个或多个，图5中以一个处理器500为例；计算机设备中的处理器500、存储器501、通信模块502、输入装置503和输出装置504可以通过总线或其他方式连接，图5中以通过总线连接为例。
存储器501作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本实施例中的页面的处理方法对应的模块(例如，如图3所示的页面的处理装置中的加载操作接收模块301、加载操作响应模块302、第一静态资源运行模块303、第二静态资源预加载模块304)。处理器500通过运行存储在存储器501中的软件程序、指令以及模块，从而执行计算机设备的各种功能应用以及数据处理，即实现上述的页面的处理方法。
存储器501可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据计算机设备的使用所创建的数据等。此外，存储器501可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器501可进一步包括相对于处理器500远程设置的存储器，这些远程存储器可以通过网络连接至计算机设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
通信模块502，用于与显示屏建立连接，并实现与显示屏的数据交互。输入装置503可用于接收输入的数字或字符信息，以及产生与计算机设备的用户设置以及功能控制有关的键信号输入。
本实施例提供的计算机设备，可执行本发明任一实施例提供的页面的处理方法，具体相应的功能和有益效果。
实施例五
本发明实施例五还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现一种页面的处理方法，该方法包括：
接收页面的加载操作；
响应于所述加载操作，获取所述页面的页面文档与资源文件，所述资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源；
当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素；
在所述页面文档中预加载所述第二静态资源。
当然,本发明实施例所提供的计算机可读存储介质,其计算机程序不限于如上所述的方法操作,还可以执行本发明任意实施例所提供的页面的处理方法中的相关操作。
通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。
值得注意的是，上述页面的处理装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。
Claims (11)
1.一种页面的处理方法，其特征在于，包括：
接收页面的加载操作；
响应于所述加载操作，获取所述页面的页面文档与资源文件，所述资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源；
当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素；
在所述页面文档中预加载所述第二静态资源。
2.根据权利要求1所述的方法，其特征在于，还包括：
当所述页面的非首屏区域处于可视状态时，在所述页面文档中运行所述第二静态资源，以在所述页面的非首屏区域中显示所述第二静态资源表示的第二页面元素。
3.根据权利要求1所述的方法，其特征在于，所述在所述页面文档中运行所述第一静态资源，包括：
调用预设的操作方法，将所述第一静态资源的资源地址与资源类型插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第一静态资源、按照所述资源类型运行所述第一静态资源；
将所述操作方法传递至预设的操作接口，绘制所述页面。
4.根据权利要求3所述的方法，其特征在于，所述调用预设的操作方法，将所述第一静态资源的资源地址与资源类型插入所述页面文档中，包括：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第一静态资源时，将所述资源地址与所述资源标签插入所述页面文档中。
5.根据权利要求1所述的方法，其特征在于，所述在所述页面文档中预加载所述第二静态资源，包括：
监听加载完成事件，所述加载完成事件表示所述页面的首屏区域完成加载；
当监听到所述加载完成事件时，在所述页面文档中预加载所述第二静态资源。
6.根据权利要求1-5任一项所述的方法，其特征在于，所述在所述页面文档中预加载所述第二静态资源，包括：
调用预设的操作方法，将所述第二静态资源的资源地址、资源类型与预设的预加载标签插入所述页面文档中，所述页面文档用于在加载时，从所述资源地址加载所述第二静态资源，基于所述预加载标签等待按照所述资源类型运行所述第二静态资源；
将所述操作方法传递至预设的操作接口，绘制所述页面。
7.根据权利要求6所述的方法，其特征在于，所述调用预设的操作方法，将所述第二静态资源的资源地址、资源类型与预设的预加载标签插入所述页面文档中，包括：
运行预设的操作方法，所述操作方法用于获取静态资源，确定所述静态资源的资源地址与资源类型，生成标识所述资源类型的资源标签，在确定所述静态资源为所述第二静态资源时，将所述资源地址、资源标签与预设的预加载标签插入所述页面文档中。
8.根据权利要求6所述的方法，其特征在于，所述在所述页面文档中预加载所述第二静态资源，还包括：
当所有所述第二静态资源完成插入所述页面文档时，停止将所述操作方法传递至预设的操作接口。
9.一种页面的处理装置，其特征在于，包括：
加载操作接收模块，用于接收页面的加载操作；
加载操作响应模块，用于响应于所述加载操作，获取所述页面的页面文档与资源文件，所述资源文件包括属于首屏区域的第一静态资源、属于非首屏区域的第二静态资源；
第一静态资源运行模块，用于当所述页面的首屏区域处于可视状态时，在所述页面文档中运行所述第一静态资源，以在所述页面的首屏区域中显示所述第一静态资源表示的第一页面元素；
第二静态资源预加载模块，用于在所述页面文档中预加载所述第二静态资源。
10.一种计算机设备，其特征在于，所述计算机设备包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8中任一所述的页面的处理方法。
11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-8中任一所述的页面的处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910712464.8A CN110457609A (zh) | 2019-08-02 | 2019-08-02 | 一种页面处理的方法、装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910712464.8A CN110457609A (zh) | 2019-08-02 | 2019-08-02 | 一种页面处理的方法、装置、计算机设备和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110457609A true CN110457609A (zh) | 2019-11-15 |
Family
ID=68484777
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910712464.8A Pending CN110457609A (zh) | 2019-08-02 | 2019-08-02 | 一种页面处理的方法、装置、计算机设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110457609A (zh) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112163175A (zh) * | 2020-10-14 | 2021-01-01 | 南京焦点领动云计算技术有限公司 | 一种网站移动端速度优化方法 |
| CN112965756A (zh) * | 2021-01-21 | 2021-06-15 | 北京达佳互联信息技术有限公司 | 页面资源加载量的监测方法、装置、电子设备及存储介质 |
| CN113343154A (zh) * | 2021-06-29 | 2021-09-03 | 中国平安财产保险股份有限公司 | 页面加载方法、装置、电子设备及存储介质 |
| CN113392358A (zh) * | 2021-07-12 | 2021-09-14 | 维沃移动通信（杭州）有限公司 | 静态资源的预加载方法及装置 |
| CN113392353A (zh) * | 2021-06-18 | 2021-09-14 | 网易（杭州）网络有限公司 | 网站页面的加载方法、装置、电子设备及存储介质 |
| CN113411622A (zh) * | 2021-05-26 | 2021-09-17 | 广州方硅信息技术有限公司 | 直播界面的加载方法、装置、客户端及存储介质 |
| CN113448748A (zh) * | 2021-06-03 | 2021-09-28 | 北京致远互联软件股份有限公司 | 一种通过消息驱动的刷新方法及刷新系统 |
| CN114357339A (zh) * | 2022-03-17 | 2022-04-15 | 杭州互链互联网技术有限公司 | 一种页面加载方法、装置及存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106844451A (zh) * | 2016-12-19 | 2017-06-13 | 福建中金在线信息科技有限公司 | 一种多媒体信息预加载的方法及装置 |
| CN107066632A (zh) * | 2017-06-05 | 2017-08-18 | 厦门美柚信息科技有限公司 | 一种网页信息预加载的方法及装置 |
| CN108536850A (zh) * | 2018-04-16 | 2018-09-14 | 沈文策 | 一种预加载图片的方法、装置、电子设备及存储介质 |
| US20190188233A1 (en) * | 2009-08-13 | 2019-06-20 | Oath Inc. | Method and system for causing a browser to preload web page components |
-
2019
- 2019-08-02 CN CN201910712464.8A patent/CN110457609A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20190188233A1 (en) * | 2009-08-13 | 2019-06-20 | Oath Inc. | Method and system for causing a browser to preload web page components |
| CN106844451A (zh) * | 2016-12-19 | 2017-06-13 | 福建中金在线信息科技有限公司 | 一种多媒体信息预加载的方法及装置 |
| CN107066632A (zh) * | 2017-06-05 | 2017-08-18 | 厦门美柚信息科技有限公司 | 一种网页信息预加载的方法及装置 |
| CN108536850A (zh) * | 2018-04-16 | 2018-09-14 | 沈文策 | 一种预加载图片的方法、装置、电子设备及存储介质 |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112163175A (zh) * | 2020-10-14 | 2021-01-01 | 南京焦点领动云计算技术有限公司 | 一种网站移动端速度优化方法 |
| CN112965756A (zh) * | 2021-01-21 | 2021-06-15 | 北京达佳互联信息技术有限公司 | 页面资源加载量的监测方法、装置、电子设备及存储介质 |
| CN112965756B (zh) * | 2021-01-21 | 2023-09-26 | 北京达佳互联信息技术有限公司 | 页面资源加载量的监测方法、装置、电子设备及存储介质 |
| CN113411622A (zh) * | 2021-05-26 | 2021-09-17 | 广州方硅信息技术有限公司 | 直播界面的加载方法、装置、客户端及存储介质 |
| CN113411622B (zh) * | 2021-05-26 | 2022-03-15 | 广州方硅信息技术有限公司 | 直播界面的加载方法、装置、客户端及存储介质 |
| CN113448748A (zh) * | 2021-06-03 | 2021-09-28 | 北京致远互联软件股份有限公司 | 一种通过消息驱动的刷新方法及刷新系统 |
| CN113448748B (zh) * | 2021-06-03 | 2023-09-22 | 北京致远互联软件股份有限公司 | 一种通过消息驱动的刷新方法及刷新系统 |
| CN113392353A (zh) * | 2021-06-18 | 2021-09-14 | 网易（杭州）网络有限公司 | 网站页面的加载方法、装置、电子设备及存储介质 |
| CN113343154A (zh) * | 2021-06-29 | 2021-09-03 | 中国平安财产保险股份有限公司 | 页面加载方法、装置、电子设备及存储介质 |
| CN113343154B (zh) * | 2021-06-29 | 2023-09-26 | 中国平安财产保险股份有限公司 | 页面加载方法、装置、电子设备及存储介质 |
| CN113392358A (zh) * | 2021-07-12 | 2021-09-14 | 维沃移动通信（杭州）有限公司 | 静态资源的预加载方法及装置 |
| CN114357339A (zh) * | 2022-03-17 | 2022-04-15 | 杭州互链互联网技术有限公司 | 一种页面加载方法、装置及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110457609A (zh) | 一种页面处理的方法、装置、计算机设备和存储介质 | |
| CN108038134B (zh) | 页面展示的方法、装置和存储介质以及电子设备 | |
| US7487201B1 (en) | Method and system for providing framework for Java based AJAX web applications | |
| US8799771B2 (en) | Systems and methods for hosted applications | |
| US20130212465A1 (en) | Postponed rendering of select web page elements | |
| EP3139331A1 (en) | Advertisement template configuration method, server and system | |
| WO2017206626A1 (zh) | 网络资源访问设备、混合设备及方法 | |
| CN112770188B (zh) | 一种视频播放方法及装置 | |
| CN110020329B (zh) | 用于生成网页的方法、装置和系统 | |
| US20110167332A1 (en) | System and Method for Generating Web Pages | |
| US8516041B1 (en) | Pre-fetching asynchronously requested content | |
| US8682964B1 (en) | Progressively loading network content | |
| CN110941779B (zh) | 加载页面的方法、装置、存储介质及电子设备 | |
| WO2019080796A1 (zh) | web系统的前后端分离方法、装置、设备及存储介质 | |
| CN109144567B (zh) | 跨平台的网页渲染方法、装置、服务器及存储介质 | |
| CN109634579B (zh) | 代码生成方法、装置、计算机装置及存储介质 | |
| CN110990345A (zh) | 一种Excel文件在线预览的方法及装置 | |
| WO2023179549A1 (zh) | 一种文档块分享方法、装置、系统及存储介质 | |
| CN110727429A (zh) | 一种前端页面的生成方法、装置及设备 | |
| CN113076499A (zh) | 一种页面互动方法、装置、设备、介质及程序产品 | |
| CN111737614B (zh) | 页面显示方法、装置、电子设备和存储介质 | |
| US11126410B2 (en) | Method and apparatus for building pages, apparatus and non-volatile computer storage medium | |
| CN115587075B (zh) | 版式文件处理方法、装置、终端设备及存储介质 | |
| CN115474074B (zh) | 一种视频背景替换方法、装置、计算设备和存储介质 | |
| CN116578795A (zh) | 网页页面的生成方法及装置、存储介质、电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191115 |