4 ms·
Small tip to get some more performance; never repeat your selectors. If you need $(".stats") four times, don't repeat that four times, but do: var stats =
by NKCSS 10y ago
Small tip to get some more performance; never repeat your selectors.
If you need $(".stats") four times, don't repeat that four times, but do:
var stats = $('.stats')
and use the variable. Especially when using class selectors.
End result looks good; keep on hacking :)
N.B.
Same is true for indexers (and allows you to refactor the code easier later on);
Instead of:
for (var i = 0; i < repos.length; i++) {
var language = repos[i].language ? repos[i].language : "Unknown";
$(".repositories").append('<div class="container"><div class="item names"><div><a href="' + repos[i].repoUrl + '">' + repos[i].name + '</a></div></div><div class="item language"><div>' + language + '</div></div><div class="item stars"><div>★' + repos[i].stars + '</div></div></div>');
}
Consider:
for (var i = 0; i < repos.length; i++) {
var repo = repos[i];
var language = repo.language ? repo.language : "Unknown";
$(".repositories").append('<div class="container"><div class="item names"><div><a href="' + repo.repoUrl + '">' + repo.name + '</a></div></div><div class="item language"><div>' + language + '</div></div><div class="item stars"><div>★' + repo.stars + '</div></div></div>');
}
- egeozcan 10y agoA humble suggestion for more readability (warning: opinionated): const reposInfoHTML = repos .map(repo => `<div class="container"> <div class="item names"> <div> <a href="${repo.repoUrl}">${repo.name}</a> </div> </div> <div class="item language"> <div>${repo.language || "Unknown"}</div> </div> <div class="item stars"> <div>★${repo.stars}</div> </div> </div>`); $(".repositories").append(reposInfoHTML.join(''));
- NKCSS 10y agoMuch more readable, but I'd advise against using const, because the javascript won't work on IE < 11.
- pacomerh 10y agoYou can avoid having an append inside of a loop. Gather the results, and do it once after the loop
- vtempest 10y agoThis isn't good advice. jQuery will get those variables just as fast. You're really splitting hairs just for the sake of criticizing. http://www.stoimen.com/blog/2010/06/19/speed-up-the-jquery-code-selectors-cache/ http://www.stoimen.com/blog/2010/06/19/speed-up-the-jquery-c... Basic developers should not care about such minor differences and write code they can read & maintain. $("") stands out as a DOM element, and who wants to add an extra line for variables -- unneeded and tedious. Most developers should not have to worry "oops did i cache declare everything beforehand" or act as ifs a bad coding practice that 'takes points' in the final code
- NKCSS 10y agoHave you even read the article you linked to? Maybe you should read the comments on the article as well... I've experienced this in many web apps, which had major benefit from these changes. The same applies to managed code (C#), where just being mindful about how and what you write, makes everything faster.