原文地址:http://www.iunbug.com/archives/2012/09/19/411.html
已经有不少前端同行抱怨iScroll4的各种问题,我个人并不赞同将这些问题归咎于iScroll4,因为iScroll4进无论是touch事件的捕获,还是使用transform来处理滚动,以及将cubic-bezier应用到transition上实现高效的平滑滚动,这些原理我们都是已知的。更多原理细节可以参看[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动 一文。此文则来解释另一个被很多人误解为iScroll4 造成的问题,那就是内容多的页面闪动的问题。现象表现为:
1.滑动过程中,滚动区内的元素在释放手指时出现细微闪动
2.图片缩放过程中释放手指时明显闪动
3.iOS上从mobile safari打开或第三方应用内打开后,切回主屏幕再切回页面时明显闪动
4.页面初始时闪动
大致这些情况下会有闪动,在ipad2,new ipad上会明显看得出。
下面就来分析产生的原因和解决办法:
首先,我们知道iOS5给我们带来了
1
2
3
|
overflow-y: scroll ;
overflow-x: hidden ;
-webkit-overflow-scrolling: touch; |
实现固定区域内的滚动,当应用这种方式实现滚动时,上面的提到的现象也会不同程度的出现尤其是1,2.是那么我们就可以断定不是iScroll4 的原因了。那么究竟是什么原因呢?
webkit在绘制页面时会将结构分为各种层,当层足够大时就会变成很大的平铺层。这各一来webkit在每次页面结构发生变化时不需要都渲染整个页面而是渲染对应层了,这对渲染速度来说相当的重要。webkit会给各种层分配一定大小的“备份存储区”在内存里缓存起来,这就是绘制层的上下文,通过这个上下文就可以很容易的实现各种效果(动画,3D变换等),“备份存储区”内存占用大小不仅依层而定,跟设备和显示方式也是有关的,假设这在普通屏幕下是1:1的,但在Retina屏幕下则是1:2的,并且放大时这个量会成倍增加;一张图片是10X10,普通屏幕分配的就是10X10,Retina初始则是20X20。这也表明Retina是更加消耗内存的。当层很大时,意味着“备份存储区”会消耗更大的内存,为了避免这点,webkit并不会绘制一个很大的层来存储一个很大的页面,比如说平铺层则会拆分成很多的块来绘制,即尽占用尽可能小的内存,只是将可视范围内的那部分渲染出来。这就是为什么我们在大页面滚动时会发现下面的内容慢慢显示,向上滚动时上面的内容还慢慢显示的原因。
以下则是webkit划分为层绘制的场景:
- 页面主容器永远是独立的平铺层
- 绘制密集型元素时,如<video>, <canvas>
- 应用3D transformations的元素,包括translate3d, rotate3d, translateZ
- 内容被加强时,如Filters, masks, reflections, opacity, transitions, animations
- 某些特殊的情况下也会,如position:fixed, -webkit-overflow-scroll:touch
- 任何在已知层上覆盖的内容
这对我们解决闪动问题有什么帮助呢?按上页的说明,和iScroll4实现原理我们很容易知道,iScroll4作用的滚动区是一个很大的独立层,webkit是不会将这么大的层整个分配内存绘制渲染的,所以,只要将滚动区域可视范围的列表项元素缓存起来就解决这个问题了。记webkit强制缓存起来即是将他们独立成一个层,而且这个层当然不会很大否则会被视为平铺层处理了。一般列表里项里的元素不会像页面主容器一样的大的。实现方式就是将列表项置身于上面的6个场景中,比如:
1
2
3
4
5
6
7
8
|
#wrap>section>article{-webkit-transform:translateZ(0);}/*注意这里*/ < div id = "wrap" >
< section >
< article >1</ article >
< article >2</ article >
< article >3</ article >
</ section >
</ div >
|
相关推荐
【AI】从头到脚详解如何创建部署Azure Web App的OpenAI项目源码
人脸识别项目实战
人工智能-人脸识别代码,采用cnn的架构识别代码
汽车配件制造业企业信息化整体解决方案
短期风速预测模型,IDBO-BiTCN-BiGRU-Multihead-Attention IDBO是,网上复现 评价指标:R方、MAE、MAPE、RMSE 附带测试数据集运行(风速数据) 提示:在MATLAB2024a上测试正常 ,短期风速预测模型; IDBO-BiTCN-BiGRU-Multihead-Attention; 评价指标: R方、MAE、MAPE、RMSE; 复现; 测试数据集; MATLAB 2024a,短期风速预测模型:IDBO-BiTCN-BiGRU-Attention集成模型
手势识别项目实战
在智慧园区建设的浪潮中,一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点,通过信息化平台与智能硬件的深度融合,为园区带来前所未有的变革。 首先,智慧园区综合解决方案以提升园区整体智能化水平为核心,打破了信息孤岛现象。通过构建统一的智能运营中心(IOC),采用1+N模式,即一个智能运营中心集成多个应用系统,实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”,利用大数据可视化技术,将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上,管理者可直观掌握园区运行状态,实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒,还大幅提升了管理效率,让园区管理更加精细化、智能化。 更令人兴奋的是,该方案融入了诸多前沿科技,让智慧园区充满了未来感。例如,利用AI视频分析技术,智慧园区实现了对人脸、车辆、行为的智能识别与追踪,不仅极大提升了安防水平,还能为园区提供精准的人流分析、车辆管理等增值服务。同时,无人机巡查、巡逻机器人等智能设备的加入,让园区安全无死角,管理更轻松。特别是巡逻机器人,不仅能进行360度地面全天候巡检,还能自主绕障、充电,甚至具备火灾预警、空气质量检测等环境感知能力,成为了园区管理的得力助手。此外,通过构建高精度数字孪生系统,将园区现实场景与数字世界完美融合,管理者可借助VR/AR技术进行远程巡检、设备维护等操作,仿佛置身于一个虚拟与现实交织的智慧世界。 最值得关注的是,智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程,实现降本增效。例如,智能库存管理、及时响应采购需求等举措,大幅减少了库存积压与浪费;而设备自动化与远程监控则降低了维修与人力成本。同时,借助大数据分析技术,园区可精准把握产业趋势,优化招商策略,提高入驻企业满意度与营收水平。此外,智慧园区的低碳节能设计,通过能源分析与精细化管理,实现了能耗的显著降低,为园区可持续发展奠定了坚实基础。总之,这一综合解决方案不仅让园区管理变得更加智慧、高效,更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境,是未来园区建设的必然趋势。
相亲交友系统源码 V10.5支持婚恋相亲、媒婆返利、红娘系统、商城系统等等 这款交友系统功能太多了,适合婚恋相亲,还有媒婆婚庆等等支持 PC和 H5还有小程序,可封装红年、APP,里面带安装教程
本资源《单片机也能玩双核之你想不到的C技巧系列——嵌入式实战》涵盖 双核单片机开发、C语言高级技巧、嵌入式系统优化 等核心内容,结合 实战案例与视频教程,帮助开发者深入理解并掌握高效编程技巧。 适用人群: 适合 嵌入式开发工程师、单片机开发者、电子信息相关专业学生,以及希望提升 C语言编程能力 和 嵌入式项目经验 的技术人员。 能学到什么: 双核单片机开发思路,提高并行处理能力。 C语言高级技巧,提升代码优化与执行效率。 嵌入式系统调试方法,掌握实际项目中的调试策略。 实战案例解析,学习如何在实际工程中应用双核技术。 阅读建议: 建议 先学习基础知识,再结合 示例代码与视频教程 进行实操,重点关注 代码优化、调试技巧与双核应用模式,通过实战演练提高嵌入式开发能力。
人脸识别项目源码实战
人脸识别项目源码实战
c语言学习
红外光伏缺陷目标检测模型,YOLOv8模型 基于红外光伏缺陷目标检测数据集训练,做了必要的数据增强处理,以达到缺陷类别间的平衡 可检测大面积热斑,单一热斑,二极管短路和异常低温四类缺陷 测试集指标如图所示 ,核心关键词:红外光伏缺陷目标检测模型; YOLOv8模型; 数据增强处理; 缺陷类别平衡; 大面积热斑; 单一热斑; 二极管短路; 异常低温。,基于YOLOv8的红外光伏缺陷检测模型
基于PLC的自动浇花控制系统 西门子1200PLC博途仿真,提供HMI画面,接线图,IO分配表,演示视频,简单讲解视频 博图15.1及以上版本均可使用 ,核心关键词: PLC自动浇花控制系统; 西门子1200PLC博途仿真; HMI画面; 接线图; IO分配表; 演示视频; 简单讲解视频; 博图15.1及以上版本。,基于PLC的自动浇花系统:西门子1200PLC博途仿真实践教程
在智慧园区建设的浪潮中,一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点,通过信息化平台与智能硬件的深度融合,为园区带来前所未有的变革。 首先,智慧园区综合解决方案以提升园区整体智能化水平为核心,打破了信息孤岛现象。通过构建统一的智能运营中心(IOC),采用1+N模式,即一个智能运营中心集成多个应用系统,实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”,利用大数据可视化技术,将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上,管理者可直观掌握园区运行状态,实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒,还大幅提升了管理效率,让园区管理更加精细化、智能化。 更令人兴奋的是,该方案融入了诸多前沿科技,让智慧园区充满了未来感。例如,利用AI视频分析技术,智慧园区实现了对人脸、车辆、行为的智能识别与追踪,不仅极大提升了安防水平,还能为园区提供精准的人流分析、车辆管理等增值服务。同时,无人机巡查、巡逻机器人等智能设备的加入,让园区安全无死角,管理更轻松。特别是巡逻机器人,不仅能进行360度地面全天候巡检,还能自主绕障、充电,甚至具备火灾预警、空气质量检测等环境感知能力,成为了园区管理的得力助手。此外,通过构建高精度数字孪生系统,将园区现实场景与数字世界完美融合,管理者可借助VR/AR技术进行远程巡检、设备维护等操作,仿佛置身于一个虚拟与现实交织的智慧世界。 最值得关注的是,智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程,实现降本增效。例如,智能库存管理、及时响应采购需求等举措,大幅减少了库存积压与浪费;而设备自动化与远程监控则降低了维修与人力成本。同时,借助大数据分析技术,园区可精准把握产业趋势,优化招商策略,提高入驻企业满意度与营收水平。此外,智慧园区的低碳节能设计,通过能源分析与精细化管理,实现了能耗的显著降低,为园区可持续发展奠定了坚实基础。总之,这一综合解决方案不仅让园区管理变得更加智慧、高效,更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境,是未来园区建设的必然趋势。
大型集团用户画像系统化标准化数字化用户主数据管理项目规划方案
基于STM32的水质 浊度检测仪设计与实现(详细设计说明书+ 10008-基于STM32的水质 浊度检测仪设计与实现(详细设计说明书+原理图PCB工程+源码工程+实物照片) 本次设计是设计一款水质检测设备,实现温度检查、水质检测的功能,将检测到的数据显示到显示器中,并实时记录系统的参数 本次系统需要对温度检测,使用的传感器为DS18B20,通过单总线的方式来完成系统温度检测 使用水质检测模块检查水的质量 通过传感器检测到的数据计算后的值实时刷新到显示器中,主要的功能包括以下几点: ①可以对温度实时检测; ②可以对水质实际值实时检测; ③水质浑浊预警 主要特点: 1.以STM32单片机为核心,配合水质模块; 2.主要完成系统的 功能控制、状态显示、信息检测以及报警硬件组建所单片机和传感器等元器件的选择; 3.完成系统控制的软件设计编程; 4.实现对水质检测、温度检查、预警的功能 内容包含: 1、原理图工程 2、PCB工程 3、源码工程 4、实物照片 5、详细介绍说明书-22531字 6、实物照片 7、浊度传感器资料
人脸识别项目实战
华中科技大学计算机科学研究生复试上机测试题.zip
YOLOv8部署到web上(Django+html)