CSS
प्रदर्शन

ट्रिगर लेआउट से बचने के लिए ट्रांस्फ़ॉर्म और अपारदर्शिता का उपयोग करें

कुछ सीएसएस विशेषता को बदलने से ब्राउज़र को शैली और लेआउट की गणना करने के लिए ट्रिगर किया जाएगा, जो कि एक खराब चीज है जब आपको 60fps पर चेतन करने की आवश्यकता होती है।

ऐसा नहीं

left और top ट्रिगर लेआउट के साथ चेतन।

#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;
}

डेमो पेंटिंग के लिए, प्रतिपादन के लिए 11.7ms ले लिया 9.8ms

कर

एक ही एनीमेशन के साथ transform साथ चेतन।

#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);
}

डेमो एक ही एनीमेशन, चित्रकला के लिए प्रतिपादन, 2.0ms के लिए 1.3ms ले लिया।