iScroll 优化
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 ,同时也保留定时器的方式:
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
if (that.options.checkDOMChanges) {
if (MutationObserver) {
that.mutationObserver = new MutationObserver(that.refresh.bind(that));
that.mutationObserver.observe(that.scroller, {
childList: true,
subtree: true
});
} else {
that.checkDOMTime = setInterval(function () {
that._checkDOMChanges();
}, 500);
}
}
注销监听
在 iScroll destroy 方法中注销监听:
if (that.options.checkDOMChanges) {
if (MutationObserver) {
that.mutationObserver.disconnect();
} else {
clearInterval(that.checkDOMTime);
}
}
二、调整超出容器反弹行为
IOS应用程序、网页拖动页面超出容器时会出现反弹效果,但是 iScroll 的速度却比与默认行为更快,在私有 _end 函数倒数第二行
that._resetPos(200) 修改为 that._resetPos(600)
useTransform: true, 改为 useTransform: false,
iScroll 优化的更多相关文章
- 分享整理vue.js在日常工作中用到的组件,帮助你在vue应用中快速开发
Vue-Echarts vue-echarts是封装后的vue插件, 基于 ECharts v4.0.1+ 开发,依赖 Vue.js v2.2.6+,功能一样的只是把它封装成vue插件 这样更方便以v ...
- 【IScroll深入学习】解决IScroll疑难杂症
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
- 记一次ASP.NET MVC性能优化(实际项目中)
前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...
- 【IScroll深入学习】突破移动端黑暗的利器(上)
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
- 【webapp的优化整理】要做移动前端优化的朋友进来看看吧
单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...
- 【iScroll源码学习02】分解iScroll三个核心事件点
前言 最近两天看到很多的总结性发言,我想想今年好像我的变化挺大的,是不是该晚上来水一发呢?嗯,决定了,晚上来水一发! 上周六,我们简单模拟了下iScroll的实现,周日我们开始了学习iScroll的源 ...
- 【iScroll源码学习01】准备阶段
前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① v ...
- iScroll.js 用法参考 (share)
分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...
- iscroll简单使用说明
iScroll是一个高性能,资源占用少,无依赖,跨平台的javascript上拉加载,下拉刷新的滚动插件,目前版本v5.2.0. GitHub下载地址:https://github.com/cubiq ...
随机推荐
- 优秀c++开源项目集合
本文会持续更新, 我希望通过这篇文章把我看到过的优秀开源项目记录下来, 有时间仔细阅读. cockroachdb 前googler开发的开源的spanner数据库: https://github.co ...
- ubuntu 14.0.04 通过自启动脚本实现主机和虚拟机的文件夹共享
首先要先设置主机ip为固定ip: 1.vi /etc/rc.local,进入vi界面,在尾部增加一行代码: mount -t cifs -o username=share,password=12345 ...
- c/c++小知识
1.printf计算参数时是从右到左 2.(int&)a 表示把a在内存中的值强行当作int数来处理 3.float四字节,1位符号位(正数为0),8位指数位(0采取01111111),23位 ...
- 配置Java EE Eclipse+Tomcat开发环境
以下将详细介绍在Eclipse下搭建Java EE开发环境的每一步, 环境:Win 7 + JDK 1.7 + Eclipse IDE for Java EE Developers 3.7 +Tomc ...
- 深入理解JVM-3垃圾收集器与内存分配策略
在上面一篇文章中,介绍了java内存运行时区域,其中程序计数器.虚拟机栈.本地方法栈3个区域随线程生灭:栈中的栈帧随着方法的进入和退出而有条不紊的执行着进栈出栈的操作,每一个栈帧中分配着多少内存基本上 ...
- [转] Android OkHttp完全解析 是时候来了解OkHttp了
http://blog.csdn.net/lmj623565791/article/details/47911083: 本文出自:[张鸿洋的博客] 一.概述 最近在群里听到各种讨论okhttp的话题, ...
- map 后 PE 蓝屏原因专题讨论(e820cycles参数)
map 后 PE 蓝屏原因专题讨论(e820cycles参数)http://bbs.znpc.net/thread-6182-1-5.html不点发表于 2011-12-8 11:42:31 大家知道 ...
- table合并单元格colspan和rowspan .
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
- OneProxy与其它数据库中间件的对比
OneProxy 优点 性能 缺点 闭源,被商业公司掌控,到时候随别人蹂躏 可维护性极差,缺乏友好的出错信息,光维护这个环节就被他人掌控 定价不明 有没有这样的公司? 大到10wtps,但是没人能理解 ...
- 将自定义的 service provider 绑定到 IOC 容器
首先要有一些类,可以自己自定义一些类放在app/目录下的自己新建的文件夹,在类里面实现代码逻辑 然后通过命令生成serviceprovider (php artisan make:provider ...