Performance

Performance
Nikhil
Published on 2021-07-09 07:17:01

Use transform and opacity to avoid trigger layout


Changing some CSS attributes will trigger the browser to synchronously calculate the style and layout, which is a bad thing when you need to animate at 60fps.

DON'T

Animate with left and top trigger layout.

#box {
left: 0;
top: 0;
transition: left 0.5s, top 0.5s;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
}
#box.active {
left: 100px;
top: 100px;
}

Demo took 11.7ms for rendering, 9.8ms for painting

DO

Animate with transform with the same animation.

#box {
left: 0;
top: 0;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
transition: transform 0.5s;
transform: translate3d(0, 0, 0);
}
#box.active {transform: translate3d(100px, 100px, 0);
}

the same animation, took 1.3ms for rendering, 2.0ms for painting

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website