标签：体验 input 最小 网络资源 data 背景图 start 低版本 连续
1，开发时碰到了哪些技术问题
1）低版本手机不支持es6，使用babel
2）引入百度地图js api时，需要使用https协议，否则不能正常使用API。在iOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的
3）<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；加上这一句input获取焦点时页面不会放大
4）在微信公众号中,input获取焦点时，页面上方会提示就会提示“防欺诈盗号，请勿支付或输入QQ密码”。在公众平台的管理后台设置业务域名即可解决
5）<form action="#" @submit="doSearch"><input type="search"/></form>
//点击键盘的搜索按钮即可触发form的submit事件 e.preventDefault();//阻止表单默认事件
移动端的键盘右下角显示“搜索”（安卓）或“Search"（苹果）按钮，点击该按钮即可提交表单
6）页面列表上拉加载，实现分页，缩短请求时间
监听页面滚动事件，判断滚动条离页面底部的距离，然后距离达到一定的值，向服务端发请求。将请求的结果拼接在原有的列表后面，即可实现上拉加载分页。
7）移动端html5拖拽
当按下手指时，触发ontouchstart；当移动手指时，连续地触发ontouchmove（在这个事件发生期间，调用preventDefault()事件可以阻止滚动）；当移走手指时，触发ontouchend。
onclick只在你快速点击并放开才会被执行，如果你点击一个区域，很迟才放开，那么onclick是不会执行的(touchstart->...->touchend)
执行顺序是ontouchstart > ontouchend > onclick
个人观点：移动端不能使用HTML5拖放实现拖拽效果（ondragstart...），可以使用touch事件
8）ios上页面滚动不流畅
-webkit-overflow-scrolling: touch;
9）ios上背景图片闪烁加载问题（原因暂时不详）
var cvs = document.createElement(‘canvas‘);
cvs.width = 5; cvs.height = 2;cvs.toDataURL();
这句话放在浏览器执行一下，就得出了base64的字符串。
<img class="blur-bg" :style="{backgroundImage: ‘url(‘+picUrl+item.merLogo+‘)‘}" src="data:image/png;base64,iVBORw0..."/>
2，移动端提高用户的体验度
1）通过上拉加载分页，缩短请求时间
2）减少等待，反馈及时
当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。如：向服务端发请求时显示“加载中”弹框，请求完成关闭该弹框；当请求的数据为空时，在页面上提示查询无记录等，避免出现空白页面，让用户以为应用卡死。
3）明确直观的的结果提示，如报错
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。弹出式提示（Toast）适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
4）减少 HTTP 资源请求次数&减小 HTTP 请求大小
使用构建工具如webpack来合并JavaScript 或 CSS 代码，压缩静态图片资源以及移除代码中的注释并压缩；
5）把 CSS 资源引用放到 HTML 文件顶部；JavaScript 资源引用放到 HTML 文件底部
一般推荐将所有 CSS 资源尽早指定在 HTML 文档 <head> 中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。
JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。
6）相对于桌面端浏览器，移动端 Web 浏览器上有一些较为明显的特点：设备屏幕较小、新特性兼容性较好、支持一些较新的 HTML5 和 CSS3 特性、需要与 Native 应用交互等。但移动端浏览器可用的 CPU 计算资源和网络资源极为有限，因此要做好移动端 Web 上的优化往往需要做更多的事情。首先，在移动端 Web 的前端页面渲染中，桌面浏览器端上的优化规则同样适用，此外针对移动端也要做一些极致的优化来达到更好的效果。
7）首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。
8）图片压缩处理
在移动端，通常要保证页面中一切用到的图片都是经过压缩优化处理的，而不是以原图的形式直接使用的，因为那样很消耗流量，而且加载时间更长。
9）使用 touchstart 代替 click
由于移动端屏幕的设计， touchstart 事件和 click 事件触发时间之间存在 300 毫秒的延时，所以在页面中没有实现 touchmove 滚动处理的情况下，可以使用 touchstart 事件来代替元素的 click 事件，加快页面点击的响应速度，提高用户体验。但同时我们也要注意页面重叠元素 touch 动作的点击穿透问题。
标签：体验 input 最小 网络资源 data 背景图 start 低版本 连续
原文地址：http://www.cnblogs.com/colorful-coco/p/7825170.html
