zoukankan      html  css  js  c++  java
  • 移动端滚动性能优化

    移动端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

  • 相关阅读:
    Leetcode 92. Reverse Linked List II
    Leetcode 206. Reverse Linked List
    Leetcode 763. Partition Labels
    Leetcode 746. Min Cost Climbing Stairs
    Leetcode 759. Employee Free Time
    Leetcode 763. Partition Labels
    搭建数据仓库第09篇:物理建模
    Python进阶篇:Socket多线程
    Python进阶篇:文件系统的操作
    搭建数据仓库第08篇:逻辑建模–5–维度建模核心之一致性维度2
  • 原文地址:https://www.cnblogs.com/zhujunislucky/p/10535430.html
Copyright © 2011-2022 走看看