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

varbasicNode=document.getElementById（“id”）;//页面中定义的隐藏div

for（vari=0;i<8;i++）{

varnewElement=basicNode.cloneNode（true）;

newElement.style.visibility=“visible”;

newElement.id=“..”;

newElement.style..

…

}

1.2.11类的共用方法声明

通过prototype为每个实例共享原型链的方法，不用每次创建。

functiontest（id,name）{

this.id=id;

this.name=name;

this.setId=function（newId）{

this.id=newId;

}

Setter、getter

}

改为

functiontest（id,name）{

this.id=id;

this.name=name;

}

test.prototype.setId=function（newId）{

this.id=newId;

}

1.3减小页面刷新区域

目前浏览器刷新区域的大小由更改元素所属的父节点决定，由于终端设备性能上的瓶颈，图形能力处理不够强大，应尽量减少每次页面刷新区域的大小。

需要频繁修改的局部布局（如焦点移动）要尽量限制其父节点范围，避免过大范围刷新，Body下面的DOM节点的变动都是全屏刷新的，这个需要注意。

同时还要注意，限制的刷新区域过小会导致浏览器刷新不全留下残影的现象。

1.3.1innerText、innerHTML和document.write

当需要使用js代码改变页面显示布局时，应尽量使用innerText，少用innerHTML，不要用document.write。

因为后两者浏览器处理慢，innerHTML会影响这个小DOM节点的属性和布局，document.write则直接影响整个页面的DOM，innerText只影响文本节点而不对element节点产生影响，而且innerText可以处理特殊字符（如“<”、“>”等），不会因为文本中包含这些特殊字符导致排版出错。

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

由于浏览器排版绘图是一个很消耗时间的过程，且在此期间不会响应其他操作，用户体验很差，故应避免绘图对用户操作造成的不良影响。

1.4.1焦点移动延迟加数据

页面经常涉及到焦点落到某个位置上加载海报，标题等描述信息。

比如vod，music列表页

这时候可以考虑使用setTimeout延迟加载，这样会提高页面反应速度。

setTimeout需要特别注意的是及时清除定时任务。

比如焦点在第一个节目上我现在只关注第3个节目的海报或者描述信息。

如果用延迟加载焦点经过第2个节目时就不需要加载展示了。

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

有些页面首次加载页面时还要执行很耗时的js操作。

这时我们可以考虑用定时器先让页面的div和图片先展示出来再执行js。

如果不用定时器直接在onload句柄中执行机顶盒中的浏览器会直到js运行完成再展示页面。

比如beeline的LPVR预约列表展示页。

首次进入页面肯定需要解析xml获得数据，数据量大的话速度会很慢。

而页面会等js解析完后再展示，用户体验很差。

1.5减少页面布局的复杂度

浏览器解析一个页面并布局完成需要遍历完整个DOM才会进行，DOM的结构越复杂，布局排版的时间就越长，DOM的层次越深，相对应的内存和运算等消耗也会更大，所以要尽量减少页面布局的复杂度，能用一个div元素完成的布局不要用两个或多个去实现，另外要减少空的和多余的布局元素。

由于table的实现至少为三层（table-tr-td）所以用table布局元素信息会较为繁琐，性能不高，应尽量用div代替。

1.6避免图片压缩拉伸

图片拉伸和压缩占用较多的cpu处理时间，所以要尽量避免，尤其避免拉伸压缩图片的移动，这种操作机顶盒处理很慢。

尽量保证用原有图片的大小展示。

1.7减小图片大小，规避大图片

这里的大小不仅指原始文件字节数的大小，也只图片长宽尺寸的大小。

前者影响下载速度，减慢页面加载时间；后者影响解析后占有的机顶盒内存量，由于机顶盒内存有限，不可能全部缓存所有图片，所以要尽量保证图片长宽尺寸也较小。

举例说明：

1个1280*720的png背景图片，解析后占有的机顶盒内存超过3M，而一般机顶盒可用于图片和文件缓存的内存最多30M（高清的盒子），而其中还要分出一大部分供图形加速使用。

1.8控制页面图片数量

页面图片数量不应太多（如：

100多个），这个会发出100多个请求会影响性能，等待时间较多，需注意。

一般出现此问题的情况是刚开机进行多个页面一同加载或者是某个页面中含大量小图片进行布局。

可以将很多小图片整合到一个大图片中使用。

1.9img标签和背景图

对于经常要切换图片的操作尽量用，应减少background的使用；这个主要是性能问题，用background的方式修改，对浏览器来说会多两层解析过程。

2特效

特效实现中CSS3效果是较好的，这里列述的仅为CSS3特效实现。

CSS3效果作用对象为div元素，请尽量不要直接对img应用该特效，以免引发浏览器bug

2.1移动

设置元素布局方式为postion:

absolute;配合webkitTransitionDuration属性修改元素的top和left值即可实现元素的移动特效。

varobj2do=document.getElementById（"divId"）;

obj2do.style.top="100px";

obj2do.style.left="200px";

obj2do.style.webkitTransitionDuration="500ms";

2.2缩放

方案1:

配合webkitTransitionDuration属性修改元素的width和height值即可实现元素缩放特效，此缩放是修改元素的高度和宽度的缩放，修改的是指定元素本身的宽度和高度，其包含的子元素不受影响。

例：

如修改图片，直接对img做缩放。

varobj2do=document.getElementById（"divId"）;

obj2do.style.width="100px";

obj2do.style.height="200px";

obj2do.style.webkitTransitionDuration="500ms";

方案2:

配合webkitTransitionDuration属性修改元素的webkitTransform值即可实现元素缩放特效，此缩放是相对于元素中心点的缩放，修改的是元素和其包含的子元素，所有相关元素均被拉伸或压缩。

例：

如修改图片，可对图片父元素或图片做缩放

varnode=document.getElementById（"divId"）;

node.style.webkitTransitionDuration="300ms";

node.style.webkitTransform="scale（1.5）";

注：

正式使用时可能要结合left和top实现特定效果。

2.3透明度改变

配合webkitTransitionDuration属性修改元素的opacity值即可实现元素的移动特效。

Opacity：

0完全透明0.5半透明1不透明（原始图片）

varnode=document.getElementById（"testDiv"）;

node.style.webkitTransitionDuration="1000ms";

node.style.opacity=0.5;

扩展：

呼吸效果：

/**功能：

显示焦点框呼吸效果**/

functionfocusBreath（focus）{

focus.style.webkitTransitionDuration=myApp.breathTime;

clearInterval（focusBreathID）;

focusBreathID=setInterval（function（）{

if（opacityOperation==0）{

focus.style.opacity=1;

opacityOperation=1;

}else{

focus.style.opacity=0.5;

opacityOperation=0;

}

},myApp.breathTime）;

}

2.4其他组合特效

通过配合js计时器，组合移动、缩放、透明度改变等可以实现多层图片显示、跳跃、图片交替等其他特效效果，具体实现需要配合具体需求制作。

由于特效效果对终端性能要求高，不建议制作过于复杂的特效效果。

3多窗口与多帧的使用

一个窗口的多帧是由frameset或则iframe创建的，可以借助frames数组和parent，top等对象来访问一个窗口的不同帧。

模板页面就是用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版本的需求，提出了一个窗

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

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

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。