机顶盒开发中性能优化参考文档分析

目录

1 页面性能优化 (1)

1.1 展示页面建议 (1)

1.2 关注代码的执行效率 (1)

1.2.1 禁止使用iframe (1)

1.2.2 避免使用epg:script标签 (1)

1.2.3 缓存常用值，避免重复查询。 (1)

1.2.4 Javascirpt命名空间 (2)

1.2.5 全局变量应该放在js代码的最上方 (3)

1.2.6 避免同时进行多次的dom操作 (3)

1.2.7 复杂的逻辑能用java尽量用java解决不要用js (3)

1.2.8 JS数组、对象声明方式采用JSON格式 (4)

1.2.9 字符串连接优化 (4)

1.2.10 用cloneNode(true)代替多次createElement操作 (4)

1.2.11 类的共用方法声明 (5)

1.3 减小页面刷新区域 (5)

1.3.1 innerText、innerHTML和document.write (5)

1.4 避免在页面绘图时执行其它操作 (6)

1.4.1 焦点移动延迟加数据 (6)

1.4.2 首次加载页面时延迟加载耗时的js代码 (6)

1.5 减少页面布局的复杂度 (6)

1.6 避免图片压缩拉伸 (6)

1.7 减小图片大小，规避大图片 (6)

1.8 控制页面图片数量 (6)

1.9 img标签和背景图 (6)

2 特效 (7)

2.1 移动 (7)

2.2 缩放 (7)

2.3 透明度改变 (7)

2.4 其他组合特效 (8)

3 多窗口与多帧的使用 (8)

3.1 多窗口的几种应用场景 (8)

3.2 弹出窗口基本语法 (8)

3.3 自研浏览器扩展接口 (9)

3.4 Window对象 (9)

ZXIPTV 3.0模版开发规范

1页面性能优化

1.1展示页面建议

依据现网的数据统计分析来看，与数据库交互频繁，且页面元素复杂度较高，对EPG性能有影响，按其影响程度从高至低分别为频道切换、直播、点播、栏目展示、节目详细、首页、向第三方服务器发起http请求、回看。

在设计模板页面时考虑的因素主要有：页面的主要组成元素、是否与数据库交互以及交互次数、是否包含小视频、是否包含滚动字幕、是否有文件IO操作以及交互次数。如下建议作为EPG模板开发人员的设计参考。

页面构成元素元素数目元素限制

菜单/按钮无无

小视频 1 小视频大小不受限制，数目同一个页面只能是一个

海报不超过3 建议图片大小在30K～40K之间

包含图片不超过8 图片大小不受限制，根据局方需要而定

文件IO 1 无

滚动字幕 1 无

数据库交互不超过5 (海报)、(Datasource)、

(Decorator)、(小视频)

1.2关注代码的执行效率

1.2.1禁止使用iframe

由于自研浏览器是一个单线程的程序，对iframe的执行效率较低，且自研浏览器已经支持ajax，所以应用ajax来代替iframe。

注意，在国内应用时的限制，由于电信/联通的浏览器规范中没有要求支持ajax，所以如果要考虑对其他厂家STB的兼容性，则不能使用ajax。

1.2.2避免使用epg:script标签

epg:script标签只是注册了一个按键响应函数，将其交给top框架中的js函数处理，由于top框架中的js函数代码复杂，执行慢，所以应避免使用此标签，而改为直接在页面捕获按键，页面不处理的按键再交给top框架函数处理。

如果需要屏蔽掉页面上的某些按键也可以在相应的按键方法里写个空的方法。

1.2.3缓存常用值，避免重复查询。

目前，自研浏览器的document.getElementById方法由于是遍历方式查找DOM节点，执行效率很低，需要考虑根据id缓存页面元素，提高js运行速度，示例如下：

var $$ = {};

function $(id){

if(!$$[id]){

$$[id] = document.getElementById(id);

}

return $$[id];

}

for (var i = 0; i < arr.length; i++) {..} 改为for (var i = 0, l = arr.length; i < l; i++) {..}

1.2.4Javascirpt命名空间

使用js命名空间是代码层次更加清晰，易于功能代码合并，避免命名冲突

可以利用js的单实例模式实现命名空间，代码示例：