电视机顶盒web开发总结，避免踩坑。

原文链接： https://segmentfault.com/a/1190000015155152

1.电视机顶盒web开发总结

针对东方有线机顶盒UUTVOS操作系统中内置的联彤浏览器web开发，总结一些自己在开发中遇到的问题和技巧。浏览器是基于Firefox的阉割版，所以开发中有一些莫名其妙的坑。已经尝试过使用Vue开发机顶盒web项目，体验较差：首次加载时间长、页面卡顿。由于项目进度推进，当时没有尝试组件懒加载和路由懒加载处理，这样做或许可以减少首次加载时间。推荐使用 JQuery 进行开发。

---

1.1采坑预告

• 开发工具：WebStrom。它的Tools>Deployment可以配置连接远程服务器。随时上传代码。
• 开发中用到的技术：JQuery + Sass。
• 能用 HTML + CSS 呈现的东西，就不要用 JS 去动态控制。
• 避免使用“焦点”事件去触发非必要的操作。
• 当某段 JS 代码不运行的时候，试试给它加一个延时函数，遇到的问题都不再是问题。
• CSS布局推荐 position:absolute;进行定位，配合 display:inline-block;使用更佳。
• 标签是不兼容的。加载从服务器请求到的 .html 请使用 JQuery 的 .load() 大法。
• overflow:scroll，遥控器按键只能往下滚，不能往上滚。
• 切换播放多个视频，避免UI响应和视频播放卡顿，“防抖动”你值得拥有。

1.2开发总结

1.2.1一个WebStrom就够了 ☞↑

我们的后台是现成的，直接把代码拷贝到服务器上，在机顶盒上就可以随时预览到项目。

• WebStrom 的工具栏中的 Tools>Deployment 可以连接到配置远程服务器上，每次 CTRL + S 会自动上传项目文件,好用的不要不要的。墙裂推荐！
• 通过配置 WebStrom，可以监听编译 Sass 文件，CTRL + S 自动编译就是这么方便。
• 喜欢 VSCode 的话，未尝不可，或许 VSCode 里也有这些功能插件，我没去折腾罢了。
• 如果在 WS 中使用了 Sass 或者 Less ，每次保存的时候，被编译后的 CSS 文件是不会自动上传到服务器上的，需要在 WS 里手动上传。

1.2.2用自己喜欢的技术 ☞↑

• 机顶盒web开发官方文档推荐用原生 JS 开发，目前来看的话，JQ 用起来方便一些，暂时没有性能缺陷。
• Less、Sass 两个都大爱。变量的威力大大的，就算美工切得是1080p机器的图，我拿来布局到720p上，利用 Sass 的变量和计算特性，非常容易控制CSS中的属性值。
• 做列表渲染的时候用到了 art-template，腾讯出的一个模板引擎，参考它的文档，还是很容易上手的。官方文档。

1.2.3少用JS控制呈现 HTML 元素 ☞↑

机顶盒浏览器的性能非常低，如果还要做视频播放的话，JS 可发挥的空间相当有限。

• 一个 Tab 栏下有6个选项，选项里面 HTML 结构基本都是相同的，如果你打算用 JS 复用相同结构的 HTML 代码的话，赶紧停下，像我图片上这样老老实实的 copy 和 paste HTML代码吧。不然切换 Tab 的时候，随机的卡顿很恶心。
  
• 类似 $(id).css({"backgroundImage":"url('...')"}) 和 $(id).attr({"src":"./*.jpg"}) 这样的在 JS 里面控制 UI 显示层面的操作要避免，尽量直接在 HTML 中完成，最多能接受这个操作： $(id).addClass()。机顶盒浏览器就是这么傲娇。（这是我试出来的，至于JQ操作性能方面的差异本质还是需要研究的。）
• 机顶盒web中按钮的尺寸一般都很大，按钮背景图这些东西，就不要在 JS 中去操作，如果播放视频引起了性能高损耗，这个时候web中的UI卡的你一愣一愣的。

1.2.4“焦点事件”使用一时爽 ☞↑

• 一定要避免使用"焦点事件"触发相关操作，焦点事件是高频率的系统事件，web在机顶盒运行时，焦点事件一般不受开发人员的绝对控制。“失去焦点”事件同样要避免使用。
• “焦点事件”与“上下左右按键事件”具有一定的耦合性，“焦点事件”使用不当，问题百出。
• 上下左右按键事件，一般都可以替换焦点事件。
• a:focus {} 这个CSS选择器可以放心的使用。

1.2.5万能的 setTimeout() ☞↑

机顶盒内置的浏览器很恶心啊，阉割版的就算了，一些逻辑上的东西跟PC上也不同。

• 一些操作无论怎么写都不运行，或者拿不到值（null），特别是在页面加载、父子页面跳转这些场景下。给它加个 setTimeout(function(), ms) 就搞定了，百试百灵，一般人我都不告诉他^_^。

$(document).keydown(function () {
    if (event.which  === 4097) {
        var distance = $("#list").scrollTop();
        sessionStorage.removeItem("listScrollTopVal");
        sessionStorage.setItem("listScrollTopVal", JSON.stringify(distance));
        // 按下确定键后，把获得焦点的元素的 id 保存到 sessionStorage中，
        // 这个时候就要在外边加一个延时函数，甚至可以将时间设置成 0ms 也行。
        setTimeout(function () {
            sessionStorage.removeItem("listFocusItemId");
            sessionStorage.setItem("listFocusItemId",JSON.stringify(document.activeElement.id));
        }, 100);
    }
});

1.2.6绝对定位position:absolte;省时省力 ☞↑

• 机顶盒的可视区域是固定的，绝对定位是最省时省力的。
• 拥有绝对定位元素的父元素必须是 position:relative定位，这个是必须的！
• 多个块级元素排列在同一行，考虑使用display:inline-block;，优于使用flaot:...浮动布局。

1.2.7overflow:scroll;不能往上滚动 ☞↑

电视机的可视区域固定，整个页面是不滚动的，业务场景中，页面中的局部需要滚动：列表页、详情页。

• 在PC上，给需要滚动的元素设置：overflow：scroll; 会出现滚动条，实现滚动。但是在电视机顶盒上，出现了：能往下滚动，不能往上滚动的问题。
• 解决办法：给需要滚动的元素包裹一个 。并且必须设置display:block。；

    
      
需要滚动的内容
    
  

1.2.8切换视频播放，加防抖必不可少 ☞↑

机顶盒浏览器的性能本来就很差，在同一个页面的 Tab 上切换多个视频播放，按键过快的情况下，UI上焦点连续切换过去很多个元素了，视频的播放地址才挨个往过去切换，这个时候很容易造成卡顿或者浏览器假死。

• 防抖其实就是一个延时函数，可以想象成：刷卡上公交车，只要有人刷卡，司机就不能开车。

$("#nav--second").keydown(function(event){
    if(event.which === 39) {
        // 这里的EVAN是一个全局的命名空间，EVAN.timer是一个全局变量
        clearTimeout(EVAN.timer);
        EVAN.timer = setTimeout(function () 
        create(EVAN.homePageVideoUrlArr[2]);
        }, EVAN.gap);  // 时间1-2s左右比较合适。
    }
});