javascript 重复
I love to scavenge the source code of the web's large sites, looking for patterns to both apply to my coding and to find hacks or techniques I'd not heard of before. One problem I often find with the coding of large sites is repeated operations. There are a few different mistakes I see when looking at their code and I want to share those with you so you can speed up your own JavaScript code.
我喜欢清理Web大型站点的源代码，寻找既可以应用于我的编码的模式，又可以找到以前从未听说过的hack或技术。 我经常在大型站点的编码中发现的一个问题是重复操作。 在查看他们的代码时，我会看到一些不同的错误，我想与您分享这些错误，以便您加快自己JavaScript代码的速度。
The most problem I see most often is JavaScript code is repeated element collection. Selector engines and querySelectorAll have gotten to be very fast but repeated work is always a slower than doing the work once. Obviously the problem and solution look like:
我最常看到的最大问题是JavaScript代码是重复元素集合。 选择器引擎和querySelectorAll已经变得非常快，但是重复工作总是比一次完成要慢。 显然，问题和解决方案如下所示：
// :( $$(".items").addClass("hide"); // ... and later ... $$(".items").removeClass("hide"); // :) var items = $$(".items"); // ... and use to heart's content from here on out!Scolding developers for repeated element collection is a daily occurrence but this scolding needs to be reinforced. Of course repeated element collection cannot always be avoided (think sites with AJAX page loads), but in those cases, you will most likely want to use event delegation instead of direct element retrieval and event application.
责骂开发人员重复收集元素的行为每天都在发生，但是这种责骂需要得到加强。 当然，总是不能避免重复元素收集(请考虑使用AJAX页面加载网站)，但是在这种情况下，您很可能希望使用事件委托而不是直接元素检索和事件应用程序。
Repeated condition calculation is a common case but also a common pattern which can be avoided. You will see something like this:
重复条件计算是一种常见情况，但也是可以避免的常见模式。 您将看到如下内容：
var performMiracle = function() { // If the browser has feature A, use it... if(features.someFeature) { } // ... if not, do another else { } };It works but it's not the most efficient use of code, and the conditional checks are run upon each call. Instead, something like this would be better:
它可以工作，但这不是最有效的代码使用，并且条件检查会在每次调用时运行。 相反，这样会更好：
var performMiracle = features.someFeature ? function() { // Plan A stuff } : function() { // Plan B stuff };Only one conditional and the method or variable is already set to the result of the conditional!
只有一个条件，并且方法或变量已设置为条件的结果！
On repeated operation that goes under the radar is repeated object creation, usually in the form of a regular expression. Consider the following:
在雷达下进行重复操作时，通常以正则表达式的形式重复创建对象。 考虑以下：
function cleanText(dirty) { // Get rid of SCRIPT tags clean = dirty.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, ""); // Do some more cleaning, maybe whitespace, etc. return clean; }The code above repeatedly creates a new (albeit the same) regular expression object -- an opportunity to save numerous object creations by creating the RegExp in a scope context than the function:
上面的代码反复创建一个新的(尽管相同)正则表达式对象-通过在作用域上下文而非函数中创建RegExp来保存大量对象创建的机会：
var scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi; function cleanText(dirty) { // Get rid of SCRIPT tags clean = dirty.replace(scriptRegex, ""); // Do some more cleaning, maybe whitespace, etc. return clean; }In the case above, the RegExp is only created once but used many times -- a nice save in processing.
在上述情况下，RegExp仅创建一次，但使用了很多次-在处理过程中节省了很多钱。
Those are just a few of the issues I see often repeated when I browse JavaScript written by other developers. What other common mistakes do you see?
这些只是我浏览其他开发人员编写JavaScript时经常看到的几个问题。 您还看到其他哪些常见错误？
翻译自: https://davidwalsh.name/javascript-optimization
javascript 重复
