iScroll 它比较好的解决了移动互联网 web app 滚动支持问题以及点击事件缓慢的问题,经过简单配置即可让 web app 像原生 app 一样流畅,甚至都不需要改变原来的编码方式,目前它几乎是移动 web 开发的标配库。

受技术限制,iScroll 模拟滚动条也会带来一些问题,如:遇到异步写入元素后其不能及时适应新的高度/宽度。

为了解决 UI 刷新问题,它有提供 refresh 方法手动刷新 UI,但这样十分繁琐,你忘记执行它可能引发app的可用性问题。它提供 checkDOMChanges 选项用来自动监控 UI 变化,但却是使用定时器判断,每500ms执行一次,响应速度与性能都大打折扣。理想状态下它应“加载即用”,这样等未来不需要 iScroll 作为补丁的时候,我们可以立即删除掉 iScroll。

一、优化滚动条自适应容器

W3C 定义的 DOMSubtreeModified 事件可以监听节点的修改,不幸这个事件已经过时(最新的ios6仍然支持),幸运的是有了更强大的 MutationObserver 方法监听元素修改。

MutationObserver 给开发者们提供了一种能在某个范围内的 DOM 树发生变化时作出适当反应的能力。该 API 设计用来替换掉在 DOM3 事件规范中引入的 Mutation 事件。

自动监测容器内容修改

iScroll 构造函数中优先使用 MutationObserver ,同时也保留定时器的方式:

  1. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  2.  
  3. if (that.options.checkDOMChanges) {
  4.  
  5. if (MutationObserver) {
  6.  
  7. that.mutationObserver = new MutationObserver(that.refresh.bind(that));
  8. that.mutationObserver.observe(that.scroller, {
  9. childList: true,
  10. subtree: true
  11. });
  12.  
  13. } else {
  14. that.checkDOMTime = setInterval(function () {
  15. that._checkDOMChanges();
  16. }, 500);
  17. }
  18. }

注销监听

在 iScroll destroy 方法中注销监听:

  1. if (that.options.checkDOMChanges) {
  2. if (MutationObserver) {
  3. that.mutationObserver.disconnect();
  4. } else {
  5. clearInterval(that.checkDOMTime);
  6. }
  7. }

二、调整超出容器反弹行为

IOS应用程序、网页拖动页面超出容器时会出现反弹效果,但是 iScroll 的速度却比与默认行为更快,在私有 _end 函数倒数第二行

  1. that._resetPos(200) 修改为 that._resetPos(600)
  1. useTransform: true, 改为 useTransform: false,

iScroll 优化的更多相关文章

  1. 分享整理vue.js在日常工作中用到的组件,帮助你在vue应用中快速开发

    Vue-Echarts vue-echarts是封装后的vue插件, 基于 ECharts v4.0.1+ 开发,依赖 Vue.js v2.2.6+,功能一样的只是把它封装成vue插件 这样更方便以v ...

  2. 【IScroll深入学习】解决IScroll疑难杂症

    前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...

  3. 记一次ASP.NET MVC性能优化(实际项目中)

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  4. 【IScroll深入学习】突破移动端黑暗的利器(上)

    前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...

  5. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧

    单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...

  6. 【iScroll源码学习02】分解iScroll三个核心事件点

    前言 最近两天看到很多的总结性发言,我想想今年好像我的变化挺大的,是不是该晚上来水一发呢?嗯,决定了,晚上来水一发! 上周六,我们简单模拟了下iScroll的实现,周日我们开始了学习iScroll的源 ...

  7. 【iScroll源码学习01】准备阶段

    前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① v ...

  8. iScroll.js 用法参考 (share)

    分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...

  9. iscroll简单使用说明

    iScroll是一个高性能,资源占用少,无依赖,跨平台的javascript上拉加载,下拉刷新的滚动插件,目前版本v5.2.0. GitHub下载地址:https://github.com/cubiq ...

随机推荐

  1. [转载] 深入理解 docker ulimit

    深入理解docker ulimit 2015年7月23日 10:00 阅读 12778 [编者的话]Docker大规模应用后,如果你没踩过坑,说出去肯定没人信.昨天就遇到一个ulimit的经典问题:业 ...

  2. php使用cURL实现Get和Post请求的方法

    1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性 ...

  3. LVS--NAT模型配置

    环境准备 管理IP地址 角色 备注 192.168.11.131 调度器(Director) 对外提供VIP服务的地址为192.168.1.114 192.168.11.132 RS1  网关为192 ...

  4. 搭建LNMP环境

    下载软件包 百度云地址下载地址:http://pan.baidu.com/s/1eSfWNoY 一共有17个包 [root@localhost lnmp]# ls /usr/local/src/lnm ...

  5. git使用技巧

    git使用技巧 转载自:http://172.17.144.8/iceway.zhang/shares/201604/201604_git_tips.md.html 我们在工作中几乎每天都会用到git ...

  6. pdmreader支持读取xml格式的pdm文件,无法读取二进制格式的pdm文件。

    您的Pdm数据字典文件可能不被PDMReader读取,可能是因为pdm文件版本的问题.但 您可以通过PowerDesigner12(下载PowerDesigner12)进行转换 后进行读取. 您要做的 ...

  7. Integer封装与拆箱

    Integer封装与拆箱 简介: 目录: Integer自动封装的陷阱 Integer自动拆箱机制 Integer自动封装的陷阱 public class IntegerDemo { public s ...

  8. C语言编译器 cc 编译原理

    生成一个可执行的文件通常需要经过以下几个步骤: 预处理你的源代码,去掉注释,以及其他技巧性的工作就像在 C 中展开宏. 检查代码的语法看你是否遵守了这个语言的规则.如果没有,编译器会给出 警告. 把源 ...

  9. Linux命令行下编译Android NDK的示例代码

    这几天琢磨写一个Android的Runtime用来加速HTML5 Canvas,让GameBuilder+CanTK 不但开发速度快,运行速度也能接近原生应用.所以花了点时间研究 Android ND ...

  10. jQuery.outerWidth() 函数详解

    outerWidth()函数用于设置或返回当前匹配元素的外宽度. 外宽度默认包括元素的内边距(padding).边框(border),但不包括外边距(margin)部分的宽度.你也可以指定参数为tru ...