目录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 <epg:Out>(海报)、<epg:Operate>(Datasource)、<epg:Table>(Decorator)、<epg:FirstPage>(小视频)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的单实例模式实现命名空间，代码示例：<script language="javascript" >var viettel;if(!viettel){viettel ={}}viettel.mp3 = function(){//命名空间里可以声明局部变量和方法var x =1;var addToPlaylist = 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);</script>1.2.5全局变量应该放在js代码的最上方在js代码很多时全局变量作为作用域链的最上层，在方法里获取的时候本来就要比局部变量来的慢。
js自上而下的查找全局变量，所以声明在js代码上方比下方速度快很多。
Beeline的TV GUIDE页面就遇到过这个情况。
使用js命名空间也可以缓解这个问题。
1.2.6避免同时进行多次的dom操作避免同时进行多次的dom操作，这样效率很低，可以换其他方式达到效果。
比如，要隐藏多个div或者展示多个div，可以把这些div放在一个大的div中，并直接操作大div。
function showLayer(){$("channelsearch_sub_viewsect10_bg").style.visibility = "visible";$("sub_sect10").style.visibility = " visible ";……$("sub_sect60").style.visibility = " visible ";$("channel_search").style.visibility = "visible";$("channelsearch_subpageNo").style.visibility = "visible";}html代码<div id="sub_sect10" class="cells_10" style="visibility:hidden; position:absolute; left:490px; top:308px; width:89px; height:146px; overflow:hidden; z-index:3; border: 1px solid #35363E;"><div id="channelsearch_sub10_16" style="background-color:transparent; position:absolute; left:0px; top:0px; width:90px; height:21px; overflow:hidden; font: bold 16px Arial;color:#666688; text-align:center;" >CH Name</div><div id="channelsearch_sub10_17" style="background-color:#303030; position:absolute; left:0px; top:30px; width:90px; height:20px; overflow:hidden; font: bold 14px Arial;color:#9497aa; text-align:center;" ></div><div id="channelsearch_sub10_18" style="background-color:#303030; position:absolute; left:0px; top:59px; width:90px; height:20px; overflow:hidden; font: bold 14px Arial;color:#9497aa; text-align:center;" ></div><div id="channelsearch_sub10_19" style="background-color:#303030; position:absolute; left:0px; top:88px; width:90px; height:20px; overflow:hidden; font: bold 14px Arial;color:#9497aa; text-align:center;" ></div><div id="channelsearch_sub10_20" style="background-color:#303030; position:absolute; left:0px; top:117px; width:90px; height:20px; overflow:hidden; font: bold 14px Arial;color:#9497aa; text-align:center;" ></div></div>1.2.7复杂的逻辑能用java尽量用java解决不要用js用户请求jsp后台通过多线程运行单实例的servlet代码，java的运行速度基本可以忽略。