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

时间 2019-11-15

标签电视机顶盒 web 开发总结避免栏目 HTML 繁體版

原文原文链接

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

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

1.1采坑预告

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

1.2开发总结

1.2.1一个WebStrom就够了 ☞↑

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

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 可发挥的空间至关有限。git

一个 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上也不一样。github

一些操做不管怎么写都不运行，或者拿不到值（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.7`overflow:scroll;`不能往上滚动 ☞↑

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

在PC上，给须要滚动的元素设置：overflow：scroll; 会出现滚动条，实现滚动。可是在电视机顶盒上，出现了：能往下滚动，不能往上滚动的问题。
解决办法：给须要滚动的元素包裹一个 <a href="#"></a>。而且必须设置display:block。；

<div class="content">
    <a href="#/" style="display:block;outline:none;">
      <div class="content-html">须要滚动的内容</div>
    </a>
  </div>
复制代码

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

机顶盒浏览器的性能原本就不好，在同一个页面的 Tab 上切换多个视频播放，按键过快的状况下，UI上焦点连续切换过去不少个元素了，视频的播放地址才挨个往过去切换，这个时候很容易形成卡顿或者浏览器崩溃。加上放抖动，有效解决用户快速切换播放引发的卡顿。gulp

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

$("#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左右比较合适。
    }
});
复制代码