5
मैं उत्सुक था कि अगर जावास्क्रिप्ट आधारित एनिमेशन (jQuery, Dojo) बनाम CSS3 ट्रांसफॉर्म की बात आती है तो यह मापने का कोई तरीका है कि किस प्रकार का CPU उपयोग होता है। निश्चित रूप से इस तरह की स्थिति के साथ संसाधन उपयोग को ट्रैक करने के लिए एक सुरुचिपूर्ण समाधान है।jQuery एनिमेशन बनाम CSS3 रूपांतरण के प्रदर्शन को मापने के लिए कैसे?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#object1').hover(function(){
$(this).animate({marginLeft: '120px'}, 1000);
}, function(){
$(this).animate({marginLeft: '0px'}, 1000);
});
});
</script>
<style>
#object1 {
height: 400px;
width: 400px;
background: #4f9a23;
}
#object2 {
height: 400px;
width: 400px;
background: #343434;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#object2:hover {
margin-left: 120px;
}
</style>
</head>
<body>
<div id="object1"></div>
<div id="object2"></div>
</body>
</html>
धन्यवाद, ब्रीज़र। क्रोम टास्क मैनेजर स्पष्ट रूप से jQuery एनीमेशन के लिए उच्च सीपीयू उपयोग की रिपोर्ट करता है, लेकिन मैं उत्सुक हूं कि माउस जितना तेज़ हो सके उतना तेज़ माउस पर स्वाइप करने की तुलना में थोड़ा अधिक अनुभवजन्य है। मैंने नोटिस किया कि मैं jQuery के बाहर CPU उपयोग को लगभग दोगुना कर सकता हूं, तो यह कुछ है! – Masondesu