电视机顶盒web开发总结,避免踩坑
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;
使用更佳。 <iframe></iframe>
标签是不兼容的。加载从服务器请求到的 .html 请使用 JQuery 的.load()
大法。overflow:scroll
,遥控器按键只能往下滚,不能往上滚。- 切换播放多个视频,避免UI响应和视频播放卡顿,“防抖动”你值得拥有。
- gulp 压缩代码和图片,为首次加载提速,图片压缩率达90%,不失真。
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;
会出现滚动条,实现滚动。但是在电视机顶盒上,出现了:能往下滚动,不能往上滚动的问题。 - 解决办法:给需要滚动的元素包裹一个
<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上焦点连续切换过去很多个元素了,视频的播放地址才挨个往过去切换,这个时候很容易造成卡顿或者浏览器崩溃。加上放抖动,有效解决用户快速切换播放引起的卡顿。
- 防抖其实就是一个延时函数,可以想象成:刷卡上公交车,只要有人刷卡,司机就不能开车。
$("#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左右比较合适。}
});
电视机顶盒web开发总结,避免踩坑相关推荐
- 电视机顶盒web开发总结,避免踩坑。
1.电视机顶盒web开发总结 针对东方有线机顶盒UUTVOS操作系统中内置的联彤浏览器web开发,总结一些自己在开发中遇到的问题和技巧.浏览器是基于Firefox的阉割版,所以开发中有一些莫名其妙的坑 ...
- 我的物联网开发入门和踩坑历程
我的M5Stack物联网开发入门和踩坑历程:基于M5STACK和ONENET 开发准备 M5STACK简介 环境配置 UIflow环境 ESP-IDF环境 方法一 方法二(更推荐) 感知模块 网络连接 ...
- 作为 Web 开发人员我踩过哪些技术的坑?
作者 | Sunil Sandhu 译者 | 弯月 出品 | CSDN(ID:CSDNnews) 回想当初,大约 2015 年的时候,我开始学习 Web 开发,在这期间内我浪费了大量时间来学习网上的文 ...
- Android SDK 开发——发布使用踩坑之路
前言 在 Android 开发过程中,有些功能是通用的,或者是多个业务方都需要使用的. 为了统一功能逻辑及避免重复开发,因此将该功能开发成一个 SDK 是相当有必要的. 背景 刚好最近自己遇到了类似需 ...
- uniapp开发聊天APP踩坑记录
最近工作重心转移到了uniapp上,有一说一,这个框架跨端确实牛逼,一套代码能一次编译到多端使用.但随之而来的兼容性问题也是层出不穷,同样的在面临APP底层的改动也显得力不从心.同时,uniapp的性 ...
- 高德地图开发-常用api踩坑使用
一.高德地图的加载初始化 在这就踩过很多坑,新建项目正常显示没问题,放到我们的项目就是不显示,加载不出来, 这个时候不要慌,只要确保下面三部完成就莫问题了 1.引入高德地图开发者api <scr ...
- Could not resolve all files for configuration “: app: debug Compileclasspath“ mac开发 cordova build踩坑
作为小白第一次开发android,想到会踩坑,没想到这么多.话不多说直接上主题,在做基于ionic + cordova安卓开发时遇到了一个打包的问题,如下图. Could not resolve al ...
- 《Python Web开发实战》踩地雷记17/3/25
写东西一定要随时保存,昨天晚上又被自己给坑了,悲伤脸. 1.vim 设置vim中Tab的缩进 cd ~vim .vimrc 在文件中输入下面的内容并保存 set tabstop=4 set shift ...
- 开源大数据开发平台DataSphereStudioLinkis踩坑记录
Linkis:https://github.com/WeBankFinTech/Linkis DataSphereStudio:https://github.com/WeBankFinTech/Dat ...
最新文章
- JS简单实现自定义右键菜单
- jdbcpingquery mysql_JDBC - liuping - 博客园
- java文件名特殊字符_如果拒绝打开文件名中带有特殊字符的文件,如何修复Java?...
- ZK的实际应用:MVVM –加载和渲染数据
- 区间覆盖全部类型及部分精选习题汇总详解(贪心策略)
- 降低成本,提高生产力—8句话讲清RPA的部署 1
- Windows命令提示符中的别名
- python @的作用
- 拓端tecdat|R语言CRAN软件包Meta分析
- vnc远程控制软件怎么用,在Windows中vnc远程控制软件怎么用
- WORD VBA 操作WORD 文本框
- 蚁群算法画图java_[转载]简单蚁群算法 + JAVA实现蚁群算法
- js判断浏览器类型,判断ie内核,webkit
- 克罗内克积 (Kronecker product) 在线性矩阵不等式 (LMI) 中怎么描述
- 【转】 计算机视觉、图像处理学习资料汇总
- MacBookPro 18款 连接上WiFi却无法上网
- 线性模型(二)-- 线性回归公式推导
- Java如何打印九九乘法表
- 分享一下自己做电影解说的步骤流程和经验,小白必看!
- arduino接收hmi屏幕_求助 连接 Arduino 与威伦通触摸屏
热门文章
- win7系统如何安装python_win7系统中怎么安装Python 3.5.1|win7系统安装Python 3.5.1的方法...
- 从 0 到 1 实现国产数据库
- [附源码]计算机毕业设计Python酒店客房管理系统(程序+源码+LW文档)
- Github换了新头像,这周是您入职的第三周,,,
- 基于PLC数控钻床控制系统设计(说明书+开题报告+CAD 接线图 梯形图 原理图)
- 不同电脑iTunes同步时文件夹分类丢失的解决办法
- PHP一句话木马攻防
- 包小盒ai插件打不开怎么办
- 用sumproduct函数计算组内排名
- abstract类和方法