一种在电视终端实现web应用加载优化的方法与流程

[0001]
本发明涉及电视终端技术领域，尤其涉及一种在电视终端实现web应用加载优化的方法。


背景技术：

[0002]
随着互联网的发展，pc端和移动端的web应用呈现出井喷式的发展，并且成为整个行业的主流方向。电视端的web应用发展相对滞后，局限于html5单页面简单的图片信息展示。
[0003]
目前该技术领域通常的技术方法和流程是采用div的方式去静态保存web页面，通过js去控制display属性的true或none显示需要展示的web页面应用。具体缺陷是虽然隐藏了未显示页面，但浏览器任然会加载页面，从而导致加载负荷大，加载速度缓慢；具体缺陷的技术原因是固有dom节点的不灵活导致的。


技术实现要素：

[0004]
本发明的目的就在于为了解决如何在电视终端上，减小加载负荷、加快加载速度，从而优化web应用的问题而提供一种在电视终端实现web应用加载优化的方法，问题缺陷的技术实质是常规div方式静态保存web页面。本发明以电视终端浏览器为基座，实现电视终端的web应用加载优化，将web应用嵌入到电视终端，减小加载负荷、加快加载速度。
[0005]
web应用的主流技术方案有react、vue、angular。最初选用react技术方案进行开发，react技术方案的优势是：速度快、跨浏览器兼容、模块化、单向数据流；采用react技术方案开发完成后，部署到测试服务器，运行到电视终端上产生了白屏，且进入应用的速度极慢。经过分析，是由于终端的webbox浏览器在第一次加载页面的时候并没有将dom直接挂载到html页面上，而是先直接加载了代码量较大的js和css文件，等待js、css文件执行完毕过后才最终渲染图形，这样就造成白屏等待js和css文件加载的。这是react技术方案无法避免的缺陷，因为react技术方案自身带有各种组件，各种js、css文件就占用了大量的存储空间，每次的加载必须等自带的文件加载完成后才能实现渲染。这就与我们想要的技术效果相违背，只有另寻更好的技术方案。
[0006]
接着，对vue、angular两个技术方案进行了可行性论证，它们同样存在着react技术方案一样的问题。最终，经过多次实验和可行性论证，选定了js动态加载技术方案。js动态加载技术方案的优点是：(1)性能：由于javascript运行在客户端，节省了web服务器的请求时间和带宽。(2)js动态加载技术方案是全手工编写，无任何框架和插件，容易发现问题并解决问题，干净、简单。(3)运行在用户机器上，运行结果和处理相对比较快。(4)可以使用第三方附加组件来检查代码片段。(5)js动态加载技术方案开发的web应用仅仅几十kb，占用极少的存储空间，加载速度极快。
[0007]
虽然选定了js动态加载技术方案，但是如何在电视终端平台上，通过js动态加载技术方案实现与电视终端webbox浏览器相融合的技术效果，其主要涉及到的技术难点是：
1、采用哪一种机制去云端服务器请求数据，并成功返回后获取云端数据；2、怎样适配web应用在电视终端的各种状态，如：上焦、响应遥控器按键、滚轮、动画、动态数据展示等等；3、因各机型、机芯的电视终端分辨率各不相同，如何适配各电视终端的分辨率。4、电视终端浏览器webbox支持哪些html5的标签，支持哪些css3和js的语法。
[0008]
下面，分点描述js动态加载技术方案克服技术问题并实现技术效果的具体技术措施：
[0009]
1、针对采用哪一种机制去云端服务器请求数据，并成功返回后获取云端数据的问题
[0010]
在pc端请求数据和获取数据的方式，是直接根据web前端通过ajax发送请求到云端服务器，云端服务器根据请求内容直接返回数据。电视终端与pc端的不同之处在于，电视终端不支持这种直接通过ajax请求云端服务器返回数据的方式。经过分析论证，并充分实验后，采用通过搭载在电视终端的webbox浏览器进行中转的机制，由web前端组合好请求数据参数后，通过api接口去调用webbox浏览器请求云端服务器的函数，成功返回后获取到云端数据。
[0011]
2、针对怎样适配web应用在电视终端的各种状态的问题
[0012]
因为采用的是js动态加载技术方案，区别于jquery等框架。所有的上焦、动画、滚轮、遥控器按键响应、事件、动态数据展示等，都无法像jquery框架一样采用现成的插件、组件，全都只有靠人工手动编写js代码解决适配web应用在电视终端各种状态的问题。
[0013]
3、针对各机芯、机型的电视终端分辨率各不相同，如何适配各电视终端分辨率的问题
[0014]
电视终端分辨率根据各机型、机芯的不同千差万别，最初的想法是采用全局变量保存每一个机型的分辨率，然后用最高分辨率除以全局变量里面每一个机型的分辨率，从而得到一个比例，然后去判断对应的机型，用该机型的像素点乘以该比例，即完成分辨率的适配。但是，这种方法随后被否定了。第一，申明全局变量去保存每一个机型的分辨率，会增加计算逻辑，占用存储空间；第二，用每一个该机型的像素点去乘以比例，相当于每一个机型在完成渲染之前都会去做一遍这个操作，严重影响了渲染速度，且算法冗余，代码逻辑复杂不清晰。最后，根据多次实验和尝试后，采用了百分比的方式解决了适配电视终端分辨率的问题；百分比方式的好处在于，它并不根据像素点操作，而是直接根据整个电视屏幕去调整占用屏幕内容宽高的百分比，适配各机型电视终端分辨率。
[0015]
4、针对电视终端浏览器webbox支持哪些html5的标签，支持哪些css3和js语法的问题
[0016]
js动态加载技术方案不仅要求对js的掌控能力，同时需要极其熟练的html5和css3能力，这三者缺一不可。在项目设计之初，对电视终端搭载的webbox浏览器进行了详细且具体的研究。webbox浏览器支持哪些html5标签，支持哪些css3的语法，就根据该浏览器要求的规则，浏览器支持的标签和语法就使用，不支持的就想办法，采用其他的方式实现同样的效果，解决了该问题。
[0017]
本发明通过以下技术方案来实现上述目的：
[0018]
一种在电视终端实现web应用加载优化的方法，包括以下步骤：
[0019]
步骤1，基本架构以及运作的定义；在js动态加载页面中，加入webbox浏览器的api
调用接口，webbox浏览器收到调用接口请求后，直接到云端服务器去请求数据；
[0020]
步骤2，运行环境的搭建和部署；将开发好的前端代码部署到云端服务器，这和pc端的方式是一模一样，等同于我们在pc端的浏览器中访问的网页，这些页面同样是部署在云端服务器上的；后端将数据相关代码也部署到云端服务器，后端主要实现的是es查询、交互逻辑、数据结构；
[0021]
步骤3，项目具体实际操作流程；完成基本架构定义和运行环境部署后，进入到实际操作的层面了。
[0022]
进一步方案为，所述步骤1中，云端服务器根据请求参数返回给webbox浏览器对应的数据，webbox浏览器再转发给js动态加载页面，js动态加载页面获得数据后完成渲染，整个框架搭建完成。
[0023]
进一步方案为，所述步骤2中，前后端的环境搭建部署好后，在电视终端安装webbox浏览器apk应用，在webbox浏览器这个web应用中运行js动态加载页面，完成所有环境的搭建和部署。
[0024]
进一步方案为，所述步骤3中，实际操作包括如下步骤：
[0025]
第一步，在电视终端的个人中心中登陆，登陆的目的是将个人中心账户与购买订单中的商品相关联，即可以通过长虹账号在“我的订单”中查询到购买记录、商品详情、物流信息；
[0026]
第二步，在电视终端中用遥控器切换到“虹fans”栏目，选中商品海报后，按确定键进入到商品详情页面，默认焦点在商品图片容器中，可通过遥控器上、下键移动滚动条浏览商品图片，左、右键可切换焦点到商品商城按钮；
[0027]
第三步，确定商品信息后，可通过手机扫描商品按钮下方的二维码跳转到商品付款页面，付款操作在移动手机端操作完成。第四步，在移动手机端完成付款后，可返回到“虹fans”栏目中，点击“我的订单”查看购买记录和相关信息，自此操作流程完成。
[0028]
进一步方案为，在pc端请求数据和获取数据是直接根据web前端通过ajax发送请求到云端服务器，云端服务器根据请求内容直接返回数据；通过搭载在电视终端的webbox浏览器进行中转的机制，由web前端组合好请求数据参数后，通过api接口去调用webbox浏览器请求云端服务器的函数，成功返回后获取到云端数据。
[0029]
本发明的有益效果在于：
[0030]
本发明的一种在电视终端实现web应用加载优化的方法，通过采用js动态加载技术方案，减小了加载负荷，提高了加载速度，电视终端不再产生白屏现象；且进入应用的速度极快，缩短了第一次进入应用时间；同时，其占用极少的存储空间，提升了整个web应用的开启速度，提高了用户体验度。
附图说明
[0031]
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要实用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0032]
图1是本发明基本架构以及运作流程示意图。
[0033]
图2是本发明运行环境流程示意图。
[0034]
图3是本发明项目具体实际操作流程示意图。
具体实施方式
[0035]
为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。
[0036]
在任一实施例中，如图1-3所示，本发明的一种在电视终端实现web应用加载优化的方法，具体实施方式主要包括以下三个步骤：基本架构以及运作的定义、运行环境的搭建和部署、项目具体实际操作流程。
[0037]
步骤1，基本架构以及运作的定义；该方面好比修建房屋的地基和框架，尤其重要，因为其体现了该方案的基本架构和主体层次，是总体方向。在js动态加载页面中，加入webbox浏览器的api调用接口，webbox浏览器收到调用接口请求后，直接到云端服务器去请求数据。云端服务器根据请求参数返回给webbox浏览器对应的数据，webbox浏览器再转发给js动态加载页面，js动态加载页面获得数据后完成渲染，整个框架搭建完成。
[0038]
步骤2，运行环境的搭建和部署；框架构建完成后，就需要部署运行环境了。首先，将开发好的前端代码部署到云端服务器，这和pc端的方式是一模一样，等同于我们在pc端的浏览器中访问的网页，这些页面同样是部署在云端服务器上的。然后，后端将数据相关代码也部署到云端服务器，后端主要实现的是es查询、交互逻辑、数据结构等。接着，前后端的环境搭建部署好后，就可以在电视终端安装webbox浏览器apk应用了，它相当于是一个载体，或者说一座桥梁，连接前后端，提供平台给后端完成计算逻辑，给前端完成显示逻辑。最后，我们就可以在webbox浏览器这个web应用中运行js动态加载页面，完成所有环境的搭建和部署。
[0039]
步骤3，项目具体实际操作流程。完成基本架构定义和运行环境部署后，我们就可以进入到实际操作的层面了。第一步，在电视终端的个人中心中登陆，登陆的目的是将个人中心账户与购买订单中的商品相关联，即可以通过长虹账号在“我的订单”中查询到购买记录、商品详情、物流信息等。第二步，在电视终端中用遥控器切换到“虹fans”栏目，选中商品海报后，按确定键进入到商品详情页面，默认焦点在商品图片容器中，可通过遥控器上、下键移动滚动条浏览商品图片，左、右键可切换焦点到商品商城按钮。(注：chiq7的机型还可以采用空鼠操控页面)。第三步，确定商品信息后，可通过手机扫描商品按钮下方的二维码跳转到商品付款页面，付款操作在移动手机端操作完成。第四步，在移动手机端完成付款后，可返回到“虹fans”栏目中，点击“我的订单”查看购买记录和相关信息，自此操作流程完成。
[0040]
本发明不需要去改变固有dom节点的display属性，而是根据需要直接在js中添加dom节点，更加便捷、直观、高效；且本专利所采用的是js动态加载方式，只需要在body中申明基本的dom节点，后续的dom节点全部通过js动态加载方式添加，从而使加载速度更快，框架结构更合理，占用内存容量更小。
[0041]
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何
熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。