Latest Publications

188宝金博下载开发问题汇总

Phonegap相关

1. 隐藏顶部的状态栏

         在xxx-Info.plist中新增一项属性:”Status bar is initially hidden” = YES;此外,还可以增加其他的属性,例如Launch image等。

2. 用户滑动Webview时,正常情况下会超出边界然后弹回来,也就是Bounce,可以通过以下方式禁止这种行为:

188宝金博下载

(更多…)

Phonegap + HTML5 开发经验小结

        去年曾对188宝金博下载做过一次调研,当时还是1.1版本,印象也一般。对他的性能以及真实的跨平台能力都不太确定。今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目,项目至今已经完成了一期的App Store提交,所以也正好能抽时间来小结一下。一个月左右的开发过程让我对这种开发模式有了更深的认识,这对于前端开发人员而言绝对是一个大的机会。Phonegap Native API + Plugin基本能访问移动设备绝大部分本地功能,除此之外就是HTML5了,迁移成本非常的低,而开发效率也是很高的。

        与传统Web开发相比,在移动设备进行Web开发有着自己的特点,例如不同设备的屏幕尺寸以及分辨率都有可能不同,因此开发时需要考虑灵活性;移动设备上基本上都是使用webkit来跑Web,因此你的脚本和框架可以放心的使用一些高级的特性,以及可以彻底抛弃兼容IE的那些恶心代码;当今移动设备的性能与PC相比还有很大的差距,因此性能问题在移动设备上更值得重视,尤其是脚本性能(DOM操作、Redraw、Reflow)。

(更多…)

HTML5实战之桌面通知

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过,188宝金博下载目前支持Desktop Notification功能的浏览器只有Chrome5+。

关于通知的基础知识可以参考以下文档:

W3C标准:https://varnow.org/use_iframe/

使用教程:https://varnow.org/time-to-start-render-calc/

本文主要记录通知功能在Web IM中实际使用时的一些经验。

188宝金博下载

在实际使用的过程中,应该尽量减少通知功能对用户的干扰,最大程度的减少通知功能的出现,这就需要解决以下几个问题:

1. 收到多条消息时确保只出现一条通知;

2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;

3. 当用户使用多Tab开启多个存在IM的页面时,只要有一个页面处于Focus状态将不出现通知;

此外,还需要解决一个便利性问题

4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口

(更多…)

HTML5实战之本地存储(3) – 请求同步

在实际上项目当中,经常需要使用短轮询(每隔一定时间就向服务器发送一次请求,请求通常会立即返回)和长轮询(每次请求服务器会Hold一段时间直到有新数据或者超时,客户端收到数据后会立即进行下一次请求)来从服务器拉取数据,然后动态的更新页面。随着功能的增加,一个页面中往往存在不止一个这样的轮询请求,而且在用户开启多个Tab页面时,总得请求数会翻倍。而“请求同步”指的是在以上场景中,即使是开启多个Tab也只有一个Tab页面维持轮询连接,一旦数据返回后,就将数据同步到其他无连接的页面,最大程度的减少请求。实现的思路也很简单,先解决由谁来进行请求的问题,之后基于本地存储将数据进行同步即可。具体的实现则有不少细节需要注意的,以下详细阐明。

 

(更多…)

HTML5实战之本地存储(2) – 操作同步

本文介绍Tab之间的操作同步的实现,所谓操作同步是指将用户在某个Tab窗口中的操作同步到所有其他同一站点得Tab中。例如IM窗口的操作(打开、最大化、最小化、关闭、设置等),由于很多用户会在多个Tab之间切换,而IM在每个页面中都存在,因此对于数据同步的要求是比较高的,以前的做法是使用服务器方式来同步,即所有操作都向服务器发请求,然后广播,Tab收到消息后再响应。缺点是比较浪费资源,另外延时也比较严重。

(更多…)

HTML5实战之本地存储(1) – 兼容性与存储监听

很早之前调研过HTML5的本地存储-《DOM Storage全解析》,大致上对localStorage、sessionStorage等API做了下了解,但是一直没有机会真正的在项目中使用。终于这次借重构Web IM的机会,对本地存储做了更深入的使用,除了基本的API使用之外还在次基础上封装了一些应用层的库,例如Tab之间的操作同步、Tab之间的请求同步等。本文主要做一个阶段性的经验总结。

(更多…)

渐进式的脚本加载

    通过之前几篇性能指标分析系列的文章可以发现,无论是对于哪个性能指标来说,脚本的影响都是最大的。实际的线上监控数据(图1)也确实能够论证这一点,例如某个页面DOM Ready的时间在4.1s左右,而外链脚本的加载和执行则消耗了2.8s左右,比例高达68.74%。也就是说假如该页面没有脚本的话,页面的DOM Ready时间将会大大缩短。实际的页面中,脚本在加强和提高交互体验方面又是不可或缺的,因此需要从脚本的合理使用方式着手来改善脚本的使用对整体页面性能的影响。

(更多…)

188宝金博下载

从188宝金博下载出发的性能指标分析-TTI

如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善188宝金博下载,而我们的好坏则可以根据几个核心性能指标来衡量。从出发的几个核心时间指标包括:Start RenderDOM ReadyPage Load、TTI。不同的性能指标对188宝金博下载的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍TTI。

(更多…)

从188宝金博下载出发的性能指标分析-Page Load

如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善,而的好坏则可以根据几个核心性能指标来衡量。从188宝金博下载出发的几个核心时间指标包括:Start RenderDOM Ready、Page Load、TTI。不同的性能指标对的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍Page Load。

(更多…)

从188宝金博下载出发的性能指标分析-DOM Ready

如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善188宝金博下载,而我们的好坏则可以根据几个核心性能指标来衡量。从这出发的几个核心时间指标包括:Start Render、DOM Ready、Page Load、TTI。不同的性能指标对我们的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍DOM Ready。

(更多…)