移动端测试注意事项

Posted 2021-03-01 jasmine0112

1.兼容问题

• 浏览器兼容：ios/安卓点击唤醒浏览器事件
• 界面兼容

2.点击事件click

参考博文【侵权删】：https://www.cnblogs.com/xzybk/p/11906938.html

（1）触摸事件：touchstart、touchmove和touchend
　　

• touchstart事件：当在屏幕上按下手指时触发
• touchmove事件：当在屏幕上移动手指时触发
• touchend事件：当在屏幕上抬起手指时触发
• touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作

（2）点击事件

• 防抖：不管触发频率多大，都在停止触发之后的给定时间触发
• 节流：不管触发频率多大，都以恒定频率触发

（3）常见问题：touch事件及click事件同时绑定在一个元素上

• 点击事件click出现300毫秒延迟

  • 产生原因：双击缩放功能，双击缩放的原理是当用户click一次之后，浏览器会经过约300ms之后检测是否再有一次click，如果有的话，就会缩放页面，否则的话就是一个click事件。
  • touch， click事件的执行顺序: touchstart > touchmove > touchend > click，即touch事件执行完毕后才会到click事件，这就是300ms的延迟。
  • touchmove ，click事件互斥,即touchmove触发执行，click事件不再执行 ，事件的执行顺序就为touchstart > touchmove（可以多次执行） > touchend 。

• 点透事件:A显示在B浮层之上，A发生touch(也可以是click)后立即消失,B事件绑定click

  • 短暂触摸（点）一下屏幕，touch事件及click事件的执行顺序：touchstart > touchend > click
  • 点透发生的原因: 当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了，因此元素B被莫名点击了
  • 解决方案：touch阶段取消掉 click 事件，即阻止触发touch事件完成后的click事件

3.授权头

• 已登录：授权头
• 未登录：虚拟授权头
• 登录过期：过期授权头———服务端返回401

注意事项

• 未登录切换至登录状态。未登录状态使用虚拟授权头，从未登录切换到登录状态时需使用真实用户授权头，若当前页面未重新请求，调用协议时虚拟授权头和真实授权头均会返回，若错误选择使用虚拟授权头，由于每次退出重登虚拟授权头都不同，对应的虚拟UID也不同，因此在将UID作为用户唯一性判断场景中，可能会导致薅羊毛事件发生；

• 授权头过期，服务端一般会返回401，该场景一般不多见，但仍需要做一些预防措施，防止在该种场景下，用户无法操作；

4.优化

（1）懒加载：懒加载其实就是延时加载，即当对象需要用到的时候再去加载

• 图片懒加载：当我们打开一个页面时，浏览器就会从上往下读取页面中的标签src中的地址，并且开启线程来进行加载。当用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。此时需使用懒加载技术以降低资源耗用——即只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）

• 轮播组件懒加载