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. linux strace追踪mysql执行语句 （mysqld --debug)

    转载请注明出处:使用strace追踪多个进程 http://www.ttlsa.com/html/1841.html http://blog.itpub.net/26250550/viewspace- ...

  2. [c#]WebClient异步下载文件并显示进度

    摘要 在项目开发中经常会用到下载文件,这里使用winform实现了一个带进度条的例子. 一个例子 using System; using System.Collections.Generic; usi ...

  3. [iOS] UIView的clipsTobounds属性

    如题,有两个view: view1,view2view2添加view1到中,如果view2大于view1,或者view2的坐标不全在view1的范围内,view2是盖着view1的,意思就是超出的部份 ...

  4. 细说Unity3D(一)——移动平台动态读取外部文件全解析

    前言: 一直有个想法,就是把工作中遇到的坑通过自己的深挖总结成一套相同问题的解决方案供各位同行拍砖探讨.眼瞅着2015年第一个工作日就要来到了,小匹夫也休息的差不多了,寻思着也该写点东西活动活动大脑和 ...

  5. 优化JDBC编程-多提提意见

    优化JDBC编程这是我根据MS SQL SERVER 2000 JDBC DRIVER HELP,并参考其它资料整理而成.ms的这个帮助文件实在有失大家风范,示例代码很.....有兴趣者可以去下载ht ...

  6. 通过修改基表(link$)让非public dblink变为public

    有些朋友创建了一个非public的dblink,现在该数据库的其他用户需要去使用该dblink,在正常情况下无访问权限,需要重新建一个dblink,或者将原dblink修改为public.但是由于忘记 ...

  7. OBjective-C:在可变数组NSMutableArray中添加相同对象后,进行自定义的排序方式输出

    以下为自定义的排序方式的实现 #import "Person+Compare.h" @implementation Person (Compare) -(NSComparisonR ...

  8. OpenCV学习(26) 直方图(3)

    本章中我们学习一下通过backproject直方图,得到一副图像中每个像素属于该直方图的概率.在下边原始图中(左图),我们框选了一块四边形的区域,计算该区域的灰度直方图,然后通过下面的函数calcBa ...

  9. Android消息通知-Notification

    Android中常用的消息提醒,一种是Toast弹出提醒内容,一种是AlterDialog弹出框来提醒用户,还有一种就是消息通知的,用Android经常收到各种通知就是Notifation.Notif ...

  10. Median of Two Sorted Array leetcode java

    题目: There are two sorted arrays A and B of size m and n respectively. Find the median of the two sor ...