1、动画实现代码

（1）使用定位实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>动画性能分析-left</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            #box {

                width: 200px;

                height: 200px;

                background-color: aqua;

                position: relative;

                left: 0;

            }

        </style>

    </head>

    <body>

        <div id="box">

        </div>

        <script type="text/javascript">

            let dd = setInterval(function() {

                var div = document.getElementById("box");

                var left = div.offsetLeft + 5;

                div.style.left = left + "px";

                if (left > 500) {

                    clearTimeout(dd)

                }

            }, 50);

        </script>

    </body>

</html>

（2）使用transform实现

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>动画性能分析-transform</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            #box {

                width: 200px;

                height: 200px;

                background-color: aqua;

            }

        </style>

    </head>

    <body>

        <div id="box">

        </div>

        <script type="text/javascript">

            let i = 1

            let dd = setInterval(function() {

                var div = document.getElementById("box");

                div.style.transform = `translateX(${5*i}px)`

                i++;

                if (i > 100) {

                    clearTimeout(dd)

                }

            }, 50);

        </script>

    </body>

</html>

2、性能分析

（1）打开chrome 控制台的Performance

（2）打开rendering （查看帧率）

对以上2个代码段执行录制：

性能结果：

（1）使用定位布局来实现动画的结果为：

（2）使用transform实现动画的效果：

说明：

蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间

结论：使用ttransform 实现动画 在重排和重绘的时间上都小于 定位实现动画。transform效果更好。

3、帧率

关于帧率，可以设置更小的时间间隔，如下代码（每5ms执行一次）：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>动画性能分析-left</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            #box {

                width: 200px;

                height: 200px;

                background-color: aqua;

                position: relative;

                left: 0;

            }

        </style>

    </head>

    <body>

        <div id="box">

        </div>

        <script type="text/javascript">

            let dd = setInterval(function() {

                var div = document.getElementById("box");

                var left = div.offsetLeft + 5;

                div.style.left = left + "px";

                if (left > 500) {

                    clearTimeout(dd)

                }

            }, 5);

        </script>

    </body>

</html>

效果：

看起来不卡顿！

帧率在60fps时流畅，小于60fps时卡顿（越小越卡顿）。

js 动画性能分析 transfrom的更多相关文章

  1. js动画性能提升笔记

    JavaScript动画的性能并不亚于CSS动画.因此,如果使用了现代的动画库,例如Velocity,那么动画引擎的性能将不再是app的瓶颈,构成瓶颈的只有代码. 网络性能相关 动画是浏览器运行中资源 ...

  2. 页面装载js及性能分析方法

    一.装载 先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main.js中包含onload函数,在main.js中查找是否有对其他js文件的引用,优先装载引用js文件,被 ...

  3. CSS3动画和JS动画的比较

    前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...

  4. 打造H5动感影集的爱恨情仇–动画性能篇

    “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的视频集,且载体是HTML5(简称H5)页面,意味着可以随时分享到空间或朋友圈给好友欣赏! 移动端区别于PC年代的相册 ...

  5. MiniProfiler性能分析工具— .Net Core中用法

    前言: 在日常开发中,应用程序的性能是我们需要关注的一个重点问题.当然我们有很多工具来分析程序性能:如:Zipkin等:但这些过于复杂,需要单独搭建. MiniProfiler就是一款简单,但功能强大 ...

  6. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

  7. CSS动画的性能分析和浏览器GPU加速

    此文已由作者袁申授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 有数的数据大屏可以在一块屏幕上展示若干张不同的图表,以炫酷的方式展示各种业务数据.其中有些图表使用CSS实现了 ...

  8. 性能更好的js动画实现方式——requestAnimationFrame

    用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...

  9. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

随机推荐

  1. strace_for_windows

    http://drmemory.org/strace_for_windows.html https://github.com/intellectualheaven/stracent/releases

  2. [android]ShareSDK——内容分享和短信验证

    前言 新版本号ShareSDK的分享和短信验证,按官网的文档,都须要加入一个<Activity></Activity>标签,而分享和短息验证的这个标签内容都一样.会冲突. 解决 ...

  3. UVa409_Excuses, Excuses!(小白书字符串专题)

    解题报告 题意: 找包括单词最多的串.有多个按顺序输出 思路: 字典树爆. #include <cstdio> #include <cstring> #include < ...

  4. .Net C#向远程服务器Api上传文件

    Api服务代码一: /// <summary> /// 服务器接收接口 /// </summary> [HttpPost] [Route("ReceiveFile&q ...

  5. 与Win8之磁盘活动时间100%斗争心得

    Windows8因人而异地会在使用过程中磁盘活动时间无缘无故提升到100%并且可能出现持续性抽风现象,具体表现为0%瞬间飙升至100%后又回落,或者一直保持在100%导致使用过程卡顿,认真阅读本文有助 ...

  6. 彻底理解jdbc为什么用反射创建驱动程序对象

    1.class.forName(mysql),这样更换数据库时,不需要更改程序代码,程序不需要重新编译就能运行. 因为反射是动态编译的,程序运行期间生成指定类的对象, 这样就可以程序运行期间生成不同的 ...

  7. 设置SVN忽略文件和目录（文件夹）

    在多数项目中你总会有文件和目录不需要进行版本控制.这可能包括一些由编译器生成的文件,*.obj,*.lst,或许是一个用于存放可执行程序的输出文件夹.只要你提交修改,TortoiseSVN 就会在提交 ...

  8. mac OS X下配置jdk环境变量

    进入命令行,开始如下操作: cd  ~touch.bash_profile vi  .bash_profile 输入内容jdk变量配置内容: export JAVA_HOME=/Library/Jav ...

  9. Java发邮件带附件测试通过

    package cn.bric.crm.util; import java.util.Date; import java.util.Enumeration; import java.util.Prop ...

  10. 26个Jquery1.4使用小技巧

    1. 禁止右键点击 1.       $(document).ready(function(){ 2.           $(document).bind("contextmenu&quo ...