一、动画在ios上，页面滚动的时候，动画也会停止？
前段日子撸的一串抽奖活动的项目，里面写了个转盘的动画，用着还挺流畅的，但是我们的QA给我提出了酱紫的问题：1、ios上，如果动画在执行的过程中，手指滚动页面的同时，动画会停止。 2、安卓的机子上，如果动画执行的过程中，长按屏幕会让动画有卡顿的问题。
what？？？还有这种操作？？
一开始我是懵逼的，还有这种测试手段？？好学的我开始搜罗了下网上的一些栗子。杂七杂八的总结为一句话：这些问题都是和ios、安卓对事件处理机制有关。
这就有点高大上了。请接着看。。。
以下是从知乎网上拔来的答案。
iOS最先响应屏幕反应。响应顺序依次为Touch——Media——Service——Core架构，当用户只要触摸接触了屏幕之后，系统就会最优先去处理屏幕显示也就是Touch这个层级，然后才是媒体（Media），服务（Service）以及Core架构。
ios事件处理机制
所以说，当系统接收到Touch事件之后会优先响应，此时会暂停屏幕上包括js、css的渲染。这个时候不光是css动画不动了，哪怕页面没有加载完如果你手指头还停留在屏幕上那么页面也不会继续加载，直到你的手松开。
Android事件处理机制
相反Android响应屏幕排在应用与框架之后。Android的优先级响应级别则是Application——Framework——Library——Kernal架构，和显示相关的图形图像处理这一部分属于Library，当你对屏幕操作之后，Android系统首先会激活应用、框架，然后才是屏幕最后是核心架构。
酱紫我就看明白了~于是乎，我就试着在页面开始动画执行到结束期间，禁止页面的滚动
$('body').css('overflow', 'hidden');
document.addEventListener('touchstart', preHandler, false);
用这种笨笨哒的方式暂时弥补动画卡顿的问题。
（持续更新中...）
网友评论