【现象】

动画出现了明显的卡顿,且仅仅出现在 chrome 中。

【原因排查】

一开始使用了css动画的时候已经出现了卡顿。找到如下的文章:CSS3 动画卡顿解决方案深入浏览器理解CSS animations 和 transitions的性能问题解决Chrome动画”卡顿”的办法

文章中提到高度变化会引起 Relayout、Repaint。

做了如下修改:

  1. 移除改变高度的动画,换成 transform 的动画,以减少 Relayout、Repaint 的次数。
  2. 使用 transform: translateZ(0), 强制开启GPU渲染。
  3. 加上 will-change 属性,通知浏览器预处理。

动画的确略变流畅了。

然而高度变化还是很有必要,并觉得只由js去控制代码可维护性更好些,最后还是决定放弃了 css,改用js去做动画。考虑到 jQuery 封装的 animate() 十分简单易用,于是采用了 jQuery。

此时动画卡顿问题再次出现,而且在 IE、firefox 中非常流畅。查看资料,jQuery 的 animate 使用了老旧的SetInterval方法实现动画,并没用使用 RAF(Reques tAnimation Frame),不会开启 GUI。(后来发现此说法可能不对,在 jQuery 3 中源码中可以看出其使用了 RAF,jQuery 1中则同前描述)

最后决定改用velocity.js,velocity.js 已经可以脱离 jQuery 直接使用。看官方文档,宣传语是 “快” 。然而并没有什么用,使用之后,Chrome 一如既往的卡,IE 和 Firefox 则是一如既往的流畅。

开启 chrome 调试,查看timeline,发现了神奇的事情。

每次 network 发请求的时候,FPS 都会出奇地降至10一下。

尝试把请求删除,动画恢复正常。虽没有行云流水般流畅,但是肉眼看来已经没大问题了。

最后把请求放在动画结束之后在执行,搞定。

velocity(Div, 'slideUp', {
duration: 500,
complete: function () {
... // DOM 操作
$.ajax(...);
... // setTimeout 操作
}

});

【结论】

问题虽然解决,还需进一步调查原因:

1、尝试把发送请求函数中的 DOM 操作删除,未见明显改善;

2、尝试把发送请求函数中的 setTimeout 定时器删除,未见明显改善;

3、尝试把发送请求函数中的 for in 循环删除,不再卡顿。

在 for in 中做了一个字符串拼接,这个字符串拼接的字符,传值到请求中

for (j in data) {
if (data.hasOwnProperty(j)) {
h.push(encodeURIComponent(j) + '=' + encodeURIComponent(data[j]));
}
} $.ajax({
...
  data: h,
...
});

测试push等性能并无问题,最终问题又回到了ajax请求中来了。至于为何异步请求会引起动画响应变慢,暂时不得而知。

Chrome 下动画卡顿问题的另一种可能的更多相关文章

  1. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  2. performance面板使用,以及解决动画卡顿

    https://googlechrome.github.io/devtools-samples/jank//    官方案例 https://juejin.im/post/5b65105f518825 ...

  3. javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速

    今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...

  4. React-Native Navigator 过渡动画卡顿的解决方案

    在RN0.44版本之前,路由导航跳转几乎是使用的是Navigator组件,在0.44版本以后就不推荐使用了,官方推荐的是react-navigation,当然还是可以在废弃的库中找到: import ...

  5. mac下idea卡顿问题解决

    idea在加载相对来说比较大的系统时,经常性出现卡顿,就是直接卡死,以至于写起代码特别难受. 最后找到的解决方案是修改idea.vmoptions中的内存大小 执行 find / -name idea ...

  6. 解决Chrome动画”卡顿”的办法

    为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,这两个属性都会开启GPU硬 ...

  7. 【小知识点】解决Chrome动画”卡顿”的办法

    为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);这两个属性都会开启GPU硬件 ...

  8. ionic1页面切换动画卡顿优化

    https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...

  9. iphone 下滚动条卡顿解决办法

    -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none;

随机推荐

  1. netty 对 protobuf 协议的解码与包装探究(2)

    netty 默认支持protobuf 的封装与解码,如果通信双方都使用netty则没有什么障碍,但如果客户端是其它语言(C#)则需要自己仿写与netty一致的方式(解码+封装),提前是必须很了解net ...

  2. 在Window下安装Oracle

    一.Oracle下载地址 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 二.解压 ...

  3. HUST 1541 Student’s question

    1541 - Student’s question 时间限制:1秒 内存限制:128兆 696 次提交 134 次通过 题目描述 YYis a student. He is tired of calc ...

  4. hadoop--安装1.2.1版本

    hadoop的安装分为三种方式,第一种单机安装,一般用于调试(其实一般都不用).第二种,伪分布式安装,一般程序员开发会使用这种方式.第三种,分布式安装,在实际环境中应用.今天在这里记下的是第二种,即伪 ...

  5. css特殊字符编码

  6. BZOJ 1103: [POI2007]大都市meg(dfs序,树状数组)

    本来还想链剖的,结果才发现能直接树状数组的= = 记录遍历到达点与退出点的时间,然后一开始每个到达时间+1,退出时间-1,置为公路就-1,+1,询问直接点1到该点到达时间求和就行了- - CODE: ...

  7. ios用户体验

    如果转载此文,请注明出处:http://blog.csdn.net/paulery2012/article/details/25157347,谢谢! 前言: 本文是在阅读<ios用户体验> ...

  8. web前端升级之路

    web前端菜鸟如何升级到大神(转载) 标签:web前端 随着互联网的发展速度迅猛,web前端工程师越来越火热,想学习 Web前端开发 吗 ? 若想成为web前端工程师需要掌握哪些知识?今天小编总结了成 ...

  9. 初识Windous程序

    文本框Label MaxLength 设置输入文本最大字符 Multiline  表示是否输入多行文本 passwodechar 指示在文本框显示的字符,而不是实际内容 ReadeOnly 表示是否可 ...

  10. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...