收藏

下载资源 加入VIP,免费下载

第1页 / 共17页

第2页 / 共17页

第3页 / 共17页

第4页 / 共17页

第5页 / 共17页

#303030;position:

absolute;left:

0px;top:

59px;width:

90px;height:

20px;overflow:

hidden;font:

bold14pxArial;color:

#9497aa;text-align:

center;">

#303030;position:

absolute;left:

0px;top:

88px;width:

90px;height:

20px;overflow:

hidden;font:

bold14pxArial;color:

#9497aa;text-align:

center;">

#303030;position:

absolute;left:

0px;top:

117px;width:

90px;height:

20px;overflow:

hidden;font:

bold14pxArial;color:

#9497aa;text-align:

center;">

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

用户请求jsp后台通过多线程运行单实例的servlet代码，java的运行速度基本可以忽略。

而页面展示主要时间消耗在网络数据传输和浏览器解析排版上。

复杂的逻辑处理放在服务器端可以提高页面响应速度。

例如，xx模板的音乐播放列表要求按两种方式排序，并考虑有接节目置顶，置底。

而EPG和机顶盒都没有提供相关接口只有一个数据源接口，需要模板先取出数据再按方式排序并根据记录信息置顶置底。

很显然这些逻辑放在java里实现比用js速度会快很多，特别当节目很多的时候。

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

vararr=[];取代vararr=newArray（）;

varobj={};取代varobj=newObject（）;

1.2.9字符串连接优化

以数组的push、join方法代替多次字符串+号链接。

varstr=‘’;

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

str+=‘test’+i;

}

改为

vararyStr=[];

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

aryStr.push（“test”,i）;

}

str=aryStr.join（‘’）;

1.2.10用cloneNode（true）代替多次createElement操作

在循环中多次调用document.createElement动态创建DOM元素（显示列表一行数据，特别是复杂结构元素），可以先在页面定义一个隐藏的元素（里面可能包含其他元素），调用其cloneNode（true）创建。

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

varnewElement=document.createElement（“div”）;

varnewSpan=document.createElement（“span”）;

newElement.appendChild（newSpan）;

….

newElement.id=“..”;

newElement.style..

…

}

改为

页面中：

hidden”>

…

….

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版本的需求，提出了一个窗