1。电视机顶盒web开发总结针对东方有线机顶盒UUTVOS操作系统内置的联通浏览器的web开发，总结开发中遇到的一些问题和技巧。该浏览器基于Firefox的阉割版，因此在开发中存在一些莫名的陷阱。尝试过用Vue开发机顶盒web项目，体验很差：第一次加载时间长，页面卡顿。由于项目进度，当时没有尝试组件延迟加载和路由延迟加载，可能会减少首次加载时间。推荐使用JQuery进行开发。1.1矿坑预测开发工具：WebStrom。它的工具>部署可以配置为连接到远程服务器。随意上传代码。开发中使用的技术：JQuery+Sass。不要用JS来动态控制可以用HTML+CSS呈现的东西。避免使用“焦点”事件触发不必要的动作。当某段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代码，赶快停下来，老老实实复制粘贴HTML，就像我图中的那样。编码吧。否则，切换标签时，随机滞后令人作呕。就像操作中的$(id).css({"backgroundImage":"url('...')"})和$(id).attr({"src":"./*.jpg"})应避免在JS中控制UI显示级别。尝试直接在HTML中完成它。最可接受的操作是：$(id).addClass()。机顶盒浏览器就是这么嚣张。（这个是我试过的，至于JQ运行性能差异的本质，还有待研究。）按钮不应该在JS中操作。如果你播放视频造成高性能损失。这时，你被web中的UI卡片惊呆了。1.2.4“焦点事件”是使用的大好时机?↑一定要避免使用“焦点事件”触发相关操作。焦点事件是高频系统事件。当网络在机顶盒上运行时，焦点事件一般不在开发者的绝对控制之下。还应避免“失去焦点”事件。“焦点事件”与“上下左右按钮事件”有一定的耦合性，“焦点事件”使用不当，会出现很多问题。上、下、左、右按钮事件一般可以替代焦点事件。a:focus{}这个CSS选择器可以放心使用。1.2.5万能setTimeout()?↑机顶盒自带的浏览器都恶心，更别说阉割版了，有些逻辑上的东西和PC上的不一样。有些操作不管怎么写都运行不了，或者取不到值（null），尤其是页面加载、父子页面跳转等场景。给它加一个setTimeout(function(),ms)，就搞定了。我不会告诉一般人^_^。$(document).keydown(function(){if(event.which===4097){vardistance=$("#list").scrollTop();sessionStorage.removeItem("listScrollTopVal");sessionStorage.setItem("listScrollTopVal",JSON.stringify(distance));//按下OK键后，将获得焦点元素的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:...floating布局更好。1.2.7溢出：滚动；无法向上滚动?↑电视可见区域固定，整个页面不滚动。在业务场景中，部分页面需要滚动：列表页和详情页。在PC端，为需要滚动的元素设置：overflow:scroll；会出现滚动条实现滚动。但是在电视机顶盒上，有一个问题：可以向下滚动，但是不能向上滚动。解决方案：将
