IPTV中的EPG前端优化

先看一下IPTV相关情况:

l 目前TPTV市场情况

a) 截止今年2月,全国IPTV总用户数达3630.2万,我国移动互联网用户规模接近9亿,人均月接入量近300M,8M宽带达半数,光纤近4成。

图 1我国整体数字电视转换情况

图 2各省数字电视用户规模及有线数字化程度

b) 今年 3 月通信业经济运行情况显示,三家基础电信企业电信业务总量完成1810.1 亿元,同比增长 22.7%,比同期增速高 7.7 个百分点;

l 中国目前市场上电信IPTV机顶盒主要有:【标清】:华为、中兴、长虹、UT、MOTO、烽火、大亚、同洲、九联、贝尔、创维、朝歌、大华、数源。【高清】:华为、中兴、MOTO、大亚、朝歌、烽火、同洲、海信、创维、凯天、UT、长虹、贝尔、飞越、九联、数源。

从上面可以看出来,以后会对IPTV的要求会越来越高,EPG前端优化时一要考虑服务器的承载能力,二要考虑机顶盒性能及兼容问题。

【准备工作】:考虑环境特殊性,需要做好以下几个准备:硬件:PC、机顶盒、网络集线器(也就是HUB,也可以使用镜像功能的交换机Switch)。软件:Chrome、Wireshark。没有远程环境,这些都得用上,如果有远程调试环境HUB和Wireshark可以不需要。

一、 减少请求数:一般一个页面最好在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作函数名。

六、 Java

1. 禁用session,当不需要session时<%@ page session="false"%> 。

2. 尽量使用<%@ include file=”xxx.jsp” %>,少使用<jsp:include page="xxx.jsp"/>。

3. 尽量使用 java去获取URL的参数,JS获取相对比较麻烦而且慢。

七、 不能通过前端进行优化的:

1. 做异步请求时,服务器的响应头为204时,iframe和ajax都可能解决不了问题,都可能出现重复请求,只是ajax可以表现出色一点。

时间: 2024-10-31 10:29:38

IPTV中的EPG前端优化的相关文章

关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

【转】关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这

实践中的电商前端优化

前端优化已经是一个被写烂的题材了. 虽千万人吾往矣,这里我仅分享我的一些实践经验. 欢迎一起交流 欢迎关注我的个人公众号,不定期更新自己的工作心得. 正文如下 前端性能 1. 模块化 严格来说,代码模块化并不能带来性能上的提升,但我还是将模块化提出来,因为它真的很重要,重要到几乎所有的优化都与它息息相关. 常见的模块化方案有:AMD.CMD.UMD.ES6 如何选择? 团队习惯 个人偏好 业务需要 我靠!你怎么能把业务需要放在最后一个考虑? 因为没有哪一块业务会因为使用了不同的模块化方案而产生不

【转】关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

【转】yahoo前端优化军规

雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css.script.flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间. 把多个JS.CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位. Use a Content D

【webapp的优化整理】要做移动前端优化的朋友进来看看吧

单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟! webapp使用JavaScript修改页面:紧接着再从服务器传递更多数据然后再修改页面,如此循环. 从性能的角度看,在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器. 所以,很多人认为weba

前端优化方案

前端优化: 1.模块化常见的模块化方案有:AMD.CMD.UMD.ES6 2.缓存   电商项目将常用数据缓存起来,比如,移动端首页的数据,商品分类等这些不经常变化的数据,目的是为了 增强 移动端Android.iOS 响应速度.   在controller 收到用户请求后判断 ehcache中有没有缓存这个数据,没有就加载这个资源(数据库或者文件中)然后丢到缓存中, 如果调用了这些数据的添加修改删除方法就删除这个缓存   3.图片懒加载 插件资源https://github.com/zhany