lunr tokenise whitespace triming

JavaScript performance comparison

Test case created by olivernn

Info

Before tokenising a field for indexing the leading and trailing whitespace need to be removed, trying to find a good performant implementation is crucial for ensuring that indexing speeds are as high as possible.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var shortStringNoWhiteSpace = "foo bar",
        shortStringLeadingWhiteSpace = "  foo bar",
        shortStringTrailingWhiteSpace = "foo bar  ",
        shortStringLeadingAndTrailingWhiteSapce = "  foo bar  "
   
    var mediumStringNoWhiteSpace = "javascript trigger function on event from a script, not explicitly from html",
        mediumStringLeadingWhiteSpace = "  javascript trigger function on event from a script, not explicitly from html",
        mediumStringTrailingWhiteSpace = "javascript trigger function on event from a script, not explicitly from html  ",
        mediumStringLeadingAndTrailingWhiteSpace = "  javascript trigger function on event from a script, not explicitly from html  "
   
    var longStringNoWhiteSpace = "fieldSelected makes the field background yellow if the value of the specified element (first parameter) matches the second parameter (default value) or is shorter than third parameter. You mouseover the label or the input field and it changes the bg first to yellow, then to red (since you didn't input anything). checkValue changes the field background to either red or green depending on the value (same parameters). You enter something in the input field, switch to another field and it changes the background color.     Now, as you will probably notice, there's a LOT of JavaScript function calls right there (5 per each input/select field). It would be great if someone would know a way to attach those event triggers from another place (I don't usually code this dirty), not directly in the form like this and preferably to multiple IDs at once. I have jQuery here, but I'm really no expert in JavaScript.     Or maybe there's a simpler way to do this? I want that the field background color changes on all those events for maximum interactivity. Sure, it's nothing much when all the data goes to the server side but I just want it that way.",
        longStringLeadingWhiteSpace = "  fieldSelected makes the field background yellow if the value of the specified element (first parameter) matches the second parameter (default value) or is shorter than third parameter. You mouseover the label or the input field and it changes the bg first to yellow, then to red (since you didn't input anything). checkValue changes the field background to either red or green depending on the value (same parameters). You enter something in the input field, switch to another field and it changes the background color.     Now, as you will probably notice, there's a LOT of JavaScript function calls right there (5 per each input/select field). It would be great if someone would know a way to attach those event triggers from another place (I don't usually code this dirty), not directly in the form like this and preferably to multiple IDs at once. I have jQuery here, but I'm really no expert in JavaScript.     Or maybe there's a simpler way to do this? I want that the field background color changes on all those events for maximum interactivity. Sure, it's nothing much when all the data goes to the server side but I just want it that way.",
        longStringTrailingWhiteSpace = "fieldSelected makes the field background yellow if the value of the specified element (first parameter) matches the second parameter (default value) or is shorter than third parameter. You mouseover the label or the input field and it changes the bg first to yellow, then to red (since you didn't input anything). checkValue changes the field background to either red or green depending on the value (same parameters). You enter something in the input field, switch to another field and it changes the background color.     Now, as you will probably notice, there's a LOT of JavaScript function calls right there (5 per each input/select field). It would be great if someone would know a way to attach those event triggers from another place (I don't usually code this dirty), not directly in the form like this and preferably to multiple IDs at once. I have jQuery here, but I'm really no expert in JavaScript.     Or maybe there's a simpler way to do this? I want that the field background color changes on all those events for maximum interactivity. Sure, it's nothing much when all the data goes to the server side but I just want it that way.  ",
        longStringLeadingAndTrailingWhiteSpace = "  fieldSelected makes the field background yellow if the value of the specified element (first parameter) matches the second parameter (default value) or is shorter than third parameter. You mouseover the label or the input field and it changes the bg first to yellow, then to red (since you didn't input anything). checkValue changes the field background to either red or green depending on the value (same parameters). You enter something in the input field, switch to another field and it changes the background color.     Now, as you will probably notice, there's a LOT of JavaScript function calls right there (5 per each input/select field). It would be great if someone would know a way to attach those event triggers from another place (I don't usually code this dirty), not directly in the form like this and preferably to multiple IDs at once. I have jQuery here, but I'm really no expert in JavaScript.     Or maybe there's a simpler way to do this? I want that the field background color changes on all those events for maximum interactivity. Sure, it's nothing much when all the data goes to the server side but I just want it that way.  "
   
    var hybrid = function (str) {
      str = str.replace(/^\s+/, '');
      for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
          str = str.substring(0, i + 1);
          break;
        }
      }
      return str;
    }
   
    var regex = function (str) {
      return str.replace(/^\s+/, '').replace(/\s+$/, '')
    }
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
hybrid short no white space
hybrid(shortStringNoWhiteSpace)
pending…
hybrid short leading white space
hybrid(shortStringLeadingWhiteSpace)
pending…
hybrid short trailing white space
hybrid(shortStringTrailingWhiteSpace)
pending…
hybrid short leading and trailing white space
hybrid(shortStringLeadingAndTrailingWhiteSapce)
pending…
hybrid medium no white space
hybrid(mediumStringNoWhiteSpace)
 
pending…
hybrid medium leading white space
hybrid(mediumStringLeadingWhiteSpace)
pending…
hybrid medium trailing white space
hybrid(mediumStringTrailingWhiteSpace)
pending…
hybrid medium leading and trailing white space
hybrid(mediumStringLeadingAndTrailingWhiteSpace)
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment