CN105025367A

CN105025367A - 一种基于数字机顶盒的页面载入方法

Info

Publication number: CN105025367A
Application number: CN201410181566.9A
Authority: CN
Inventors: 胡琳琳; 娄丙允; 郭志川
Original assignee: Institute of Acoustics CAS
Current assignee: Institute of Acoustics CAS
Priority date: 2014-04-30
Filing date: 2014-04-30
Publication date: 2015-11-04

Abstract

本发明提供了一种基于数字机顶盒的页面载入方法，通过把JavaScript框架下载到本地，然后把下载到本地的JavaScript框架划分为若干功能模块，在需要用到某个模块的接口时，采用按需加载或延迟加载的方式载入所需的功能模块，能够充分利用网络带宽资源，减小页面载入JavaScript框架文件的大小，从而提升页面载入速度。

Description

一种基于数字机顶盒的页面载入方法

技术领域

本发明涉及页面加载技术领域，尤其涉及一种基于数字机顶盒的页面载入方法。

背景技术

随着科技的发展，智能手机、平板电脑等嵌入式设备居于越来越重要的地位，基于智能操作***的数字机顶盒发展越来越快，尤其是随着数字机顶盒相关软硬件的升级和发展，基于智能操作***的嵌入式浏览器能够呈现的内容越来越丰富。为了使页面内容更丰富，越来越多的人尝试使用JavaScript框架来编写页面或者开发应用。使用JavaScript框架来编写页面在PC端已经非常流行，而且技术成熟。但是由于数字机顶盒各种软硬件因素的限制，这些使用JavaScript框架所编写的页面在数字机顶盒上运行的效果却并不理想，特别是存在页面载入速度慢的问题。

发明内容

本发明的目的在于，为解决现有数字机顶盒的页面载入速度较慢的技术问题，本发明提供一种基于数字机顶盒的页面载入方法，利用该方法让使用JavaScript框架所编写的页面能够流畅的运行在数字机顶盒上，通过对JavaScript框架载入速度的优化，从而提升整个页面在数字机顶盒上的载入速度。

为实现上述目的，本发明提供了一种基于数字机顶盒的页面载入方法，该方法针对数字机顶盒编写的页面或web应用。所述页面或者web应用都有用到JavaScript框架来编写，所述页面载入方法包括以下几个方面：

步骤1)将下载到本地的JavaScript框架存入数字机顶盒内；

步骤2)将步骤1)中的JavaScript框架所包含的函数接口按照功能划分为若干个功能模块，其中每个功能模块对应一个.js文件；

步骤3)根据数字机顶盒的页面所需编写的功能调用相应的函数接口，进而在所述页面内载入与该函数接口相对应的功能模块。

作为上述技术方案的进一步改进，所述步骤3)中的功能模块采用异步加载方式载入。

作为上述技术方案的进一步改进，所述的异步加载方式采用延迟加载或按需加载。

作为上述技术方案的进一步改进，所述步骤2)中的函数接口按照功能划分为：核心方法模块、检测方法模块、事件处理模块、Ajax请求模块、动态效果模块或触控模块。

针对数字机顶盒的页面中所用的JavaScript框架与一般PC访问的网站页面不同之处在于：所述的JavaScript框架不是通过一个URL地址从远程服务器载入的，而是先把JavaScript框架下载到本地，存放于数字机顶盒的某个目录下(比如user/data)，然后在编写页面的时候直接通过从本地目录下(比如user/data)载入所需的JavaScript框架。

对于下载到本地的JavaScript框架，如果只是在写页面的时候直接载入，会出现只是为了使用JavaScript框架的某一个功能而需要载入整个JavaScript框架，进而造成资源的浪费；特别是当编写一个页面需要用到多个JavaScript框架时，这种资源浪费就更加明显了。由于Javascript框架是一个整体，即为一个.js文件的集合，其包含若干个函数接口，为了避免现有的载入方法所造成的资源浪费，本发明的页面载入方法把下载到本地的JavaScript框架中包含的所有函数接口按照其具体功能归类，划分为多个功能模块，每个模块对应一个.js文件，开发应用时用到某个功能，只需加载这个功能相应功能模块的.js文件，而不需要加载整个javascript框架的.js文件。

通过把一个JavaScript框架按功能拆分为若干功能模块，然后在写页面的时候只加载相应的功能模块，这样确实能够提高JavaScript框架的载入速度，但是如果同时调用多个功能模块，就会出现同一时间载入多个JavaScript文件的问题，这种并发式的同步加载极可能出现阻塞问题，因此，在上述的页面加载方法上作进一步改进，即在只载入所需功能模块的.js文件的基础上，继续对页面JavaScript框架的载入方式进行优化，采用异步加载方式来载入所需的功能模块，比如延迟加载或者按需加载。

本发明的一种基于数字机顶盒的页面载入方法优点在于：

通过把JavaScript框架下载到本地，然后把下载到本地的JavaScript框架划分为若干功能模块，在需要用到某个模块的接口时，采用按需加载或延迟加载的方式载入所需的功能模块，能够充分利用网络带宽资源，减小页面载入JavaScript框架文件的大小，从而提升页面载入速度。

附图说明

图1为本发明实施例中的一种基于数字机顶盒的页面载入方法流程图。

具体实施方式

下面结合附图和实施例对本发明所述的一种基于数字机顶盒的页面载入方法进行详细说明。

本发明的基于数字机顶盒的页面载入方法应用于数字机顶盒所编写的页面或web应用。该页面载入方法包括以下步骤：

步骤1)将下载到本地的JavaScript框架存入数字机顶盒内；

基于上述页面载入方法，如图1所示，在本实施例中以zepto.js文件作为载入的JavaScript框架为例进一步说明。具体操作步骤如下：

步骤101)把编写页面或者web应用所需的JavaScript框架下载到本地，存放于数字机顶盒的某个位置。

具体地，下载zepto.js文件到本地，目前zepto的最新版本是1.0版本；并将下载的zepto.js文件存放于数字机顶盒usr/data目录下。

步骤102)将下载到本地的JavaScript框架按功能划分为若干功能模块。

具体地，将步骤101)中下载到本地的zepto.js文件按照各函数接口的功能归类，可分别划分为：核心方法模块、检测方法模块、事件处理模块、Ajax请求模块、动态效果模块或触控模块，上述每个模块分别对应一个.js文件。在本实施例中，上述的核心方法模块是在编写页面时使用最多的函数接口的集合，比如对DOM元素的读取以及操作的函数接口都可以归类为此模块；所述的检测方法模块的功能主要是检测设备类型、设备所用操作***、浏览器的版本、设备平台类型以及拆分到此模块中函数接口的类别；所述的事件处理模块的功能就是处理事件，可将具有添加事件、删除时间、监听事件以及触发事件功能的函数接口划分到此模块中；所述Ajax请求模块主要功能就是处理Ajax请求，可将具有查询Ajax请求、执行Ajax请求以及返回Ajax请求功能的函数接口划分到此模块中；动态效果模块主要功能是处理页面中和动画有关的内容，可将具有设置动画显示时间、旋转角度、动画完成后执行的动作功能的函数接口划分到此模块中；触控模块主要针对有触摸屏的设备，可将具有定义单击或者滑动动作含义的功能的函数接口划分到此模块中。

步骤103)当编写页面或者web应用时，根据需求只加载所需要的功能模块。

具体地，在编写页面或者web应用时，如果需要调用触摸相关的函数接口，那就需要加载触控与该函数接口对应的功能模块的.js文件。

步骤104)如果需要同时调用多个函数接口，而这些函数接口在不同的功能模块中，那就需要加载多个功能模块，此时可采用延时加载或者按需加载的方式。

具体地，如果出现有多个功能模块需要加载的情况，为了防止出现同步加载多个.js文件可能出现的阻塞问题，可以采用以下方法来加载多个功能模块：

1、直接采用<script src＝"xx.js"/>的方法加载多个功能模块，但是不把所有功能模块的js文件都放在页面代码中<body>标签之前，而是把部分核心功能的功能模块放在<body>标签之前加载，而一些不是必须要一开始就加载的模块，比如具有动态效果的功能模块，则放在<body>标签之后，待优先加载的功能模块加载完之后再进行加载

2、可以采用延时加载的方式载入所需的功能模块。通过设置各个模块延迟加载时间来避免出现同步加载多个js文件可能出现的阻塞问题。

加载功能模块的部分代码如下：

延时加载的部分代码如下：

3、还可以采用按需加载的方式载入所需功能模块，按需加载就是按页面中某个功能需要调用JavaScript框架中的相应功能模块，当编写页面时设置这个功能的触发事件；此时，当该事件被触发后通过回调函数加载该功能需要的功能模块，加载完该功能模块后执行相应的功能。

最后所应说明的是，以上实施例仅用以说明本发明的技术方案而非限制。尽管参照实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，对本发明的技术方案进行修改或者等同替换，都不脱离本发明技术方案的精神和范围，其均应涵盖在本发明的权利要求范围当中。

Claims

1.一种基于数字机顶盒的页面载入方法，其特征在于，该页面载入方法包括：

步骤1)将下载到本地的JavaScript框架存入数字机顶盒内；

2.根据权利要求1所述的基于数字机顶盒的页面载入方法，其特征在于，所述步骤3)中的功能模块采用异步加载方式载入。

3.根据权利要求2所述的基于数字机顶盒的页面载入方法，其特征在于，所述的异步加载方式采用延迟加载或按需加载。

4.根据权利要求1所述的基于数字机顶盒的页面载入方法，其特征在于，所述步骤2)中的函数接口按照功能划分为：核心方法模块、检测方法模块、事件处理模块、Ajax请求模块、动态效果模块或触控模块。