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. MySQL命令行工具各功能说明（转）

    MySQL 服务器端使用工具程序 mysqld - SQL 后台程序(即 MySQL 服务器进程).该程序必须启动运行,才能连接服务器来访问数据库. mysqld_safe - 服务器启动脚本,可以通 ...

  2. [Node.js]Domain模块

    Domain(域)模块简化了异步代码的异常处理方式,可以捕捉处理try catch无法捕捉的异常. 引入 var domain=require("domain"); domain模 ...

  3. KJHttp框架使用讲解

    摘要 本文原创,转载请注明地址:http://kymjs.com/code/2015/05/12/01写给那些在用.想用.还没有用过KJFrame的朋友. KJFrameForAndroid总共分为四 ...

  4. pytest文档26-运行上次失败用例(--lf 和 --ff）

    前言 "80%的bug集中在20%的模块,越是容易出现bug的模块,bug是越改越多"平常我们做手工测试的时候,比如用100个用例需要执行,其中10个用例失败了, 当开发修复完bu ...

  5. 【Github教程】史上最全github使用方法：github入门到精通

    原文 http://www.eoeandroid.com/thread-274556-1-1.html git pull 命令 git pull <remote> <branch&g ...

  6. Andorid之使用GMail后台偷偷发送邮件(不要干坏事噢=。 =)

    工具类: import java.util.Date; import java.util.Properties; import javax.activation.CommandMap; import ...

  7. MyBatis+Spring SQL效率测试报告

    1. 数据库结构 2. insert 测试 insert 的测试包括 1) 批量拼接values()插入 2) 有事务for循环插入 3) 无事务for循环插入 测试 SQL: <!-- 普通 ...

  8. 【转载】关于大数据库的一些不错的GitHub项目

    优秀大数据GitHub项目一览 http://blog.csdn.net/YaoXTao/article/details/50540485

  9. IOS中的动画——Core Animation

    一.基础动画 CABasicAnimation //初始化方式 CABasicAnimation * cabase=[CABasicAnimation animation]; //通过keyPath设 ...

  10. python中的exec()、eval()以及complie()

    参考博客:http://www.cnblogs.com/yyds/p/6276746.html 1.eval函数 函数的作用: 计算指定表达式的值.也就是说它要执行的python代码只能是单个表达式( ...