首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

让页面滑动流畅得飞起的新特性:Passive Event Listeners

在不久前的Google I/O 2016 Mobile Web Talk中,Google公布了一个让页面滑动流畅的新特性Passive Event Listeners。...v=65VMej8n23A 从效果对比视频中可以明显看到,使用Passive Event Listeners特性后,页面的滑动流畅度相对使用之前提升了很多。...Passive Event Listeners特性是为了提高页面的滑动流畅度而设计的,页面滑动流畅度的提升,直接影响到用户对这个页面最直观的感受。...大家可以搞一个简单的demo验证一下Chrome浏览器的这个特性:如在一个有滚动条的页面内通过JavaScript执行一段死循环的代码(while-true之类的),这个时候再去尝试上下滑动页面,你会发现此时页面仍能流畅滑动...Chrome团队认为对于统计中的这80%的页面来说,他们都是希望因为注册mousewheel/touch相关事件监听器而导致滑动延迟增加的。

1.4K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    让页面滑动流畅得飞起的新特性:Passive Event Listeners

    在不久前的Google I/O 2016 Mobile Web Talk中,Google公布了一个让页面滑动流畅的新特性Passive Event Listeners。...Chrome51上使用Passive Event Listener特性前后的效果对比 链接地址 从效果对比视频中可以明显看到,使用Passive Event Listeners特性后,页面的滑动流畅度相对使用之前提升了很多...Passive Event Listeners特性是为了提高页面的滑动流畅度而设计的,页面滑动流畅度的提升,直接影响到用户对这个页面最直观的感受。...大家可以搞一个简单的demo验证一下Chrome浏览器的这个特性:如在一个有滚动条的页面内通过JavaScript执行一段死循环的代码(while-true之类的),这个时候再去尝试上下滑动页面,你会发现此时页面仍能流畅滑动...Chrome团队认为对于统计中的这80%的页面来说,他们都是希望因为注册mousewheel/touch相关事件监听器而导致滑动延迟增加的。点击这里 可以体验页面注册后导致的滑动延迟,如上图。

    9.1K00

    绝对差超过限制的最长连续子数组----双指针篇3,滑动窗口篇2

    绝对差超过限制的最长连续子数组题解集合 暴力法 滑动窗口和双指针 利用单调队列找出当前滑动窗口的最大最小值 单调队列的优化思路 总结 ---- 暴力法 思路:列举出所有满足条件的子数组,从中找出最大的长度...//当前滑动窗口内的最大元素值减去最小元素值不满足条件 if (m.rbegin()->first - m.begin()->first > limit) { //将i指针指向的滑动窗口最左端的元素移出...,单调减队列的首元素是当前滑动窗口的最小值 如果当前滑动窗口内的最大值减去最小值得到的结果比限制值要大,那么就需要将滑动窗口的左端值移出滑动窗口,然后继续判断最当前滑动窗口最大值减去最小值是否大于限制值...Max.empty() && Max.back() < num) Max.pop_back(); Max.push_back(num); //让滑动窗口左端指针移动到当前滑动窗口内的子数组满足题目要求为止...,这里只需要确保在未找到更大连续子数组长度的时候,滑动窗口的大小等于当前最长连续子数组长度 做法: //判断当前i指向位置的元素是否是当前滑动窗口内的最大值或者最小值,如果是就将其从对应的队列中移出即可

    34930

    【MIG专项测试组】如何准确评测Android应用的流畅度?

    流畅度主观评分 描述 4~5 界面滑动流畅并且能够快速响应用户输入(各种操作) 3~4 界面滑动顿挫感并且能够及时响应用户输入(各种操作) 2~3 界面滑动明显顿挫感响应用户输入(各种操作)有种慢半拍的感觉...1~2 界面滑动明显画面跳跃感响应用户输入(各种操作)有严重的延迟 0~1 不能动了 1、先看看流畅度(SM)和丢帧(SF)之间的关系 测试场景:浏览器看妹子图 评测手机:Nexus 4 流畅度主观评分...(总体):2.5(界面滑动明显顿挫感,响应用户输入有种慢半拍的感觉) 因为丢帧是个连续的过程,所以图中的丢帧都是以点来表示其离散的状态。...3、对比几个浏览器产品在同一个场景下的测试数据 测试场景:浏览网页 评测手机:Nexus 4 测试方法:打开凤凰网,来回上下滑动,在滑动的过程中记录流畅度数据 流畅度评估后数据: 从上面的数据可以看出...,在滑动浏览网页时,C浏览器略微好于A浏览器和B浏览器。

    2.1K50

    避免UI耗时行为,让你的应用更流畅

    卡顿、不流畅是应用性能问题最为直观的表现之一。针对应用卡顿现象,软件绿色联盟联合华为终端开放实验室进行了大量分析、总结,希望能够为应用开发者提供针对性的优化建议,共同打造更好的使用体验。...,基于人眼主观流畅性体验,针对抓取不流畅页面对应的systrace、applog日志; 根据systrace日志,对不流畅界面丢帧情况进行分析; 判断是否存在UI耗时问题。...48 微信 6.6.6/7.0.9 打开图片滑动/公众号文章滑动 50 塔王之王 1.19.36 游戏动效较多时 40 抖音火山版 8.3.5 冷启动 42 总体上看,各应用对应的场景帧率都没有达到或者接近...60fps,人眼主观感受不够流畅。...UI线程直接decodeBitmap: decodeBitmap涉及较大的计算量,方法本身就非常耗时,建议在UI线程直接执行,而是在子线程异步处理后,刷新UI。

    50230

    探索“流畅感”——谈手势动效体验设计

    我们的手机都是iOS和Android的吗?都是操作系统吗?其实这里指的操作系统,是指操作系统的原生组件。这类组件只有在原生开发中才能被调用。...手势触发费力:滑动费劲,需要滑动很长距离才能触发预期的动作。 动画不流畅:各个技术框架自带的动画曲线和插值器,良莠不齐,体验统一且不够流畅。...并且对于滑动的手势还带了回弹效果,看起来非常爽。 打造流畅体验设计 腾讯文档是基于Web / Flutter的应用,并且接管了很多原生系统的能力,包括排版能力、光标选区能力,拖动能力等。...所以这里还加了一条逻辑:当手指滑动速度的加速度急剧减小时,不用松手也可以触发手势。这样的体验感会觉得流畅很多。...自然流畅 自然流畅是腾讯文档内所有动效运行的基础原则。

    1.3K20

    让体验更流畅,探索应用性能优化之软件绘制

    对用户来说,使用应用时最希望得到流畅卡顿的使用体验。而引起卡顿的影响因素有很多,比如:图像绘制、应用启动、页面跳转和事件响应等。...而且重复工作较多,因此,软件绘制会比硬件绘制效率低很多,有时候很多draw对应的计算无法在一帧(60hz屏幕刷新频率对应16.7ms,90hz屏幕刷新频率对应11.1ms)内完成,就会引起丢帧从而带来界面滑动流畅的使用体验...,基于人眼主观流畅性体验,针对抓取不流畅页面对应的systrace、applog日志; 3)根据systrace日志,分析不流畅界面丢帧情况; 4)判断出现软件绘制问题的方法: 参考上述表格,有3种方法可以同时用来确认...,图像绘制均采用软件绘制的方式,测试滑动帧率都低于60帧,部分应用甚至低于30帧,卡顿感明显。...优先硬件绘制;对于一些图片尺寸较小、界面滑动不是关键操作路径时,可以考虑软件绘制。

    48630

    使用PerfDog测FindⅩ2这块120Hz屏幕到底多顺滑流畅

    01 系统设置界面 系统设置界面进行上下滑动操作,平均帧数112.2,FPS>=90占92.7%,FPS>=115占90.2%,由数据可见系统设置界面的滑动操作可以达到极其流畅标准。...02 系统桌面界面 系统桌面界面进行左右滑动操作,平均帧数108.8,FPS>=90占91.9%,FPS>=115占89.2%,由数据可见系统桌面界面的滑动操作可以达到极其流畅标准。...03 信息列表界面 信息列表界面进行上下滑动操作,平均帧数110.0,FPS>=90占91.9%,FPS>=115占83.8%,由数据可见信息列表界面的滑动操作可以达到很流畅标准。...04 音乐列表界面 音乐列表界面进行上下滑动操作,平均帧数107.3,FPS>=90占95.0%,FPS>=115占27.5%,由数据可见音乐列表界面的滑动操作可以达到很流畅标准。...06 刷微博界面 刷微博界面进行上下滑动操作,平均帧数109.8,FPS>=90占95.0%,FPS>=115占22.5%,由数据可见刷微博界面的滑动操作可以达到很流畅标准。

    53900

    浅析RunLoop原理及其应用

    RunLoop在TableView中的应用(解决滑动卡顿问题)。 ? 如图代码展示,当加载高清大图渲染屏幕,而此时不得不在主线程操作,会引起滑动的卡顿。...将耗时操作放到 DefaultMode 里只能解决滑动流畅,但是停止时需要加载耗时,仍然会有卡顿的感觉。...runloop, observer , kCFRunLoopDefaultMode); 添加到观察者时模式为kCFRunLoopDefaultMode 这样的的话只能监听到一般模式的BeforeWaiting,即滑动的时候...所以这里可以再次优化,将模式改为kCFRunLoopCommonModes,这样的话滑动或者滑动都可以加载图片渲染屏幕,而且是在不影响屏幕流畅性的基础上。如以下GIF: ?...run---%@",[NSRunLoop currentRunLoop].currentMode); //以下两个循环的UI操作在必须放在主线程,但是弊端就是太多图片的处理会阻塞tableview的滑动流畅

    93720

    iOS性能优化系列篇之“列表流畅度优化”

    但是希望大家在优化过程中,要结合自己的项目具体问题具体分析,因为本文讨论的影响流畅度的因素,可能并不是你的应用流畅性不佳的瓶颈,根据我的经验,大部分流畅的问题都是业务逻辑导致的,反倒什么离屏渲染啊之类大家耳熟能详的流畅度的影响因素在实际项目中并没有想象的那么大...在滑动列表(UITableView和UICollectionView)中强烈建议使用Autolayout。随着视图数量的增长,Autolayout带来的 CPU 消耗会呈指数级上升。...如果我们使用imgView.image = img; 如果图片没有解码,则会在主线程进行解码等操作,会极大影响滑动流畅性。...所以在图形生成的步骤我们要尽可能的避免离屏渲染 优化工具 iOS开发中,在GPU优化上,我们一般使用instruments中的Core Animation工具来进行滑动流畅度优化,在Core Animation...Animation只需要提交原始图片的指针到render server,涉及内存copy。

    2.5K30

    iOS微信小视频优化心得

    方案对比 对方案二、三做了滑动性能对比和耗电对比,测试条件分别是 滑动:在iPhone4的聊天窗口,有30个小视频,来回做4次列表滑动 耗电:在iPhone5s,屏幕亮度调到最大,禁止自动锁屏,开启飞行模式...,聊天窗口同时播放着3个小视频,10分钟 方案 屏幕滑动(fps) 耗电(mHA/s) AVPlayer 18.7 0.127 MyMoviePlayer 42.4 0.110 方案三无论滑动性能和耗电均优于方案二...小视频录制需求 支持白平衡、对焦、缩放 录制视频长度6秒,30帧/秒,尽量丢帧 能录制不同尺寸和码率的视频 小视频录制方案 对于需求1,AVFoundation有API可以支持,这里不多说。...但是系统相机的拍摄视频是非常流畅的。于是用AVCaptureMovieFileOutput(640*480)直接生成视频文件,拍视频很流畅。...综上所述,要想拍视频卡,就要在录制过程中尽量不做CPU耗时操作,而且AVCaptureOutput传递数据给上层时不能卡住AV线程。

    4.4K91

    Recyclerview竟能如此丝滑,这14个优化策略不容错过...

    本文将介绍一些优化技巧,帮助大家提升RecyclerView的性能,使其在各种情况下都能保持流畅。...滑动优化: 在滑动过程中,尽可能的减少耗时操作,避免影响滑动效果。 预加载: 预加载即将显示的视图,提高展示性能。 内存优化: 减少内存的消耗,合理释放内存,避免内存泄漏。...如果Item高度固定或者会发生变化,应该避免使用该方法,否则可能导致布局显示异常。...这个方法主要用于RecyclerView的预取机制,用于在滑动过程中预取与当前位置相邻的Item数据,提高滑动流畅度。...、预加载与内存优化策略,可以有效提升RecyclerView的性能,使其在各种情况下都能保持流畅

    1.1K10

    微信终端跨平台组件 mars 系列(一):高性能日志模块xlog

    调用 write 的时候,发现 dirty page 占用内存超过系统内存一定比例,相关变量在/proc/sys/vm/dirty_background_ratio( 后台运行阻塞 write)和/proc...对于一个 App 来说,流畅性尤为重要,因为流畅性直接影响用户体验,最基本的流畅性的保证是使用了日志不会导致卡顿,但是流畅性不仅包括了系统没有卡顿,还要尽量保证没有 CPU 峰值。...压缩 比较通用的压缩方案是先进行短语式压缩, 短语式压缩过程中有两个滑动窗口,历史滑动窗口和前向缓存窗口,在前向缓存窗口中通过和历史滑动窗口中的内容进行匹配从而进行编码。...但其实在短语式压缩过程中,滑动窗口并不是无限大的,一般是 32kb ,所以只需要把一定大小作为一个压缩单位就可以了。...mars 的日志模块 xlog 就是在兼顾这四点的前提下做到:高性能高压缩率、丢失任何一行日志、避免系统卡顿和 CPU 波峰。 本文来源于:WeMobileDev 微信公众号

    4.4K00

    【Android】手把手教你上滑解锁的效果

    流畅滑动的效果 使用GestureListener实现阻尼滑动效果 未解锁状态禁止向下滑动 详细设计 基于上述几个注意点,考虑细节分别如下: 有效上滑 ?...有效上滑 如上如,锁屏状态下,定义有效滑动阈值standardH,若上滑高度差超过standardH,则判断为有效滑动,布局滑动至屏幕顶部(不可见);否则如向下滑动、向上滑动距离不够等,都作为无效滑动...Scroller类中有computeScroll方法,它能实现流畅滚动的原因是,它将初始位置和目标滑动位置之间的距离分成N份依次调用scrollTo方法,通过postInvalidate在每次调用scrollTo...方法后刷新视图,以此来达到流畅滑动的效果,其实ViewPager、ScrollView等控件都是通过Scroller来实现流畅滑动的。...|| getScrollY() > 0) { // 滚动至原始位置 } else { return true; } } 流畅滑动实现

    2.6K20
    领券