Speed Test #css-vs-jquery-speedtest-0001.html#
Prova comparativa tra l’effetto di dissolvenza ottenuto con il metodo JQuery fadeOut() e la proprietà opacity di CSS..
Vediamo come preparare la nostra pagina web:
<!DOCTYPE html>
<html>
<head>
<title>CSS VS JQuery - Speed Test -</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$(".jquery").fadeOut(3000);
});
$("#button2").click(function(){
$(".css").animate({opacity:'0'},"3000");
});
});
</script>
</script>
<style type="text/css">
.jquery
{
background-color:green;
border: 2px solid;
text-align:center;
}
.css
{
background-color:red;
border: 2px solid;
text-align:center;
opacity: 1;
}
</style>
</head>
<body>
<hr>
<p><strong>Speed Test Rendering - Fading Effect (3 seconds) - JQuery fadeout() VS Pure CSS opacity</strong></p>
<p><strong>1000 Boxes - Smoot 3 second Fading Effect</strong></p>
<hr>
<button id="button1">Start Speed Test - JQuery fadeOut()</button>
<p>
<box class="jquery">test</box>
<box class="jquery">test</box>
... aggiungo 1000 box ...
<box class="jquery">test</box>
</p>
<hr>
<button id="button2">Start Speed Test - CSS opacity</button>
<p>
<box class="css">test</box>
<box class="css">test</box>
... aggiungo 1000 box ...
<box class="css">test</box>
</p>
<hr>
</body>
</html>
Come si può evincere dal codice:
La macchina utilizzata per il test è un I7 con 8 GB RAM, Win 7 64 bit, browser Firefox 22.0
Se iniziamo il test con un solo box per tipo non noteremo delle differenze.
Le cose cambiano radicalmente nel momento in cui i box diventano molti. Già a 100 box per tipo il rendering puro CSS inizierà a rallentare. A 1000 box il rendering CSS scatta visibilmente mentre quello JQuery è ancora fluido e piacevole da vedere. A livello di visualizzazione vince sicuramente JQuery.
Adesso vediamo il consumo di risorse:
– CPU: il consumo è pressochè identico
– RAM: Rendering CSS->0,07 GB, Rendering JQuery->0,26 GB
JQuery ha bisogno di impegnare una quantità di RAM decisamente maggiore.
A livello di impegno di risorse hardware vince CSS perchè lascia la RAM più libera.
Facendo un rapido test su Chrome 28.0.1500.95 m si può notare come il Rendering in CSS risulti più performante rispetto a Firefox. Il Rendering JQuery a vista sembra buono come quello di Firefox.
Ovviamente questo non ha la pretesa di essere un test da laboratorio, ma bensì una prova empirica. Provare a variare il numero dei box, la loro dimensione e proprietà per capire meglio qual’è il tipo di tecnica che fa per voi. Tenete sempre bene a mente qual’è il vostro dispositivo target prima di operare la vostra scelta.
