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

1、机顶盒开发中性能优化参考文档分析 目 录1 页面性能优化 11.1 展示页面建议 11.2 关注代码的执行效率 11.2.1 禁止使用iframe 11.2.2 避免使用epg:script标签 11.2.3 缓存常用值，避免重复查询。 11.2.4 Javascirpt命名空间 21.2.5 全局变量应该放在js代码的最上方 31.2.6 避免同时进行多次的dom操作 31.2.7 复杂的逻辑能用java尽量用java解决不要用js 31.2.8 JS数组、对象声明方式采用JSON格式 41.2.9 字符串连接优化 41.2.10 用cloneNode(true)代替多次createElem

2、ent操作 41.2.11 类的共用方法声明 51.3 减小页面刷新区域 51.3.1 innerText、innerHTML和document.write 51.4 避免在页面绘图时执行其它操作 61.4.1 焦点移动延迟加数据 61.4.2 首次加载页面时延迟加载耗时的js代码 61.5 减少页面布局的复杂度 61.6 避免图片压缩拉伸 61.7 减小图片大小，规避大图片 61.8 控制页面图片数量 61.9 img标签和背景图 62 特效 72.1 移动 72.2 缩放 72.3 透明度改变 72.4 其他组合特效 83 多窗口与多帧的使用 83.1 多窗口的几种应用场景 83.2 弹出

3、窗口基本语法 83.3 自研浏览器扩展接口 93.4 Window对象 9ZXIPTV 3.0模版开发规范1 页面性能优化1.1 展示页面建议依据现网的数据统计分析来看，与数据库交互频繁，且页面元素复杂度较高，对EPG性能有影响，按其影响程度从高至低分别为频道切换、直播、点播、栏目展示、节目详细、首页、向第三方服务器发起http请求、回看。在设计模板页面时考虑的因素主要有：页面的主要组成元素、是否与数据库交互以及交互次数、是否包含小视频、是否包含滚动字幕、是否有文件IO操作以及交互次数。如下建议作为EPG模板开发人员的设计参考。页面构成元素元素数目元素限制菜单/按钮无无小视频1小视频大小不受限

4、制，数目同一个页面只能是一个海报不超过3建议图片大小在30K40K之间包含图片不超过8图片大小不受限制，根据局方需要而定文件IO1无滚动字幕1无数据库交互不超过5(海报)、(Datasource)、(Decorator)、(小视频)1.2 关注代码的执行效率1.2.1 禁止使用iframe由于自研浏览器是一个单线程的程序，对iframe的执行效率较低，且自研浏览器已经支持ajax，所以应用ajax来代替iframe。注意，在国内应用时的限制，由于电信/联通的浏览器规范中没有要求支持ajax，所以如果要考虑对其他厂家STB的兼容性，则不能使用ajax。1.2.2 避免使用epg:script标签

5、epg:script标签只是注册了一个按键响应函数，将其交给top框架中的js函数处理，由于top框架中的js函数代码复杂，执行慢，所以 应避免使用此标签，而改为直接在页面捕获按键，页面不处理的按键再交给top框架函数处理。如果需要屏蔽掉页面上的某些按键也可以在相应的按键方法里写个空的方法。1.2.3 缓存常用值，避免重复查询。目前，自研浏览器的document.getElementById方法由于是遍历方式查找DOM节点，执行效率很低，需要考虑根据id缓存页面元素，提高js运行速度，示例如下：var $ = ; function $(id) if(!$id) $id = document.g

6、etElementById(id); return $id; for (var i = 0; i arr.length; i+) . 改为 for (var i = 0, l = arr.length; i l; i+) . 1.2.4 Javascirpt命名空间使用js命名空间是代码层次更加清晰，易于功能代码合并，避免命名冲突可以利用js的单实例模式实现命名空间，代码示例： var viettel; if(!viettel) viettel = viettel.mp3 = function() /命名空间里可以声明局部变量和方法 var x =1; var addToPlaylist =

7、function(itemid,programname) . var showPost = function(postpath) . /返回一个对象 return addToPlaylist : function(itemid,programname) addToPlaylist(itemid,programname); /调用命名空间里的方法 , showPost : function(postpath) showPost(postpath); (); /调用 viettel.mp3.addToPlaylist(1,00000028); 1.2.5 全局变量应该放在js代码的最上方 在js代

8、码很多时全局变量作为作用域链的最上层，在方法里获取的时候本来就要比局部变量来的慢。js自上而下的查找全局变量，所以声明在js代码上方比下方速度快很多。 Beeline的TV GUIDE页面就遇到过这个情况。使用js命名空间也可以缓解这个问题。1.2.6 避免同时进行多次的dom操作避免同时进行多次的dom操作，这样效率很低，可以换其他方式达到效果。比如，要隐藏多个div或者展示多个div，可以把这些div放在一个大的div中，并直接操作大div。function showLayer() $(channelsearch_sub_viewsect10_bg).style.visibility =

9、visible; $(sub_sect10).style.visibility = visible ; $(sub_sect60).style.visibility = visible ; $(channel_search).style.visibility = visible; $(channelsearch_subpageNo).style.visibility = visible;html代码 CH Name 1.2.7 复杂的逻辑能用java尽量用java解决不要用js用户请求jsp后台通过多线程运行单实例的servlet代码，java的运行速度基本可以忽略。而页面展示主要时间消耗在网

10、络数据传输和浏览器解析排版上。复杂的逻辑处理放在服务器端可以提高页面响应速度。例如，xx模板的音乐播放列表要求按两种方式排序，并考虑有接节目置顶，置底。而EPG和机顶盒都没有提供相关接口只有一个数据源接口，需要模板先取出数据再按方式排序并根据记录信息置顶置底。很显然这些逻辑放在java里实现比用js速度会快很多，特别当节目很多的时候。1.2.8 JS数组、对象声明方式采用JSON格式var arr = ; 取代 var arr = new Array();var obj = ; 取代var obj = new Object();1.2.9 字符串连接优化以数组的push、join方法代替多次字

11、符串+号链接。var str = ;for (var i = 0; i 10000; i+) str += test + i; 改为 var aryStr = ; for (var i = 0; i 10000; i+) aryStr.push(“test”, i); str = aryStr.join();1.2.10 用cloneNode(true)代替多次createElement操作在循环中多次调用document.createElement动态创建DOM元素（显示列表一行数据，特别是复杂结构元素），可以先在页面定义一个隐藏的元素（里面可能包含其他元素），调用其cloneNode(tr

12、ue)创建。 for (var i = 0; i 8; i+) var newElement = document.createElement(“div”); var newSpan = document.createElement(“span”); newElement.appendChild(newSpan); . newElement.id = “.”; new Element.style. 改为页面中： .var basicNode = document.getElementById(“id”); /页面中定义的隐藏divfor (var i = 0; i 8; i+) var new

13、Element = basicNode.cloneNode(true); newElement.style.visibility = “visible”; newElement.id = “.”; new Element.style. 1.2.11 类的共用方法声明通过prototype为每个实例共享原型链的方法，不用每次创建。function test(id, name) this.id = id; this.name = name; this.setId = function(newId) this.id = newId; Setter、getter改为function test(id,

14、name) this.id = id; this.name = name;test.prototype.setId = function(newId) this.id = newId;1.3 减小页面刷新区域目前浏览器刷新区域的大小由更改元素所属的父节点决定，由于终端设备性能上的瓶颈，图形能力处理不够强大，应尽量减少每次页面刷新区域的大小。需要频繁修改的局部布局（如焦点移动）要尽量限制其父节点范围，避免过大范围刷新，Body下面的DOM节点的变动都是全屏刷新的，这个需要注意。同时还要注意，限制的刷新区域过小会导致浏览器刷新不全留下残影的现象。1.3.1 innerText、innerHTML和

15、document.write当需要使用js代码改变页面显示布局时，应尽量使用innerText，少用innerHTML，不要用document.write。因为后两者浏览器处理慢，innerHTML会影响这个小DOM节点的属性和布局，document.write则直接影响整个页面的DOM，innerText只影响文本节点而不对element节点产生影响，而且innerText可以处理特殊字符（如“”等），不会因为文本中包含这些特殊字符导致排版出错。1.4 避免在页面绘图时执行其它操作由于浏览器排版绘图是一个很消耗时间的过程，且在此期间不会响应其他操作，用户体验很差，故应避免绘图对用户操作造成的

16、不良影响。1.4.1 焦点移动延迟加数据页面经常涉及到焦点落到某个位置上加载海报，标题等描述信息。比如vod，music列表页这时候可以考虑使用setTimeout延迟加载，这样会提高页面反应速度。setTimeout需要特别注意的是及时清除定时任务。比如焦点在第一个节目上我现在只关注第3个节目的海报或者描述信息。如果用延迟加载焦点经过第2个节目时就不需要加载展示了。1.4.2 首次加载页面时延迟加载耗时的js代码有些页面首次加载页面时还要执行很耗时的js操作。这时我们可以考虑用定时器先让页面的div和图片先展示出来再执行js。如果不用定时器直接在onload句柄中执行机顶盒中的浏览器会直到j

17、s运行完成再展示页面。比如beeline的LPVR预约列表展示页。首次进入页面肯定需要解析xml获得数据，数据量大的话速度会很慢。而页面会等js解析完后再展示，用户体验很差。1.5 减少页面布局的复杂度浏览器解析一个页面并布局完成需要遍历完整个DOM才会进行，DOM的结构越复杂，布局排版的时间就越长，DOM的层次越深，相对应的内存和运算等消耗也会更大，所以要尽量减少页面布局的复杂度，能用一个div元素完成的布局不要用两个或多个去实现，另外要减少空的和多余的布局元素。由于table的实现至少为三层（table-tr-td）所以用table布局元素信息会较为繁琐，性能不高，应尽量用div代替。1.

18、6 避免图片压缩拉伸图片拉伸和压缩占用较多的cpu处理时间，所以要尽量避免，尤其避免拉伸压缩图片的移动，这种操作机顶盒处理很慢。尽量保证用原有图片的大小展示。1.7 减小图片大小，规避大图片这里的大小不仅指原始文件字节数的大小，也只图片长宽尺寸的大小。前者影响下载速度，减慢页面加载时间；后者影响解析后占有的机顶盒内存量，由于机顶盒内存有限，不可能全部缓存所有图片，所以要尽量保证图片长宽尺寸也较小。举例说明：1个1280*720的png背景图片，解析后占有的机顶盒内存超过3M，而一般机顶盒可用于图片和文件缓存的内存最多30M（高清的盒子），而其中还要分出一大部分供图形加速使用。1.8 控制页面图

19、片数量页面图片数量不应太多（如：100多个），这个会发出100多个请求会影响性能，等待时间较多，需注意。一般出现此问题的情况是刚开机进行多个页面一同加载或者是某个页面中含大量小图片进行布局。可以将很多小图片整合到一个大图片中使用。1.9 img标签和背景图对于经常要切换图片的操作尽量用，应减少background的使用；这个主要是性能问题，用background的方式修改，对浏览器来说会多两层解析过程。2 特效特效实现中CSS3效果是较好的，这里列述的仅为CSS3特效实现。CSS3效果作用对象为div元素，请尽量不要直接对img应用该特效，以免引发浏览器bug2.1 移动设置元素布局方式为po

20、stion:absolute; 配合webkitTransitionDuration 属性修改元素的top和left值即可实现元素的移动特效。var obj2do = document.getElementById(divId);obj2do.style.top = 100px;obj2do.style.left = 200px;obj2do.style.webkitTransitionDuration = 500ms;2.2 缩放方案1: 配合webkitTransitionDuration 属性修改元素的width和height值即可实现元素缩放特效，此缩放是修改元素的高度和宽度的缩放，修

21、改的是指定元素本身的宽度和高度，其包含的子元素不受影响。例：如修改图片，直接对img做缩放。var obj2do = document.getElementById(divId );obj2do.style.width = 100px;obj2do.style.height = 200px;obj2do.style.webkitTransitionDuration = 500ms;方案2: 配合webkitTransitionDuration 属性修改元素的webkitTransform值即可实现元素缩放特效，此缩放是相对于元素中心点的缩放，修改的是元素和其包含的子元素，所有相关元素均被拉伸或

22、压缩。例：如修改图片，可对图片父元素或图片做缩放var node = document.getElementById(divId); node.style.webkitTransitionDuration = 300ms; node.style.webkitTransform = scale(1.5);注：正式使用时可能要结合left和top实现特定效果。2.3 透明度改变配合webkitTransitionDuration 属性修改元素的opacity值即可实现元素的移动特效。Opacity： 0完全透明 0.5半透明 1不透明(原始图片)var node = document.getEle

23、mentById(testDiv); node.style.webkitTransitionDuration = 1000ms; node.style.opacity = 0.5;扩展：呼吸效果：/* 功能：显示焦点框呼吸效果 */function focusBreath(focus) focus.style.webkitTransitionDuration = myApp.breathTime; clearInterval(focusBreathID); focusBreathID = setInterval(function() if (opacityOperation = 0) focu

24、s.style.opacity = 1; opacityOperation = 1; else focus.style.opacity = 0.5; opacityOperation = 0; , myApp.breathTime);2.4 其他组合特效通过配合js计时器，组合移动、缩放、透明度改变等可以实现多层图片显示、跳跃、图片交替等其他特效效果，具体实现需要配合具体需求制作。由于特效效果对终端性能要求高，不建议制作过于复杂的特效效果。3 多窗口与多帧的使用一个窗口的多帧是由frameset或则iframe 创建的，可以借助frames数组和parent，top等对象来访问一个窗口的不同帧

25、。模板页面就是用frameset标签创建了多个窗口。我们经常用top对象来获得页面的最上层的window对象，这里面有EPG提供的很多js方法。多窗口是由window.open()方法创建的。创建出来的窗口可以在任何窗口通过窗口的名字获取：window.getWindowByName(windowName); 一个窗口可以通过window.opener访问创建该窗口的window对象。熟悉了窗口与帧之间的关系以及访问方法可以很简单的解决多窗口的任何问题。多窗口可以缓存页面解决页面第一次进来展示慢的问题。多帧可以解决页面不刷新获取数据和页面刷新保存数据和执行定时任务功能。其中页面不刷新获取数据速度慢效率低尽量用ajax实现。机顶盒没有给主窗口起名字，所以机顶盒弹出来的tvms窗口无法获得原来的主窗口引用。但是可以获得任何一个多窗口的window对象进而得到创建该多窗口的窗口。3.1 多窗口的几种应用场景1，普通的弹出窗口，可以app键切换，可以del键关闭，如widget，tvms；2，提升性能的隐藏窗口，不可以app键切换到非当前的隐藏窗口，不可以del键关闭；3，类似IE模态对话框的阻塞式弹出窗口，不允许切换和关闭，必须关闭弹出窗口后，才能响应其他操作；StarHub版本的需求，提出了一