web动画

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 引言 随着网页功能变得愈发复杂和精细，以及手机端H5发展中所遇到的硬件性能瓶颈，网页的运行时性能问题变得越来越突出。而用户对于网页运行时性能最直观的感受，莫过于UI操作的流畅程度。流畅或卡顿，爽或不爽，皆在于每个UI动画细节之间。本文旨在帮助理解动画卡顿与流畅的原因，卡顿问题的调试方法，以及从实践中总结出实现流畅动画的规律。为构建操作流畅的网页提供参考。 量化动画的流畅程度 动画的实现原理，是利用了人眼的“视觉暂留”现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产生错觉，而误以为画面在“动”。 动画相关的几个概念 帧：在动画过程中，每一幅静止画面即为一“帧”。 帧率：即每秒钟播放的静止画面的数量，单位是fps(Frame per second)。 帧时长：即每一幅静止画面的停留时间，单位一般是ms(毫秒)。 跳帧(掉帧/丢帧)：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象。 身边的帧率（频率）： 10FPS达成基本视觉暂留 25～30FPS 传统广播电视信号 60FPS浏览器渲染刷新频率 60～85HZ显示器刷新频率 100HZ日光灯管闪烁频率 帧率能反映动画的流畅程度 在网页中，帧率能够达到50~60fps的动画将会相当流畅，让人倍感舒适。 帧率在30