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中的地址,并且开启线程来进行加载。当用户的网速不给力或者此页面中的图片太多时,就会发生每张图片都加载了一点但是都没有加载完成,导致最后没有一个图片能正常显示。此时需使用懒加载技术以降低资源耗用——即只加载可视窗口区域的图片,当用户向下拖动滚动条时再继续加载后面的图片(也是只加载目前可视窗口区域内的图片)
-
轮播组件懒加载