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. Any way to start Google Chrome in headless mode?

    Any way to start Google Chrome in headless mode? - Stack Overflow Any way to start Google Chrome in ...

  2. Latex Error cannot determine the size of graphic 报错的解决的方法

    Latex Error cannot determine the size of graphic 报错的解决的方法 插入jpg文件老是会报错... 追究了半天,原来是编译的命令又问题,不应该使用 la ...

  3. BitmapFactory.Options.inSampleSize 的使用方法

    BitmapFactory.decodeFile(imageFile); 用BitmapFactory解码一张图片时.有时会遇到该错误. 这往往是因为图片过大造成的. 要想正常使用,则须要分配更少的内 ...

  4. java内存模型知识点汇总

    1.像windows/linux这种操作系统中,自带jvm么?以方便java程序的运行? 答:是的,一般操作系统都自带jvm的.但不带jdk,也就是说java的运行环境有,但编译环境没有. 1.jav ...

  5. Emoji表情符号录入MySQL数据库报错的解决方案

    原文:http://blog.itpub.net/26230597/viewspace-1243233/ 1,查看tomcat后台日志,核心报错信息如下:  Caused by: java.sql.S ...

  6. Extjs NumberField 开始值 不能大于 结束值

    Ext.apply(Ext.form.VTypes,{ numberrange: function(val, field) { var num = parseFloat(val); if (field ...

  7. 通过@Value注解读取.properties配置内容

    @Controller @RequestMapping("/value") public class ValuePropertyController extends Applica ...

  8. Android.mk文件简单分析

    Android.mk文件简单分析 一个Android.mk文件用来向编译系统描写叙述须要编译的源码.详细来说:该文件是GNUMakefile的一小部分.会被编译系统解析一次或多次. 能够在每个Andr ...

  9. 第三章 JVM内存回收区域+对象存活的判断+引用类型+垃圾回收线程

    注意:本文主要参考自<深入理解Java虚拟机(第二版)> 说明:查看本文之前,推荐先知道JVM内存结构,见<第一章 JVM内存结构> 1.内存回收的区域 堆:这是GC的主要区域 ...

  10. jQuery中开发插件的两种方式(附Demo)

    做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQu ...