מירי זולברג
miriz@haravdotnet.co.il
לאחרונה יצא לי להתוודע אל יעילות css3 מול קוד הjs.
כחלק מפרויקט בעבודה היינו צריכים ליצור כפתור שיתריע במקרים מסוימים , מה שעשינו היה div מסוים לו הוחלף הצבע רקע, מה שגרם להבהוב על המסך.
הצורה שבה זה נעשה , היתה תוך שימוש ב-javaScript .
הפעלנו פונקציה בלולאה אינסופית שמופעלת כל 400ms ,שתפקידה היה להחליף classes. וכל class הכיל צבע רקע שונה (אחד לבן , אחד אדום )
מה שגרם להבהוב על המסך , אך גם גרם לצריכת CPU מרובה.
לפני פתרון הבעיה , נציג את הקוד:
<html>
<head>
<title></title>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css” integrity=”sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r” crossorigin=”anonymous”>
<script src=”https://code.jquery.com/jquery-2.2.0.min.js”></script>
<script src=”site.js”></script>
<style>
.statusLight {
width: 25px;
height: 25px;
border-radius: 35px;
display: inline-block;
border-width: 3px;
border-style: solid;
border-color: black;
}
.securityStatusLight {
background-color: red;
}
.notActivStatusLight {
background-color: white;
}
.a {
margin-left: 30px;
}
</style>
</head>
<body>
<h1 class=”a”>js</h1>
<ul>
<li class=”statusLight” style=”border-color:#36984D”></li>
<li class=”statusLight” style=”border-color:#FF9900″></li>
<li class=”statusLight securityStatusLight” style=”border-color:#FF0000″ id=”securityProblem”></li>
</ul>
</body>
</html>
ההבהוב עובד רק על ה <li> האחרון בעל id=securityProblem.
וכן קוד ה js:
interval = setInterval(function () {
if ($(‘#securityProblem’).hasClass(“notActivStatusLight”)) {
$(‘#securityProblem’).removeClass(“notActivStatusLight”).addClass(“securityStatusLight”);
}
else if ($(‘#securityProblem’).hasClass(“securityStatusLight”)) {
$(‘#securityProblem’).removeClass(“securityStatusLight”).addClass(“notActivStatusLight”);
}
}, 400);
});
מה שאנחנו רואים כאן זה פונקציה אחת שמפעילה את קוד החלפת הclasses כל 400ms בעזרת setInterval.
הפתרון לבעית השימוש בCPU היה להשתמש בcss3 animation מה שגרם לאותה תוצאה בלי שימוש מרובה ב CPU
והנה לפניכם הקוד :
<html>
<head>
<title></title>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css” integrity=”sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r” crossorigin=”anonymous”>
<script src=”https://code.jquery.com/jquery-2.2.0.min.js”></script>
<style>
.statusLight {
width: 25px;
height: 25px;
border-radius: 35px;
display: inline-block;
border-width: 3px;
border-style: solid;
border-color: black;
}
.securityStatusLight {
background-color: red;
-webkit-animation: demo-1 500ms infinite;
}
@keyframes demo-1 {
to {
background-color: white;
}
}
.a{
margin-left:30px;
}
</style>
</head>
<body>
<h1 class=”a”>css3</h1>
<ul>
<li class=”statusLight” style=”border-color:#36984D”></li>
<li class=”statusLight” style=”border-color:#FF9900″></li>
<li class=”statusLight securityStatusLight” style=”border-color:#FF0000″ id=”securityProblem”></li>
</ul>
</body>
</html>
מה שעשינו כאן הוא יצרנו אנימציה בcss ע”י כתיבת keyframes שמקבל את שם האנימציה (demo-1) ואמרנו לו מה יעשה ב to ומתוך הstyle של הclass הרצוי( במקרה זה securityStatusLight ) קראנו לאנימציה
וזה מה שנוצר
שימו לב שאין שימוש כלל בקוד js,מה שמפעיל את האנימציה הוא הcss.
ניתן להוריד כאן את הקוד המלא 