CPU-cycli, geheugengebruik, uitvoeringstijd, enz.?
Toegevoegd: is er een kwantitatieve manier om de prestaties in JavaScript te testen, naast de perceptie van hoe snel de code wordt uitgevoerd?
Antwoord 1, autoriteit 100%
Profilers zijn zeker een goede manier om cijfers te krijgen, maar in mijn ervaring is waargenomen prestatie het enige dat telt voor de gebruiker/klant. We hadden bijvoorbeeld een project met een Ext-accordeon die uitbreidde om wat gegevens te tonen en vervolgens een paar geneste Ext-rasters. Alles werd eigenlijk vrij snel weergegeven, geen enkele bewerking duurde lang, er werd gewoon veel informatie tegelijk weergegeven, dus het voelde traag aan voor de gebruiker.
We hebben dit ‘opgelost’, niet door over te schakelen naar een snellere component of een methode te optimaliseren, maar door eerst de gegevens weer te geven en vervolgens de rasters met een setTimeout. Dus de informatie verscheen eerst, dan zouden de rasters een seconde later op hun plaats vallen. Over het algemeen kostte het iets meer verwerkingstijd om het op die manier te doen, maar voor de gebruiker waren de waargenomen prestaties verbeterd.
Tegenwoordig zijn de Chrome-profiler en andere tools universeel beschikbaar en gebruiksvriendelijk, net als console.time(), console.profile()en performance.now(). Chrome geeft je ook een tijdlijnweergave die je kan laten zien wat je framesnelheid doodt, waar de gebruiker kan wachten, enz.
Het vinden van documentatie voor al deze tools is heel eenvoudig, daar heb je geen SO-antwoord voor nodig. 7 jaar later zal ik nog steeds het advies van mijn oorspronkelijke antwoord herhalen en erop wijzen dat je langzame code voor altijd kunt laten draaien waar een gebruiker het niet zal merken, en vrij snelle code die wordt uitgevoerd waar ze dat doen, en ze zullen klagen over de behoorlijk snelle code die niet snel genoeg is. Of dat uw verzoek aan uw server-API 220 ms duurde. Of zoiets anders. Het punt blijft dat als je een profiler tevoorschijn haalt en op zoek gaat naar werk, je het zult vinden, maar het is misschien niet het werk dat je gebruikers nodig hebben.
Antwoord 2, autoriteit 67%
Ik ben het ermee eens dat waargenomen prestaties echt het enige is dat telt. Maar soms wil ik gewoon weten welke methode om iets te doen sneller is. Soms is het verschil ENORM en de moeite waard om te weten.
Je zou gewoon javascript-timers kunnen gebruiken. Maar ik krijg meestal veel consistentere resultaten met de native Chrome (nu ook in Firefox en Safari) devTool-methoden console.time()& console.timeEnd()
Voorbeeld van hoe ik het gebruik:
var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
functionOne();
};
console.timeEnd('Function #1')
console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
functionTwo();
};
console.timeEnd('Function #2')
Update (4/4/2016):
Chrome Canary heeft onlangs Line Level Profilingtoegevoegd aan de bronnen voor ontwikkelaarstools tabblad waarmee u precies kunt zien hoe lang het duurde om elke regel uit te voeren!
Antwoord 3, autoriteit 26%
We kunnen altijd de tijd meten die elke functie in beslag neemt aan de hand van een eenvoudig datumobject.
var start = +new Date(); // log start timestamp
function1();
var end = +new Date(); // log end timestamp
var diff = end - start;
Antwoord 4, autoriteit 17%
Probeer jsPerf. Het is een online javascript-prestatietool voor het benchmarken en vergelijken van codefragmenten. Ik gebruik het de hele tijd.
Antwoord 5, autoriteit 12%
De meeste browsers implementeren nu timing met hoge resolutie in performance.now(). Het is superieur aan new Date()voor prestatietests omdat het onafhankelijk van de systeemklok werkt.
Gebruik
var start = performance.now();
// code being timed...
var duration = performance.now() - start;
Referenties
- https://developer.mozilla.org/en-US/docs /Web/API/Performance.now()
- http://www.w3.org/TR/hr-time/#dom -prestatie-nu
Antwoord 6, autoriteit 9%
JSLitmusis een lichtgewicht tool voor het maken van ad-hoc JavaScript-benchmarktests
Laten we eens kijken naar de prestaties tussen function expressionen function constructor:
<script src="JSLitmus.js"></script>
<script>
JSLitmus.test("new Function ... ", function() {
return new Function("for(var i=0; i<100; i++) {}");
});
JSLitmus.test("function() ...", function() {
return (function() { for(var i=0; i<100; i++) {} });
});
</script>
Wat ik hierboven heb gedaan, is een function expressionen een function constructormaken die dezelfde bewerking uitvoert. Het resultaat is als volgt:
FireFox-prestatieresultaat
IE-prestatieresultaat
Antwoord 7, autoriteit 5%
Sommige mensen suggereren specifieke plug-ins en/of browsers. Ik zou het niet doen omdat ze alleen echtnuttig zijn voor dat ene platform; een testrun op Firefox vertaalt zich niet nauwkeurig naar IE7. Aangezien 99,999999% van de sites meer dan één browser heeft, moet u de prestaties op alle populaire platforms controleren.
Mijn suggestie zou zijn om dit in de JS te houden. Maak een benchmarkpagina met al uw JS-tests aan en time de uitvoering. Je zou het zelfs AJAX kunnen hebben om de resultaten naar je terug te sturen om het volledig geautomatiseerd te houden.
Vervolgens afspoelen en herhalen over verschillende platforms.
Antwoord 8, autoriteit 4%
Hier is een eenvoudige functie die de uitvoeringstijd van een doorgegeven functie weergeeft:
var perf = function(testName, fn) {
var startTime = new Date().getTime();
fn();
var endTime = new Date().getTime();
console.log(testName + ": " + (endTime - startTime) + "ms");
}
Antwoord 9, autoriteit 3%
Ik heb een kleine tool waarmee ik snel kleine testgevallen in de browser kan uitvoeren en onmiddellijk de resultaten kan krijgen:
Je kunt met code spelen en ontdekken welke techniek beter is in de geteste browser.
Antwoord 10, autoriteit 3%
Ik denk dat het testen van JavaScript-prestaties (tijd) voldoende is. Ik heb hier een heel handig artikel gevonden over JavaScript-prestatietests .
Antwoord 11, autoriteit 2%
Je zou dit kunnen gebruiken: http://getfirebug.com/js.html. Het heeft een profiler voor JavaScript.
Antwoord 12
Ik zag er iets soortgelijks uit, maar vond dit.
Hiermee kan een partij aan de zijkant vergelijken en u kunt dan ook de resultaten delen.
Antwoord 13
Performance.mark (Chrome 87 ^)
performance.mark('initSelect - start');
initSelect();
performance.mark('initSelect - end');
Antwoord 14
Snel antwoord
op jQuery (meer specifiek op sizzle), gebruiken we dit ( Afrekenen Master en Open Snelheid / Index.html in uw browser), die op zijn beurt benchmark.js gebruikt. Dit wordt gebruikt voor de test van de bibliotheek.
lang antwoord
Als de lezer niet het verschil kent tussen benchmark, werklast en profilers, lees eerst enkele prestatieteststichtingen op de ” Readme 1st “-gedeelte van Spec.org . Dit is voor systeemtesten, maar het begrijpen van deze stichtingen helpt ook JS Perf-testen. Sommige hoogtepunten:
Wat is een benchmark?
Een benchmark is “een standaard van meting of evaluatie” (Webster’s II Woordenboek). Een computer-benchmark is meestal een computerprogramma dat een strikt gedefinieerde reeks operaties uitvoert – een werklast – en retourneert een formulier van resultaat – een metriek – beschrijft hoe de geteste computer wordt uitgevoerd. Computer benchmark-statistieken Maatten meestal snelheid: hoe snel de werklast is voltooid; of doorvoer: hoeveel werkbelastingen per tijd zijn voltooid. Het uitvoeren van dezelfde computer benchmark op meerdere computers maakt een vergelijking mogelijk gemaakt.
moet ik mijn eigen aanvraag benchmark?
Idealiter, de beste vergelijkingstest voor systemen zou uw eigen toepassing zijn met uw eigen werklast. Helaas is het vaak onpraktisch om een brede basis te krijgen van betrouwbare, herhaalbare en vergelijkbare metingen voor verschillende systemen met behulp van uw eigen toepassing met uw eigen werklast. Problemen kunnen het genereren van een goede testcase, vertrouwelijkheidsproblemen, moeite hebben, moeilijkheden voor vergelijkbare omstandigheden, tijd, geld of andere beperkingen.
Zo niet mijn eigen toepassing, wat dan?
Mogelijk wilt u overwegen om gestandaardiseerde benchmarks als referentiepunt te gebruiken. Idealiter zal een gestandaardiseerde benchmark draagbaar zijn en is mogelijk al op de platforms uitgevoerd waar u in geïnteresseerd bent. Echter, voordat u de resultaten beschouwt, moet u er zeker van zijn dat u de correlatie tussen uw aanvraag / computerbehoeften begrijpt en wat de benchmark is meet. Zijn de benchmarks vergelijkbaar met de soorten applicaties die u uitvoert? Hebben de workloads vergelijkbare kenmerken? Op basis van uw antwoorden op deze vragen kunt u beginnen te zien hoe de benchmark uw realiteit kan benaderen.
Opmerking: een gestandaardiseerde benchmark kan dienen als referentiepunt. Desalniettemin, wanneer u verkoper of productselectie doet, beweert Spec niet dat elke gestandaardiseerde benchmark benchmarking uw eigen daadwerkelijke toepassing kan vervangen.
Performance Testing JS
Idealiter, de beste Perf-test zou uw eigen toepassing gebruiken met uw eigen werklast die u moet schakelen wat u moet testen: verschillende bibliotheken, machines, enz.
Als dit niet haalbaar is (en meestal is het niet). De eerste belangrijke stap: definieer uw werklast. Het moet de werklast van uw toepassing weerspiegelen. In Deze talk , vyacheslav egorov praat over shitty workloads die je moet vermijden.
Vervolgens kunt u tools zoals benchmark.js gebruiken om u te helpen bij het verzamelen van statistieken, meestal snelheid of doorvoer. Op Sizzle zijn we geïnteresseerd in het vergelijken van hoe fixes of wijzigingen de systemische prestaties van de bibliotheek beïnvloeden.
Als iets heel slecht presteert, is je volgende stap het zoeken naar knelpunten.
Hoe vind ik knelpunten? Profilers
Wat is de beste manier om JavaScript-uitvoering te profileren?
Antwoord 15
Ik vind uitvoeringstijd de beste maatstaf.
Antwoord 16
Je zou console.profilekunnen gebruiken in firebug
Antwoord 17
Ik test meestal alleen de prestaties van javascript, hoe lang het script loopt. jQuery Lover gaf een goede artikellink voor het testen van javascript-codeprestaties, maar het artikel laat alleen zien hoe u kunt testen hoe lang uw javascript-code wordt uitgevoerd. Ik zou ook aanraden om het artikel “5 tips over het verbeteren van uw jQuery-codeterwijl u met enorme datasets werkt”.
Antwoord 18
Hier is een herbruikbare klasse voor tijdprestaties. Voorbeeld is opgenomen in code:
/*
Help track time lapse - tells you the time difference between each "check()" and since the "start()"
*/
var TimeCapture = function () {
var start = new Date().getTime();
var last = start;
var now = start;
this.start = function () {
start = new Date().getTime();
};
this.check = function (message) {
now = (new Date().getTime());
console.log(message, 'START:', now - start, 'LAST:', now - last);
last = now;
};
};
//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output
Antwoord 19
UX Profilerbenadert dit probleem vanuit gebruikersperspectief. Het groepeert alle browsergebeurtenissen, netwerkactiviteit enz. veroorzaakt door een gebruikersactie (klik) en houdt rekening met alle aspecten zoals latentie, time-outs enz.
Antwoord 20
Je zou https://github.com/anywhichway/benchtestkunnen gebruiken die de bestaande Mocha-eenheid omhult tests met prestatietests.
Antwoord 21
De gouden regel is om in GEEN ENKEL geval de browser van uw gebruikers te vergrendelen. Daarna kijk ik meestal naar de uitvoeringstijd, gevolgd door het geheugengebruik (tenzij je iets geks doet, in dat geval zou het een hogere prioriteit kunnen hebben).
Antwoord 22
Prestatietesten werden de laatste tijd een beetje een modewoord, maar dat wil niet zeggen dat prestatietests geen belangrijk proces zijn in QA of zelfs nadat het product is verzonden. En terwijl ik de app ontwikkel, gebruik ik veel verschillende tools, waarvan sommige hierboven genoemd zijn, zoals de chrome ProfilerIk kijk meestal naar een SaaS of iets opensource waarmee ik aan de slag kan en vergeet het totdat ik de melding krijg dat er iets mis is gegaan.
Er zijn veel geweldige tools waarmee je de prestaties in de gaten kunt houden zonder dat je door hoepels hoeft te springen, alleen maar om wat basiswaarschuwingen in te stellen. Hier zijn er een paar waarvan ik denk dat ze de moeite waard zijn om zelf te bekijken.
- Sematext.com
- Datadog.com
- Uptime.com
- Smartbear.com
- Solarwinds.com
Om te proberen een duidelijker beeld te schetsen, hieris een kleine tutorial over het instellen van monitoring voor een react-toepassing.
Antwoord 23
Dit is een goede manier om prestatie-informatie voor de specifieke operatie te verzamelen.
start = new Date().getTime();
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);