ZEPG

Appearance

快速开始 ​

硬件 ​

PC、机顶盒、网络集线器（也就是HUB，也可以使用镜像功能的交换机Switch）。

常用开发软件推荐 ​

编辑器：vscode/webstom

文件对比工具 ：beyond cpmpare（方便对比同一套代码不同平台版本）

浏览器调试 ：Chrome

数据抓包工具 ：Wireshark

数据接口模拟 ：postMan/apiPost/Apifox

Git可视化工具 ：TortoiseGit/Sourcetree

流媒体播放器：VLC

2.0版本盒子兼容适配注意问题 ​

  1. html5新特性的东西基本不支持。如（语义化标签、canvas）等不建议使用。 div img span标签即可满足开发

  2. 页面布局尽量用定位方式实现。减少盒子兼容适配问题

  3. css3的一些新特性也不建议使用、如伪类选择器、trasation过度动画等

  4. JS方面ES6的新特性禁用。2.0版本盒子无法兼容。

性能优化 ​

一、 减少请求数：一般一个页面最好在5个以内的请求，当请求达到10个以上，速度明显慢很多

  1. 减少图片数量，可将多张图片整合在一起，每一张图片都是一个请求。

  2. 绝对不要存在请求不到的资源，也就是不能存在HTTP 404资源。

  3. 减少iframe的请求数。

  4. 减少AJAX的请求。

  5. 通过AJAX异步进行延迟加载资源。

  6. 合并javascript和CSS。

二、 JS代码

  1. 尽量不要使用JQuery，大部分机顶盒不支持。

  2. 合并并最小化JAVASCRIPT。

  3. 将小的js内嵌到页面里。

  4. 注意机顶盒对按键的兼容性，一般标清只支持onkeypress，大多数不支持onkeydown，如果尝试使用会造成机顶盒卡死。如果两种按键都支持可以JS进行按键判断让其只执行一次按键。

  5. 尽量使用AJAX的GET异步请求，少用POST请求。

  6. 尽量使用for，而不是each。

  7. 尽量少使用eval。

  8. 尽量使用getElementById去访问，不要使用getElementsByName、getElementsByClassName、getElementsByTagName，大部分机顶盒不兼容这些方法。

  9. 尽量使用join方法去拼接字符，少用concat函数，或者+= 这样的运算符。

  10. 重写系统事件时都尽量都返回false或0、null，比如系统按键、播放等事件。

  11. 将共用的js 抽出出来放在外部供其它页面调用。

三、 图片

  1. 透明效果的图片尽量使用png、少使用gif。

  2. 压缩jpg，删除jpg中不必要的信息。

  3. 不能使img的src留空，因为有一些机顶盒会进行额外的请求，更不能设置一个不存在的值。

  4. 不要在EPG前端缩放图片大小，图片可以按实际尺寸设计，也就是在img标签中尽量不要存在width、height属性。

  5. 延迟加载图片，不是所有图片马上呈现，可按需显示图片。

四、 CSS

  1. 避免CSS @import，@import大部分机顶盒不支持，应使用link。

  2. 将小的CSS内嵌到页面里。

  3. 合并并最小化CSS。

  4. 将CSS压缩。

  5. 干掉多余不需要的CSS。

五、 Javascript

  1. 尽量少使用document.write。

  2. 延迟加载javascript。

  3. 调整JS顺序，将用在onload的尽量放在html文件后面。

  4. 将JS压缩。

  5. 不能使用event作函数名。