移动端

移动前端HTML5性能优化指南

概述

PC优化手段在Mobile侧同样适用
在Mobile侧我们提出三秒种渲染完成首屏指标
基于第二点，首屏加载3秒完成或使用Loading
基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB
Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
基于第五点，要合理处理代码减少渲染损耗
基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
加载完成后用户交互使用时也需注意性能

查看全文

2015/03 07 周六

手机端取消文字选中、取消图片长按下载

企业号有一种消息类型叫保密消息，该类型消息有全屏水印、图片水印、禁止分享至朋友圈、禁止选中文字等功能。

但是对于图片，手机端默认长按时会触发下载保存交互。

首先想到的方案是通过JS实现，对touch实践做处理。

1	window.ontouchstart = function(e) { e.preventDefault(); };

但是这个对于长的文章，滚动事件就失效了。所以此方案无效，但是如果只是某个div有需求，可以这样处理。

其实这个可以通过CSS3的属性去除。

1	img { pointer-events: none; }

如果只是对图片禁止选中，长按图片的时候不会有问题，但是如果是先选择旁边的文字，再覆盖选取图片，那图片照样会被copy出来。

禁止选中

-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */

-moz-user-select: none;

这时候对文字禁止选中就没有问题了，整篇文章不可以复制或保存。截屏的时候会带有水印。

还有一招更甚，直接

1	*{ pointer-events: none; }

完美实现以上需求，完成。

2015/01 29 周四

HTML5模仿刮奖效果-页面涂抹消失插件wScratch

前言

HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。

wScratch是一个模拟刮刮卡的jQuery插件，可以设置刮开纯色或者图像。

演示

显示刮卡百分比

到达一定百分比清空

查看全文

2015/01 25 周日

移动端HTML5<video>视频播放优化实践

遇到的挑战

移动端HTML5使用原生<video>标签播放视频，要做到两个基本原则，速度快和体验佳，先来分析一下这两个问题。

下载速度

以一个8s短视频为例，wifi环境下提供的高清视频达到1000kbps，文件大小大约1MB；非wifi环境下提供的低码率视频是500kbps左右，文件大小大约500KB；参考QzoneTouch多普勒测速，2g网络的平均速度是14KB/s，那么下载一个低码率视频耗时35s；那么要想流畅播放视频，就需要一个加载等待的过程，这个过程要有明确的反馈，不能让用户有“坏掉了”的感觉。

多普勒测速数据参考

#	dns(s)	conn(s)	rtt(s)	tran(kb/s)
2g	3.85785	2.33482	2.57478	14.0374
3g	1.60643	0.743109	0.608047	60.1967
wifi	0.986921	0.550208	0.444332	70.8728

用户体验

视频是否可以自动播放，是否能循环播放，是否能显示下载进度，播放的时候如何隐藏控制条，暂停的时候又能显示出来呢。这些问题看上去貌似简单，但是由于PC/iOS/Android这些不同平台、不同的浏览器内核、甚至相同内核的不同版本，所实现的<video>属性、方法和事件差异较大，解决兼容性问题又给开发造成了很大困扰。查看全文

2015/01 21 周三