[发明专利]一种在电视终端实现web应用加载优化的方法

说明书

本发明公开了一种在电视终端实现web应用加载优化的方法，通过采用js动态加载技术方案，减小了加载负荷，提高了加载速度，电视终端不再产生白屏现象；且进入应用的速度极快，缩短了第一次进入应用时间；同时，其占用极少的存储空间，提升了整个Web应用的开启速度，提高了用户体验度。

技术领域

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

背景技术

随着互联网的发展，PC端和移动端的web应用呈现出井喷式的发展，并且成为整个行业的主流方向。电视端的web应用发展相对滞后，局限于HTML5单页面简单的图片信息展示。

目前该技术领域通常的技术方法和流程是采用div的方式去静态保存web页面，通过js去控制display属性的true或none显示需要展示的web页面应用。具体缺陷是虽然隐藏了未显示页面，但浏览器任然会加载页面，从而导致加载负荷大，加载速度缓慢；具体缺陷的技术原因是固有DOM节点的不灵活导致的。

发明内容

本发明的目的就在于为了解决如何在电视终端上，减小加载负荷、加快加载速度，从而优化web应用的问题而提供一种在电视终端实现web应用加载优化的方法，问题缺陷的技术实质是常规div方式静态保存web页面。本发明以电视终端浏览器为基座，实现电视终端的web应用加载优化，将web应用嵌入到电视终端，减小加载负荷、加快加载速度。

Web应用的主流技术方案有React、Vue、Angular。最初选用React技术方案进行开发，React技术方案的优势是：速度快、跨浏览器兼容、模块化、单向数据流；采用React技术方案开发完成后，部署到测试服务器，运行到电视终端上产生了白屏，且进入应用的速度极慢。经过分析，是由于终端的WebBox浏览器在第一次加载页面的时候并没有将DOM直接挂载到html页面上，而是先直接加载了代码量较大的js和css文件，等待js、css文件执行完毕过后才最终渲染图形，这样就造成白屏等待js和css文件加载的。这是React技术方案无法避免的缺陷，因为React技术方案自身带有各种组件，各种js、css文件就占用了大量的存储空间，每次的加载必须等自带的文件加载完成后才能实现渲染。这就与我们想要的技术效果相违背，只有另寻更好的技术方案。

接着，对Vue、Angular两个技术方案进行了可行性论证，它们同样存在着React技术方案一样的问题。最终，经过多次实验和可行性论证，选定了js动态加载技术方案。js动态加载技术方案的优点是：(1)性能：由于JavaScript运行在客户端，节省了web服务器的请求时间和带宽。(2)js动态加载技术方案是全手工编写，无任何框架和插件，容易发现问题并解决问题，干净、简单。(3)运行在用户机器上，运行结果和处理相对比较快。(4)可以使用第三方附加组件来检查代码片段。(5)js动态加载技术方案开发的web应用仅仅几十KB，占用极少的存储空间，加载速度极快。

虽然选定了js动态加载技术方案，但是如何在电视终端平台上，通过js动态加载技术方案实现与电视终端WebBox浏览器相融合的技术效果，其主要涉及到的技术难点是：1、采用哪一种机制去云端服务器请求数据，并成功返回后获取云端数据；2、怎样适配web应用在电视终端的各种状态，如：上焦、响应遥控器按键、滚轮、动画、动态数据展示等等；3、因各机型、机芯的电视终端分辨率各不相同，如何适配各电视终端的分辨率。4、电视终端浏览器WebBox支持哪些HTML5的标签，支持哪些CSS3和js的语法。

下面，分点描述js动态加载技术方案克服技术问题并实现技术效果的具体技术措施：

1、针对采用哪一种机制去云端服务器请求数据，并成功返回后获取云端数据的问题