求助一个比较复杂的问题，关于JS修改样式在Chrome下的性能优化 本帖最后由 MapleRecall 于 2014-01-09 07:22:50 编辑 解决方案 » 免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货 你把 setInterval 里的16 换小点的数值 试试 设置成16是为了使刷新率为60帧，这个配置在IE和火狐中是完全没有问题的，我试过将16改为33，也就是保证30帧的速度，但在chrome中依旧很卡…… 测试了下chrome 25.0.1364.172 m效果和firefox12一样，没卡。。 设置成16是为了使刷新率为60帧，这个配置在IE和火狐中是完全没有问题的，我试过将16改为33，也就是保证30帧的速度，但在chrome中依旧很卡……一般来说 把时间设置在10-12 是比较正常的（兼容部分电脑80帧的话）不过 firefox不卡的话 chrome应该是不会卡的。。你可以在你同事的机器上 试试？ 想60帧的话，应该用requestAnimationFrame。 親測 chrome 不卡版本：31.0.1650.63 设置成16是为了使刷新率为60帧，这个配置在IE和火狐中是完全没有问题的，我试过将16改为33，也就是保证30帧的速度，但在chrome中依旧很卡……一般来说 把时间设置在10-12 是比较正常的（兼容部分电脑80帧的话）不过 firefox不卡的话 chrome应该是不会卡的。。你可以在你同事的机器上 试试？感谢回答，问题已经解决了。用外文搜索到了一篇相关文章，问题是由于webkit核心对DOM层的重绘机制而导致的，由于webkit核心会在布局发生变化时重绘整个层，所以如果使用JS修改left、top等属性时都会发生重绘，从而使性能下降，的确之前我通过Chrome调试工具中的Timeline发现大部分的时间都花在了绘制上，每一帧至少需要70ms，这远高于每秒60帧所要求的每帧时间低于16ms，所以就产生了卡顿。我的解决方法是将之前通过修改left、top等的位置属性来修改位置全部替换成通过修改css3的transforma属性中的translate3d来修改位置，但使用这种方法不兼容IE8及更低版本的浏览器。 EXTJS 遇到的函数定义问题，请高人指点，谢谢 当我扩展Jquery函数时，为什么会出错？ js如何获取数据库中保存图片的路径的字段 字符串处理问题 一个关于js控制tree展开关闭的问题 javascript菜鸟 javascrip判断文本内容是否改变 一个form中有两个button，怎么知道我点击的是哪个button按钮，用javascript,怎么做？ 请大家帮忙！ juery可以实现这样联动的效果吗 ie6/7/8 innerHTML 失效 选择时间段控件
一般来说 把时间设置在10-12 是比较正常的（兼容部分电脑80帧的话）
不过 firefox不卡的话 chrome应该是不会卡的。。
你可以在你同事的机器上 试试？
一般来说 把时间设置在10-12 是比较正常的（兼容部分电脑80帧的话）
不过 firefox不卡的话 chrome应该是不会卡的。。
你可以在你同事的机器上 试试？感谢回答，问题已经解决了。用外文搜索到了一篇相关文章，问题是由于webkit核心对DOM层的重绘机制而导致的，由于webkit核心会在布局发生变化时重绘整个层，所以如果使用JS修改left、top等属性时都会发生重绘，从而使性能下降，的确之前我通过Chrome调试工具中的Timeline发现大部分的时间都花在了绘制上，每一帧至少需要70ms，这远高于每秒60帧所要求的每帧时间低于16ms，所以就产生了卡顿。我的解决方法是将之前通过修改left、top等的位置属性来修改位置全部替换成通过修改css3的transforma属性中的translate3d来修改位置，但使用这种方法不兼容IE8及更低版本的浏览器。