CN110909279B - 一种网页的渲染方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本发明实施例提供了一种网页的渲染方法、装置、计算机设备和存储介质，该方法应用于浏览器中，包括：接收网页，所述网页具有多个图表数据；确定所述网页的可视区域；确定所述图表数据位于所述可视区域中；从服务器请求位于所述可视区域中的图表数据；渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据。通过按屏请求、渲染图表数据，既减少了服务器的请求频次、减轻了服务器的压力，也提高了图表数据的显示速度，大大缩短了用户看图表数据的请求时间，无论网页调整大小还是各种相关交互都不会导致窗口外的图表数据渲染，大大的减轻了浏览器的数据渲染压力，提升了整个网页的流畅性。

Description

一种网页的渲染方法、装置、计算机设备和存储介质

技术领域

本发明实施例涉及浏览器的技术，尤其涉及一种网页的渲染方法、装置、计算机设备和存储介质。

背景技术

互联网技术的迅猛发展将人们带入了信息社会时代，对人们生活产生了深刻的影响，人们可以各种方式获取到互联网上网页的资讯，以满足生活、工作、学习等各方面的需求。

目前，市面上各种数据中台项目存在一个数据看板下数据量非常多，图表交互特别复杂的情况，在这种情况下，浏览器通常会集中下载图表并进行渲染，容易导致网页卡顿，凸显图表渲染慢的情况。

发明内容

本发明实施例提供一种网页的渲染方法、装置、计算机设备和存储介质，以解决使用深度学习标注多音字发音的运算复杂度较高的问题。

第一方面，本发明实施例提供了一种网页的渲染方法，应用于浏览器中，包括：

接收网页，所述网页具有多个图表数据；

确定所述网页的可视区域；

确定所述图表数据位于所述可视区域中；

从服务器请求位于所述可视区域中的图表数据；

渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据。

可选地，所述确定所述图表数据位于所述可视区域中，包括：

创建交叉观察者，所述交叉观察者用于监听目标元素与父元素之间的交叉行为，所述目标元素为所述图表数据，所述父元素为所述可视区域；

若所述目标元素与所述父元素发生交叉行为，则确定所述图表数据移动至所述可视区域中。

可选地，还包括：

当所述网页调整大小时，重新加载所述交叉观察者；

当所述网页关闭时，移除所述交叉观察者。

可选地，所述从服务器请求位于所述可视区域中的图表数据，包括：

在所述网页的文档对象模型DOM元素中对所述图表数据进行监听；

若监听到未加载位于所述可视区域中的图表数据，则向服务器请求位于所述可视区域中的图表数据。

可选地，还包括：

确定所述图表数据位于所述可视区域外；

暂停从服务器请求位于所述可视区域外的图表数据；

隐藏位于所述可视区域外的图表数据。

可选地，所述隐藏位于所述可视区域外的图表数据，包括：

对位于所述可视区域中的图表数据添加指定的标签；

若检测到所述图表数据不具有指定的标签，则隐藏所述图表数据；

当所述网页调整大小时，对所述图表数据去除指定的标签。

可选地，所述渲染位于所述可视区域中的图表数据，包括：

生成多个处理时长小于预设的时间的任务，所述任务用于渲染位于所述可视区域中的图表数据；

调用所述浏览器的主线程每间隔所述时间执行所述任务。

第二方面，本发明实施例还提供了一种网页的渲染装置，应用于浏览器中，包括：

网页接收模块，用于接收网页，所述网页具有多个图表数据；

可视区域确定模块，用于确定所述网页的可视区域；

区域中确定模块，用于确定所述图表数据位于所述可视区域中；

图表数据请求模块，用于从服务器请求位于所述可视区域中的图表数据；

图表数据渲染模块，用于渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据。

可选地，所述区域中确定模块包括：

交叉观察者创建子模块，用于创建交叉观察者，所述交叉观察者用于监听目标元素与父元素之间的交叉行为，所述目标元素为所述图表数据，所述父元素为所述可视区域；

交叉行为确定子模块，用于若所述目标元素与所述父元素发生交叉行为，则确定所述图表数据移动至所述可视区域中。

可选地，还包括：

交叉观察者重载模块，用于当所述网页调整大小时，重新加载所述交叉观察者；

交叉观察者移除模块，用于当所述网页关闭时，移除所述交叉观察者。

可选地，所述图表数据请求模块包括：

DOM监听子模块，用于在所述网页的文档对象模型DOM元素中对所述图表数据进行监听；

服务器请求子模块，用于若监听到未加载位于所述可视区域中的图表数据，则向服务器请求位于所述可视区域中的图表数据。

可选地，还包括：

区域外确定模块，用于确定所述图表数据位于所述可视区域外；

暂停请求模块，用于暂停从服务器请求位于所述可视区域外的图表数据；

图表数据隐藏模块，用于隐藏位于所述可视区域外的图表数据。

可选地，所述图表数据隐藏模块包括：

标签添加子模块，用于对位于所述可视区域中的图表数据添加指定的标签；

标签隐藏子模块，用于若检测到所述图表数据不具有指定的标签，则隐藏所述图表数据；

标签去除子模块，用于当所述网页调整大小时，对所述图表数据去除指定的标签。

在本发明的一个实施例中，所述图表数据渲染模块包括：

任务生成子模块，用于生成多个处理时长小于预设的时间的任务，所述任务用于渲染位于所述可视区域中的图表数据；

任务执行子模块，用于调用所述浏览器的主线程每间隔所述时间执行所述任务。

第三方面，本发明实施例还提供了一种计算机设备，所述计算机设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第一方面中任一所述的网页的渲染方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面中任一所述的网页的渲染方法。

在本实施例中，接收网页，该网页具有多个图表数据，确定网页的可视区域，确定图表数据位于可视区域中，从服务器请求位于可视区域中的图表数据，渲染位于可视区域中的图表数据，以在可视区域显示图表数据。通过按屏请求、渲染图表数据，既减少了服务器的请求频次、减轻了服务器的压力，也提高了图表数据的显示速度，大大缩短了用户看图表数据的请求时间，无论网页调整大小还是各种相关交互都不会导致窗口外的图表数据渲染，大大的减轻了浏览器的数据渲染压力，提升了整个网页的流畅性。

附图说明

图1为本发明实施例一提供的一种网页的渲染方法的流程图；

图2为一种浏览器的架构示意图；

图3为本发明实施例二提供的一种网页的渲染方法的流程图；

图4为本发明实施例三提供的一种网页的渲染装置的结构示意图；

图5为本发明实施例四提供的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一提供的一种网页的渲染方法的流程图，本实施例可适用于按需加载并渲染网页中图表数据的情况，该方法可以由网页的渲染装置来执行，网页的渲染装置可以由软件和/或硬件实现，可配置在计算机设备中，例如，个人电脑、移动终端(如手机、平板灯)、服务器、工作站，等等，该方法具体包括如下步骤：

步骤101、接收网页。

在具体实现中，本实施例可应用于浏览器中，浏览器又称网页浏览器(英语：webbrowser)，是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标识符(Uniform Resource Identifier，URI)标志，信息资源中的超链接可使用户方便地浏览相关信息。

如图2所示，浏览器一般可以包括如下组件：

界面控件(User Interface)，包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的部分。

浏览器引擎(Browser engine)，查询与操作渲染引擎的接口。

渲染引擎(Rendering engine)，负责显示请求的内容，如HTML(HyperText MarkupLanguage，超文本标记语言)，它会负责解析HTML、CSS并将结果显示到窗口中。

网络(Networking)，用于网络请求，如HTTP(Hyper Text Transport Protocol，超文本传输协议)请求，它包括平台无关的接口和各平台独立的实现。

JS解释器(JavaScript Interpreter)，用于解析执行Java代码。

UI后端(UI Backend)，绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现。

数据存储持久层(Data Persistence)，浏览器需要把所有数据存到硬盘上，如cookies。新的HTML5规范规定了一个完整(虽然轻量级)的浏览器中的数据库webdatabase。

当然，使用webkit内核的浏览器与一般的浏览器不同，使用webkit内核的浏览器使用多个渲染引擎实例，每个Tab(标签)页一个渲染引擎实例，即每个Tab都是一个独立进程。

使用webkit内核的浏览器使用多个进程来隔离不同的网页，在使用webkit内核的浏览器中打开一个网页相当于起了一个进程，每个tab网页都有由其独立的渲染引擎实例。因为如果非多进程的话，如果浏览器中的一个tab网页崩溃，将会导致其他被打开的网页应用。另外相对于线程，进程之间是不共享资源和地址空间的，所以不会存在太多的安全问题，而由于多个线程共享着相同的地址空间和资源，所以会存在线程之间有可能会恶意修改或者获取非授权数据等复杂的安全问题。

在内核控制下各线程相互配合以保持同步，一个浏览器通常由以下常驻线程组成：

(1)、GUI(Graphical User Interface，图形用户界面)渲染线程

GUI渲染线程负责渲染浏览器界面HTML元素，当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时，该线程就会执行。在Java引擎运行脚本期间，GUI渲染线程都是处于挂起状态的，也就是说被冻结了。

(2)、Java引擎线程

JS为处理页面中用户的交互，以及操作DOM树、CSS(Cascading Style Sheets，层叠样式表)样式树来给用户呈现一份动态而丰富的交互体验和服务器逻辑的交互处理。如果JS是多线程的方式来操作这些UI(User Interface，用户界面)DOM，则可能出现UI操作的冲突；如果JS是多线程的话，在多线程的交互下，处于UI中的DOM节点就可能成为一个临界资源，假设存在两个线程同时操作一个DOM，一个负责修改一个负责删除，那么这个时候就需要浏览器来裁决如何生效哪个线程的执行结果，当然我们可以通过锁来解决上面的问题。但为了避免因为引入了锁而带来更大的复杂性，JS在最初就选择了单线程执行。

GUI渲染线程与JS引擎线程互斥的，是由于Java是可操纵DOM的，如果在修改这些元素属性同时渲染界面(即Java线程和UI线程同时运行)，那么渲染线程前后获得的元素数据就可能不一致。当Java引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行。由于GUI渲染线程与JS执行线程是互斥的关系，当浏览器在执行JS程序的时候，GUI渲染线程会被保存在一个队列中，直到JS程序执行完成，才会接着执行。因此如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

(3)、定时触发器线程

浏览器定时计数器并不是由JS引擎计数的，因为JS引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确，因此通过单独线程来计时并触发定时是更为合理的方案。

(4)、事件触发线程

当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可以是当前执行的代码块如定时任务、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

(5)、异步http请求线程

在在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到JS引擎的处理队列中等待处理。

在具体实现中，若浏览器接收到网页的加载操作，则可以向网页服务器请求相关的页面，并接收网页服务器返回的网页。

需要说明的是，该网页可以指HMTL文档。

进一步而言，网页的加载操作可以是指用户发出的加载某个网页的指示。例如，用户可以通过点击某链接请求加载一个网页，或者在地址栏输入网址来请求加载一个网页等等。当用户点击某链接时，就相当于接收到了用户加载网页的加载操作；同样，当在地址栏输入某网址并点击确定按钮或按下回车键时，也相当于接收到了用户加载网页的加载操作。

其中，加载请求的内容可以包括用户请求加载的网页的标识和/或网页的特征。网页标识可以是能够代表一个唯一确定的网页的信息，例如统一资源标识符，统一资源标识符又具体可以包括统一资源定位符(Uniform Resource Locator，URL)，或者统一资源名称(Uniform Resource Name，URN)等等。

在本实施例中，网页具有多个图表数据，如条形统计图、直方图、扇形图表、饼图、折线图，等等。

步骤102、确定所述网页的可视区域。

所谓可视区域，可以指显示数据的区域，供给用户浏览。

在具体实现中，网页的可视区域可以指viewport，viewport又称"视区"。

浏览器是把网页放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。

一个常用的针对移动网页优化过的页面的viewport meta标签大致如下：

meta name＝"viewport"content＝"width＝device-width，initial-scale＝1。0">

width：控制viewport的大小，可以指定的一个值，如600，或者特殊的值，如device-width为设备的宽度(单位为缩放为100％时的CSS的像素)。

height：和width相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

步骤103、确定所述图表数据位于所述可视区域中。

步骤104、从服务器请求位于所述可视区域中的图表数据。

对于数据中台dashboard等场景中，会出现一个数据看板下有几十个图表数据的情况，这些图表数据加起来数据量非常庞大，一进入数据看板的时候，若同时请求这些图表数据，一方面影响浏览器的数据响应速度，另一个方面如果每一个图表数据都这么处理，无形之中也增大了服务器的查询压力，毕竟在实际的业务场景下，很多分析师只需要关注看板中其中几个报表。

其中，数据中台是指通过数据技术，对海量数据进行采集、计算、存储、加工，同时统一标准和口径。数据中台把数据统一之后，会形成标准数据，再进行存储，形成大数据资产层，进而为客户提供高效服务。这些服务跟企业的业务有较强的关联性，是这个企业独有的且能复用的，它是企业业务和数据的沉淀，其不仅能降低重复建设、减少烟囱式协作的成本，也是差异化竞争优势所在。广义的数据中台包括了数据技术，比如对海量数据进行采集、计算、存储、加工的一系列技术集合，数据中台包括数据模型，算法服务，数据产品，数据管理等等，和企业的业务有较强的关联性，是企业独有的且能复用的，比如企业自建的2000个基础模型，300个融合模型，5万个标签。它是企业业务和数据的沉淀，其不仅能降低重复建设，减少烟囱式协作的成本，也是差异化竞争优势所在。

在本实施例中，引入按屏加载策略，网页初始化的时候，请求网页中可以显示到的图表数据，当用户滚动网页时，当图表数据移动至可视区域中的时候，再从服务器请求获取相应的图表数据，这样既减轻了服务器压力，也大大缩短了用户看图表数据的请求时间。

在具体实现中，可创建交叉观察者IntersectionObserver，同时，在文档对象模型(Document Object Model，DOM)元素中对图表数据进行监听。

其中，交叉观察者IntersectionObserver用于监听目标元素与父元素之间的交叉行为，在本实施例中，目标元素为图表数据，父元素为可视区域(viewport)。

若目标元素与父元素发生交叉行为，则确定图表数据移动至可视区域中，或者，确定图表数据移出可视区域。

与此同时，若监听到未加载位于可视区域中的图表数据，则向服务器请求位于可视区域中的图表数据。

此外，当网页调整大小(resize)时，重新加载交叉观察者IntersectionObserver，以保证网页调整大小(resize)调整时，可以保证图表数据的正常显示。

当然，当网页关闭时，移除交叉观察者IntersectionObserver，防止交叉观察者IntersectionObserver占用内存。

步骤105、渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据。

综上场景，网页中存在很多图表数据的情况下，不单单是请求图表数据卡顿，浏览器渲染图表数据也会导致卡顿的情况发生。

在本实施例中，引入按屏渲染数据策略，采用交叉观察者IntersectionObserver对网页中每一块图表数据的位置进行监听操作，在图表数据出现在可视区域中，也就是用户视野中时，对图表数据进行一个渲染的操作，对可视区域之外的图表数据，进行一个隐藏的操作，这样，无论网页进行调整大小(resize)还是各种相关交互都不会导致可视区域外的图表数据渲染，大大的减轻了浏览器的DOM渲染压力，提升了整个网页的流畅性。

从用户的输入，再到显示器在视觉上给用户的输出，这一过程如果超过100ms，那么用户会察觉到网页的卡顿，所以为了解决这个问题，每个任务不能超过50ms，W3C性能工作组在LongTask规范中也将超过50ms的任务定义为长任务。

在渲染复杂的图表数据时，如果图表数据处理太过复杂，占用主线程处理时间太多，会导致页面看起来有所卡顿，在渲染过程中复杂的图表数据处理不涉及DOM操作的通过new worker开启新的线程处理，涉及DOM操作的，采用时间切片处理方式，不超过50ms的任务用主线程处理，如果任务超过50ms，为了不阻塞主线程，应该让出主线程的控制权，使浏览器可以处理其他任务，等其他任务处理完成后再归还主线程，再次处理该任务，提高了整体渲染的速度以及流畅度。

所以时间切片的目的是不阻塞主线程，而实现目的的技术手段是将一个长任务拆分成很多个不超过50ms的小任务分散在宏任务队列中执行，每个小任务中间是有空隙的，代表着任务执行了一小段时间后，将让出主线程的控制权，让浏览器执行其他的任务。

在具体实现中，生成多个处理时长小于预设的时间(如25毫秒)的任务，该任务用于渲染位于可视区域中的图表数据。

调用浏览器的主线程每间隔时间执行任务，如果任务超过预设的时间(如25毫秒)，则让出主线程的控制权，让主线程执行其他任务。

在本实施例中，通过时间切片对画廊图表的定制化宽度进行懒配置，不会堵塞整个浏览器的主线程，用户感觉不到网页处理的卡顿。

在本实施例中，接收网页，该网页具有多个图表数据，确定网页的可视区域，确定图表数据位于可视区域中，从服务器请求位于可视区域中的图表数据，渲染位于可视区域中的图表数据，以在可视区域显示图表数据，通过按屏请求、渲染图表数据，既减少了服务器的请求频次、减轻了服务器的压力，也提高了图表数据的显示速度，大大缩短了用户看图表数据的请求时间，无论网页调整大小还是各种相关交互都不会导致窗口外的图表数据渲染，大大的减轻了浏览器的数据渲染压力，提升了整个网页的流畅性。

实施例二

图3为本发明实施例二提供的一种网页的渲染方法的流程图，本实施例以前述实施例为基础，进一步增加隐藏图表数据的处理操作，该方法具体包括如下步骤：

步骤301、接收网页。

其中，网页具有多个图表数据。

步骤302、确定所述网页的可视区域。

步骤303、确定所述图表数据位于所述可视区域外。

步骤304、暂停从服务器请求位于所述可视区域外的图表数据。

在按屏加载策略中，当用户滚动网页时，对于未滚动到可视区域的图表数据暂不从服务器请求，这样既减轻了服务器压力，也大大缩短了用户看图表数据的请求时间。

步骤305、隐藏位于所述可视区域外的图表数据。

当图表数据还未出现在可视区域中时，不触发resizeChart()事件进行图表数据的渲染，当图表数据出现在可视区域中后，对位于可视区域中的图表数据添加指定的标签，如添加hasResize的class做标签，避免重复渲染。

若检测到图表数据不具有指定的标签，如没有hasResize这个class，则隐藏该图表数据，避免网页元素的重绘和回流，保证页面的流畅性。

同时，当网页调整大小时，对图表数据去除指定的标签，如去掉hasResize的class，以保证窗口调正时图表数据能够正常重渲染。

实施例三

图4为本发明实施例三提供的一种网页的渲染装置的结构示意图，该装置应用于浏览器中，具体可以包括如下模块：

网页接收模块401，用于接收网页，所述网页具有多个图表数据；

可视区域确定模块402，用于确定所述网页的可视区域；

区域中确定模块403，用于确定所述图表数据位于所述可视区域中；

图表数据请求模块404，用于从服务器请求位于所述可视区域中的图表数据；

图表数据渲染模块405，用于渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据。

在本发明的一个实施例中，所述区域中确定模块402包括：

交叉观察者创建子模块，用于创建交叉观察者，所述交叉观察者用于监听目标元素与父元素之间的交叉行为，所述目标元素为所述图表数据，所述父元素为所述可视区域；

交叉行为确定子模块，用于若所述目标元素与所述父元素发生交叉行为，则确定所述图表数据移动至所述可视区域中。

在本发明的一个实施例中，还包括：

交叉观察者重载模块，用于当所述网页调整大小时，重新加载所述交叉观察者；

交叉观察者移除模块，用于当所述网页关闭时，移除所述交叉观察者。

在本发明的一个实施例中，所述图表数据请求模块404包括：

DOM监听子模块，用于在所述网页的文档对象模型DOM元素中对所述图表数据进行监听；

服务器请求子模块，用于若监听到未加载位于所述可视区域中的图表数据，则向服务器请求位于所述可视区域中的图表数据。

在本发明的一个实施例中，还包括：

区域外确定模块，用于确定所述图表数据位于所述可视区域外；

暂停请求模块，用于暂停从服务器请求位于所述可视区域外的图表数据；

图表数据隐藏模块，用于隐藏位于所述可视区域外的图表数据。

在本发明的一个实施例中，所述图表数据隐藏模块包括：

标签添加子模块，用于对位于所述可视区域中的图表数据添加指定的标签；

标签隐藏子模块，用于若检测到所述图表数据不具有指定的标签，则隐藏所述图表数据；

标签去除子模块，用于当所述网页调整大小时，对所述图表数据去除指定的标签。

在本发明的一个实施例中，所述图表数据渲染模块405包括：

任务生成子模块，用于生成多个处理时长小于预设的时间的任务，所述任务用于渲染位于所述可视区域中的图表数据；

任务执行子模块，用于调用所述浏览器的主线程每间隔所述时间执行所述任务。

本发明实施例所提供的网页的渲染装置可执行本发明任意实施例所提供的网页的渲染方法，具备执行方法相应的功能模块和有益效果。

实施例四

图5为本发明实施例四提供的一种计算机设备的结构示意图。如图5所示，该计算机设备包括处理器500、存储器501、通信模块502、输入装置503和输出装置504；计算机设备中处理器500的数量可以是一个或多个，图5中以一个处理器500为例；计算机设备中的处理器500、存储器501、通信模块502、输入装置503和输出装置504可以通过总线或其他方式连接，图5中以通过总线连接为例。

存储器501作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本实施例中的网页的渲染方法对应的模块(例如，如图4所示的网页的渲染装置中的网页接收模块401、可视区域确定模块402、区域中确定模块403、图表数据请求模块404和图表数据渲染模块405)。处理器500通过运行存储在存储器501中的软件程序、指令以及模块，从而执行计算机设备的各种功能应用以及数据处理，即实现上述的网页的渲染方法。

存储器501可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据计算机设备的使用所创建的数据等。此外，存储器501可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器501可进一步包括相对于处理器500远程设置的存储器，这些远程存储器可以通过网络连接至计算机设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

通信模块502，用于与显示屏建立连接，并实现与显示屏的数据交互。

输入装置503可用于接收输入的数字或字符信息，以及产生与计算机设备的用户设置以及功能控制有关的键信号输入，还可以是用于获取图像的摄像头以及获取音频数据的拾音设备。

输出装置504可以包括扬声器等音频设备。

需要说明的是，输入装置503和输出装置504的具体组成可以根据实际情况设定。

处理器500通过运行存储在存储器501中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述的电子白板的连接节点控制方法。

本实施例提供的计算机设备，可执行本发明任一实施例提供的网页的渲染方法，具体相应的功能和有益效果。

实施例五

本发明实施例五还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现一种网页的渲染方法，应用于浏览器中，该方法包括：

接收网页，所述网页具有多个图表数据；

确定所述网页的可视区域；

确定所述图表数据位于所述可视区域中；

从服务器请求位于所述可视区域中的图表数据；

渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据。

当然，本发明实施例所提供的计算机可读存储介质，其计算机程序不限于如上所述的方法操作，还可以执行本发明任意实施例所提供的网页的渲染方法中的相关操作。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(RandomAccess Memory，RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

值得注意的是，上述网页的渲染装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (8)

1.一种网页的渲染方法，其特征在于，应用于浏览器中，包括：

接收网页，所述网页具有多个图表数据；

确定所述网页的可视区域；

确定所述图表数据位于所述可视区域中；

从服务器请求位于所述可视区域中的图表数据；

渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据；

确定所述图表数据位于所述可视区域外；

暂停从服务器请求位于所述可视区域外的图表数据；

隐藏位于所述可视区域外的图表数据；

其中，所述隐藏位于所述可视区域外的图表数据，包括：

对位于所述可视区域中的图表数据添加指定的标签；

若检测到所述图表数据不具有指定的标签，则隐藏所述图表数据；

当所述网页调整大小时，对所述图表数据去除指定的标签。

2.根据权利要求1所述的方法，其特征在于，所述确定所述图表数据位于所述可视区域中，包括：

创建交叉观察者，所述交叉观察者用于监听目标元素与父元素之间的交叉行为，所述目标元素为所述图表数据，所述父元素为所述可视区域；

若所述目标元素与所述父元素发生交叉行为，则确定所述图表数据移动至所述可视区域中。

3.根据权利要求2所述的方法，其特征在于，还包括：

当所述网页调整大小时，重新加载所述交叉观察者；

当所述网页关闭时，移除所述交叉观察者。

4.根据权利要求1所述的方法，其特征在于，所述从服务器请求位于所述可视区域中的图表数据，包括：

在所述网页的文档对象模型DOM元素中对所述图表数据进行监听；

若监听到未加载位于所述可视区域中的图表数据，则向服务器请求位于所述可视区域中的图表数据。

5.根据权利要求1-4任一所述的方法，其特征在于，所述渲染位于所述可视区域中的图表数据，包括：

生成多个处理时长小于预设的时间的任务，所述任务用于渲染位于所述可视区域中的图表数据；

调用所述浏览器的主线程每间隔所述时间执行所述任务。

6.一种网页的渲染装置，其特征在于，应用于浏览器中，包括：

网页接收模块，用于接收网页，所述网页具有多个图表数据；

可视区域确定模块，用于确定所述网页的可视区域；

区域中确定模块，用于确定所述图表数据位于所述可视区域中；

图表数据请求模块，用于从服务器请求位于所述可视区域中的图表数据；

图表数据渲染模块，用于渲染位于所述可视区域中的图表数据，以在所述可视区域显示所述图表数据；

区域外确定模块，用于确定所述图表数据位于所述可视区域外；

暂停请求模块，用于暂停从服务器请求位于所述可视区域外的图表数据；

图表数据隐藏模块，用于隐藏位于所述可视区域外的图表数据；

其中，所述图表数据隐藏模块包括：

标签添加子模块，用于对位于所述可视区域中的图表数据添加指定的标签；

标签隐藏子模块，用于若检测到所述图表数据不具有指定的标签，则隐藏所述图表数据；

标签去除子模块，用于当所述网页调整大小时，对所述图表数据去除指定的标签。

7.一种计算机设备，其特征在于，所述计算机设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的网页的渲染方法。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1-5中任一所述的网页的渲染方法。

Images