一、为什么你的jQuery动画会卡顿？
很多开发者都遇到过这样的问题：用jQuery写的动画在低配电脑或移动设备上总是一卡一卡的。这其实是因为jQuery默认使用setTimeout来实现动画，而setTimeout有两个致命缺陷：
- 它不会考虑浏览器的刷新率，可能在一帧内多次触发导致过度渲染
- 当页面处于后台时，它仍然会继续执行，浪费系统资源
举个例子（技术栈：jQuery）：
// 传统jQuery动画实现方式
$('.box').animate({
left: '500px'
}, 1000); // 使用setTimeout实现
这种实现方式在简单场景下没问题，但当页面元素多或设备性能差时，就会出现明显的卡顿。
二、认识requestAnimationFrame
requestAnimationFrame是浏览器专门为动画提供的API，它会：
- 自动匹配显示器的刷新率（通常是60fps）
- 在浏览器标签页不可见时自动暂停
- 由浏览器内部优化，性能更好
它的基本用法是这样的：
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
三、改造jQuery动画的实战方案
下面我们来看看如何用requestAnimationFrame重写jQuery的动画方法（技术栈：jQuery）：
// 扩展jQuery的animate方法
$.fn.smoothAnimate = function(properties, duration) {
const startTime = performance.now();
const element = this;
const originalStyles = {};
// 记录初始样式
Object.keys(properties).forEach(key => {
originalStyles[key] = parseFloat(element.css(key));
});
function updateAnimation(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
// 计算中间状态
const currentStyles = {};
Object.keys(properties).forEach(key => {
const startValue = originalStyles[key];
const endValue = parseFloat(properties[key]);
currentStyles[key] = startValue + (endValue - startValue) * progress;
});
// 应用样式
element.css(currentStyles);
// 继续动画或结束
if (progress < 1) {
requestAnimationFrame(updateAnimation);
}
}
requestAnimationFrame(updateAnimation);
};
// 使用方式
$('.box').smoothAnimate({ left: '500px' }, 1000);
这个实现比原生jQuery动画更流畅，特别是在滚动或复杂页面中。
四、进阶优化技巧
1. 批量DOM操作
DOM操作非常昂贵，应该尽量减少：
// 不好的做法：单独设置每个属性
element.css('left', newLeft);
element.css('top', newTop);
// 好的做法：一次性设置所有属性
element.css({
left: newLeft,
top: newTop
});
2. 硬件加速
对动画元素启用GPU加速：
// 在动画开始前
element.css({
'will-change': 'transform',
'transform': 'translateZ(0)'
});
// 动画结束后恢复
3. 节流处理
对于滚动等高频事件，需要做节流处理：
let ticking = false;
$(window).on('scroll', function() {
if (!ticking) {
requestAnimationFrame(function() {
doSomething();
ticking = false;
});
ticking = true;
}
});
五、实际应用场景
这种优化特别适合：
- 单页应用中的页面过渡动画
- 无限滚动列表
- 复杂的交互式图表
- 游戏开发中的精灵动画
- 视差滚动效果
六、技术优缺点分析
优点：
- 动画更流畅，帧率稳定
- 减少CPU/GPU使用率
- 自动适应不同刷新率的显示器
- 后台标签页自动暂停节省资源
缺点：
- 需要手动实现动画逻辑（相比直接使用jQuery的animate）
- 兼容性代码稍多（虽然现代浏览器都支持）
- 调试稍微复杂一些
七、注意事项
- 记得在动画结束时取消未完成的
requestAnimationFrame：
let animationId;
function animate() {
// 动画逻辑
animationId = requestAnimationFrame(animate);
}
// 需要停止时
cancelAnimationFrame(animationId);
- 对于简单动画，直接使用CSS动画可能更高效
- 在低端设备上考虑降级方案
- 测试不同浏览器下的表现
八、完整示例展示
下面是一个完整的页面示例（技术栈：jQuery）：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<button id="animateBtn">开始动画</button>
<div class="box"></div>
<script>
// 扩展jQuery动画方法
$.fn.smoothAnimate = function(properties, duration, easing) {
const startTime = performance.now();
const element = this;
const originalStyles = {};
// 记录初始值
Object.keys(properties).forEach(key => {
originalStyles[key] = parseFloat(element.css(key));
});
// 缓动函数
const easings = {
linear: t => t,
easeIn: t => t * t,
easeOut: t => t * (2 - t)
};
easing = easing || 'linear';
function updateAnimation(currentTime) {
const elapsedTime = currentTime - startTime;
let progress = Math.min(elapsedTime / duration, 1);
// 应用缓动函数
progress = easings[easing](progress);
// 计算当前样式
const currentStyles = {};
Object.keys(properties).forEach(key => {
const startValue = originalStyles[key];
const endValue = parseFloat(properties[key]);
currentStyles[key] = startValue + (endValue - startValue) * progress;
});
// 应用样式
element.css(currentStyles);
// 继续或结束
if (progress < 1) {
requestAnimationFrame(updateAnimation);
}
}
requestAnimationFrame(updateAnimation);
};
// 使用示例
$('#animateBtn').click(function() {
$('.box').smoothAnimate({
left: '500px',
top: '300px',
opacity: 0.5
}, 2000, 'easeOut');
});
</script>
</body>
</html>
九、总结
通过将jQuery动画改造为使用requestAnimationFrame，我们可以显著提升动画的流畅度，特别是在性能受限的设备上。虽然需要写更多的代码，但带来的用户体验提升是值得的。
记住几个关键点：
- 优先使用
requestAnimationFrame而不是setTimeout - 减少DOM操作，尽量批量处理
- 合理使用硬件加速
- 注意内存管理，及时取消未完成的动画
对于大多数现代Web应用，流畅的动画效果已经成为基本要求。掌握这些优化技巧，能让你的网站在各种设备上都有更好的表现。
评论