移动端滚动性能优化

移动端Web界面滚动性能优化及苹果手机弹窗按钮无效的问题

一、苹果手机在键盘出现的情况下弹窗按钮无效的问题

先说一个小问题：7及以上的苹果手机在键盘弹出是会把页面加长并滚动，这就导致一个问题出现，假如键盘弹出时，有弹窗弹出，或者弹窗本身有输入框，就会导致弹窗上的所有按钮点击没有反应，具体不知道是不是因为页面加长按钮位置变了（有了解的可以回复我），解决方案如下：

　　1.用JS控制屏幕滚动一下$(document).scrollTop(0)；

　　2.如果输入框不需要输入，只需要选择（日期组件，mint-ui里的field组件等），只需要在元素上加readonly属性即可，就不会弹出键盘，问题自然避免

二、移动端Web界面滚动性能优化 Passive event listeners

最近更新了ios11.3,项目上发现这么一个问题，“我的”页面和两个列表页的滚动出现了问题，滚动时候不仅滚动了希望滚动的部分，整体的页面也跟随者上下滚动，整个页面非常卡顿。

　　1.这两个页面都用了touch事件

　　2.控制台打印如下警告：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 
See https://www.chromestatus.com/features/5093566007214080

 

　　解决办法1：

　　在touch的事件监听方法上绑定第三个参数{ passive: false }，
　　通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDefault 来阻止默认滑动行为。

　　

elem.addEventListener(
  'touchstart',
  fn,
  { passive: false }
);

 

　　解决办法2：

　　使用全局样式样式去掉

* { touch-action: pan-y; } 

　　Passive event listeners

　　2016年Google I/O上提出的概念，目的是用来提升页面滑动的流畅度。

For instance, in Chrome for Android 80% of the touch events that block scrolling never actually prevent it. 10% of these events add more than 100ms of delay to the start of scrolling, and a catastrophic delay of at least 500ms occurs in 1% of scrolls.

　　在 Android 版 Chrome 浏览器的 touch 事件监听器的页面中，80% 的页面都不会调用 preventDefault 函数来阻止事件的默认行为。在滑动流畅度上，有 10% 的页面增加至少 100ms 的延迟，1% 的页面甚至增加 500ms 以上的延迟。

　　由于浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault()，它需要等到事件处理函数执行完后，才能去执行默认行为，然而事件处理函数执行是要耗时的，这样一来就会导致页面卡顿，也就是说，当浏览器等待执行事件的默认行为时，大部分情况是白等了。

　　如果 Web 开发者能够提前告诉浏览器：“我不调用 preventDefault 函数来阻止事件事件行为”，那么浏览器就能快速生成事件，从而提升页面性能，Passive event listeners 的提出就解决了这样的问题。

　　转载至：https://www.jianshu.com/p/04bf173826aa

转载于:https://www.cnblogs.com/zhujunislucky/p/10535430.html